feat: Add switch component

3 files changed, 168 insertions, 0 deletions

diff --git a/apps/kit/src/lib/components/switch.svelte b/apps/kit/src/lib/components/switch.svelte
new file mode 100644
index 0000000..8a90dba
--- /dev/null
+++ b/apps/kit/src/lib/components/switch.svelte
@@ -0,0 +1,135 @@
+<script context="module" lang="ts">
+    export type SwitchType = "short" | "icon" | "default";
+</script>
+
+<script lang="ts">
+    export let enabled = false;
+    export let type: SwitchType = "default";
+    export let srText = "Use setting";
+    export let label: string | undefined = undefined;
+    export let description: string | undefined = undefined;
+    export let rightAlignedLabelDescription = false;
+    $: colorClass = enabled
+        ? "bg-teal-600 focus:ring-teal-500"
+        : "bg-gray-200 focus:ring-teal-500";
+    $: translateClass = enabled ? "translate-x-5" : "translate-x-0";
+    $: hasLabelOrDescription = label || description;
+
+    function toggle() {
+        enabled = !enabled;
+    }
+</script>
+
+<div
+    class="{hasLabelOrDescription
+        ? 'flex items-center'
+        : ''} {rightAlignedLabelDescription ? '' : 'justify-between'}"
+>
+    {#if hasLabelOrDescription && !rightAlignedLabelDescription}
+        <span class="flex flex-grow flex-col">
+            {#if label}
+                <span class="text-sm font-medium text-gray-900">{label}</span>
+            {/if}
+            {#if description}
+                <span class="text-sm text-gray-500">{description}</span>
+            {/if}
+        </span>
+    {/if}
+    {#if type === "short"}
+        <button
+            type="button"
+            class="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2"
+            role="switch"
+            aria-checked="false"
+            on:click={toggle}
+        >
+            <span class="sr-only">{srText}</span>
+            <span
+                aria-hidden="true"
+                class="pointer-events-none absolute h-full w-full rounded-md"
+            />
+            <span
+                aria-hidden="true"
+                class="{colorClass} pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
+            />
+            <span
+                aria-hidden="true"
+                class="{translateClass} pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out"
+            />
+        </button>
+    {:else if type === "icon"}
+        <button
+            type="button"
+            class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+            role="switch"
+            aria-checked="false"
+            on:click={toggle}
+        >
+            <span class="sr-only">{srText}</span>
+            <span
+                class="{translateClass} pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+            >
+                <span
+                    class="{enabled
+                        ? 'opacity-0 ease-out duration-100'
+                        : 'opacity-100 ease-in duration-200'} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+                    aria-hidden="true"
+                >
+                    <svg
+                        class="h-3 w-3 text-gray-400"
+                        fill="none"
+                        viewBox="0 0 12 12"
+                    >
+                        <path
+                            d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </span>
+                <span
+                    class="{enabled
+                        ? 'opacity-100 ease-in duration-200'
+                        : 'opacity-0 ease-out duration-100'} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+                    aria-hidden="true"
+                >
+                    <svg
+                        class="h-3 w-3 text-indigo-600"
+                        fill="currentColor"
+                        viewBox="0 0 12 12"
+                    >
+                        <path
+                            d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+                        />
+                    </svg>
+                </span>
+            </span>
+        </button>
+    {:else if type === "default"}
+        <button
+            type="button"
+            class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+            role="switch"
+            aria-checked="false"
+            on:click={toggle}
+        >
+            <span class="sr-only">{srText}</span>
+            <span
+                aria-hidden="true"
+                class="{translateClass} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+            />
+        </button>
+    {/if}
+    {#if hasLabelOrDescription && rightAlignedLabelDescription}
+        <span class="ml-3">
+            {#if label}
+                <span class="text-sm font-medium text-gray-900">{label}</span>
+            {/if}
+            {#if description}
+                <span class="text-sm text-gray-500">{description}</span>
+            {/if}
+        </span>
+    {/if}
+</div>
diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte
index fc55d9d..02d03b6 100644
--- a/apps/kit/src/routes/book/+layout.svelte
+++ b/apps/kit/src/routes/book/+layout.svelte
@@ -17,6 +17,12 @@
             class:active={$page.url.pathname.startsWith("/book/buttons")}
             >Buttons</a
         >
+        <a
+            href="/book/toggles"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/toggles")}
+            >Toggles</a
+        >
     </nav>
     <main>
         <slot />
diff --git a/apps/kit/src/routes/book/toggles/+page.svelte b/apps/kit/src/routes/book/toggles/+page.svelte
new file mode 100644
index 0000000..94228b4
--- /dev/null
+++ b/apps/kit/src/routes/book/toggles/+page.svelte
@@ -0,0 +1,27 @@
+<script>
+    import Switch from "$lib/components/switch.svelte";
+</script>
+
+<section>
+    <h2>Default</h2>
+    <Switch />
+</section>
+<section>
+    <h2>Short</h2>
+    <Switch type="short" />
+</section>
+<section>
+    <h2>Icon</h2>
+    <Switch type="icon" />
+</section>
+<section>
+    <h2>Label / Description</h2>
+    <div class="max-w-md">
+        <Switch label="Label" description="Some text" />
+    </div>
+</section>
+
+<section>
+    <h2>Label / Description (right aligned)</h2>
+        <Switch label="Label" description="Some text" rightAlignedLabelDescription />
+</section>
\ No newline at end of file