toggle

1'use client';
2 
3import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
4import { cva, type VariantProps } from 'class-variance-authority';
5 
6import { cn } from '@/registry/lib/utils';
7 
8const toggleVariants = cva(
9  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
10  {
11    variants: {
12      variant: {
13        soft: 'bg-transparent text-secondary hover:bg-hover hover:text-primary aria-pressed:bg-active aria-pressed:text-primary focus-visible:outline-2 focus-visible:outline-focus',
14        outline:
15          'border border-line-ui/65 bg-transparent text-secondary hover:bg-hover hover:text-primary aria-pressed:bg-active aria-pressed:text-primary focus-visible:outline-2 focus-visible:outline-focus',
16        solid:
17          'bg-transparent text-secondary hover:bg-hover hover:text-primary aria-pressed:bg-fill aria-pressed:text-on-fill focus-visible:outline-2 focus-visible:outline-focus aria-pressed:focus-visible:outline-focus-fill',
18      },
19      size: {
20        sm: 'h-8 min-w-8 px-2.5 has-[>svg:only-child]:p-0',
21        md: 'h-9 min-w-9 px-2.5 has-[>svg:only-child]:p-0',
22        lg: 'h-10 min-w-10 px-3 has-[>svg:only-child]:p-0',
23      },
24    },
25    defaultVariants: {
26      variant: 'soft',
27      size: 'md',
28    },
29  }
30);
31 
32function Toggle({
33  className,
34  variant = 'soft',
35  size = 'md',
36  ...props
37}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
38  return (
39    <TogglePrimitive
40      data-slot="toggle"
41      className={cn(toggleVariants({ variant, size, className }))}
42      {...props}
43    />
44  );
45}
46 
47export { Toggle, toggleVariants };