Switch

1import { cn } from "@/lib/utils";2import { Switch as SwitchPrimitive } from "@sprawlify/solid/switch";3import { type ComponentProps, splitProps } from "solid-js";45function Switch(6  props: ComponentProps<typeof SwitchPrimitive.Root> & {7    size?: "sm" | "default";8  },9) {10  const [local, others] = splitProps(props, ["class", "size"]);11  const size = () => local.size ?? "default";1213  return (14    <SwitchPrimitive.Root15      data-slot="switch"16      data-size={size()}17      class={cn(18        "group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",19        local.class,20      )}21      {...others}22    />23  );24}2526function SwitchControl(props: ComponentProps<typeof SwitchPrimitive.Control>) {27  const [local, others] = splitProps(props, ["class"]);2829  return (30    <SwitchPrimitive.Control31      data-slot="switch-control"32      class={cn(33        "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",34        local.class,35      )}36      {...others}37    />38  );39}4041function SwitchThumb(props: ComponentProps<typeof SwitchPrimitive.Thumb>) {42  const [local, others] = splitProps(props, ["class"]);4344  return (45    <SwitchPrimitive.Thumb46      data-slot="switch-thumb"47      class={cn(48        "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",49        local.class,50      )}51      {...others}52    />53  );54}5556function SwitchLabel(props: ComponentProps<typeof SwitchPrimitive.Label>) {57  const [local, others] = splitProps(props, ["class"]);5859  return (60    <SwitchPrimitive.Label61      data-slot="switch-label"62      class={cn(63        "text-sm group-data-[size=sm]/switch:text-xs leading-none font-medium select-none data-disabled:cursor-not-allowed data-disabled:opacity-50",64        local.class,65      )}66      {...others}67    />68  );69}7071const SwitchHiddenInput = SwitchPrimitive.HiddenInput;72const SwitchContext = SwitchPrimitive.Context;73const SwitchRootProvider = SwitchPrimitive.RootProvider;7475export {76  Switch,77  SwitchControl,78  SwitchThumb,79  SwitchLabel,80  SwitchHiddenInput,81  SwitchContext,82  SwitchRootProvider,83};84