Switch

1// Base UI base switch — runs on the @octanejs/base-ui `Switch` primitive.
2//
3// TWO ATTRIBUTE DIALECTS DIFFER FROM THE RADIX BASE, both verified by rendering the primitive:
4//
5//   1. Checked state. Radix publishes `data-state="checked"`, Base UI publishes bare
6//      `data-checked` / `data-unchecked` attributes:
7//        radix:   `data-[state=checked]:bg-primary`
8//        base-ui: `data-checked:bg-primary`
9//      Copying the radix form would leave the switch permanently showing its unchecked colours
10//      and the thumb never translating — the exact symptom of a wrong-base copy.
11//
12//   2. Disabled. Switch.Root renders a `<span role="switch">`, never `:disabled`, so
13//      `disabled:` cannot match; the primitive emits `data-disabled` instead.
14//
15// UNVERIFIED PROVENANCE: the non-conditional utilities come from this package's radix base
16// rather than upstream's Base UI source.
17import { Switch as SwitchPrimitive } from '@octanejs/base-ui/switch';
18 
19import { cn } from '@/lib/utils';
20 
21export interface SwitchProps extends Record<string, unknown> {
22	className?: string;
23	size?: 'sm' | 'default';
24}
25 
26export function Switch({ className, size = 'default', ...props }: SwitchProps) @{
27	<SwitchPrimitive.Root
28		data-slot="switch"
29		data-size={size}
30		className={cn(
31			'peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80',
32			className,
33		)}
34		{...props}
35	>
36		<SwitchPrimitive.Thumb
37			data-slot="switch-thumb"
38			className={cn(
39				'pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground',
40			)}
41		/>
42	</SwitchPrimitive.Root>
43}