Button

1"use client";
2 
3import { Slot, Slottable } from "@radix-ui/react-slot";
4import { type VariantProps, cva } from "class-variance-authority";
5import type * as React from "react";
6 
7import { cn } from "@/lib/utils";
8import { useRipple } from "@/hooks/use-ripple";
9import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
10import { Loader2Icon } from "lucide-react";
11import { AnimatePresence, LazyMotion, domAnimation, m } from "motion/react";
12import { useCallback, useState } from "react";
13 
14const buttonVariants = cva(
15  cn(
16    "inline-flex items-center justify-center gap-2 shrink-0 outline-none relative overflow-hidden",
17    "text-sm font-medium whitespace-nowrap rounded-lg transition-all cursor-pointer",
18    "active:scale-98 transition-all duration-100",
19    "disabled:pointer-events-none disabled:opacity-70",
20    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
21    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
22    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:dark:ring-destructive/40",
23  ),
24  {
25    variants: {
26      variant: {
27        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
28        destructive: cn(
29          "bg-destructive text-white hover:bg-destructive/90",
30          "focus-visible:ring-destructive/20 focus-visible:dark:ring-destructive/40 dark:bg-destructive/60",
31        ),
32        outline:
33          "border bg-background hover:bg-accent hover:text-accent-foreground",
34        secondary:
35          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
36        ghost: "hover:bg-accent hover:text-accent-foreground ",
37        link: "text-primary underline-offset-4 hover:underline",
38      },
39      size: {
40        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
41        md: "h-9 px-4 py-2 has-[>svg]:px-3",
42        lg: "h-10 px-6 has-[>svg]:px-4",
43        icon: "size-9",
44      },
45    },
46    defaultVariants: {
47      variant: "primary",
48      size: "md",
49    },
50  },
51);
52 
53function Button({
54  className,
55  variant,
56  size,
57  disabled = false,
58  asChild = false,
59  loading,
60  setLoading,
61  onClick,
62  children,
63  ...props
64}: React.ComponentProps<"button"> &
65  VariantProps<typeof buttonVariants> & {
66    asChild?: boolean;
67    loading?: boolean;
68    setLoading?: (loading: boolean) => void;
69  }) {
70  const {
71    ripples,
72    onClick: handleRippleClick,
73    onClear: handleRippleClear,
74  } = useRipple();
75  const handleLoading = useCallbackRef(setLoading);
76 
77// … truncated