Pulsating Button

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { Snippet } from "svelte";
4 
5	interface PulsatingButtonProps {
6		children: Snippet;
7		class?: string;
8		pulseColor?: string;
9		duration?: string;
10		distance?: string;
11		variant?: "slow" | "ring" | "ripple";
12	}
13 
14	let {
15		class: className,
16		children,
17		pulseColor = "#808080",
18		duration = "1.5s",
19		distance = "8px",
20		variant = "slow",
21		...props
22	}: PulsatingButtonProps = $props();
23</script>
24 
25<button
26	class={cn(
27		"bg-primary text-primary-foreground relative flex cursor-pointer items-center justify-center rounded-lg px-4 py-2 text-center",
28		className
29	)}
30	style="--pulse-color: {pulseColor}; --duration: {duration}; --distance: {distance};"
31	{...props}
32>
33	<div class="relative z-10">
34		{@render children()}
35	</div>
36	<span
37		aria-hidden="true"
38		class={cn(
39			"pointer-events-none absolute inset-0 rounded-[inherit] bg-inherit",
40			variant === "ripple" && "animate-pulse-ripple",
41			variant === "ring" && "animate-pulse-ring",
42			variant === "slow" && "animate-pulse-slow"
43		)}
44	></span>
45</button>