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 "@/lib/utils";
7 
8const toggleVariants = cva(
9  "hover:text-foreground aria-pressed:bg-primary/10 aria-pressed:text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-base font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
10  {
11    variants: {
12      variant: {
13        default: "bg-transparent",
14        outline:
15          "border-border hover:bg-muted border bg-transparent aria-pressed:border-primary/15"
16      },
17      size: {
18        default: "h-8 min-w-8 px-2 rounded-lg",
19        sm: "h-7 min-w-7 rounded-md px-1.5 text-[0.8rem]",
20        lg: "h-9 min-w-9 px-2.5 rounded-xl"
21      }
22    },
23    defaultVariants: {
24      variant: "default",
25      size: "default"
26    }
27  }
28);
29 
30function Toggle({
31  className,
32  variant = "default",
33  size = "default",
34  ...props
35}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
36  return (
37    <TogglePrimitive
38      data-slot="toggle"
39      className={cn(toggleVariants({ variant, size, className }))}
40      {...props}
41    />
42  );
43}
44 
45export { Toggle, toggleVariants };