Button

1import { type VariantProps, cva } from "class-variance-authority";
2import { Slot as SlotPrimitive } from "radix-ui";
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7const buttonVariants = cva(
8  [
9    // Layout & Sizing
10    "inline-flex items-center justify-center",
11    "gap-2 whitespace-nowrap",
12    "shrink-0",
13 
14    // Typography
15    "text-md font-semibold",
16 
17    // Icon Styles
18    "[&_svg]:pointer-events-none",
19    "[&_svg]:w-[1.375rem] [&_svg]:h-[1.375rem]",
20    "[&_svg]:shrink-0",
21 
22    // Interactive States
23    "transition-all",
24    "cursor-pointer",
25    "disabled:pointer-events-none disabled:opacity-50",
26 
27    // Focus & Validation States
28    "outline-none",
29    "focus-visible:border-primary focus-visible:ring-primary/50 focus-visible:ring-[3px]",
30    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
31    "aria-invalid:border-destructive",
32  ].join(" "),
33  {
34    variants: {
35      variant: {
36        default:
37          "bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700",
38        outline:
39          "border bg-backgrounds hover:bg-neutral-bg hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
40        ghost: "bg-transparent hover:bg-neutral-bg active:bg-neutral-bg-active",
41        link: "text-primary underline-offset-4 hover:underline",
42      },
43      size: {
44        default: "h-10 min-w-10 px-4 rounded-4xl",
45        lg: "h-12 min-w-12 px-6 rounded-4xl",
46        sm: "h-8 min-w-8 px-3 rounded-4xl",
47        xs: "h-6 min-w-6 px-2 rounded-4xl text-xs [&>svg]:!w-[18px] [&>svg]:!h-[18px]",
48        icon: "size-10 rounded-full",
49        // New icon-specific sizes
50        "icon-lg": "size-12 rounded-full",
51        "icon-sm": "size-8 rounded-full",
52        "icon-xs": "size-6 rounded-full [&>svg]:!w-[18px] [&>svg]:!h-[18px]",
53      },
54      colorScheme: {
55        primary: "",
56        ai: "bg-[length:250%_100%] !bg-transparent",
57        danger: "",
58        success: "",
59        neutral: "",
60      },
61    },
62    compoundVariants: [
63      {
64        variant: "default",
65        colorScheme: "primary",
66        class:
67          "bg-primary text-inverse-text hover:bg-primary-hover active:bg-primary-active",
68      },
69      {
70        variant: "default",
71        colorScheme: "success",
72        class:
73          "bg-success text-inverse-text hover:bg-success-hover active:bg-success-active",
74      },
75      {
76        variant: "default",
77        colorScheme: "danger",
78// … truncated