Button (Tailwind)

1"use client";
2 
3import { Button as ButtonPrimitive } from "@base-ui/react/button";
4import { cva, type VariantProps } from "class-variance-authority";
5 
6import { cn } from "@/lib/utils";
7 
8const buttonVariants = cva(
9  [
10    "group inline-flex items-center justify-center rounded-[var(--radius)] font-[450]",
11    "transition-[transform,background-color,box-shadow] duration-200 ease-[var(--ease-out-quad)] will-change-transform",
12    "relative cursor-pointer overflow-hidden",
13    "leading-[1.2] tracking-[-0.014em]",
14    "focus-visible:outline-2 focus-visible:outline-[color:var(--ring)] focus-visible:outline-offset-2",
15    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
16  ],
17  {
18    variants: {
19      variant: {
20        primary: [
21          "isolate border border-[color:var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)]",
22          "shadow-[0_1px_2px_oklch(from_var(--primary)_l_c_h/0.24)]",
23          "inset-shadow-[0_1px_oklch(1_0_0/0.16)]",
24          "before:-z-1 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius)-1px)]",
25          "hover:before:bg-[oklch(from_var(--primary-foreground)_l_c_h/0.1)]",
26          "[:active,[data-pressed]]:shadow-none [:active,[data-pressed]]:inset-shadow-[0_1px_oklch(0_0_0/0.08)]",
27        ],
28        secondary: [
29          "isolate border border-transparent bg-[var(--secondary)] text-[var(--secondary-foreground)]",
30          "before:-z-1 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius)-1px)]",
31          "hover:before:bg-[oklch(from_var(--secondary-foreground)_l_c_h/0.08)] data-[pressed]:before:bg-[oklch(from_var(--secondary-foreground)_l_c_h/0.08)]",
32        ],
33        destructive: [
34          "isolate border border-[color:var(--destructive)] bg-[var(--destructive)] text-[var(--destructive-foreground)]",
35          "shadow-[0_1px_2px_oklch(from_var(--destructive)_l_c_h/0.24)]",
36          "inset-shadow-[0_1px_oklch(1_0_0/0.16)]",
37          "before:-z-1 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius)-1px)]",
38          "hover:before:bg-[oklch(1_0_0/0.08)]",
39          "[:active,[data-pressed]]:shadow-none [:active,[data-pressed]]:inset-shadow-[0_1px_oklch(0_0_0/0.08)]",
40        ],
41        ghost: [
42          "bg-transparent text-[var(--foreground)]",
43          "hover:bg-[var(--accent)]",
44          "data-[popup-open]:bg-[var(--accent)]",
45        ],
46        outline: [
47// … truncated