From bf90439c6314d280c855fabde2cf6bd74b2e9649 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sun, 21 Sep 2025 19:16:42 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20switch=20UI=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/switch/index.ts      |  3 +++
 src/components/ui/switch/switch.svelte | 31 ++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/components/ui/switch/index.ts
 create mode 100644 src/components/ui/switch/switch.svelte

diff --git a/src/components/ui/switch/index.ts b/src/components/ui/switch/index.ts
new file mode 100644
index 0000000..2844859
--- /dev/null
+++ b/src/components/ui/switch/index.ts
@@ -0,0 +1,3 @@
+import Root from "./switch.svelte";
+
+export { Root, Root as Switch };
diff --git a/src/components/ui/switch/switch.svelte b/src/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..5bb7c10
--- /dev/null
+++ b/src/components/ui/switch/switch.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { WithoutChildrenOrChild } from "@/types/components";
+
+  import { cn } from "@/utils/cn";
+  import { Switch as SwitchPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    checked = $bindable(false),
+    ...restProps
+  }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+  bind:ref
+  bind:checked
+  data-slot="switch"
+  class={cn(
+    "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-neutral-500 focus-visible:ring-[3px] focus-visible:ring-neutral-300/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-500/50 dark:data-[state=checked]:bg-neutral-100 dark:data-[state=unchecked]:bg-neutral-700",
+    className,
+  )}
+  {...restProps}
+>
+  <SwitchPrimitive.Thumb
+    data-slot="switch-thumb"
+    class={cn(
+      "pointer-events-none block size-4 rounded-full bg-white ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=checked]:bg-white data-[state=unchecked]:translate-x-0 dark:bg-neutral-900 dark:data-[state=checked]:bg-neutral-900",
+    )}
+  />
+</SwitchPrimitive.Root>