From 85f959dd72950013735fa53398b621a879220e88 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 12:21:00 +0530
Subject: [PATCH 01/13] feat: message-input

---
 .../MessageInput/MessageInput.stories.ts      | 16 +++++++++
 .../MessageInput/MessageInput.svelte          | 35 +++++++++++++++++++
 platforms/metagram/src/lib/fragments/index.ts |  1 +
 .../metagram/src/lib/ui/Input/Input.svelte    |  8 ++---
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
 create mode 100644 platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte

diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
new file mode 100644
index 000000000..d8bb14961
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import MessageInput from './MessageInput.svelte';
+
+export default {
+	title: 'UI/MessageInput',
+	component: MessageInput,
+	tags: ['autodocs'],
+	render: (args: { Component: MessageInput; props: ComponentProps<typeof MessageInput> }) => ({
+		Component: MessageInput,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {}
+};
diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
new file mode 100644
index 000000000..37d40c7ce
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Avatar, Input } from '$lib/ui';
+	import { ImageAdd02Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
+		src: string;
+		value: string;
+		placeholder?: string;
+	}
+
+	let {
+		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		value,
+		placeholder
+	}: IMessageInputProps = $props();
+
+	let files: FileList | undefined = $state();
+
+	$effect(() => {
+		console.log(files);
+	});
+</script>
+
+<div class="flex items-center justify-between gap-2">
+	<Avatar size="sm" {src} />
+	<Input type="text" bind:value placeholder="Type your message" />
+	<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
+		<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
+		<label for="add-image">
+			<HugeiconsIcon size="24px" icon={ImageAdd02Icon} color="var(--color-black-400)" />
+		</label>
+	</div>
+</div>
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 8d8f89efc..1e9a1a175 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -1 +1,2 @@
 export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
+export { default as MessageInput } from './MessageInput/MessageInput.svelte';
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 32d3a8f14..06c882439 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -5,10 +5,10 @@
 	interface IInputProps extends HTMLInputAttributes {
 		type: 'text' | 'number' | 'email' | 'tel' | 'password';
 		value: string | number;
-		placeholder: string;
-		isRequired: boolean;
-		isDisabled: boolean;
-		isError: boolean;
+		placeholder?: string;
+		isRequired?: boolean;
+		isDisabled?: boolean;
+		isError?: boolean;
 	}
 
 	let {

From 20d25057628fdd03fb4b46a1295adac11fcd79e9 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 12:50:45 +0530
Subject: [PATCH 02/13] fix: classes merge and a files as a prop

---
 .../MessageInput/MessageInput.stories.ts         |  4 +++-
 .../fragments/MessageInput/MessageInput.svelte   | 16 ++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
index d8bb14961..effcb2f3d 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
@@ -12,5 +12,7 @@ export default {
 };
 
 export const Primary = {
-	args: {}
+	args: {
+		placeholder: 'Write your message'
+	}
 };
diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 37d40c7ce..74c431f99 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
+	import { cn } from '$lib/utils';
 	import { ImageAdd02Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -8,24 +9,23 @@
 		src: string;
 		value: string;
 		placeholder?: string;
+		files?: FileList | undefined;
 	}
 
 	let {
 		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
 		value,
-		placeholder
+		placeholder,
+		files = $bindable(),
+		...restProps
 	}: IMessageInputProps = $props();
 
-	let files: FileList | undefined = $state();
-
-	$effect(() => {
-		console.log(files);
-	});
+	const cBase = 'flex items-center justify-between gap-2';
 </script>
 
-<div class="flex items-center justify-between gap-2">
+<div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
 	<Avatar size="sm" {src} />
-	<Input type="text" bind:value placeholder="Type your message" />
+	<Input type="text" bind:value {placeholder} />
 	<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
 		<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
 		<label for="add-image">

From 10152e5c369f0f658993275cf2c57fae9df8afea Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 16:11:31 +0530
Subject: [PATCH 03/13] feat: variant added

---
 .../MessageInput/MessageInput.stories.ts      | 15 ++++++-
 .../MessageInput/MessageInput.svelte          | 44 +++++++++++++++----
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
index effcb2f3d..2b4d51d1a 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts
@@ -11,8 +11,19 @@ export default {
 	})
 };
 
-export const Primary = {
+export const Comment = {
 	args: {
-		placeholder: 'Write your message'
+		variant: 'comment',
+		placeholder: 'Write your comment',
+		handleSend: () => alert('sent')
+	}
+};
+
+export const Dm = {
+	args: {
+		variant: 'dm',
+		placeholder: 'Write your message',
+		handleAdd: () => alert('add'),
+		handleSend: () => alert('sent')
 	}
 };
diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 74c431f99..57c12dfc9 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
 	import { cn } from '$lib/utils';
-	import { ImageAdd02Icon } from '@hugeicons/core-free-icons';
+	import { ImageAdd02Icon, PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
+		variant: 'comment' | 'dm';
 		src: string;
 		value: string;
 		placeholder?: string;
 		files?: FileList | undefined;
+		handleAdd?: () => void;
+		handleSend: () => Promise<void>;
 	}
 
 	let {
+		variant = 'comment',
 		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
 		value,
 		placeholder,
 		files = $bindable(),
+		handleAdd,
+		handleSend,
 		...restProps
 	}: IMessageInputProps = $props();
 
@@ -24,12 +30,34 @@
 </script>
 
 <div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
-	<Avatar size="sm" {src} />
+	{#if variant === 'comment'}
+		<Avatar size="sm" {src} />
+	{:else}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
+			onclick={handleAdd}
+		>
+			<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
+		</div>
+	{/if}
 	<Input type="text" bind:value {placeholder} />
-	<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
-		<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
-		<label for="add-image">
-			<HugeiconsIcon size="24px" icon={ImageAdd02Icon} color="var(--color-black-400)" />
-		</label>
-	</div>
+	{#if value || variant === 'dm'}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
+			onclick={handleSend}
+		>
+			<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
+		</div>
+	{:else}
+		<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
+			<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
+			<label for="add-image">
+				<HugeiconsIcon size="24px" icon={ImageAdd02Icon} color="var(--color-black-400)" />
+			</label>
+		</div>
+	{/if}
 </div>

From bbfcfcfd9e8eeb8bd9194bbfe1f9ed2a1c772265 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 16:41:53 +0530
Subject: [PATCH 04/13] feat: icon replaced

---
 .../src/lib/fragments/MessageInput/MessageInput.svelte        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 57c12dfc9..2e5799774 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
 	import { cn } from '$lib/utils';
-	import { ImageAdd02Icon, PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
+	import { ImageCompositionOvalIcon, PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -56,7 +56,7 @@
 		<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
 			<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
 			<label for="add-image">
-				<HugeiconsIcon size="24px" icon={ImageAdd02Icon} color="var(--color-black-400)" />
+				<HugeiconsIcon size="24px" icon={ImageCompositionOvalIcon} color="var(--color-black-400)" />
 			</label>
 		</div>
 	{/if}

From b2dc11f4e7575d3a04bd3268ad92e1ec178095a9 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 10:25:17 +0530
Subject: [PATCH 05/13] fix: as per code rabbit suggestions

---
 .../MessageInput/MessageInput.svelte          | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 2e5799774..5fc472bc2 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -35,12 +35,14 @@
 	{:else}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
+		<button
+			type="button"
+			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
 			onclick={handleAdd}
+			aria-label="Add attachment"
 		>
 			<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
-		</div>
+		</button>
 	{/if}
 	<Input type="text" bind:value {placeholder} />
 	{#if value || variant === 'dm'}
@@ -55,9 +57,14 @@
 	{:else}
 		<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
 			<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
-			<label for="add-image">
-				<HugeiconsIcon size="24px" icon={ImageCompositionOvalIcon} color="var(--color-black-400)" />
-			</label>
+			<button
+				type="button"
+				class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
+				onclick={handleSend}
+				aria-label="Send message"
+			>
+				<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
+			</button>
 		</div>
 	{/if}
 </div>

From f3e03969f2d724a0e9d587a1337806f574dc0c18 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 10:29:38 +0530
Subject: [PATCH 06/13] fix: icon

---
 .../metagram/src/lib/fragments/MessageInput/MessageInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 5fc472bc2..74d2df9d4 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -63,7 +63,7 @@
 				onclick={handleSend}
 				aria-label="Send message"
 			>
-				<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
+				<HugeiconsIcon size="24px" icon={ImageCompositionOvalIcon} color="var(--color-black-400)" />
 			</button>
 		</div>
 	{/if}

From ac3e7ccdf2338377fcaaf2a24c671ff68e3977ab Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 10:33:23 +0530
Subject: [PATCH 07/13] fix: input file button

---
 .../MessageInput/MessageInput.svelte          | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 74d2df9d4..8a9559311 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -26,6 +26,8 @@
 		...restProps
 	}: IMessageInputProps = $props();
 
+	let fileInput: HTMLInputElement | undefined = $state();
+
 	const cBase = 'flex items-center justify-between gap-2';
 </script>
 
@@ -56,14 +58,25 @@
 		</div>
 	{:else}
 		<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
-			<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
+			<input
+				id="add-image"
+				type="file"
+				class="hidden"
+				accept="image/*"
+				bind:files
+				bind:this={fileInput}
+			/>
 			<button
 				type="button"
 				class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
-				onclick={handleSend}
-				aria-label="Send message"
+				aria-label="add-image"
+				onclick={() => fileInput?.click()}
 			>
-				<HugeiconsIcon size="24px" icon={ImageCompositionOvalIcon} color="var(--color-black-400)" />
+				<HugeiconsIcon
+					size="24px"
+					icon={ImageCompositionOvalIcon}
+					color="var(--color-black-400)"
+				/>
 			</button>
 		</div>
 	{/if}

From aa0a7a6df182326e2111457c091cf5e8f4582e18 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 14:41:43 +0530
Subject: [PATCH 08/13] fix: as per suggestion

---
 .../src/lib/fragments/Post/Post.stories.ts    | 67 +++++++++----------
 .../metagram/src/lib/ui/Input/Input.svelte    | 14 ++--
 .../metagram/src/lib/ui/Toggle/Toggle.svelte  |  2 +-
 3 files changed, 38 insertions(+), 45 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/Post/Post.stories.ts b/platforms/metagram/src/lib/fragments/Post/Post.stories.ts
index fd5d57f16..ba0514860 100644
--- a/platforms/metagram/src/lib/fragments/Post/Post.stories.ts
+++ b/platforms/metagram/src/lib/fragments/Post/Post.stories.ts
@@ -1,41 +1,38 @@
-import type { ComponentProps } from "svelte";
-import Post from "./Post.svelte";
+import type { ComponentProps } from 'svelte';
+import Post from './Post.svelte';
 
 export default {
-    title: "Fragments/Post",
-    component: Post,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Post;
-        props: ComponentProps<typeof Post>;
-    }) => ({
-        Component: Post,
-        props: args,
-    }),
+	title: 'Fragments/Post',
+	component: Post,
+	tags: ['autodocs'],
+	render: (args: { Component: Post; props: ComponentProps<typeof Post> }) => ({
+		Component: Post,
+		props: args
+	})
 };
 
 export const Primary = {
-    args: {
-        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        username: "blurryface",
-        imgUri: "https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg",
-        postAlt: "Sample",
-        text: "Took some pictures today! Really love how this one in particular turned out! ",
-        time: "2 hours ago",
-        count: {
-            likes: 100,
-            comments: 50,
-        },
-        callback: {
-            like: () => {
-                alert("Like clicked");
-            },
-            comment: () => {
-                alert("Comment clicked");
-            },
-            menu: () => {
-                alert("Menu clicked");
-            },
-        },
-    },
+	args: {
+		avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		username: 'blurryface',
+		imgUri: 'https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg',
+		postAlt: 'Sample',
+		text: 'Took some pictures today! Really love how this one in particular turned out! ',
+		time: '2 hours ago',
+		count: {
+			likes: 100,
+			comments: 50
+		},
+		callback: {
+			like: () => {
+				alert('Like clicked');
+			},
+			comment: () => {
+				alert('Comment clicked');
+			},
+			menu: () => {
+				alert('Menu clicked');
+			}
+		}
+	}
 };
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 06c882439..ad2e849c6 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -6,23 +6,21 @@
 		type: 'text' | 'number' | 'email' | 'tel' | 'password';
 		value: string | number;
 		placeholder?: string;
-		isRequired?: boolean;
-		isDisabled?: boolean;
-		isError?: boolean;
+		disabledClass?: string;
+		error?: string;
 	}
 
 	let {
 		type = 'text',
 		value = $bindable(),
 		placeholder = '',
-		isRequired = false,
-		isDisabled = false,
-		isError = false,
+		disabledClass = 'cursor-not-allowed',
+		error = 'border border-red text-red focus:text-black-800 focus:border-transparent',
 		...restProps
 	}: 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 text-red focus:text-black-800 focus:border-transparent'} ${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 ${error} ${disabled}`
 	);
 </script>
 
@@ -31,8 +29,6 @@
 	{type}
 	{placeholder}
 	bind:value
-	required={isRequired}
-	disabled={isDisabled}
 	class={cn([cbase, restProps.class].join(' '))}
 	tabindex="0"
 />
diff --git a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
index 937fdbbb4..76b656da2 100644
--- a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
+++ b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
@@ -14,7 +14,7 @@
 <label
 	{...restProps}
 	for={uniqueId}
-	class={cn(["relative",restProps.class].join(" "))}
+	class={cn(['relative', restProps.class].join(' '))}
 	aria-label={restProps['aria-label'] || 'Toggle'}
 	role="switch"
 	aria-checked={checked}

From a0c1b0e2b681a59b76638daefb554fd081de22d6 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 14:47:00 +0530
Subject: [PATCH 09/13] fix: classes

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

diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 789ed4783..47a1b5d76 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -13,16 +13,14 @@ export default {
 export const Text = {
 	args: {
 		type: 'text',
-		placeholder: 'Joe Biden',
-		isRequired: true
+		placeholder: 'Joe Biden'
 	}
 };
 
 export const Tel = {
 	args: {
 		type: 'tel',
-		placeholder: '987654321',
-		isRequired: true
+		placeholder: '987654321'
 	}
 };
 
@@ -30,7 +28,7 @@ export const isError = {
 	args: {
 		type: 'text',
 		placeholder: 'Enter something',
-		isError: true
+		errorClass: 'border border-red text-red focus:text-black-800 focus:border-transparent'
 	}
 };
 
@@ -44,16 +42,6 @@ export const Email = {
 export const Password = {
 	args: {
 		type: 'password',
-		placeholder: 'Please enter password',
-		isRequired: true
-	}
-};
-
-export const Disabled = {
-	args: {
-		type: 'text',
-		placeholder: 'Joe Biden',
-		isRequired: true,
-		isDisabled: true
+		placeholder: 'Please enter password'
 	}
 };
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index ad2e849c6..09c29733c 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -7,20 +7,20 @@
 		value: string | number;
 		placeholder?: string;
 		disabledClass?: string;
-		error?: string;
+		errorClass?: string;
 	}
 
 	let {
 		type = 'text',
 		value = $bindable(),
 		placeholder = '',
-		disabledClass = 'cursor-not-allowed',
-		error = 'border border-red text-red focus:text-black-800 focus:border-transparent',
+		disabledClass = '',
+		errorClass = '',
 		...restProps
 	}: 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 ${error} ${disabled}`
+		`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 ${errorClass} ${disabledClass}`
 	);
 </script>
 

From 8d18eb522f02da6fac67e50f551f4c93817943e2 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 15:19:58 +0530
Subject: [PATCH 10/13] fix: no need of error and disabled classes

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

diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 09c29733c..e684c254f 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -6,21 +6,17 @@
 		type: 'text' | 'number' | 'email' | 'tel' | 'password';
 		value: string | number;
 		placeholder?: string;
-		disabledClass?: string;
-		errorClass?: string;
 	}
 
 	let {
 		type = 'text',
 		value = $bindable(),
 		placeholder = '',
-		disabledClass = '',
-		errorClass = '',
 		...restProps
 	}: 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 ${errorClass} ${disabledClass}`
+		`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`
 	);
 </script>
 

From a741e7819d230dbf0f597842938d0eb5b7db018f Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 16:57:49 +0530
Subject: [PATCH 11/13] fix: input

---
 platforms/metagram/src/lib/ui/Input/Input.stories.ts | 12 ++++++------
 platforms/metagram/src/lib/ui/Input/Input.svelte     |  2 +-
 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 47a1b5d76..e0634d5d9 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/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'
 	}
 };
 
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index e684c254f..daed7165f 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/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>
 

From c3330069beaaf90ed513629806ceca46a775da3b Mon Sep 17 00:00:00 2001
From: Soham Jaiswal <sosweetham@gmail.com>
Date: Mon, 19 May 2025 17:04:51 +0530
Subject: [PATCH 12/13] feat: invalid inputs

---
 .vscode/extensions.json                       |  3 +-
 .../src/lib/ui/Input/Input.stories.ts         | 63 ++++++++++---------
 .../metagram/src/lib/ui/Input/Input.svelte    |  8 +--
 3 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c4b1c2dab..66aca7353 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -22,6 +22,7 @@
         "streetsidesoftware.code-spell-checker",
         "1YiB.rust-bundle",
         "bradlc.vscode-tailwindcss",
-        "tauri-apps.tauri-vscode"
+        "tauri-apps.tauri-vscode",
+        "coderabbit.coderabbit-vscode"
     ]
 }
diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 47a1b5d76..8b85b8acf 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -1,47 +1,50 @@
-import { Input } from '..';
+import { Input } from "..";
 
 export default {
-	title: 'UI/Input',
-	component: Input,
-	tags: ['autodocs'],
-	render: (args: { type: string; placeholder: string; helperText: string }) => ({
-		Component: Input,
-		props: args
-	})
+    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'
-	}
+    args: {
+        type: "text",
+        placeholder: "Joe Biden",
+    },
 };
 
 export const Tel = {
-	args: {
-		type: 'tel',
-		placeholder: '987654321'
-	}
+    args: {
+        type: "tel",
+        placeholder: "987654321",
+    },
 };
 
-export const isError = {
-	args: {
-		type: 'text',
-		placeholder: 'Enter something',
-		errorClass: 'border border-red text-red focus:text-black-800 focus:border-transparent'
-	}
+export const number = {
+    args: {
+        type: "number",
+        placeholder: "Enter something",
+    },
 };
 
 export const Email = {
-	args: {
-		type: 'email',
-		placeholder: 'example@email.com'
-	}
+    args: {
+        type: "email",
+        placeholder: "example@email.com",
+    },
 };
 
 export const Password = {
-	args: {
-		type: 'password',
-		placeholder: 'Please enter password'
-	}
+    args: {
+        type: "password",
+        placeholder: "Please enter password",
+    },
 };
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index e684c254f..709e71fe5 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
-	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
 
 	interface IInputProps extends HTMLInputAttributes {
-		type: 'text' | 'number' | 'email' | 'tel' | 'password';
-		value: string | number;
-		placeholder?: string;
+		type: HTMLInputTypeAttribute;
 	}
 
 	let {
@@ -16,7 +14,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 focus:text-black-800 focus:border-transparent border invalid:border-red invalid:text-red'
 	);
 </script>
 

From 9c46831ededdf7cefa7bf5ed932516218c4e1fc8 Mon Sep 17 00:00:00 2001
From: Soham Jaiswal <sosweetham@gmail.com>
Date: Mon, 19 May 2025 17:08:35 +0530
Subject: [PATCH 13/13] feat: add number input storybook

---
 .../metagram/src/lib/ui/Input/Input.stories.ts    | 15 ++++++---------
 1 file changed, 6 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 4b7e0e0c3..8ff5e7f4d 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -28,16 +28,13 @@ export const Tel = {
     },
 };
 
-<<<<<<< HEAD
-export const number = {
+export const NumberInput = {
     args: {
         type: "number",
         placeholder: "Enter something",
     },
 };
 
-=======
->>>>>>> a741e7819d230dbf0f597842938d0eb5b7db018f
 export const Email = {
     args: {
         type: "email",
@@ -46,11 +43,11 @@ export const Email = {
 };
 
 export const Invalid = {
-	args: {
-		type: 'email',
-		placeholder: 'Invalid email',
-		value: 'not-an-email'
-	}
+    args: {
+        type: "email",
+        placeholder: "Invalid email",
+        value: "not-an-email",
+    },
 };
 
 export const Password = {