Button

1"use client";
2
3import * as React from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { Button as BaseButton } from "@base-ui/react/button";
6import { HugeiconsIcon } from "@hugeicons/react";
7import { Loading03Icon } from "@hugeicons/core-free-icons";
8import { cn } from "@/lib/utils";
9
10// The button's fill and border render on a ::before pseudo-element that
11// scales down on press (the pill shrinks, the label stays put). Because the
12// pseudo travels with the classes, every consumer of the recipe — <Button>
13// and flat elements styled via `buttonVariants` (pagination links, calendar
14// nav, toolbar buttons) — gets identical paint and press behavior with no
15// extra DOM. ButtonGroup collapses borders between segments with `before:`
16// rules, inert on children that don't carry the recipe.
17//
18// Paint: variants set per-state tokens (--btn-bg, --btn-bg-hover,
19// --btn-bg-active, --btn-border), the state machine below resolves them into
20// --btn-paint, and buttonPaint renders it on the pseudo (custom properties
21// inherit into pseudo-elements). Consumers recolor by overriding the tokens
22// (className="[--btn-bg:...]") and restyle the border via `before:` classes
23// (className="before:border-dashed").
24const buttonBase = cn(
25  "relative isolate inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-lg font-medium data-disabled:pointer-events-none data-disabled:opacity-60 data-disabled:focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color,scale,opacity,background-color,color] duration-100 ease-out outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 aria-invalid:outline-destructive/50 aria-invalid:outline-2 aria-invalid:outline-offset-2 aria-invalid:outline-solid",
26  // State machine: unset tokens fall through to transparent. Pressing shows
27  // the active paint — except on popup triggers (aria-haspopup), which skip
28  // pressed feedback entirely (mirroring the press-scale guard) and simply
29  // hold their hover paint while open (data-popup-open, stamped by Base UI).
30// … truncated