diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/shadcn/components/ui/switch/index.js | 6 | ||||
| -rw-r--r-- | src/lib/shadcn/components/ui/switch/switch.svelte | 22 |
2 files changed, 28 insertions, 0 deletions
diff --git a/src/lib/shadcn/components/ui/switch/index.js b/src/lib/shadcn/components/ui/switch/index.js new file mode 100644 index 00000000..7745ca39 --- /dev/null +++ b/src/lib/shadcn/components/ui/switch/index.js @@ -0,0 +1,6 @@ +import Root from "./switch.svelte"; +export { + Root, + // + Root as Switch, +}; diff --git a/src/lib/shadcn/components/ui/switch/switch.svelte b/src/lib/shadcn/components/ui/switch/switch.svelte new file mode 100644 index 00000000..69c08b03 --- /dev/null +++ b/src/lib/shadcn/components/ui/switch/switch.svelte @@ -0,0 +1,22 @@ +<script> + import { Switch as SwitchPrimitive } from "bits-ui"; + import { cn } from "$lib/shadcn/utils"; + let className = undefined; + export let checked = undefined; + export { className as class }; +</script> + +<SwitchPrimitive.Root + bind:checked + class={cn( + "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", + className + )} + {...$$restProps} +> + <SwitchPrimitive.Thumb + class={cn( + "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" + )} + /> +</SwitchPrimitive.Root> |