Switch

1'use client';
2 
3import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
4 
5import { cn } from '@/lib/utils';
6 
7function Switch({
8  className,
9  size = 'default',
10  ...props
11}: SwitchPrimitive.Root.Props & {
12  size?: 'sm' | 'default' | 'lg';
13}) {
14  return (
15    <SwitchPrimitive.Root
16      data-slot="switch"
17      data-size={size}
18      className={cn(
19        'peer group/switch relative inline-flex shrink-0 items-center rounded-full transition-all outline-none',
20        "after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
21        'border-stroke-secondary data-checked:border-stroke-primary-inverse border',
22        'bg-fill-muted data-checked:bg-fill-active',
23        'focus-visible:outline-stroke-status-focus focus-visible:border-stroke-active focus-visible:outline-[2px]',
24        'data-checked:focus-visible:border-stroke-active-inverse data-checked:focus-visible:bg-fill-active',
25        'data-disabled:border-stroke-tertiary data-disabled:data-checked:border-stroke-tertiary data-disabled:cursor-not-allowed',
26        'data-disabled:data-checked:bg-fill-muted',
27        'data-[size=sm]:h-3 data-[size=sm]:w-6 data-[size=sm]:border-[0.5px]',
28        'data-[size=default]:h-4 data-[size=default]:w-8',
29        'data-[size=lg]:h-5 data-[size=lg]:w-10',
30        className,
31      )}
32      {...props}>
33      <SwitchPrimitive.Thumb
34        data-slot="switch-thumb"
35        className={cn(
36          'pointer-events-none block rounded-full ring-0 transition-transform',
37          'bg-fill-secondary data-checked:bg-fill-active-inverse',
38          'group-data-[size=default]/switch:size-2.5 group-data-[size=lg]/switch:size-3.5 group-data-[size=sm]/switch:size-2',
39          'data-unchecked:translate-x-0.5',
40          'group-data-[size=default]/switch:data-checked:translate-x-4.75 group-data-[size=lg]/switch:data-checked:translate-x-5.75 group-data-[size=sm]/switch:data-checked:translate-x-3.5',
41          'data-disabled:bg-fill-disabled data-disabled:data-checked:bg-fill-disabled',
42        )}
43      />
44      {size === 'lg' && (
45        <span
46          className={cn(
47            'absolute top-1/2 right-1 block size-1 -translate-y-1/2 rounded-full',
48            'border-stroke-secondary border-[0.5px]',
49            'group-data-checked/switch:hidden',
50            'group-focus-visible/switch:border-stroke-active',
51            'group-data-disabled/switch:border-stroke-tertiary',
52          )}
53        />
54      )}
55    </SwitchPrimitive.Root>
56  );
57}
58 
59export { Switch };