Button

1"use client";
2 
3import { tv, type VariantProps } from "tailwind-variants";
4import {
5  Button as BaseButton,
6  type ButtonProps as BaseButtonProps,
7} from "@base-ui/react/button";
8 
9import { cn } from "@/lib/classes";
10 
11const buttonVariants = tv({
12  base: [
13    `group inline-flex relative isolate shrink-0 items-center gap-1.5 text-sm justify-center w-fit touch-none whitespace-nowrap cursor-pointer outline-hidden transform-gpu motion-reduce:transform-none overflow-hidden`,
14    `focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-secondary-foreground`,
15    `disabled:cursor-not-allowed disabled:scale-100 disabled:opacity-60 disabled:bg-secondary`,
16    `[transition:scale_0.1s,box-shadow_0.2s,background_0.20s,width_0.2s] [transition-timing-function:cubic-bezier(.6,.04,.98,.335)] will-change-transform`,
17    `[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none active:scale-98`,
18  ],
19  variants: {
20    variant: {
21      default: `bg-linear-to-b from-primary/80 dark:from-primary to-primary text-primary-foreground hover:from-primary/75 dark:hover:from-primary/95`,
22      secondary:
23        "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90",
24      outline: `border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50`,
25      ghost: `text-primary hover:bg-primary/10 focus-vislbe:bg-primary/10 focus-visible:border-primary/25`,
26      link: `text-primary hover:underline hover:underline-offset-4 hover:decoration-1 focus-visible:underline focus-visible:underline-offset-4 focus-visible:decoration-1`,
27      destructive:
28        "bg-destructive text-white hover:bg-destructive/90 focus-visible:border-destructive focus-visible:bg-destructive/90 focus-visible:ring-destructive bg-linear-to-t from-destructive/90 to-destructive",
29    },
30    size: {
31      default: "h-9 px-4 py-2 has-[>svg]:px-3",
32      xs: "h-6 gap-1 rounded-md px-[calc(--spacing(2)-1px)] py-[calc(--spacing(1)-1px)] text-xs [&_svg:not([class*='size-'])]:size-3",
33      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
34      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
35      xl: "h-12 px-[calc(--spacing(4)-1px)] py-[calc(--spacing(2)-1px)] text-base [&_svg:not([class*='size-'])]:size-4.5",
36      "icon-sm": "size-8 [&_svg:not([class*='size-'])]:size-3.5",
37      icon: "size-9 [&_svg:not([class*='size-'])]:size-4",
38// … truncated