Toggle

1// Base UI base toggle — runs on @octanejs/base-ui's Toggle.
2//
3// THE PRESSED-STATE DIALECT DIFFERS, verified by rendering the primitive: Base UI emits a bare
4// `data-pressed` attribute (alongside `aria-pressed`), where radix emits `data-state="on"`. So
5// the radix base's `data-[state=on]:` utilities are replaced with `data-pressed:` — copying them
6// unchanged would leave a toggle that never shows its pressed styling, with nothing failing.
7//
8// `disabled:` is kept rather than converted: Base UI's Toggle renders a real `<button>` (again
9// verified by rendering), so the `:disabled` pseudo-class does match here — unlike checkbox,
10// switch and radio, whose Roots are spans.
11//
12// UNVERIFIED PROVENANCE: the non-conditional utilities come from this package's radix base
13// rather than transcribed from upstream's Base UI source.
14import { cva, type VariantProps } from 'class-variance-authority';
15import { Toggle as TogglePrimitive } from '@octanejs/base-ui/toggle';
16 
17import { cn } from '@/lib/utils';
18 
19export const toggleVariants = cva(
20	'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-accent data-pressed:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
21	{
22		variants: {
23			variant: {
24				default: 'bg-transparent',
25				outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
26			},
27			size: {
28				default: 'h-9 min-w-9 px-2',
29				sm: 'h-8 min-w-8 px-1.5',
30				lg: 'h-10 min-w-10 px-2.5',
31			},
32		},
33		defaultVariants: {
34			variant: 'default',
35			size: 'default',
36		},
37	},
38);
39 
40export interface ToggleProps extends Record<string, unknown> {
41	className?: string;
42	variant?: VariantProps<typeof toggleVariants>['variant'];
43	size?: VariantProps<typeof toggleVariants>['size'];
44}
45 
46export function Toggle({
47	className,
48	variant = 'default',
49	size = 'default',
50	...props
51}: ToggleProps) @{
52	<TogglePrimitive
53		data-slot="toggle"
54		className={cn(toggleVariants({ variant, size, className }))}
55		{...props}
56	/>
57}