toggle

1"use client"
2 
3import { cn } from "@/lib/utils"
4import * as TogglePrimitive from "@radix-ui/react-toggle"
5import { cva, type VariantProps } from "class-variance-authority"
6import * as React from "react"
7 
8const toggleVariants = cva(
9  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
10  {
11    variants: {
12      variant: {
13        default: "bg-transparent",
14        outline:
15          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
16      },
17      size: {
18        default: "h-9 px-2 min-w-9",
19        sm: "h-8 px-1.5 min-w-8",
20        lg: "h-10 px-2.5 min-w-10",
21      },
22    },
23    defaultVariants: {
24      variant: "default",
25      size: "default",
26    },
27  },
28)
29 
30function Toggle({
31  className,
32  variant,
33  size,
34  ...props
35}: React.ComponentProps<typeof TogglePrimitive.Root> &
36  VariantProps<typeof toggleVariants>) {
37  return (
38    <TogglePrimitive.Root
39      data-slot="toggle"
40      className={cn(toggleVariants({ variant, size, className }))}
41      {...props}
42    />
43  )
44}
45 
46export { Toggle, toggleVariants }