Hold Button

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Hold Button
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { cva, type VariantProps } from "class-variance-authority";
14import {
15  AlertCircleIcon,
16  ArchiveXIcon,
17  BanIcon,
18  Trash2Icon,
19  XCircleIcon,
20} from "lucide-react";
21import { motion, useAnimation } from "motion/react";
22import { useState } from "react";
23import { Button } from "@/components/ui/button";
24import { cn } from "@/lib/utils";
25 
26const holdButtonVariants = cva("relative min-w-40 touch-none overflow-hidden", {
27  variants: {
28    variant: {
29      red: [
30        "bg-red-100 dark:bg-red-200",
31        "hover:bg-red-100 dark:hover:bg-red-200",
32        "text-red-500 dark:text-red-600",
33        "border border-red-200 dark:border-red-300",
34      ],
35      green: [
36        "bg-green-100 dark:bg-green-200",
37        "hover:bg-green-100 dark:hover:bg-green-200",
38        "text-green-500 dark:text-green-600",
39        "border border-green-200 dark:border-green-300",
40      ],
41      blue: [
42        "bg-blue-100 dark:bg-blue-200",
43        "hover:bg-blue-100 dark:hover:bg-blue-200",
44        "text-blue-500 dark:text-blue-600",
45        "border border-blue-200 dark:border-blue-300",
46      ],
47      orange: [
48        "bg-orange-100 dark:bg-orange-200",
49        "hover:bg-orange-100 dark:hover:bg-orange-200",
50        "text-orange-500 dark:text-orange-600",
51        "border border-orange-200 dark:border-orange-300",
52      ],
53      grey: [
54        "bg-gray-100 dark:bg-gray-200",
55        "hover:bg-gray-100 dark:hover:bg-gray-200",
56        "text-gray-500 dark:text-gray-600",
57        "border border-gray-200 dark:border-gray-300",
58      ],
59    },
60  },
61  defaultVariants: {
62    variant: "red",
63  },
64});
65 
66interface HoldButtonProps
67  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
68    VariantProps<typeof holdButtonVariants> {
69  holdDuration?: number;
70}
71 
72export default function HoldButton({
73  className,
74  variant = "red",
75  holdDuration = 3000,
76  ...props
77}: HoldButtonProps) {
78  const [isHolding, setIsHolding] = useState(false);
79  const controls = useAnimation();
80 
81  async function handleHoldStart() {
82    setIsHolding(true);
83    controls.set({ width: "0%" });
84    await controls.start({
85      width: "100%",
86      transition: {
87        duration: holdDuration / 1000,
88        ease: "linear",
89      },
90    });
91  }
92 
93  function handleHoldEnd() {
94// … truncated