Toggle

1'use client';
2 
3import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
4 
5import { buttonVariants } from '@/components/ui/button';
6import { cn } from '@/lib/utils';
7 
8type ToggleVariant = 'secondary' | 'outline' | 'ghost';
9type ToggleSize =
10  | 'xxs'
11  | 'xs'
12  | 'sm'
13  | 'default'
14  | 'lg'
15  | 'icon-xxs'
16  | 'icon-xs'
17  | 'icon-sm'
18  | 'icon'
19  | 'icon-lg';
20 
21function toggleVariants({
22  variant = 'secondary',
23  size = 'default',
24  className,
25}: {
26  variant?: ToggleVariant;
27  size?: ToggleSize;
28  className?: string;
29} = {}) {
30  return cn(
31    buttonVariants({ variant, size }),
32    'data-pressed:bg-fill-active data-pressed:text-fg-primary-inverse',
33 
34    variant === 'outline' &&
35      'data-pressed:border-stroke-active-inverse data-pressed:border-2',
36 
37    className,
38  );
39}
40 
41function Toggle({
42  className,
43  variant = 'secondary',
44  size = 'default',
45  ...props
46}: TogglePrimitive.Props & {
47  variant?: ToggleVariant;
48  size?: ToggleSize;
49}) {
50  return (
51    <TogglePrimitive
52      data-slot="toggle"
53      className={cn(toggleVariants({ variant, size }), className)}
54      {...props}
55    />
56  );
57}
58 
59export { Toggle, toggleVariants, type ToggleVariant, type ToggleSize };