Button

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { Slot } from '@radix-ui/react-slot'
4import { cva, type VariantProps } from 'class-variance-authority'
5import { cn } from '@/lib/utils'
6 
7const buttonVariants = cva(
8  'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-bold uppercase tracking-wide bk-interactive disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-3 border-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
9  {
10    variants: {
11      variant: {
12        default:
13          'bg-primary text-primary-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none active:translate-x-[4px] active:translate-y-[4px] active:shadow-none',
14        secondary:
15          'bg-secondary text-secondary-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none active:translate-x-[4px] active:translate-y-[4px] active:shadow-none',
16        accent:
17          'bg-accent text-accent-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none active:translate-x-[4px] active:translate-y-[4px] active:shadow-none',
18        destructive:
19          'bg-destructive text-destructive-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none active:translate-x-[4px] active:translate-y-[4px] active:shadow-none',
20        outline:
21          'bg-background text-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none hover:bg-muted active:translate-x-[4px] active:translate-y-[4px] active:shadow-none',
22        ghost:
23          'border-transparent shadow-none hover:bg-muted hover:border-foreground',
24        link: 'border-transparent shadow-none underline-offset-4 hover:underline text-primary',
25        noShadow:
26          'bg-primary text-primary-foreground',
27        reverse:
28          'bg-primary text-primary-foreground hover:translate-x-[-4px] hover:translate-y-[-4px] hover:shadow-[4px_4px_0px_hsl(var(--shadow-color))]',
29      },
30      size: {
31        default: 'h-11 px-5 py-2',
32        sm: 'h-9 px-4 text-xs',
33        lg: 'h-12 px-8 text-base',
34// … truncated