MicroClub Switch

1'use client';
2 
3import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
4import { cn } from '@/lib/utils';
5 
6function McSwitch({
7  className,
8  size = 'default',
9  ...props
10}: SwitchPrimitive.Root.Props & {
11  size?: 'sm' | 'default';
12}) {
13  return (
14    <SwitchPrimitive.Root
15      data-slot="switch"
16      data-size={size}
17      className={cn(
18        'peer group/switch relative inline-flex shrink-0 items-center bg-input ring-1 ring-inset ring-border',
19        'transition-[background-color,ring-color,box-shadow] duration-300 ease-out outline-none',
20        'focus-visible:ring-ring focus-visible:ring-offset-2',
21        'aria-invalid:ring-destructive aria-invalid:ring-offset-2',
22        'dark:aria-invalid:ring-destructive/40',
23        'data-disabled:bg-input/70 data-disabled:opacity-50',
24        'data-checked:bg-primary data-checked:ring-transparent',
25        'data-unchecked:bg-input data-unchecked:ring-border',
26        'data-[size=default]:h-7 data-[size=default]:w-12 data-[size=default]:rounded-full data-[size=default]:p-1',
27        'data-[size=sm]:h-4 data-[size=sm]:w-7 data-[size=sm]:rounded-full data-[size=sm]:p-[2px]',
28        className
29      )}
30      {...props}
31    >
32      <SwitchPrimitive.Thumb
33        data-slot="switch-thumb"
34        className={cn(
35          'pointer-events-none block rounded-full bg-background ring-1 ring-inset ring-border transition-transform duration-300 ease-out',
36          'dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground',
37          'group-data-[size=default]/switch:size-5',
38          'group-data-[size=default]/switch:data-unchecked:translate-x-0',
39          'group-data-[size=default]/switch:data-checked:translate-x-5',
40          'group-data-[size=sm]/switch:size-3',
41          'group-data-[size=sm]/switch:data-unchecked:translate-x-0',
42          'group-data-[size=sm]/switch:data-checked:translate-x-3'
43        )}
44      />
45    </SwitchPrimitive.Root>
46  );
47}
48 
49export { McSwitch };