1
5import * as React from "react";
6import * as RadixSwitch from "@radix-ui/react-switch";
7import { clsx } from "clsx";
8
9export const Switch = React.forwardRef<
10 React.ElementRef<typeof RadixSwitch.Root>,
11 React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>
12>(({ className, ...props }, ref) => (
13 <RadixSwitch.Root
14 ref={ref}
15 className={clsx(
16 "h-5 w-9 shrink-0 rounded-full p-0.5 transition-colors",
17 "cursor-pointer bg-secondary border border-border",
18 "data-[state=checked]:bg-primary",
19 "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
20 "disabled:cursor-not-allowed disabled:opacity-50",
21 className,
22 )}
23 {...props}
24 >
25 <RadixSwitch.Thumb
26 className={clsx(
27 "h-4 w-4 rounded-full bg-card shadow-sm transition-transform",
28 "data-[state=checked]:translate-x-4",
29 )}
30 />
31 </RadixSwitch.Root>
32));
33Switch.displayName = "Switch";
34