Button

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";
6import { Spinner } from "@/components/ui/spinner";
7import type * as React from "react";
8import { cn } from "@/lib/utils";
9import {
10  coarseTarget,
11  colorTransition,
12  disabled,
13  popupTriggerOpen,
14  selectionFocus,
15  stateStepping,
16} from "@/lib/recipes";
17export const buttonVariants = cva(
18  [
19    "relative inline-flex shrink-0 items-center justify-center whitespace-nowrap",
20    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
21    coarseTarget,
22    // Keyboard focus mirrors hover per variant (no outside ring).
23    "outline-none",
24    colorTransition,
25    disabled,
26  ].join(" "),
27  {
28    defaultVariants: { size: "md", variant: "primary", shape: "rounded" },
29    variants: {
30      size: {
31        sm: "h-6 px-2.5 gap-1.5 text-mini font-medium",
32        md: "h-8 px-3.5 gap-2 text-small font-medium",
33        lg: "h-10 px-4 gap-2 text-regular font-medium",
34      },
35      shape: {
36        rounded: "rounded-[var(--radius-8)]",
37        pill: "rounded-full",
38      },
39      variant: {
40        primary:
41          "bg-primary text-on-primary hover:bg-primary-hover focus-visible:bg-primary-hover focus-visible:shadow-[inset_0_-2px_0_var(--on-primary)] data-[popup-open]:bg-primary-hover active:bg-primary-active",
42        secondary:
43          cn(stateStepping.neutralFill, "text-ink", popupTriggerOpen, selectionFocus),
44        outlined:
45          cn("border border-hairline bg-transparent text-ink hover:bg-layer-hover focus-visible:bg-layer-hover active:bg-layer-hover", popupTriggerOpen, selectionFocus),
46        soft:
47          cn("bg-primary-soft text-on-primary-soft hover:bg-primary-soft-hover focus-visible:bg-primary-soft-hover data-[popup-open]:bg-primary-soft-hover active:bg-primary-soft-active", selectionFocus),
48        tertiary:
49          cn("bg-transparent text-ink hover:bg-layer-hover focus-visible:bg-layer-hover active:bg-layer-hover", popupTriggerOpen, selectionFocus),
50        warning:
51          "bg-warning text-warning-fg hover:bg-warning-hover focus-visible:bg-warning-hover focus-visible:shadow-[inset_0_-2px_0_var(--warning-fg)] data-[popup-open]:bg-warning-hover active:bg-warning-active",
52        destructive:
53// … truncated