Button

1'use client'
2 
3import * as React from 'react'
4import { Slot } from '@radix-ui/react-slot'
5import { cva, type VariantProps } from 'class-variance-authority'
6import { animate, useReducedMotion } from 'motion/react'
7import { cn } from '@/lib/utils'
8import { springs } from '@/lib/motion-tokens'
9import { playClickSound, playHoverSound } from '@/lib/sound'
10 
11export const buttonVariants = cva(
12  [
13    'inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium',
14    'rounded-lg squircle-corners',
15    'select-none',
16    'transition-colors duration-(--motion-dur-fast) ease-(--motion-ease-out)',
17    'motion-reduce:transition-none motion-reduce:transform-none',
18    'focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)',
19    'focus-visible:outline-none',
20    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
21    'aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
22  ].join(' '),
23  {
24    variants: {
25      variant: {
26        solid: 'bg-(--color-fg) text-(--color-bg) hover:bg-(--color-fg)/90',
27        outline: 'border border-(--color-border) text-(--color-fg) hover:bg-(--color-surface)',
28        ghost: 'text-(--color-fg) hover:bg-(--color-surface-2)',
29        link: 'text-(--color-fg) underline-offset-4 hover:underline',
30        destructive:
31          'bg-(--color-error) text-(--color-bg) hover:bg-(--color-error)/90 focus-visible:ring-(--color-error)',
32      },
33      size: {
34        sm: 'min-h-9 px-3 text-xs',
35        md: 'min-h-11 px-4 text-sm',
36        lg: 'min-h-12 px-5 text-base',
37        'icon-sm': 'size-9 shrink-0 p-0',
38        icon: 'size-11 shrink-0 p-0',
39        'icon-lg': 'size-12 shrink-0 p-0',
40      },
41    },
42    defaultVariants: {
43      variant: 'solid',
44      size: 'md',
45    },
46  },
47)
48 
49export interface ButtonProps
50  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
51  asChild?: boolean
52  loading?: boolean
53  /** Accessible label announced while an action is in progress. */
54  loadingLabel?: string
55  /** Replaces the default progress glyph without changing loading behavior. */
56  loadingIndicator?: React.ReactNode
57  /** @deprecated Use `variant="destructive"`. */
58  destructive?: boolean
59  className?: string
60}
61 
62function DefaultLoadingIndicator() {
63  return (
64    <svg
65      className="size-4 animate-spin motion-reduce:animate-none"
66      viewBox="0 0 24 24"
67// … truncated