switch

1import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
2 
3import { cn } from "@/lib/utils"
4 
5function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
6  return (
7    <SwitchPrimitive.Root
8      data-slot="switch"
9      className={cn(
10        "peer inline-flex h-6 w-11 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-checked:bg-primary bg-input",
11        className
12      )}
13      {...props}
14    >
15      <SwitchPrimitive.Thumb
16        data-slot="switch-thumb"
17        className={cn(
18          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-checked:translate-x-5 translate-x-0"
19        )}
20      />
21    </SwitchPrimitive.Root>
22  )
23}
24 
25export { Switch }