Button

1"use client";
2 
3import {
4  cloneElement,
5  forwardRef,
6  isValidElement,
7  type ButtonHTMLAttributes,
8  type ReactElement,
9  type ReactNode,
10} from "react";
11import { Slot } from "@radix-ui/react-slot";
12import { cva, type VariantProps } from "class-variance-authority";
13import type { IconComponent } from "@/lib/icon-context";
14import { cn } from "@/lib/utils";
15import { useShape } from "@/lib/shape-context";
16 
17const buttonVariants = cva(
18  [
19    "group relative isolate inline-flex items-center justify-center outline-none cursor-pointer",
20    "transition-colors duration-80",
21    "disabled:opacity-50 disabled:pointer-events-none",
22    "focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)]",
23  ],
24  {
25    variants: {
26      variant: {
27        primary: "text-background",
28        secondary: "text-foreground",
29        tertiary: "text-foreground",
30        ghost: "text-muted-foreground hover:text-foreground",
31      },
32      size: {
33        sm: "h-7 px-3 text-[12px] gap-1",
34        md: "h-8 px-4 text-[13px] gap-1.5",
35        lg: "h-9 px-5 text-[14px] gap-1.5",
36        "icon-sm": "h-8 w-8 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5",
37        icon: "h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4",
38        "icon-lg": "h-10 w-10 p-0 [&_svg]:h-5 [&_svg]:w-5",
39      },
40      iconLeft: { true: "" },
41      iconRight: { true: "" },
42    },
43    compoundVariants: [
44      { size: "sm", iconLeft: true, className: "pl-[6px]" },
45      { size: "md", iconLeft: true, className: "pl-[10px]" },
46      { size: "lg", iconLeft: true, className: "pl-[14px]" },
47      { size: "sm", iconRight: true, className: "pr-[6px]" },
48      { size: "md", iconRight: true, className: "pr-[10px]" },
49      { size: "lg", iconRight: true, className: "pr-[14px]" },
50    ],
51    defaultVariants: {
52      variant: "primary",
53      size: "md",
54    },
55  }
56);
57 
58interface ButtonProps
59  extends ButtonHTMLAttributes<HTMLButtonElement>,
60    VariantProps<typeof buttonVariants> {
61  asChild?: boolean;
62  loading?: boolean;
63  leadingIcon?: IconComponent;
64  trailingIcon?: IconComponent;
65  /** Force the visual pressed/held state. Useful when the button drives an
66   *  external open piece of UI (a popover, dropdown, etc.) so it reads as
67   *  engaged while the menu is showing. */
68  active?: boolean;
69}
70 
71const bgVariants: Record<string, string> = {
72  primary: "bg-foreground group-hover:bg-foreground/90 group-active:bg-foreground/80",
73  secondary: "bg-accent group-hover:bg-accent/80 group-active:bg-accent",
74// … truncated