Pulse Button

1"use client"
2 
3import * as React from "react"
4import { motion } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7interface PulseButtonProps
8  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9  /** Pulse ring color */
10  pulseColor?: string
11  /** Seconds per pulse cycle */
12  duration?: number
13  children: React.ReactNode
14}
15 
16const PulseButton = React.forwardRef<HTMLButtonElement, PulseButtonProps>(
17  (
18    {
19      pulseColor = "hsl(var(--primary))",
20      duration = 2,
21      children,
22      disabled,
23      className,
24      ...props
25    },
26    ref
27  ) => {
28    return (
29      <div className="relative inline-flex rounded-md">
30        {/* Pulse rings */}
31        {!disabled && (
32          <>
33            <motion.div
34              className="pointer-events-none absolute inset-0 rounded-md"
35              style={{
36                border: `2px solid ${pulseColor}`,
37              }}
38              animate={{ scale: [1, 1.6], opacity: [0.4, 0] }}
39              transition={{
40                duration,
41                repeat: Infinity,
42                ease: "easeOut",
43              }}
44            />
45            <motion.div
46              className="pointer-events-none absolute inset-0 rounded-md"
47              style={{
48                border: `2px solid ${pulseColor}`,
49              }}
50              animate={{ scale: [1, 1.6], opacity: [0.4, 0] }}
51              transition={{
52                duration,
53                delay: duration / 2,
54                repeat: Infinity,
55                ease: "easeOut",
56              }}
57            />
58          </>
59        )}
60 
61        <button
62          ref={ref}
63          disabled={disabled}
64          className={cn(
65            "relative inline-flex cursor-pointer items-center gap-2 rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
66            "disabled:cursor-not-allowed disabled:opacity-50",
67            className
68          )}
69          {...props}
70        >
71          {children}
72        </button>
73      </div>
74    )
75  }
76)
77PulseButton.displayName = "PulseButton"
78 
79export { PulseButton }
80export type { PulseButtonProps }