From 0a6d011f4746d54fd57793ab113de45636563312 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 10:43:46 +0530
Subject: [PATCH 1/4] feat: Toggle Switch

---
 platforms/metagram/src/app.css                |  2 ++
 .../src/lib/ui/Toggle/Toggle.stories.ts       | 16 ++++++++++++++
 .../metagram/src/lib/ui/Toggle/Toggle.svelte  | 21 +++++++++++++++++++
 platforms/metagram/src/lib/ui/index.ts        |  1 +
 4 files changed, 40 insertions(+)
 create mode 100644 platforms/metagram/src/lib/ui/Toggle/Toggle.stories.ts
 create mode 100644 platforms/metagram/src/lib/ui/Toggle/Toggle.svelte

diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css
index 4dbd4bbe9..d108d537d 100644
--- a/platforms/metagram/src/app.css
+++ b/platforms/metagram/src/app.css
@@ -43,6 +43,8 @@
 	--color-grey: #f5f5f5;
 	--color-red: #ff5255;
 
+	--color-gray-200: #eaecf0;
+
 	--color-brand-burnt-orange: #da4a11;
 	--color-brand-burnt-orange-100: #f8dbcf;
 	--color-brand-burnt-orange-200: #f3c3b0;
diff --git a/platforms/metagram/src/lib/ui/Toggle/Toggle.stories.ts b/platforms/metagram/src/lib/ui/Toggle/Toggle.stories.ts
new file mode 100644
index 000000000..d814315a8
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Toggle/Toggle.stories.ts
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import Toggle from './Toggle.svelte';
+
+export default {
+	title: 'UI/Toggle',
+	component: Toggle,
+	tags: ['autodocs'],
+	render: (args: { Component: Toggle; props: ComponentProps<typeof Toggle> }) => ({
+		Component: Toggle,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {}
+};
diff --git a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
new file mode 100644
index 000000000..430dcb0e9
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IToggleProps extends HTMLAttributes<HTMLElement> {
+		checked: boolean;
+	}
+
+	let { checked = $bindable(false), ...restProps }: IToggleProps = $props();
+
+	let uniqueId = Math.random().toString().split('.')[1];
+</script>
+
+<label {...restProps} for={uniqueId} class="relative">
+	<div class="h-6 w-11 rounded-full bg-gray-200 transition duration-300">
+		<div
+			class={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full ${checked ? 'bg-brand-burnt-orange translate-x-5' : 'translate-x-0 bg-white'} transition duration-300`}
+		></div>
+	</div>
+</label>
+
+<input id={uniqueId} type="checkbox" bind:checked class="hidden" tabindex="0" />
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 678e7c167..213c5c3bb 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,3 +1,4 @@
 export { default as Button } from './Button/Button.svelte';
 export { default as Avatar } from './Avatar/Avatar.svelte';
 export { default as Input } from './Input/Input.svelte';
+export { default as Toggle } from './Toggle/Toggle.svelte';

From 19777a68d8e5c6922414fd378e12623d6bed1e92 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 10:52:59 +0530
Subject: [PATCH 2/4] feat: Toggle Switch

---
 platforms/metagram/src/lib/ui/Toggle/Toggle.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
index 430dcb0e9..85cc0fb61 100644
--- a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
+++ b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
@@ -10,7 +10,14 @@
 	let uniqueId = Math.random().toString().split('.')[1];
 </script>
 
-<label {...restProps} for={uniqueId} class="relative">
+<label
+	{...restProps}
+	for={uniqueId}
+	class="relative"
+	aria-label={restProps['aria-label'] || 'Toggle'}
+	role="switch"
+	aria-checked={checked}
+>
 	<div class="h-6 w-11 rounded-full bg-gray-200 transition duration-300">
 		<div
 			class={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full ${checked ? 'bg-brand-burnt-orange translate-x-5' : 'translate-x-0 bg-white'} transition duration-300`}
@@ -18,4 +25,4 @@
 	</div>
 </label>
 
-<input id={uniqueId} type="checkbox" bind:checked class="hidden" tabindex="0" />
+<input id={uniqueId} type="checkbox" bind:checked class="hidden" aria-hidden="true" />

From 8626e794fa48fa84982378347de9df845fc1a74c Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 13:19:58 +0530
Subject: [PATCH 3/4] fix: as per our design

---
 platforms/metagram/src/lib/ui/Toggle/Toggle.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
index 85cc0fb61..1a9468f48 100644
--- a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
+++ b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
@@ -18,9 +18,11 @@
 	role="switch"
 	aria-checked={checked}
 >
-	<div class="h-6 w-11 rounded-full bg-gray-200 transition duration-300">
+	<div
+		class={`h-6 w-11 rounded-full ${checked ? 'bg-brand-burnt-orange' : 'bg-gray-200'} transition duration-300`}
+	>
 		<div
-			class={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full ${checked ? 'bg-brand-burnt-orange translate-x-5' : 'translate-x-0 bg-white'} transition duration-300`}
+			class={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white ${checked ? 'translate-x-5' : 'translate-x-0'} transition duration-300`}
 		></div>
 	</div>
 </label>

From e5d41614d4b836a45cadb529c107ae3d79fe7dcc Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 13:20:52 +0530
Subject: [PATCH 4/4] fix: as per our design

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

diff --git a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
index 1a9468f48..937fdbbb4 100644
--- a/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
+++ b/platforms/metagram/src/lib/ui/Toggle/Toggle.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface IToggleProps extends HTMLAttributes<HTMLElement> {
@@ -13,7 +14,7 @@
 <label
 	{...restProps}
 	for={uniqueId}
-	class="relative"
+	class={cn(["relative",restProps.class].join(" "))}
 	aria-label={restProps['aria-label'] || 'Toggle'}
 	role="switch"
 	aria-checked={checked}