Button

1import { cva, type VariantProps } from "class-variance-authority";
2import { Slot as SlotPrimitive } from "radix-ui";
3import type * as React from "react";
4import { type HoverEffect, hoverEffects } from "@/lib/hover-effects";
5import { type MaterialAxisProps, type MaterialProps, materialSurface, splitAxisProps } from "@/lib/material";
6import { cn } from "@/lib/utils";
7 
8/* SEMANTIC variants only — each carries BEHAVIOR (text, hover, press shadows); the SURFACE comes from
9   the material system (materialSurface below). The four materials + axes are the material/border/veil/
10   gradient/glow/sheen props, not variants. */
11const buttonVariants = cva(
12  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.96] active:transition-transform",
13  {
14    variants: {
15      variant: {
16        glass: "text-foreground hover:opacity-90 transition active:opacity-80 active:shadow-[var(--press-shadow-strong)]",
17        default:
18          "bg-primary text-primary-foreground [background-image:var(--glass-bg)] shadow-[var(--glass-shadow)] hover:brightness-105 dark:hover:brightness-95 transition active:opacity-90 active:shadow-[var(--press-shadow)]",
19        destructive:
20          "text-destructive border border-destructive/60 hover:opacity-90 transition active:opacity-80 focus-visible:ring-destructive/20 active:shadow-[var(--press-shadow-strong)]",
21        outline:
22          "text-foreground border-2 border-foreground/20 hover:border-foreground/40 dark:border-white/40 dark:hover:border-white/60 dark:text-white transition active:border-foreground/50 active:shadow-[var(--press-shadow-sm)]",
23        secondary: "text-foreground hover:opacity-90 transition active:opacity-80 active:shadow-[var(--press-shadow-strong)]",
24        ghost:
25          "border border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:bg-accent/80 dark:active:bg-accent/60 active:shadow-[var(--press-shadow-sm)]",
26        link: "text-primary underline-offset-4 hover:underline active:opacity-80",
27      },
28      size: {
29// … truncated