feat: Toggle Switch

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;

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: {}
+};

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	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={cn(["relative",restProps.class].join(" "))}
+	aria-label={restProps['aria-label'] || 'Toggle'}
+	role="switch"
+	aria-checked={checked}
+>
+	<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 bg-white ${checked ? 'translate-x-5' : 'translate-x-0'} transition duration-300`}
+		></div>
+	</div>
+</label>
+
+<input id={uniqueId} type="checkbox" bind:checked class="hidden" aria-hidden="true" />

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';