toggleVariants.tsx raw

   1  import { cva } from "class-variance-authority";
   2  
   3  export const toggleVariants = cva(
   4    "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-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   5    {
   6      variants: {
   7        variant: {
   8          default: "bg-transparent",
   9          outline:
  10            "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
  11        },
  12        size: {
  13          default: "h-9 min-w-9 px-2",
  14          sm: "h-8 min-w-8 px-1.5",
  15          lg: "h-10 min-w-10 px-2.5",
  16        },
  17      },
  18      defaultVariants: {
  19        variant: "default",
  20        size: "default",
  21      },
  22    }
  23  );
  24