@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-goal-progress/index.es.js

@@ -0,0 +1,473 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Calendar as n, ChevronRight as r, Clock as i, Flag as a, Minus as o, Target as s, TrendingDown as c, TrendingUp as l, Zap as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-goal-progress/index.tsx
+var p = {
+	default: {
+		gradient: "from-blue-500 to-cyan-500",
+		bgGradient: "from-blue-500/20 to-cyan-500/20",
+		text: "text-blue-600",
+		glow: "#3b82f6",
+		border: "border-blue-500/30",
+		fill: "#3b82f6"
+	},
+	success: {
+		gradient: "from-green-500 to-emerald-500",
+		bgGradient: "from-green-500/20 to-emerald-500/20",
+		text: "text-green-600",
+		glow: "#22c55e",
+		border: "border-green-500/30",
+		fill: "#22c55e"
+	},
+	warning: {
+		gradient: "from-yellow-500 to-orange-500",
+		bgGradient: "from-yellow-500/20 to-orange-500/20",
+		text: "text-yellow-600",
+		glow: "#f59e0b",
+		border: "border-yellow-500/30",
+		fill: "#f59e0b"
+	},
+	danger: {
+		gradient: "from-red-500 to-rose-500",
+		bgGradient: "from-red-500/20 to-rose-500/20",
+		text: "text-red-600",
+		glow: "#ef4444",
+		border: "border-red-500/30",
+		fill: "#ef4444"
+	},
+	purple: {
+		gradient: "from-purple-500 to-pink-500",
+		bgGradient: "from-purple-500/20 to-pink-500/20",
+		text: "text-purple-600",
+		glow: "#a855f7",
+		border: "border-purple-500/30",
+		fill: "#a855f7"
+	},
+	blue: {
+		gradient: "from-indigo-500 to-blue-600",
+		bgGradient: "from-indigo-500/20 to-blue-600/20",
+		text: "text-indigo-600",
+		glow: "#6366f1",
+		border: "border-indigo-500/30",
+		fill: "#6366f1"
+	}
+}, m = {
+	ahead: {
+		color: "text-green-600",
+		bgColor: "bg-green-100",
+		icon: l,
+		label: "Ahead of schedule"
+	},
+	"on-track": {
+		color: "text-blue-600",
+		bgColor: "bg-blue-100",
+		icon: o,
+		label: "On track"
+	},
+	behind: {
+		color: "text-red-600",
+		bgColor: "bg-red-100",
+		icon: c,
+		label: "Behind schedule"
+	}
+}, h = {
+	sm: {
+		container: "gap-2",
+		bar: "h-2",
+		text: "text-xs",
+		title: "text-sm",
+		icon: "h-3.5 w-3.5",
+		milestone: "h-3 w-3",
+		trendHeight: 40
+	},
+	default: {
+		container: "gap-3",
+		bar: "h-3",
+		text: "text-sm",
+		title: "text-base",
+		icon: "h-4 w-4",
+		milestone: "h-4 w-4",
+		trendHeight: 60
+	},
+	lg: {
+		container: "gap-4",
+		bar: "h-4",
+		text: "text-base",
+		title: "text-lg",
+		icon: "h-5 w-5",
+		milestone: "h-5 w-5",
+		trendHeight: 80
+	}
+};
+function g(e, t = "custom", n, r = "suffix") {
+	let i;
+	return t === "revenue" ? (i = e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toFixed(0), n ? r === "prefix" ? `${n}${i}` : `${i}${n}` : `$${i}`) : t === "users" || t === "sales" ? (i = e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toFixed(0), n ? r === "prefix" ? `${n}${i}` : `${i} ${n}` : i) : t === "engagement" ? (i = `${e.toFixed(1)}%`, i) : (i = e.toLocaleString(), n ? r === "prefix" ? `${n}${i}` : `${i} ${n}` : i);
+}
+function _(e) {
+	let t = /* @__PURE__ */ new Date(), n = e.getTime() - t.getTime();
+	return Math.ceil(n / (1e3 * 60 * 60 * 24));
+}
+function v(e) {
+	let t = _(e);
+	if (t < 0) return "Overdue";
+	if (t === 0) return "Due today";
+	if (t === 1) return "1 day left";
+	if (t < 7) return `${t} days left`;
+	if (t < 30) {
+		let e = Math.floor(t / 7);
+		return e === 1 ? "1 week left" : `${e} weeks left`;
+	}
+	if (t < 365) {
+		let e = Math.floor(t / 30);
+		return e === 1 ? "1 month left" : `${e} months left`;
+	}
+	let n = Math.floor(t / 365);
+	return n === 1 ? "1 year left" : `${n} years left`;
+}
+function y({ currentValue: e, targetValue: n, startValue: r = 0, startDate: i, endDate: a, historicalData: o = [] }) {
+	let s = t.useMemo(() => {
+		let t = n - r;
+		if (t <= 0) return 100;
+		let i = (e - r) / t * 100;
+		return Math.min(100, Math.max(0, i));
+	}, [
+		e,
+		n,
+		r
+	]), c = t.useMemo(() => Math.max(0, n - e), [n, e]), l = e >= n, u = t.useMemo(() => a ? _(a) : null, [a]), d = t.useMemo(() => a ? v(a) : null, [a]), f = t.useMemo(() => {
+		if (o.length < 2) return null;
+		let e = [...o].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), t = e[0], n = e[e.length - 1], r = Math.max(1, (new Date(n.date).getTime() - new Date(t.date).getTime()) / (1e3 * 60 * 60 * 24));
+		return (n.value - t.value) / r;
+	}, [o]), p = t.useMemo(() => u === null || u <= 0 ? null : c / u, [c, u]);
+	return {
+		progressPercent: s,
+		remainingValue: c,
+		paceStatus: t.useMemo(() => {
+			if (!i || !a) return s >= 100 ? "ahead" : "on-track";
+			let e = /* @__PURE__ */ new Date(), t = a.getTime() - i.getTime(), n = (e.getTime() - i.getTime()) / t * 100;
+			return s >= n + 10 ? "ahead" : s <= n - 10 ? "behind" : "on-track";
+		}, [
+			i,
+			a,
+			s
+		]),
+		projectedCompletionDate: t.useMemo(() => {
+			if (!f || f <= 0 || l) return null;
+			let e = c / f, t = /* @__PURE__ */ new Date();
+			return t.setDate(t.getDate() + Math.ceil(e)), t;
+		}, [
+			f,
+			c,
+			l
+		]),
+		daysRemaining: u,
+		timeRemainingFormatted: d,
+		isCompleted: l,
+		requiredDailyRate: p,
+		currentDailyRate: f,
+		trendDirection: t.useMemo(() => {
+			if (o.length < 2) return "stable";
+			let e = o.slice(-5);
+			if (e.length < 2) return "stable";
+			let t = e[0].value, n = (e[e.length - 1].value - t) / t * 100;
+			return n > 5 ? "up" : n < -5 ? "down" : "stable";
+		}, [o])
+	};
+}
+function b({ data: e, targetValue: n, height: r, color: i, animated: a = !0 }) {
+	let [o, s] = t.useState(0), c = t.useRef(null);
+	if (t.useEffect(() => {
+		c.current && s(c.current.getTotalLength());
+	}, [e]), e.length < 2) return null;
+	let l = [...e].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), u = Math.max(n, ...l.map((e) => e.value)), p = Math.min(0, ...l.map((e) => e.value)), m = u - p, h = l.map((e, t) => ({
+		x: t / (l.length - 1) * 100,
+		y: r - (e.value - p) / m * r
+	})), g = h.map((e, t) => {
+		if (t === 0) return `M ${e.x} ${e.y}`;
+		let n = h[t - 1], r = n.x + (e.x - n.x) / 3, i = n.x + (e.x - n.x) * 2 / 3;
+		return `C ${r} ${n.y}, ${i} ${e.y}, ${e.x} ${e.y}`;
+	}).join(" "), _ = r - (n - p) / m * r;
+	return /* @__PURE__ */ f("svg", {
+		className: "w-full overflow-visible",
+		viewBox: `0 0 100 ${r}`,
+		preserveAspectRatio: "none",
+		children: [
+			/* @__PURE__ */ d("line", {
+				x1: "0",
+				y1: _,
+				x2: "100",
+				y2: _,
+				stroke: "currentColor",
+				strokeOpacity: "0.2",
+				strokeDasharray: "2 2",
+				className: "text-muted-foreground"
+			}),
+			/* @__PURE__ */ d("defs", { children: /* @__PURE__ */ f("linearGradient", {
+				id: "trendGradient",
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ d("stop", {
+					offset: "0%",
+					stopColor: i,
+					stopOpacity: "0.3"
+				}), /* @__PURE__ */ d("stop", {
+					offset: "100%",
+					stopColor: i,
+					stopOpacity: "0"
+				})]
+			}) }),
+			/* @__PURE__ */ d("path", {
+				d: `${g} L 100 ${r} L 0 ${r} Z`,
+				fill: "url(#trendGradient)"
+			}),
+			/* @__PURE__ */ d("path", {
+				ref: c,
+				d: g,
+				fill: "none",
+				stroke: i,
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				className: a ? "animate-trend-line" : "",
+				style: a && o ? {
+					strokeDasharray: o,
+					strokeDashoffset: o,
+					animationDuration: "1.5s"
+				} : {}
+			}),
+			h.map((e, t) => /* @__PURE__ */ d("circle", {
+				cx: e.x,
+				cy: e.y,
+				r: "2.5",
+				fill: i,
+				className: a ? "animate-trend-dot" : "",
+				style: a ? { animationDelay: `${t * .1 + .5}s` } : {}
+			}, t)),
+			/* @__PURE__ */ d("text", {
+				x: "100",
+				y: _ - 4,
+				textAnchor: "end",
+				className: "fill-muted-foreground text-[6px]",
+				children: "Target"
+			}),
+			/* @__PURE__ */ d("style", { children: "\n        @keyframes trend-line {\n          to {\n            stroke-dashoffset: 0;\n          }\n        }\n        .animate-trend-line {\n          animation: trend-line 1.5s ease-out forwards;\n        }\n        @keyframes trend-dot {\n          0% { opacity: 0; transform: scale(0); }\n          100% { opacity: 1; transform: scale(1); }\n        }\n        .animate-trend-dot {\n          opacity: 0;\n          animation: trend-dot 0.3s ease-out forwards;\n        }\n      " })
+		]
+	});
+}
+function x({ status: t, size: n }) {
+	let r = m[t], i = h[n], a = r.icon;
+	return /* @__PURE__ */ f("div", {
+		className: e("inline-flex items-center gap-1 rounded-full px-2 py-0.5", r.bgColor),
+		children: [/* @__PURE__ */ d(a, { className: e(i.icon, r.color) }), /* @__PURE__ */ d("span", {
+			className: e(i.text, r.color, "font-medium"),
+			children: r.label
+		})]
+	});
+}
+function S({ milestone: t, position: n, reached: r, size: i, color: o }) {
+	let s = h[i];
+	return /* @__PURE__ */ d("div", {
+		className: "absolute top-1/2 -translate-y-1/2 z-10",
+		style: { left: `${n}%` },
+		children: /* @__PURE__ */ f("div", {
+			className: "group relative",
+			children: [/* @__PURE__ */ d("div", {
+				className: e("flex items-center justify-center rounded-full border-2 border-background transition-all duration-300", s.milestone, r ? "text-white" : "bg-muted text-muted-foreground"),
+				style: r ? { backgroundColor: o } : {},
+				children: t.icon || /* @__PURE__ */ d(a, { className: "h-2 w-2" })
+			}), t.label && /* @__PURE__ */ d("div", {
+				className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-20",
+				children: /* @__PURE__ */ d("div", {
+					className: "whitespace-nowrap rounded bg-popover px-2 py-1 text-xs shadow-lg border",
+					children: t.label
+				})
+			})]
+		})
+	});
+}
+function C({ currentValue: a, targetValue: o, startValue: c = 0, goalType: l = "custom", unit: m, unitPosition: _ = "suffix", title: v, description: C, startDate: w, endDate: T, milestones: E = [], historicalData: D = [], showTrendLine: O = !1, paceStatus: k, projection: A, showTimeRemaining: j = !0, showPercentage: M = !0, showValues: N = !0, animated: P = !0, size: F = "default", theme: I = "default", className: L, onGoalReached: R }) {
+	let [z, B] = t.useState(0), [V, H] = t.useState(!1), U = t.useRef(a), W = p[I], G = h[F], { progressPercent: K, remainingValue: q, paceStatus: J, projectedCompletionDate: Y, timeRemainingFormatted: X, isCompleted: Z } = y({
+		currentValue: a,
+		targetValue: o,
+		startValue: c,
+		startDate: w,
+		endDate: T,
+		historicalData: D
+	}), Q = k ?? J;
+	t.useEffect(() => {
+		if (!P) {
+			B(K);
+			return;
+		}
+		let e = z, t = K - e, n = Date.now(), r = () => {
+			let i = Date.now() - n, a = Math.min(i / 1e3, 1), o = 1 - (1 - a) ** 3;
+			B(e + t * o), a < 1 && requestAnimationFrame(r);
+		};
+		requestAnimationFrame(r);
+	}, [K, P]), t.useEffect(() => {
+		Z && !V && a > U.current && (H(!0), R?.()), U.current = a;
+	}, [
+		Z,
+		V,
+		a,
+		R
+	]);
+	let $ = A ?? { completionDate: Y ?? void 0 };
+	return /* @__PURE__ */ f("div", {
+		className: e("relative", L),
+		children: [
+			(v || M) && /* @__PURE__ */ f("div", {
+				className: "flex items-start justify-between mb-2",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex-1",
+					children: [v && /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ d(s, { className: e(G.icon, W.text) }), /* @__PURE__ */ d("h3", {
+							className: e("font-semibold", G.title),
+							children: v
+						})]
+					}), C && /* @__PURE__ */ d("p", {
+						className: e("text-muted-foreground mt-0.5", G.text),
+						children: C
+					})]
+				}), M && /* @__PURE__ */ f("div", {
+					className: e("font-bold tabular-nums", G.title, W.text),
+					children: [Math.round(K), "%"]
+				})]
+			}),
+			N && /* @__PURE__ */ f("div", {
+				className: e("flex items-baseline justify-between mb-2", G.text),
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex items-baseline gap-1",
+					children: [
+						/* @__PURE__ */ d("span", {
+							className: "font-semibold tabular-nums",
+							children: g(a, l, m, _)
+						}),
+						/* @__PURE__ */ d("span", {
+							className: "text-muted-foreground",
+							children: "/"
+						}),
+						/* @__PURE__ */ d("span", {
+							className: "text-muted-foreground tabular-nums",
+							children: g(o, l, m, _)
+						})
+					]
+				}), /* @__PURE__ */ f("div", {
+					className: "text-muted-foreground",
+					children: [/* @__PURE__ */ d("span", {
+						className: "tabular-nums",
+						children: g(q, l, m, _)
+					}), " remaining"]
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "relative",
+				children: /* @__PURE__ */ f("div", {
+					className: e("relative w-full overflow-hidden rounded-full bg-muted", G.bar),
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: e("absolute inset-0 rounded-full opacity-30 blur-sm bg-gradient-to-r", W.gradient),
+							style: { width: `${z}%` }
+						}),
+						/* @__PURE__ */ d("div", {
+							className: e("relative h-full rounded-full bg-gradient-to-r transition-all duration-300", W.gradient, P && "animate-progress-glow"),
+							style: {
+								width: `${z}%`,
+								"--glow-color": W.glow
+							},
+							children: P && /* @__PURE__ */ d("div", {
+								className: "absolute inset-0 overflow-hidden rounded-full",
+								children: /* @__PURE__ */ d("div", { className: "absolute inset-0 animate-goal-shine" })
+							})
+						}),
+						E.map((e, t) => {
+							let n = o - c, r = (e.value - c) / n * 100;
+							return r <= 0 || r >= 100 ? null : /* @__PURE__ */ d(S, {
+								milestone: e,
+								position: r,
+								reached: a >= e.value,
+								size: F,
+								color: W.fill
+							}, t);
+						})
+					]
+				})
+			}),
+			O && D.length >= 2 && /* @__PURE__ */ d("div", {
+				className: "mt-4",
+				children: /* @__PURE__ */ d(b, {
+					data: D,
+					targetValue: o,
+					height: G.trendHeight,
+					color: W.fill,
+					animated: P
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				className: e("flex flex-wrap items-center gap-3 mt-3", G.text),
+				children: [
+					/* @__PURE__ */ d(x, {
+						status: Q,
+						size: F
+					}),
+					j && T && X && /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-1 text-muted-foreground",
+						children: [/* @__PURE__ */ d(i, { className: G.icon }), /* @__PURE__ */ d("span", { children: X })]
+					}),
+					$.completionDate && !Z && /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-1 text-muted-foreground",
+						children: [/* @__PURE__ */ d(n, { className: G.icon }), /* @__PURE__ */ f("span", { children: ["Projected: ", $.completionDate.toLocaleDateString()] })]
+					}),
+					$.projectedValue !== void 0 && /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-1 text-muted-foreground",
+						children: [/* @__PURE__ */ d(u, { className: G.icon }), /* @__PURE__ */ f("span", { children: ["Projected: ", g($.projectedValue, l, m, _)] })]
+					}),
+					Z && /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-green-600",
+						children: [/* @__PURE__ */ d(r, { className: G.icon }), /* @__PURE__ */ d("span", {
+							className: "font-medium",
+							children: "Goal Reached!"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ d("style", { children: "\n        @keyframes goal-shine {\n          0% { transform: translateX(-100%); opacity: 0; }\n          50% { opacity: 0.3; }\n          100% { transform: translateX(100%); opacity: 0; }\n        }\n        .animate-goal-shine {\n          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n          animation: goal-shine 2s ease-in-out infinite;\n        }\n        @keyframes progress-glow {\n          0%, 100% { box-shadow: 0 0 8px var(--glow-color, #3b82f6)40; }\n          50% { box-shadow: 0 0 16px var(--glow-color, #3b82f6)60; }\n        }\n        .animate-progress-glow {\n          animation: progress-glow 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+C.displayName = "WakaGoalProgress";
+function w({ currentValue: t, targetValue: n, goalType: r = "custom", unit: i, unitPosition: a = "suffix", theme: o = "default", showPercentage: s = !0, className: c }) {
+	let l = p[o], u = n > 0 ? Math.max(0, Math.min(100, t / n * 100)) : 0;
+	return /* @__PURE__ */ f("div", {
+		className: e("flex items-center gap-2", c),
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex-1",
+			children: /* @__PURE__ */ d("div", {
+				className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ d("div", {
+					className: e("h-full rounded-full bg-gradient-to-r transition-all duration-300", l.gradient),
+					style: { width: `${u}%` }
+				})
+			})
+		}), s && /* @__PURE__ */ f("span", {
+			className: e("text-xs font-medium tabular-nums", l.text),
+			children: [Math.round(u), "%"]
+		})]
+	});
+}
+w.displayName = "WakaCompactGoalProgress";
+function T({ bordered: t = !0, className: n, ...r }) {
+	return /* @__PURE__ */ d("div", {
+		className: e("rounded-lg bg-card p-4", t && "border shadow-sm", n),
+		children: /* @__PURE__ */ d(C, { ...r })
+	});
+}
+T.displayName = "WakaGoalCard";
+//#endregion
+export { w as WakaCompactGoalProgress, T as WakaGoalCard, C as WakaGoalProgress, C as default, y as useGoalProgress };

package/dist/components/waka-haptic-button/index.cjs.js

@@ -0,0 +1,15 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("class-variance-authority"),i=require("react/jsx-runtime"),a=require("@radix-ui/react-slot");var o=(0,r.cva)(`relative inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-xl font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,{variants:{variant:{default:`bg-primary text-primary-foreground shadow-md hover:shadow-lg active:shadow-sm`,secondary:`bg-secondary text-secondary-foreground shadow hover:shadow-md`,destructive:`bg-destructive text-destructive-foreground shadow-md hover:shadow-lg`,outline:`border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground`,ghost:`hover:bg-accent hover:text-accent-foreground`,glass:`bg-white/10 backdrop-blur-md border border-white/20 text-white shadow-lg hover:bg-white/20`,gradient:`bg-gradient-to-r from-primary to-primary/70 text-primary-foreground shadow-lg hover:shadow-xl`,neon:`bg-primary/10 text-primary border-2 border-primary shadow-[0_0_15px_rgba(var(--primary),0.3)] hover:shadow-[0_0_25px_rgba(var(--primary),0.5)]`},size:{sm:`h-9 px-4 text-sm`,default:`h-11 px-6 text-base`,lg:`h-14 px-8 text-lg`,xl:`h-16 px-10 text-xl`,icon:`h-11 w-11`,"icon-sm":`h-9 w-9`,"icon-lg":`h-14 w-14`},rounded:{default:`rounded-xl`,sm:`rounded-lg`,lg:`rounded-2xl`,full:`rounded-full`}},defaultVariants:{variant:`default`,size:`default`,rounded:`default`}});function s(e){typeof window>`u`||!(`vibrate`in navigator)||(Array.isArray(e)?navigator.vibrate(e):navigator.vibrate({light:[10],medium:[20],heavy:[30],success:[10,50,10],warning:[20,50,20],error:[30,50,30,50,30],selection:[5]}[e]??[10]))}function c({x:e,y:t,size:r,color:a,duration:o,onComplete:s}){return n.useEffect(()=>{let e=setTimeout(s,o);return()=>clearTimeout(e)},[o,s]),(0,i.jsx)(`span`,{className:`absolute rounded-full pointer-events-none animate-ripple`,style:{left:e-r/2,top:t-r/2,width:r,height:r,backgroundColor:a,animationDuration:`${o}ms`}})}function l({className:e}){return(0,i.jsxs)(`svg`,{className:t.cn(`animate-spin`,e),width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,children:[(0,i.jsx)(`circle`,{className:`opacity-25`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`3`}),(0,i.jsx)(`path`,{className:`opacity-75`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})]})}var u=n.forwardRef(({className:e,variant:r,size:u,rounded:d,asChild:f=!1,hapticPattern:p=`medium`,hapticEnabled:m=!0,ripple:h=!0,rippleColor:g=`rgba(255, 255, 255, 0.35)`,rippleDuration:_=600,pressScale:v=!0,pressScaleFactor:y=.97,glowOnPress:b=!1,glowColor:x,loading:S=!1,leftIcon:C,rightIcon:w,children:T,onClick:E,onPointerDown:D,disabled:O,...k},A)=>{let j=n.useRef(null),[M,N]=n.useState([]),[P,F]=n.useState(!1),I=n.useRef(0);n.useImperativeHandle(A,()=>j.current);let L=n.useCallback(e=>{if(!(O||S)){if(F(!0),m&&s(p),h&&j.current){let t=j.current.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=Math.max(t.width,t.height)*2,a=I.current++;N(e=>[...e,{id:a,x:n,y:r,size:i}])}D?.(e)}},[O,S,m,p,h,D]),R=n.useCallback(()=>{F(!1)},[]),z=n.useCallback(e=>{O||S||E?.(e)},[O,S,E]),B=n.useCallback(e=>{N(t=>t.filter(t=>t.id!==e))},[]),V=v&&P?{transform:`scale(${y})`}:{},H=b&&P?{boxShadow:`0 0 20px ${x??(r===`destructive`?`rgba(239, 68, 68, 0.5)`:`rgba(var(--primary), 0.5)`)}`}:{};return(0,i.jsxs)(f?a.Slot:`button`,{ref:j,className:t.cn(o({variant:r,size:u,rounded:d,className:e})),style:{...V,...H,transition:`transform 0.1s ease-out, box-shadow 0.2s ease-out`},disabled:O||S,onClick:z,onPointerDown:L,onPointerUp:R,onPointerLeave:R,onPointerCancel:R,...k,children:[M.map(({id:e,x:t,y:n,size:r})=>(0,i.jsx)(c,{x:t,y:n,size:r,color:g,duration:_,onComplete:()=>B(e)},e)),S?(0,i.jsx)(l,{className:`mr-2`}):C?(0,i.jsx)(`span`,{className:`flex-shrink-0`,children:C}):null,(0,i.jsx)(`span`,{className:t.cn(S&&`opacity-0`),children:T}),!S&&w&&(0,i.jsx)(`span`,{className:`flex-shrink-0`,children:w})]})});if(u.displayName=`WakaHapticButton`,typeof document<`u`){let e=`waka-haptic-button-styles`;if(!document.getElementById(e)){let t=document.createElement(`style`);t.id=e,t.textContent=`
+      @keyframes ripple {
+        0% {
+          transform: scale(0);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 0;
+        }
+      }
+      .animate-ripple {
+        animation: ripple ease-out forwards;
+      }
+    `,document.head.appendChild(t)}}var d=n.forwardRef(({icon:e,size:t=`icon`,rounded:n=`full`,...r},a)=>(0,i.jsx)(u,{ref:a,size:t,rounded:n,...r,children:e}));d.displayName=`WakaHapticIconButton`,exports.WakaHapticButton=u,exports.WakaHapticIconButton=d;

package/dist/components/waka-haptic-button/index.d.ts

@@ -29,11 +29,11 @@ export interface WakaHapticButtonProps extends React.ButtonHTMLAttributes<HTMLBu
     /** Icon to show after children */
     rightIcon?: React.ReactNode;
 }
-declare const hapticButtonVariants: (props?: {
-    variant?: "default" | "gradient" | "outline" | "glass" | "destructive" | "secondary" | "ghost" | "neon";
-    size?: "default" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg";
-    rounded?: "default" | "sm" | "lg" | "full";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const hapticButtonVariants: (props?: ({
+    variant?: "default" | "gradient" | "outline" | "glass" | "destructive" | "secondary" | "ghost" | "neon" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    rounded?: "default" | "sm" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * @deprecated Since v3.6 — will be removed in v4.0.
  * Use `WakaFancyButton variant="haptic"` instead (futur, dans `@wakastellar/ui-effects-decorative`).