Switch

1import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
2 
3import { cn } from "@/registry/lib/surface"
4 
5function Switch({
6  className,
7  size = "default",
8  ...props
9}: SwitchPrimitive.Root.Props & {
10  size?: "sm" | "default"
11}) {
12  return (
13    <SwitchPrimitive.Root
14      data-slot="switch"
15      data-size={size}
16      className={cn(
17        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border outline-none transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 active:opacity-40 active:duration-[var(--d-snap)] active:ease-[var(--ease-snap)] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring data-disabled:cursor-not-allowed data-disabled:opacity-40 aria-invalid:border-destructive data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-checked:border-primary data-checked:bg-primary data-unchecked:border-border data-unchecked:bg-muted",
18        className
19      )}
20      {...props}
21    >
22      <SwitchPrimitive.Thumb
23        data-slot="switch-thumb"
24        className="pointer-events-none block rounded-full bg-primary-foreground transition-transform duration-[var(--d-snap)] ease-[var(--ease-snap)] group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 data-unchecked:bg-foreground"
25      />
26    </SwitchPrimitive.Root>
27  )
28}
29 
30export { Switch }