fix: input

Author: grv-saini-20

platforms/metagram/src/lib/ui/Input/Input.stories.ts

@@ -24,18 +24,18 @@ export const Tel = {
 	}
 };
 
-export const isError = {
+export const Email = {
 	args: {
-		type: 'text',
-		placeholder: 'Enter something',
-		errorClass: 'border border-red text-red focus:text-black-800 focus:border-transparent'
+		type: 'email',
+		placeholder: 'example@email.com'
 	}
 };
 
-export const Email = {
+export const Invalid = {
 	args: {
 		type: 'email',
-		placeholder: 'example@email.com'
+		placeholder: 'Invalid email',
+		value: 'not-an-email'
 	}
 };
 

platforms/metagram/src/lib/ui/Input/Input.svelte

@@ -16,7 +16,7 @@
 	}: IInputProps = $props();
 
 	const cbase = $derived(
-		`w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent`
+		`w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent`
 	);
 </script>