Switch

1import { Switch as SwitchPrimitive } from "@sprawlify/svelte/switch";23export { default as Switch } from "./switch.svelte";4export { default as SwitchControl } from "./switch-control.svelte";5export { default as SwitchThumb } from "./switch-thumb.svelte";6export { default as SwitchLabel } from "./switch-label.svelte";78export const SwitchHiddenInput = SwitchPrimitive.HiddenInput;9export const SwitchContext = SwitchPrimitive.Context;10export const SwitchRootProvider = SwitchPrimitive.RootProvider;11

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Switch as SwitchPrimitive } from "@sprawlify/svelte/switch"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof SwitchPrimitive.Control> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<SwitchPrimitive.Control
12  data-slot="switch-control"
13  class={cn(
14    "inline-flex h-5 group-data-[size=sm]/switch:h-4 w-9 group-data-[size=sm]/switch:w-7 shrink-0 cursor-pointer items-center rounded-full border ring-2 border-transparent ring-transparent transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 dark:data-[state=unchecked]:bg-input/80",
15    className
16  )}
17  {...rest}
18>
19  {@render children?.()}
20</SwitchPrimitive.Control>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Switch as SwitchPrimitive } from "@sprawlify/svelte/switch"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof SwitchPrimitive.Label> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<SwitchPrimitive.Label
12  data-slot="switch-label"
13  class={cn(
14    "text-sm group-data-[size=sm]/switch:text-xs leading-none font-medium select-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
15    className
16  )}
17  {...rest}
18>
19  {@render children?.()}
20</SwitchPrimitive.Label>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Switch as SwitchPrimitive } from "@sprawlify/svelte/switch"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof SwitchPrimitive.Thumb> {}
7
8let { class: className, ...rest }: Props = $props()
9</script>
10
11<SwitchPrimitive.Thumb
12  data-slot="switch-thumb"
13  class={cn(
14    "pointer-events-none block size-4 group-data-[size=sm]/switch:size-3 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
15    className
16  )}
17  {...rest}
18/>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Switch as SwitchPrimitive } from "@sprawlify/svelte/switch"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof SwitchPrimitive.Root> {
7  size?: "sm" | "default"
8}
9
10let { class: className, size = "default", children, ...rest }: Props = $props()
11</script>
12
13<SwitchPrimitive.Root
14  data-slot="switch"
15  data-size={size}
16  class={cn(
17    "group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
18    className
19  )}
20  {...rest}
21>
22  {@render children?.()}
23</SwitchPrimitive.Root>