Button

1"use client";
2 
3import { Button as ButtonPrimitive } from "@base-ui/react/button";
4import { cva, type VariantProps } from "class-variance-authority";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const raisedPress =
10  "shadow-shadow hover:not-data-disabled:translate-x-pressX hover:not-data-disabled:translate-y-pressY hover:not-data-disabled:shadow-press focus-visible:not-data-disabled:translate-x-pressX focus-visible:not-data-disabled:translate-y-pressY focus-visible:not-data-disabled:shadow-press active:not-data-disabled:translate-x-boxShadowX active:not-data-disabled:translate-y-boxShadowY active:not-data-disabled:shadow-[0_0_0_0_var(--border)]";
11 
12const buttonVariants = cva(
13  "inline-flex items-center justify-center whitespace-nowrap rounded-base text-sm font-base ring-offset-white transition-[translate,box-shadow,background-color,color] duration-[140ms] ease-[ease] motion-reduce:transition-none gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50",
14  {
15    variants: {
16      variant: {
17        default: `text-main-foreground bg-main border-2 border-border ${raisedPress}`,
18        outline: `bg-background text-foreground border-2 border-border ${raisedPress}`,
19        secondary: `bg-secondary-background text-foreground border-2 border-border ${raisedPress}`,
20        ghost:
21          "border-2 border-transparent bg-transparent text-foreground hover:border-border hover:bg-main hover:text-main-foreground",
22        destructive: `bg-destructive text-white border-2 border-border ${raisedPress}`,
23        link: "text-primary underline-offset-4 hover:underline",
24        noShadow: "text-main-foreground bg-main border-2 border-border",
25        neutral: `bg-secondary-background text-foreground border-2 border-border ${raisedPress}`,
26        reverse:
27          "text-main-foreground bg-main border-2 border-border hover:not-data-disabled:translate-x-reverseBoxShadowX hover:not-data-disabled:translate-y-reverseBoxShadowY hover:not-data-disabled:shadow-shadow active:not-data-disabled:translate-x-0 active:not-data-disabled:translate-y-0 active:not-data-disabled:shadow-[0_0_0_0_var(--border)]",
28      },
29      size: {
30        default: "h-10 px-4 py-2",
31        xs: "h-7 px-2 text-xs",
32        sm: "h-9 px-3",
33        lg: "h-11 px-8",
34// … truncated