xiod-ui 1.0.0

package/dist/components/kinetic-click.js

@@ -0,0 +1,1184 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/kinetic-click.tsx
+const KATA = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ0123456789";
+var GlobalCanvasManager = class GlobalCanvasManager {
+	static instance = null;
+	canvas = null;
+	ctx = null;
+	particles = [];
+	animId = null;
+	consumers = 0;
+	constructor() {
+		if (typeof window === "undefined") return;
+		this.createCanvas();
+		window.addEventListener("resize", this.handleResize);
+	}
+	static getInstance() {
+		if (!GlobalCanvasManager.instance) GlobalCanvasManager.instance = new GlobalCanvasManager();
+		return GlobalCanvasManager.instance;
+	}
+	createCanvas() {
+		this.canvas = document.createElement("canvas");
+		this.canvas.dataset.slot = "kinetic-click-canvas";
+		this.canvas.setAttribute("aria-hidden", "true");
+		Object.assign(this.canvas.style, {
+			position: "fixed",
+			top: "0",
+			left: "0",
+			width: "100vw",
+			height: "100vh",
+			pointerEvents: "none",
+			zIndex: "999999"
+		});
+		this.canvas.width = window.innerWidth;
+		this.canvas.height = window.innerHeight;
+		document.body.appendChild(this.canvas);
+		this.ctx = this.canvas.getContext("2d");
+	}
+	handleResize = () => {
+		if (this.canvas) {
+			this.canvas.width = window.innerWidth;
+			this.canvas.height = window.innerHeight;
+		}
+	};
+	addParticles(newParticles) {
+		this.particles.push(...newParticles);
+		this.startLoop();
+	}
+	retain() {
+		this.consumers += 1;
+	}
+	release() {
+		this.consumers = Math.max(0, this.consumers - 1);
+		if (this.consumers === 0) this.cleanup();
+	}
+	startLoop() {
+		if (this.animId !== null) return;
+		const loop = (timestamp) => {
+			this.updateAndDraw(timestamp);
+			if (this.particles.length > 0) this.animId = requestAnimationFrame(loop);
+			else {
+				this.animId = null;
+				if (this.ctx && this.canvas) this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+			}
+		};
+		this.animId = requestAnimationFrame(loop);
+	}
+	updateAndDraw(_timestamp) {
+		const ctx = this.ctx;
+		const canvas = this.canvas;
+		if (!ctx || !canvas) return;
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		const TESSERACT_NODES = [
+			[
+				-1,
+				-1,
+				-1
+			],
+			[
+				1,
+				-1,
+				-1
+			],
+			[
+				1,
+				1,
+				-1
+			],
+			[
+				-1,
+				1,
+				-1
+			],
+			[
+				-1,
+				-1,
+				1
+			],
+			[
+				1,
+				-1,
+				1
+			],
+			[
+				1,
+				1,
+				1
+			],
+			[
+				-1,
+				1,
+				1
+			]
+		];
+		const TESSERACT_EDGES = [
+			[0, 1],
+			[1, 2],
+			[2, 3],
+			[3, 0],
+			[4, 5],
+			[5, 6],
+			[6, 7],
+			[7, 4],
+			[0, 4],
+			[1, 5],
+			[2, 6],
+			[3, 7]
+		];
+		const coreKeys = /* @__PURE__ */ new Set();
+		this.particles = this.particles.filter((p) => {
+			p.life -= p.decay;
+			if (p.life <= 0) return false;
+			ctx.save();
+			ctx.globalAlpha = Math.max(0, p.life);
+			switch (p.type) {
+				case "spark": {
+					p.x += p.vx;
+					p.y += p.vy;
+					p.vy += .05;
+					const tailX = p.x - p.vx * 1.5;
+					const tailY = p.y - p.vy * 1.5;
+					ctx.beginPath();
+					ctx.moveTo(tailX, tailY);
+					ctx.lineTo(p.x, p.y);
+					ctx.lineWidth = p.size;
+					ctx.strokeStyle = p.color;
+					ctx.lineCap = "round";
+					ctx.stroke();
+					break;
+				}
+				case "ripple":
+					p.size += p.vx;
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+					ctx.lineWidth = p.vy;
+					ctx.strokeStyle = p.color;
+					ctx.stroke();
+					break;
+				case "embers": {
+					p.vy -= .02;
+					p.x += p.vx + Math.sin(p.wobble ?? 0) * .4;
+					p.y += p.vy;
+					if (p.wobble !== void 0 && p.wobbleSpeed !== void 0) p.wobble += p.wobbleSpeed;
+					const currentRadius = Math.max(.2, p.size * p.life);
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, currentRadius, 0, Math.PI * 2);
+					ctx.fillStyle = p.color;
+					ctx.fill();
+					break;
+				}
+				case "quantum": {
+					if (p.timer !== void 0 && p.teleportTimer !== void 0) {
+						p.timer--;
+						if (p.timer <= 0) {
+							const spread = p.vx;
+							p.x = p.originX + (Math.random() - .5) * spread;
+							p.y = p.originY + (Math.random() - .5) * spread;
+							p.timer = Math.random() * p.teleportTimer;
+						}
+					}
+					const cs = p.size;
+					ctx.beginPath();
+					ctx.moveTo(p.x - cs, p.y);
+					ctx.lineTo(p.x + cs, p.y);
+					ctx.moveTo(p.x, p.y - cs);
+					ctx.lineTo(p.x, p.y + cs);
+					ctx.lineWidth = 1;
+					ctx.strokeStyle = p.color;
+					ctx.stroke();
+					break;
+				}
+				case "tesseract":
+					if (p.rotX !== void 0 && p.rotY !== void 0 && p.rotSpeedX !== void 0 && p.rotSpeedY !== void 0) {
+						p.rotX += p.rotSpeedX;
+						p.rotY += p.rotSpeedY;
+						const limitSize = p.vx;
+						const speed = p.vy;
+						if (p.size < limitSize) p.size += speed;
+						const rx = p.rotX;
+						const ry = p.rotY;
+						const size = p.size;
+						const projected = TESSERACT_NODES.map(([nx, ny, nz]) => {
+							const x1 = nx * Math.cos(ry) - nz * Math.sin(ry);
+							const z1 = nx * Math.sin(ry) + nz * Math.cos(ry);
+							const y2 = ny * Math.cos(rx) - z1 * Math.sin(rx);
+							const x2 = x1;
+							return [p.x + x2 * size, p.y + y2 * size];
+						});
+						ctx.beginPath();
+						for (const [a, b] of TESSERACT_EDGES) {
+							ctx.moveTo(projected[a][0], projected[a][1]);
+							ctx.lineTo(projected[b][0], projected[b][1]);
+						}
+						ctx.lineWidth = 1;
+						ctx.strokeStyle = p.color;
+						ctx.stroke();
+					}
+					break;
+				case "blackhole":
+					if (p.angle !== void 0 && p.dist !== void 0) {
+						p.dist *= p.accretion ?? .93;
+						p.angle += 3 / Math.max(5, p.dist);
+						const px = p.originX + Math.cos(p.angle) * p.dist;
+						const py = p.originY + Math.sin(p.angle) * p.dist;
+						ctx.beginPath();
+						ctx.arc(px, py, p.size, 0, Math.PI * 2);
+						ctx.fillStyle = p.color;
+						ctx.fill();
+						const key = `${p.originX},${p.originY}`;
+						if (!coreKeys.has(key)) {
+							coreKeys.add(key);
+							ctx.save();
+							ctx.globalAlpha = Math.max(0, p.life * .5);
+							ctx.beginPath();
+							ctx.arc(p.originX, p.originY, p.size * 4, 0, Math.PI * 2);
+							ctx.strokeStyle = p.color;
+							ctx.lineWidth = 1;
+							ctx.stroke();
+							ctx.restore();
+						}
+					}
+					break;
+				case "firework":
+					p.vx *= p.friction ?? .96;
+					p.vy *= p.friction ?? .96;
+					p.vy += p.gravity ?? .08;
+					p.x += p.vx;
+					p.y += p.vy;
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, p.size * (.6 + Math.random() * .8), 0, Math.PI * 2);
+					ctx.fillStyle = p.color;
+					ctx.fill();
+					break;
+				case "shatter":
+					if (p.angle !== void 0 && p.dist !== void 0 && p.initialRotation !== void 0 && p.rotationSpeed !== void 0) {
+						const easedProgress = 1 - p.life;
+						const x = p.originX + Math.cos(p.angle) * easedProgress * p.dist;
+						const y = p.originY + Math.sin(p.angle) * easedProgress * p.dist + (p.gravity ?? .6) * easedProgress * easedProgress * p.dist;
+						const rotation = p.initialRotation + p.rotationSpeed * easedProgress * Math.PI * 4;
+						const shardAlpha = p.life < .4 ? p.life / .4 : 1;
+						ctx.save();
+						ctx.globalAlpha = Math.max(0, shardAlpha * p.life);
+						ctx.translate(x, y);
+						ctx.rotate(rotation);
+						ctx.fillStyle = p.color;
+						const s = p.size;
+						ctx.beginPath();
+						ctx.moveTo(0, -s);
+						ctx.lineTo(s, s);
+						ctx.lineTo(-s, s);
+						ctx.closePath();
+						ctx.fill();
+						ctx.restore();
+					}
+					break;
+				case "warp":
+					if (p.angle !== void 0 && p.dist !== void 0) {
+						p.vx *= p.accel ?? 1.1;
+						const oldX = p.originX + Math.cos(p.angle) * p.dist;
+						const oldY = p.originY + Math.sin(p.angle) * p.dist;
+						p.dist += p.vx;
+						const newX = p.originX + Math.cos(p.angle) * p.dist;
+						const newY = p.originY + Math.sin(p.angle) * p.dist;
+						const lineW = Math.min(p.size, p.vx * .15);
+						ctx.beginPath();
+						ctx.moveTo(oldX, oldY);
+						ctx.lineTo(newX, newY);
+						ctx.lineWidth = lineW;
+						ctx.strokeStyle = p.color;
+						ctx.stroke();
+					}
+					break;
+				case "matrix": {
+					const easedProgress = 1 - p.life;
+					const traveled = p.vy * easedProgress * 60;
+					const headY = p.y + traveled;
+					ctx.font = `${p.size}px monospace`;
+					ctx.textAlign = "center";
+					const trail = p.trailLength ?? 8;
+					for (let j = 0; j < trail; j++) {
+						const charY = headY - j * (p.size + 2);
+						const trailAlpha = Math.max(0, (1 - j / trail) * p.life);
+						ctx.save();
+						ctx.fillStyle = p.color;
+						ctx.globalAlpha = Math.max(0, (j === 0 ? trailAlpha : trailAlpha * .6) * p.life);
+						const char = KATA[Math.floor(Math.random() * 55)];
+						ctx.fillText(char, p.x, charY);
+						ctx.restore();
+					}
+					break;
+				}
+				case "smoke":
+					p.x += p.vx;
+					p.y += p.vy;
+					p.size += p.speed ?? .3;
+					ctx.save();
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+					ctx.fillStyle = p.color;
+					ctx.globalAlpha = Math.max(0, p.life * (p.opacity ?? .15));
+					ctx.fill();
+					ctx.restore();
+					break;
+				case "supernova":
+					if (p.subType === "ring") {
+						p.size += p.vx;
+						ctx.beginPath();
+						ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+						ctx.lineWidth = 4 * p.life;
+						ctx.strokeStyle = p.color;
+						ctx.stroke();
+					} else {
+						p.x += p.vx;
+						p.y += p.vy;
+						p.vx *= p.friction ?? .95;
+						p.vy *= p.friction ?? .95;
+						ctx.beginPath();
+						ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+						ctx.fillStyle = p.color;
+						ctx.fill();
+					}
+					break;
+				case "holosphere": {
+					p.rotX = (p.rotX ?? 0) + (p.rotSpeedX ?? .02);
+					p.rotY = (p.rotY ?? 0) + (p.rotSpeedY ?? .03);
+					const maxS = p.vx;
+					const growS = p.vy;
+					if (p.size < maxS) p.size += growS;
+					if (p.pts) for (const [sx, sy, sz] of p.pts) {
+						const py = sy * Math.cos(p.rotX) - sz * Math.sin(p.rotX);
+						const pz1 = sy * Math.sin(p.rotX) + sz * Math.cos(p.rotX);
+						const px = sx * Math.cos(p.rotY) - pz1 * Math.sin(p.rotY);
+						const depth = (sx * Math.sin(p.rotY) + pz1 * Math.cos(p.rotY) + 1) / 2;
+						ctx.save();
+						ctx.fillStyle = p.color;
+						ctx.globalAlpha = Math.max(0, p.life * depth);
+						ctx.fillRect(p.x + px * p.size, p.y + py * p.size, 1.5, 1.5);
+						ctx.restore();
+					}
+					break;
+				}
+				case "flowfield":
+					p.vx += Math.sin(p.y * (p.fieldScale ?? .05)) * (p.fieldStrength ?? .2);
+					p.vy += Math.cos(p.x * (p.fieldScale ?? .05)) * (p.fieldStrength ?? .2);
+					p.x += p.vx;
+					p.y += p.vy;
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+					ctx.fillStyle = p.color;
+					ctx.fill();
+					break;
+				case "synapse": {
+					p.vx *= p.friction ?? .88;
+					p.vy *= p.friction ?? .88;
+					p.x += p.vx;
+					p.y += p.vy;
+					const connectionDist = p.dist ?? 70;
+					ctx.save();
+					ctx.beginPath();
+					const groupNodes = this.particles.filter((other) => other.type === "synapse" && other.groupId === p.groupId && other.id > p.id);
+					for (const other of groupNodes) {
+						const dx = p.x - other.x;
+						const dy = p.y - other.y;
+						if (Math.sqrt(dx * dx + dy * dy) < connectionDist) {
+							ctx.moveTo(p.x, p.y);
+							ctx.lineTo(other.x, other.y);
+						}
+					}
+					ctx.lineWidth = 1;
+					ctx.strokeStyle = p.color;
+					ctx.globalAlpha = Math.max(0, p.life * .4);
+					ctx.stroke();
+					ctx.restore();
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+					ctx.fillStyle = p.color;
+					ctx.fill();
+					break;
+				}
+				case "diffusion": {
+					const easeSpeed = .1;
+					p.x += (p.vx - p.x) * easeSpeed;
+					p.y += (p.vy - p.y) * easeSpeed;
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+					ctx.fillStyle = p.color;
+					ctx.fill();
+					break;
+				}
+				case "rain":
+					if (!p.hit) {
+						p.y += p.vy;
+						const streakHeight = 15;
+						ctx.save();
+						ctx.beginPath();
+						ctx.moveTo(p.x, p.y - streakHeight);
+						ctx.lineTo(p.x, p.y);
+						ctx.lineWidth = 1;
+						ctx.strokeStyle = p.color;
+						ctx.stroke();
+						ctx.restore();
+						if (p.y >= (p.targetY ?? p.y)) {
+							p.hit = true;
+							p.y = p.targetY ?? p.y;
+							p.size = 0;
+						}
+					} else {
+						const rippleSpeed = 1.5;
+						const rippleSquish = .4;
+						p.size += rippleSpeed;
+						const rippleAlpha = Math.max(0, p.life - (1 - p.life) * .5);
+						ctx.save();
+						ctx.beginPath();
+						ctx.ellipse(p.x, p.targetY ?? p.y, p.size, p.size * rippleSquish, 0, 0, Math.PI * 2);
+						ctx.lineWidth = 1;
+						ctx.strokeStyle = p.color;
+						ctx.globalAlpha = Math.max(0, rippleAlpha);
+						ctx.stroke();
+						ctx.restore();
+					}
+					break;
+				case "binary": {
+					const progress = 1 - p.life;
+					const eased = progress * (2 - progress);
+					p.x = p.originX + Math.cos(p.angle ?? 0) * eased * (p.dist ?? 60);
+					p.y = p.originY + Math.sin(p.angle ?? 0) * eased * (p.dist ?? 60) - eased * 18;
+					const alpha = progress < .5 ? 1 : 1 - (progress - .5) * 2;
+					ctx.save();
+					ctx.font = `${p.size}px monospace`;
+					ctx.textAlign = "center";
+					ctx.textBaseline = "middle";
+					ctx.globalAlpha = Math.max(0, alpha);
+					ctx.fillStyle = p.color;
+					ctx.fillText(p.char ?? "1", p.x, p.y);
+					ctx.restore();
+					break;
+				}
+				case "fission": {
+					const alpha = p.life;
+					let splits = 1;
+					let radius = p.size;
+					let spread = 0;
+					const maxSpread = 40;
+					if (p.life > .6) {
+						splits = 1;
+						radius = p.size * 2;
+						spread = 0;
+					} else if (p.life > .3) {
+						splits = 3;
+						radius = p.size;
+						spread = (1 - p.life) * maxSpread;
+					} else {
+						splits = 9;
+						radius = p.size * .5;
+						spread = (1 - p.life) * maxSpread;
+					}
+					const spinAngle = p.life * 5;
+					for (let i = 0; i < splits; i++) {
+						const angle = i * (Math.PI * 2 / splits) + spinAngle;
+						const sx = p.x + (splits > 1 ? Math.cos(angle) * spread : 0);
+						const sy = p.y + (splits > 1 ? Math.sin(angle) * spread : 0);
+						ctx.beginPath();
+						ctx.arc(sx, sy, radius, 0, Math.PI * 2);
+						ctx.fillStyle = p.color;
+						ctx.globalAlpha = alpha;
+						ctx.fill();
+					}
+					break;
+				}
+				case "bullettime": {
+					p.vx *= p.friction ?? .92;
+					p.vy *= p.friction ?? .92;
+					p.x += p.vx;
+					p.y += p.vy;
+					const dx = p.x - p.originX;
+					const dy = p.y - p.originY;
+					if (Math.sqrt(dx * dx + dy * dy) <= (p.dist ?? 80)) {
+						const alpha = p.life;
+						const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+						ctx.save();
+						ctx.strokeStyle = p.color;
+						ctx.lineWidth = p.size * p.life;
+						ctx.lineCap = "round";
+						ctx.globalAlpha = alpha;
+						ctx.beginPath();
+						ctx.moveTo(p.x, p.y);
+						ctx.lineTo(p.x - p.vx / (speed || 1) * speed * 2.5, p.y - p.vy / (speed || 1) * speed * 2.5);
+						ctx.stroke();
+						ctx.restore();
+						if (p.life > .5) {
+							ctx.save();
+							ctx.strokeStyle = p.color;
+							ctx.lineWidth = .5;
+							ctx.globalAlpha = p.life * .3;
+							ctx.beginPath();
+							ctx.arc(p.x, p.y, (1 - p.life) * 30, 0, Math.PI * 2);
+							ctx.stroke();
+							ctx.restore();
+						}
+						ctx.beginPath();
+						ctx.arc(p.x, p.y, p.size * .8, 0, Math.PI * 2);
+						ctx.fillStyle = p.color;
+						ctx.fill();
+					}
+					break;
+				}
+			}
+			ctx.restore();
+			return true;
+		});
+	}
+	cleanup() {
+		if (this.canvas) {
+			window.removeEventListener("resize", this.handleResize);
+			if (this.canvas.parentNode) this.canvas.parentNode.removeChild(this.canvas);
+			this.canvas = null;
+			this.ctx = null;
+			this.particles = [];
+			if (this.animId !== null) {
+				cancelAnimationFrame(this.animId);
+				this.animId = null;
+			}
+			GlobalCanvasManager.instance = null;
+		}
+	}
+};
+function isNeutralColor(color) {
+	if (!color || color === "transparent" || color.includes("rgba(0, 0, 0, 0)")) return true;
+	const normalized = color.trim().toLowerCase();
+	const rgbMatch = normalized.match(/rgba?\((\d+)[\s,]+(\d+)[\s,]+(\d+)/);
+	if (rgbMatch) {
+		const red = parseInt(rgbMatch[1], 10);
+		const green = parseInt(rgbMatch[2], 10);
+		const blue = parseInt(rgbMatch[3], 10);
+		return Math.max(red, green, blue) - Math.min(red, green, blue) < 20;
+	}
+	const oklchMatch = normalized.match(/oklch\(([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+	if (oklchMatch) return parseFloat(oklchMatch[2]) < .04;
+	const hslMatch = normalized.match(/hsla?\(([\d.]+)deg?[,\s]+([\d.]+)%?[,\s]+([\d.]+)%?/) || normalized.match(/hsla?\(([\d.]+)[,\s]+([\d.]+)%?[,\s]+([\d.]+)%?/);
+	if (hslMatch) {
+		const saturationText = hslMatch[2];
+		const saturation = parseFloat(saturationText);
+		return saturationText.includes("%") || saturation > 1 ? saturation < 4 : saturation < .04;
+	}
+	if (normalized.startsWith("#")) {
+		const hex = normalized.slice(1);
+		if (hex.length === 3 || hex.length === 4) {
+			const red = parseInt(hex[0], 16);
+			const green = parseInt(hex[1], 16);
+			const blue = parseInt(hex[2], 16);
+			return Math.max(red, green, blue) - Math.min(red, green, blue) < 2;
+		}
+		if (hex.length === 6 || hex.length === 8) {
+			const red = parseInt(hex.slice(0, 2), 16);
+			const green = parseInt(hex.slice(2, 4), 16);
+			const blue = parseInt(hex.slice(4, 6), 16);
+			return Math.max(red, green, blue) - Math.min(red, green, blue) < 20;
+		}
+	}
+	return false;
+}
+const KineticClick = memo(function KineticClick({ variant = "spark", color = "currentColor", colorFrom = "auto", count, size, duration, trigger = "mousedown", className, style, children, ...props }) {
+	const containerRef = useRef(null);
+	const [manager, setManager] = useState(null);
+	useEffect(() => {
+		const m = GlobalCanvasManager.getInstance();
+		m.retain();
+		setManager(m);
+		return () => m.release();
+	}, []);
+	const handleTrigger = useCallback((e) => {
+		if (!manager) return;
+		const resolveTargetColor = (el) => {
+			if (color && color !== "currentColor") return color;
+			try {
+				const clone = el.cloneNode(false);
+				clone.style.position = "absolute";
+				clone.style.visibility = "hidden";
+				clone.style.pointerEvents = "none";
+				const parent = el.parentNode || document.body;
+				parent.appendChild(clone);
+				const cs = window.getComputedStyle(clone);
+				const textColor = cs.color;
+				const bgColor = cs.backgroundColor;
+				const borderColor = cs.borderColor;
+				parent.removeChild(clone);
+				if (colorFrom === "text") return textColor || "#ffffff";
+				if (colorFrom === "background") return bgColor && bgColor !== "transparent" && !bgColor.includes("rgba(0, 0, 0, 0)") ? bgColor : "#ffffff";
+				if (colorFrom === "border") return borderColor && borderColor !== "transparent" && !borderColor.includes("rgba(0, 0, 0, 0)") ? borderColor : "#ffffff";
+				if (!isNeutralColor(textColor)) return textColor;
+				if (!isNeutralColor(bgColor)) return bgColor;
+				if (!isNeutralColor(borderColor)) return borderColor;
+				return textColor || "#ffffff";
+			} catch {
+				return "#ffffff";
+			}
+		};
+		const computedColor = resolveTargetColor(e.target?.closest?.("button, a, [role='button']") || e.currentTarget);
+		const x = e.clientX;
+		const y = e.clientY;
+		const list = [];
+		const pid = Math.random().toString(36).slice(2, 9);
+		switch (variant) {
+			case "spark": {
+				const pCount = count ?? 20;
+				const pDur = duration ?? 750;
+				const pSize = size ?? 1.5;
+				const decay = 1 / (pDur / 16);
+				for (let i = 0; i < pCount; i++) {
+					const angle = Math.random() * Math.PI * 2;
+					const speed = 2 + Math.random() * 5;
+					list.push({
+						id: `${pid}-${i}`,
+						type: "spark",
+						x,
+						y,
+						originX: x,
+						originY: y,
+						vx: Math.cos(angle) * speed,
+						vy: Math.sin(angle) * speed,
+						size: pSize,
+						life: 1,
+						decay,
+						color: computedColor
+					});
+				}
+				break;
+			}
+			case "ripple": {
+				const rCount = count ?? 3;
+				const rDur = duration ?? 800;
+				const maxRadius = size ?? 40;
+				const decay = 1 / (rDur / 16);
+				for (let i = 0; i < rCount; i++) {
+					const delayOffset = i * 6;
+					list.push({
+						id: `${pid}-${i}`,
+						type: "ripple",
+						x,
+						y,
+						originX: x,
+						originY: y,
+						vx: maxRadius / (rDur / 16),
+						vy: Math.max(.5, 2 - i * .5),
+						size: 0,
+						life: 1,
+						decay,
+						color: computedColor,
+						timer: delayOffset
+					});
+				}
+				break;
+			}
+			case "embers": {
+				const eCount = count ?? 25;
+				const eDur = duration ?? 1200;
+				const pSize = size ?? 2;
+				const decay = 1 / (eDur / 16);
+				for (let i = 0; i < eCount; i++) {
+					const vx = (Math.random() - .5) * 1.5;
+					const vy = -1 - Math.random() * 2;
+					list.push({
+						id: `${pid}-${i}`,
+						type: "embers",
+						x,
+						y,
+						originX: x,
+						originY: y,
+						vx,
+						vy,
+						size: pSize + Math.random() * 1.5,
+						life: 1,
+						decay,
+						color: computedColor,
+						wobble: Math.random() * Math.PI,
+						wobbleSpeed: .05 + Math.random() * .05
+					});
+				}
+				break;
+			}
+			case "quantum": {
+				const qCount = count ?? 10;
+				const qDur = duration ?? 1200;
+				const qSize = size ?? 4;
+				const decay = 1 / (qDur / 16);
+				for (let i = 0; i < qCount; i++) {
+					const spread = 60;
+					const initialX = x + (Math.random() - .5) * spread;
+					const initialY = y + (Math.random() - .5) * spread;
+					list.push({
+						id: `${pid}-${i}`,
+						type: "quantum",
+						x: initialX,
+						y: initialY,
+						originX: x,
+						originY: y,
+						vx: spread,
+						vy: 0,
+						size: qSize,
+						life: 1,
+						decay,
+						color: computedColor,
+						timer: Math.random() * 8,
+						teleportTimer: 10
+					});
+				}
+				break;
+			}
+			case "tesseract": {
+				const tDur = duration ?? 1500;
+				const limitSize = size ?? 30;
+				const decay = 1 / (tDur / 16);
+				list.push({
+					id: `${pid}-0`,
+					type: "tesseract",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: limitSize,
+					vy: limitSize / (tDur / 32),
+					size: 5,
+					life: 1,
+					decay,
+					color: computedColor,
+					rotX: Math.random() * Math.PI,
+					rotY: Math.random() * Math.PI,
+					rotSpeedX: .015,
+					rotSpeedY: .02
+				});
+				break;
+			}
+			case "blackhole": {
+				const bhCount = count ?? 40;
+				const bhDur = duration ?? 1e3;
+				const bhSize = size ?? 2;
+				const decay = 1 / (bhDur / 16);
+				const baseDist = size ? size * 25 : 50;
+				for (let i = 0; i < bhCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "blackhole",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: 0,
+					vy: 0,
+					size: bhSize,
+					life: 1,
+					decay,
+					color: computedColor,
+					angle: Math.random() * Math.PI * 2,
+					dist: baseDist * (.6 + Math.random() * .8),
+					accretion: .93
+				});
+				break;
+			}
+			case "firework": {
+				const fwCount = count ?? 35;
+				const fwDur = duration ?? 1e3;
+				const fwSpeed = size ? size / 2 : 6;
+				const decay = 1 / (fwDur / 16);
+				for (let i = 0; i < fwCount; i++) {
+					const angle = Math.random() * Math.PI * 2;
+					const s = 2 + Math.random() * fwSpeed;
+					list.push({
+						id: `${pid}-${i}`,
+						type: "firework",
+						x,
+						y,
+						originX: x,
+						originY: y,
+						vx: Math.cos(angle) * s,
+						vy: Math.sin(angle) * s,
+						size: 1.5,
+						life: 1,
+						decay,
+						color: computedColor,
+						gravity: .08,
+						friction: .96
+					});
+				}
+				break;
+			}
+			case "shatter": {
+				const shCount = count ?? 12;
+				const shDur = duration ?? 700;
+				const spreadRadius = size ? size * 8 : 80;
+				const decay = 1 / (shDur / 16);
+				for (let i = 0; i < shCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "shatter",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: 0,
+					vy: 0,
+					size: 6 * (.5 + Math.random() * .8),
+					life: 1,
+					decay,
+					color: computedColor,
+					angle: Math.random() * Math.PI * 2,
+					dist: spreadRadius * (.4 + Math.random() * .6),
+					initialRotation: Math.random() * Math.PI * 2,
+					rotationSpeed: (Math.random() - .5) * 2,
+					gravity: .6
+				});
+				break;
+			}
+			case "warp": {
+				const wpCount = count ?? 30;
+				const decay = 1 / ((duration ?? 1e3) / 16);
+				const baseSpeed = 1;
+				for (let i = 0; i < wpCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "warp",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: baseSpeed + Math.random() * baseSpeed,
+					vy: 0,
+					size: size ?? 4,
+					life: 1,
+					decay,
+					color: computedColor,
+					angle: Math.random() * Math.PI * 2,
+					dist: 5,
+					accel: 1.1 + Math.random() * .1
+				});
+				break;
+			}
+			case "matrix": {
+				const mxCount = count ?? 10;
+				const mxDur = duration ?? 1200;
+				const spreadRadius = size ? size * 10 : 120;
+				const decay = 1 / (mxDur / 16);
+				const fallSpeed = 3;
+				for (let i = 0; i < mxCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "matrix",
+					x: x + (Math.random() - .5) * spreadRadius,
+					y: y - Math.random() * 50,
+					originX: x,
+					originY: y,
+					vx: 0,
+					vy: fallSpeed + Math.random() * (fallSpeed * .7),
+					size: 14,
+					life: 1,
+					decay,
+					color: computedColor,
+					trailLength: 8
+				});
+				break;
+			}
+			case "smoke": {
+				const smCount = count ?? 8;
+				const smDur = duration ?? 2500;
+				const spreadX = size ? size : 10;
+				const decay = 1 / (smDur / 16);
+				const driftSpeed = 1;
+				const minRiseSpeed = .5;
+				for (let i = 0; i < smCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "smoke",
+					x: x + (Math.random() - .5) * spreadX,
+					y,
+					originX: x,
+					originY: y,
+					vx: (Math.random() - .5) * driftSpeed,
+					vy: -(minRiseSpeed + Math.random() * 1),
+					size: 5 + Math.random() * 10,
+					life: 1,
+					decay,
+					color: computedColor,
+					speed: .3,
+					opacity: .15
+				});
+				break;
+			}
+			case "supernova": {
+				const snDur = duration ?? 1e3;
+				const snDotCount = count ?? 30;
+				const dotSize = size ?? 1.5;
+				const ringSpeed = size ? size / 10 : 4;
+				const decay = 1 / (snDur / 16);
+				list.push({
+					id: `${pid}-ring`,
+					type: "supernova",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: ringSpeed,
+					vy: 0,
+					size: 0,
+					life: 1,
+					decay,
+					color: computedColor,
+					subType: "ring"
+				});
+				for (let i = 0; i < snDotCount; i++) {
+					const angle = Math.random() * Math.PI * 2;
+					const s = 2 + Math.random() * 6;
+					list.push({
+						id: `${pid}-dot-${i}`,
+						type: "supernova",
+						x,
+						y,
+						originX: x,
+						originY: y,
+						vx: Math.cos(angle) * s,
+						vy: Math.sin(angle) * s,
+						size: dotSize,
+						life: 1,
+						decay,
+						color: computedColor,
+						subType: "dot",
+						friction: .95
+					});
+				}
+				break;
+			}
+			case "holosphere": {
+				const hsDur = duration ?? 2e3;
+				const hsCount = count ?? 40;
+				const maxSize = size ? size * 4 : 40;
+				const growSpeed = 2;
+				const decay = 1 / (hsDur / 16);
+				const pts = Array.from({ length: hsCount }, () => {
+					const theta = Math.random() * Math.PI * 2;
+					const phi = Math.acos(2 * Math.random() - 1);
+					return [
+						Math.cos(theta) * Math.sin(phi),
+						Math.cos(phi),
+						Math.sin(theta) * Math.sin(phi)
+					];
+				});
+				list.push({
+					id: `${pid}-0`,
+					type: "holosphere",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: maxSize,
+					vy: growSpeed,
+					size: 0,
+					life: 1,
+					decay,
+					color: computedColor,
+					pts,
+					rotX: 0,
+					rotY: 0,
+					rotSpeedX: .02,
+					rotSpeedY: .03
+				});
+				break;
+			}
+			case "flowfield": {
+				const ffDur = duration ?? 2e3;
+				const ffCount = count ?? 40;
+				const decay = 1 / (ffDur / 16);
+				const initialSpeed = 4;
+				const fieldStrength = .2;
+				const fieldScale = .05;
+				const dotRadius = size ?? 1.5;
+				for (let i = 0; i < ffCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "flowfield",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: (Math.random() - .5) * initialSpeed,
+					vy: (Math.random() - .5) * initialSpeed,
+					size: dotRadius,
+					life: 1,
+					decay,
+					color: computedColor,
+					fieldScale,
+					fieldStrength
+				});
+				break;
+			}
+			case "synapse": {
+				const syDur = duration ?? 1500;
+				const syCount = count ?? 10;
+				const decay = 1 / (syDur / 16);
+				const burstSpeed = 8;
+				const friction = .88;
+				const connectionDist = size ? size * 7 : 70;
+				for (let i = 0; i < syCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "synapse",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: (Math.random() - .5) * burstSpeed,
+					vy: (Math.random() - .5) * burstSpeed,
+					size: 2,
+					life: 1,
+					decay,
+					color: computedColor,
+					friction,
+					dist: connectionDist,
+					groupId: pid
+				});
+				break;
+			}
+			case "diffusion": {
+				const dfDur = duration ?? 1e3;
+				const dfCount = count ?? 30;
+				const radius = size ? size * 2.5 : 25;
+				const decay = 1 / (dfDur / 16);
+				for (let i = 0; i < dfCount; i++) {
+					const angle = i / dfCount * Math.PI * 2;
+					list.push({
+						id: `${pid}-${i}`,
+						type: "diffusion",
+						x: x + (Math.random() - .5) * 100,
+						y: y + (Math.random() - .5) * 100,
+						originX: x,
+						originY: y,
+						vx: x + Math.cos(angle) * radius,
+						vy: y + Math.sin(angle) * radius,
+						size: 1.5,
+						life: 1,
+						decay,
+						color: computedColor
+					});
+				}
+				break;
+			}
+			case "rain": {
+				const rnDur = duration ?? 2e3;
+				const rnCount = count ?? 15;
+				const decay = 1 / (rnDur / 16);
+				const fallSpeed = 5;
+				const maxExtraSpeed = 3;
+				const spreadX = size ? size * 12 : 120;
+				for (let i = 0; i < rnCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "rain",
+					x: x + (Math.random() - .5) * spreadX,
+					y: y - 80 - Math.random() * 50,
+					originX: x,
+					originY: y,
+					vx: 0,
+					vy: fallSpeed + Math.random() * maxExtraSpeed,
+					size: 0,
+					life: 1,
+					decay,
+					color: computedColor,
+					targetY: y + (Math.random() - .5) * 40,
+					hit: false
+				});
+				break;
+			}
+			case "binary": {
+				const biDur = duration ?? 1e3;
+				const biCount = count ?? 10;
+				const spreadRadius = size ? size * 6 : 60;
+				const decay = 1 / (biDur / 16);
+				const chars = ["0", "1"];
+				for (let i = 0; i < biCount; i++) list.push({
+					id: `${pid}-${i}`,
+					type: "binary",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: 0,
+					vy: 0,
+					size: size ?? 12,
+					life: 1,
+					decay,
+					color: computedColor,
+					char: chars[Math.floor(Math.random() * chars.length)],
+					angle: Math.random() * Math.PI * 2,
+					dist: spreadRadius * (.4 + Math.random() * .6)
+				});
+				break;
+			}
+			case "fission": {
+				const decay = 1 / ((duration ?? 1500) / 16);
+				const radius = size ?? 4;
+				list.push({
+					id: `${pid}-0`,
+					type: "fission",
+					x,
+					y,
+					originX: x,
+					originY: y,
+					vx: 0,
+					vy: 0,
+					size: radius,
+					life: 1,
+					decay,
+					color: computedColor
+				});
+				break;
+			}
+			case "bullettime": {
+				const btDur = duration ?? 1e3;
+				const btCount = count ?? 15;
+				const decay = 1 / (btDur / 16);
+				const speedMin = 8;
+				const friction = .92;
+				const maxRadius = size ? size * 8 : 80;
+				for (let i = 0; i < btCount; i++) {
+					const angle = Math.random() * Math.PI * 2;
+					const speed = speedMin + Math.random() * 6;
+					list.push({
+						id: `${pid}-${i}`,
+						type: "bullettime",
+						x,
+						y,
+						originX: x,
+						originY: y,
+						vx: Math.cos(angle) * speed,
+						vy: Math.sin(angle) * speed,
+						size: 1.5 + Math.random() * 1.5,
+						life: 1,
+						decay,
+						color: computedColor,
+						friction,
+						dist: maxRadius,
+						angle
+					});
+				}
+				break;
+			}
+		}
+		if (list.length > 0) manager.addParticles(list);
+	}, [
+		manager,
+		variant,
+		count,
+		size,
+		duration,
+		color,
+		colorFrom
+	]);
+	const triggerHandlers = { [trigger === "mousedown" ? "onMouseDown" : "onClick"]: handleTrigger };
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		style: {
+			display: "contents",
+			...style
+		},
+		className: cn(className),
+		"data-slot": "kinetic-click",
+		...triggerHandlers,
+		...props,
+		children
+	});
+});
+//#endregion
+export { KineticClick };