From 697172d96d57f91a78930f1994bec1c19aee9a79 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 12 May 2025 16:56:48 +0530
Subject: [PATCH 1/7] feat: Input

---
 .../metagram/src/lib/ui/Input/Input.stories.ts      |  0
 platforms/metagram/src/lib/ui/Input/Input.svelte    | 13 +++++++++++++
 platforms/metagram/src/lib/ui/index.ts              |  1 +
 3 files changed, 14 insertions(+)
 create mode 100644 platforms/metagram/src/lib/ui/Input/Input.stories.ts
 create mode 100644 platforms/metagram/src/lib/ui/Input/Input.svelte

diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
new file mode 100644
index 000000000..ce0668e59
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+
+    interface IInputProps extends HTMLInputAttributes {
+        type: "text" | "number" | "email" | "";
+        value: string | number;
+
+    }
+
+    let {type}:IInputProps = $props();
+</script>
+
+<input {type}>
\ No newline at end of file
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 5ba2df02d..756269b5c 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,2 +1,3 @@
 export { default as Button } from "./Button/Button.svelte";
 export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as Input } from "./Input/Input.svelte";
\ No newline at end of file

From 123320efbe336b07a4c28bdf00c47f721fd52d23 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 09:19:04 +0530
Subject: [PATCH 2/7] feat: styling added

---
 .../src/lib/ui/Avatar/Avatar.stories.ts       | 53 ++++++++--------
 .../metagram/src/lib/ui/Avatar/Avatar.svelte  | 41 ++++++------
 .../src/lib/ui/Input/Input.stories.ts         | 62 +++++++++++++++++++
 .../metagram/src/lib/ui/Input/Input.svelte    | 33 +++++++---
 platforms/metagram/src/lib/ui/index.ts        |  6 +-
 5 files changed, 134 insertions(+), 61 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts b/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
index 01cd0fdc8..81214f102 100644
--- a/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
+++ b/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
@@ -1,43 +1,40 @@
-import type { ComponentProps } from "svelte";
-import Avatar from "./Avatar.svelte";
+import type { ComponentProps } from 'svelte';
+import Avatar from './Avatar.svelte';
 
 export default {
-    title: "UI/Avatar",
-    component: Avatar,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Avatar;
-        props: ComponentProps<typeof Avatar>;
-    }) => ({
-        Component: Avatar,
-        props: args,
-    }),
+	title: 'UI/Avatar',
+	component: Avatar,
+	tags: ['autodocs'],
+	render: (args: { Component: Avatar; props: ComponentProps<typeof Avatar> }) => ({
+		Component: Avatar,
+		props: args
+	})
 };
 
 export const Large = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "lg",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'lg'
+	}
 };
 
 export const Medium = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "md",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'md'
+	}
 };
 
 export const Small = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "sm",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'sm'
+	}
 };
 
 export const ExtraSmall = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "xs",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'xs'
+	}
 };
diff --git a/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte b/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
index 2d82b1df5..768136eef 100644
--- a/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
+++ b/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
@@ -1,31 +1,26 @@
 <script lang="ts">
-import { cn } from "$lib/utils";
-import type { HTMLImgAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLImgAttributes } from 'svelte/elements';
 
-interface IAvatarProps extends HTMLImgAttributes {
-    src: string;
-    alt?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-}
+	interface IAvatarProps extends HTMLImgAttributes {
+		src: string;
+		alt?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+	}
 
-const {
-    src,
-    alt = "User Avatar",
-    size = "md",
-    ...restProps
-}: IAvatarProps = $props();
+	const { src, alt = 'User Avatar', size = 'md', ...restProps }: IAvatarProps = $props();
 
-const sizeVariant = {
-    xs: "w-6 h-6",
-    sm: "w-10 h-10",
-    md: "w-12 h-12",
-    lg: "w-30 h-30",
-};
+	const sizeVariant = {
+		xs: 'w-6 h-6',
+		sm: 'w-10 h-10',
+		md: 'w-12 h-12',
+		lg: 'w-30 h-30'
+	};
 
-const classes = $derived({
-    common: cn("rounded-full"),
-    size: sizeVariant[size] || sizeVariant.md,
-});
+	const classes = $derived({
+		common: cn('rounded-full'),
+		size: sizeVariant[size] || sizeVariant.md
+	});
 </script>
 
 <img
diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index e69de29bb..d56f3867d 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -0,0 +1,62 @@
+import { Input } from '..';
+
+export default {
+	title: 'UI/Input',
+	component: Input,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string; helperText: string }) => ({
+		Component: Input,
+		props: args
+	})
+};
+
+export const Text = {
+	args: {
+		type: 'text',
+		placeholder: 'Joe Biden',
+		required: true,
+		disabled: false,
+		name: 'email'
+	}
+};
+
+export const Tel = {
+	args: {
+		type: 'tel',
+		placeholder: '987654321',
+		required: true,
+		name: 'phone'
+	}
+};
+
+export const isError = {
+	args: {
+		type: 'text',
+		placeholder: 'Enter something',
+		error: true,
+		name: 'email'
+	}
+};
+
+export const Textarea = {
+	args: {
+		type: 'textarea',
+		placeholder: 'no :)',
+		name: 'text'
+	}
+};
+
+export const Email = {
+	args: {
+		type: 'email',
+		placeholder: 'example@email.com',
+		name: 'email'
+	}
+};
+
+export const Password = {
+	args: {
+		type: 'password',
+		name: 'password'
+	}
+};
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index ce0668e59..cca06211e 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -1,13 +1,32 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
-    interface IInputProps extends HTMLInputAttributes {
-        type: "text" | "number" | "email" | "";
-        value: string | number;
+	interface IInputProps extends HTMLInputAttributes {
+		type: 'text' | 'number' | 'email' | '';
+		value: string | number;
+		placeholder: string;
+		isRequired: boolean;
+		isDisabled: boolean;
+	}
 
-    }
+	let {
+		type = 'text',
+		value = $bindable(),
+		placeholder = '',
+		isRequired = false,
+		isDisabled = false,
+		...restProps
+	}: IInputProps = $props();
 
-    let {type}:IInputProps = $props();
+	const cbase =
+		'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 placeholder:text-black-600 rounded-4xl';
 </script>
 
-<input {type}>
\ No newline at end of file
+<input
+	{...restProps}
+	{type}
+	{placeholder}
+	required={isRequired}
+	class={cn([cbase, restProps.class].join(' '))}
+/>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 756269b5c..678e7c167 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,3 +1,3 @@
-export { default as Button } from "./Button/Button.svelte";
-export { default as Avatar } from "./Avatar/Avatar.svelte";
-export { default as Input } from "./Input/Input.svelte";
\ No newline at end of file
+export { default as Button } from './Button/Button.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as Input } from './Input/Input.svelte';

From 79b35e9628a96658dfbb58bf63b6424e39ffc032 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 09:47:01 +0530
Subject: [PATCH 3/7] fix: styling

---
 .../src/lib/ui/Input/Input.stories.ts         | 20 +++++++------------
 .../metagram/src/lib/ui/Input/Input.svelte    | 10 +++++++---
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index d56f3867d..91e3b76e9 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -14,9 +14,8 @@ export const Text = {
 	args: {
 		type: 'text',
 		placeholder: 'Joe Biden',
-		required: true,
-		disabled: false,
-		name: 'email'
+		isRequired: true,
+		isDisabled: true
 	}
 };
 
@@ -24,8 +23,7 @@ export const Tel = {
 	args: {
 		type: 'tel',
 		placeholder: '987654321',
-		required: true,
-		name: 'phone'
+		isRequired: true
 	}
 };
 
@@ -33,30 +31,26 @@ export const isError = {
 	args: {
 		type: 'text',
 		placeholder: 'Enter something',
-		error: true,
-		name: 'email'
+		isError: true
 	}
 };
 
 export const Textarea = {
 	args: {
 		type: 'textarea',
-		placeholder: 'no :)',
-		name: 'text'
+		placeholder: 'no :)'
 	}
 };
 
 export const Email = {
 	args: {
 		type: 'email',
-		placeholder: 'example@email.com',
-		name: 'email'
+		placeholder: 'example@email.com'
 	}
 };
 
 export const Password = {
 	args: {
-		type: 'password',
-		name: 'password'
+		type: 'password'
 	}
 };
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index cca06211e..52b586968 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -3,11 +3,12 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface IInputProps extends HTMLInputAttributes {
-		type: 'text' | 'number' | 'email' | '';
+		type: 'text' | 'number' | 'email' | 'tel' | 'textarea' | 'password';
 		value: string | number;
 		placeholder: string;
 		isRequired: boolean;
 		isDisabled: boolean;
+		isError: boolean;
 	}
 
 	let {
@@ -16,11 +17,13 @@
 		placeholder = '',
 		isRequired = false,
 		isDisabled = false,
+		isError = false,
 		...restProps
 	}: IInputProps = $props();
 
-	const cbase =
-		'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 placeholder:text-black-600 rounded-4xl';
+	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 ${isError && 'border border-red-500'} ${isDisabled && 'cursor-not-allowed'}`
+	);
 </script>
 
 <input
@@ -28,5 +31,6 @@
 	{type}
 	{placeholder}
 	required={isRequired}
+	disabled={isDisabled}
 	class={cn([cbase, restProps.class].join(' '))}
 />

From 88146b08bc6227da0c800b538c7eea096f8fea54 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 10:09:52 +0530
Subject: [PATCH 4/7] fix: styling

---
 platforms/metagram/src/lib/ui/Input/Input.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 52b586968..4c1f8b367 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -2,8 +2,8 @@
 	import { cn } from '$lib/utils';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	interface IInputProps extends HTMLInputAttributes {
-		type: 'text' | 'number' | 'email' | 'tel' | 'textarea' | 'password';
+	interface IInputProps extends  HTMLInputAttributes{
+		type: 'text' | 'number' | 'email' | 'tel' | 'password';
 		value: string | number;
 		placeholder: string;
 		isRequired: boolean;
@@ -33,4 +33,5 @@
 	required={isRequired}
 	disabled={isDisabled}
 	class={cn([cbase, restProps.class].join(' '))}
+    tabindex="0"
 />

From 37e6161f6f0c206fb70abc096caff33f291ca837 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 10:28:22 +0530
Subject: [PATCH 5/7] fix: added a new story

---
 .../src/lib/ui/Input/Input.stories.ts         | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 91e3b76e9..56de0db0d 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -15,7 +15,6 @@ export const Text = {
 		type: 'text',
 		placeholder: 'Joe Biden',
 		isRequired: true,
-		isDisabled: true
 	}
 };
 
@@ -35,13 +34,6 @@ export const isError = {
 	}
 };
 
-export const Textarea = {
-	args: {
-		type: 'textarea',
-		placeholder: 'no :)'
-	}
-};
-
 export const Email = {
 	args: {
 		type: 'email',
@@ -51,6 +43,17 @@ export const Email = {
 
 export const Password = {
 	args: {
-		type: 'password'
+		type: 'password',
+        placeholder: 'Please enter password',
+        isRequired: true
 	}
 };
+
+export const Disabled = {
+	args: {
+		type: 'text',
+		placeholder: 'Joe Biden',
+		isRequired: true,
+		isDisabled: true
+	}
+};
\ No newline at end of file

From 672323dc5133252de115dd73e0d9b3960649968d Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 10:56:09 +0530
Subject: [PATCH 6/7] fix: focus states

---
 platforms/metagram/src/lib/ui/Input/Input.stories.ts | 8 ++++----
 platforms/metagram/src/lib/ui/Input/Input.svelte     | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 56de0db0d..789ed4783 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -14,7 +14,7 @@ export const Text = {
 	args: {
 		type: 'text',
 		placeholder: 'Joe Biden',
-		isRequired: true,
+		isRequired: true
 	}
 };
 
@@ -44,8 +44,8 @@ export const Email = {
 export const Password = {
 	args: {
 		type: 'password',
-        placeholder: 'Please enter password',
-        isRequired: true
+		placeholder: 'Please enter password',
+		isRequired: true
 	}
 };
 
@@ -56,4 +56,4 @@ export const Disabled = {
 		isRequired: true,
 		isDisabled: true
 	}
-};
\ No newline at end of file
+};
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 4c1f8b367..0c6b8df5e 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -2,7 +2,7 @@
 	import { cn } from '$lib/utils';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	interface IInputProps extends  HTMLInputAttributes{
+	interface IInputProps extends HTMLInputAttributes {
 		type: 'text' | 'number' | 'email' | 'tel' | 'password';
 		value: string | number;
 		placeholder: string;
@@ -22,7 +22,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 ${isError && 'border border-red-500'} ${isDisabled && 'cursor-not-allowed'}`
+		`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 focus:border-black-800 ${isError && 'border border-red-500 text-red-500 focus:text-black-800'} ${isDisabled && 'cursor-not-allowed'}`
 	);
 </script>
 
@@ -33,5 +33,5 @@
 	required={isRequired}
 	disabled={isDisabled}
 	class={cn([cbase, restProps.class].join(' '))}
-    tabindex="0"
+	tabindex="0"
 />

From f2b959a251167cbc9593b41bddbc69ec24a2eb54 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 14 May 2025 09:12:17 +0530
Subject: [PATCH 7/7] fix: input states

---
 platforms/metagram/src/app.css                   | 1 +
 platforms/metagram/src/lib/ui/Input/Input.svelte | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css
index 9a89a2503..4dbd4bbe9 100644
--- a/platforms/metagram/src/app.css
+++ b/platforms/metagram/src/app.css
@@ -41,6 +41,7 @@
 	--color-black-200: #d2d2d2;
 
 	--color-grey: #f5f5f5;
+	--color-red: #ff5255;
 
 	--color-brand-burnt-orange: #da4a11;
 	--color-brand-burnt-orange-100: #f8dbcf;
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 0c6b8df5e..32d3a8f14 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -22,7 +22,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 focus:border-black-800 ${isError && 'border border-red-500 text-red-500 focus:text-black-800'} ${isDisabled && 'cursor-not-allowed'}`
+		`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 ${isError && 'border border-red text-red focus:text-black-800 focus:border-transparent'} ${isDisabled && 'cursor-not-allowed'}`
 	);
 </script>
 
@@ -30,6 +30,7 @@
 	{...restProps}
 	{type}
 	{placeholder}
+	bind:value
 	required={isRequired}
 	disabled={isDisabled}
 	class={cn([cbase, restProps.class].join(' '))}