button

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6import "./button.css"
7 
8const buttonVariants = cva(
9  "relative inline-flex items-center justify-center overflow-hidden whitespace-nowrap font-accent cursor-pointer transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0",
10  {
11    variants: {
12      variant: {
13        primary: "btn-primary",
14        secondary: "btn-secondary",
15        terciary: "btn-terciary",
16        destructive: "btn-destructive",
17      },
18      size: {
19        xs: "h-[var(--layout-size-md)] gap-[var(--layout-gap-xs)] px-[var(--layout-padding-xs)] rounded-[var(--layout-radius-lg)] text-content-caption [&_svg]:size-3.5",
20        sm: "h-[var(--layout-size-lg)] gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] rounded-[var(--layout-radius-lg)] text-content-note [&_svg]:h-[var(--layout-size-xs)] [&_svg]:w-[var(--layout-size-xs)]",
21        md: "h-[var(--layout-size-xl)] gap-[var(--layout-gap-sm)] px-[var(--layout-padding-lg)] rounded-[var(--layout-radius-lg)] text-content-note [&_svg]:h-[var(--layout-size-xs)] [&_svg]:w-[var(--layout-size-xs)]",
22        lg: "h-[var(--layout-size-2xl)] gap-[var(--layout-gap-sm)] px-[var(--layout-padding-xl)] rounded-[var(--layout-radius-xl)] text-content-body [&_svg]:h-[var(--layout-size-sm)] [&_svg]:w-[var(--layout-size-sm)]",
23      },
24    },
25    defaultVariants: {
26      variant: "primary",
27      size: "md",
28    },
29  }
30)
31 
32function Button({
33  className,
34  variant,
35  size,
36  isIconOnly = false,
37  asChild = false,
38  onPointerDown,
39  ...props
40}: React.ComponentProps<"button"> &
41  VariantProps<typeof buttonVariants> & {
42    asChild?: boolean
43    isIconOnly?: boolean
44  }) {
45  const Comp = asChild ? Slot : "button"
46 
47  const handlePointerDown = React.useCallback(
48    (e: React.PointerEvent<HTMLButtonElement>) => {
49      onPointerDown?.(e)
50      const btn = e.currentTarget
51      const rect = btn.getBoundingClientRect()
52      const diameter = Math.sqrt(rect.width ** 2 + rect.height ** 2) * 2
53      const ripple = document.createElement("span")
54      ripple.className = "absolute rounded-full bg-current pointer-events-none animate-ripple motion-reduce:hidden"
55      ripple.style.width = `${diameter}px`
56      ripple.style.height = `${diameter}px`
57      ripple.style.left = `${e.clientX - rect.left - diameter / 2}px`
58      ripple.style.top = `${e.clientY - rect.top - diameter / 2}px`
59// … truncated