@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-streak-counter/index.es.js

@@ -0,0 +1,196 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Flame as n, Star as r, Trophy as i, Zap as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/waka-streak-counter/index.tsx
+function c({ active: e }) {
+	return e ? /* @__PURE__ */ s("div", {
+		className: "pointer-events-none absolute inset-0 overflow-hidden",
+		children: [[...Array(30)].map((e, t) => /* @__PURE__ */ o("div", {
+			className: "absolute animate-confetti",
+			style: {
+				left: `${Math.random() * 100}%`,
+				top: "-10px",
+				animationDelay: `${Math.random() * .5}s`,
+				animationDuration: `${1 + Math.random() * 1}s`
+			},
+			children: /* @__PURE__ */ o("div", {
+				className: "h-2 w-2 rounded-sm",
+				style: {
+					backgroundColor: [
+						"#ff6b6b",
+						"#ffd93d",
+						"#6bcb77",
+						"#4d96ff",
+						"#9b59b6"
+					][Math.floor(Math.random() * 5)],
+					transform: `rotate(${Math.random() * 360}deg)`
+				}
+			})
+		}, t)), /* @__PURE__ */ o("style", { children: "\n        @keyframes confetti {\n          0% {\n            transform: translateY(0) rotate(0deg);\n            opacity: 1;\n          }\n          100% {\n            transform: translateY(200px) rotate(720deg);\n            opacity: 0;\n          }\n        }\n        .animate-confetti {\n          animation: confetti 2s ease-out forwards;\n        }\n      " })]
+	}) : null;
+}
+function l({ intensity: t }) {
+	let r = Math.min(5, Math.max(1, Math.floor(t / 20) + 1));
+	return /* @__PURE__ */ s("div", {
+		className: "relative h-full w-full",
+		children: [[...Array(r)].map((r, i) => /* @__PURE__ */ o("div", {
+			className: "absolute bottom-0 left-1/2 -translate-x-1/2 animate-flame",
+			style: {
+				animationDelay: `${i * .1}s`,
+				opacity: 1 - i * .15,
+				transform: `translateX(${-50 + (i - 2) * 10}%) scale(${1 - i * .1})`
+			},
+			children: /* @__PURE__ */ o(n, {
+				className: e("text-orange-500", t > 50 && "text-orange-400", t > 100 && "text-yellow-400"),
+				style: { filter: `drop-shadow(0 0 ${4 + t / 20}px ${t > 100 ? "#fbbf24" : "#f97316"})` }
+			})
+		}, i)), /* @__PURE__ */ o("style", { children: "\n        @keyframes flame {\n          0%, 100% { transform: translateX(-50%) scale(1) rotate(-2deg); }\n          25% { transform: translateX(-50%) scale(1.05) rotate(2deg); }\n          50% { transform: translateX(-50%) scale(0.95) rotate(-1deg); }\n          75% { transform: translateX(-50%) scale(1.02) rotate(1deg); }\n        }\n        .animate-flame {\n          animation: flame 0.5s ease-in-out infinite;\n        }\n      " })]
+	});
+}
+function u({ count: n, label: u = "day streak", size: d = "default", variant: f = "flame", animate: p = !0, milestones: m = [
+	7,
+	30,
+	100,
+	365
+], bestStreak: h, className: g, confetti: _ = !0 }) {
+	let [v, y] = t.useState(!1), [b, x] = t.useState(n), [S, C] = t.useState(!1), w = t.useRef(n), T = m.includes(n), E = m.find((e) => e > n), D = E ? (n - (m[m.indexOf(E) - 1] || 0)) / (E - (m[m.indexOf(E) - 1] || 0)) * 100 : 100;
+	t.useEffect(() => {
+		if (!p || n === w.current) {
+			x(n), w.current = n;
+			return;
+		}
+		let e = n - w.current, t = Math.min(Math.abs(e), 20), r = e / t, i = 0;
+		C(!0);
+		let a = setInterval(() => {
+			i++, x(Math.round(w.current + r * i)), i >= t && (clearInterval(a), x(n), C(!1), w.current = n, _ && T && e > 0 && (y(!0), setTimeout(() => y(!1), 2e3)));
+		}, 50);
+		return () => clearInterval(a);
+	}, [
+		n,
+		p,
+		_,
+		T
+	]);
+	let O = {
+		sm: "h-16 px-3",
+		default: "h-24 px-4",
+		lg: "h-32 px-6",
+		xl: "h-40 px-8"
+	}, k = {
+		sm: "h-5 w-5",
+		default: "h-8 w-8",
+		lg: "h-12 w-12",
+		xl: "h-16 w-16"
+	}, A = {
+		sm: "text-2xl",
+		default: "text-4xl",
+		lg: "text-6xl",
+		xl: "text-8xl"
+	}, j = {
+		flame: /* @__PURE__ */ o(l, { intensity: n }),
+		lightning: /* @__PURE__ */ o(a, { className: e(k[d], "text-yellow-400") }),
+		trophy: /* @__PURE__ */ o(i, { className: e(k[d], "text-amber-500") }),
+		star: /* @__PURE__ */ o(r, { className: e(k[d], "text-yellow-400 fill-yellow-400") })
+	};
+	return /* @__PURE__ */ s("div", {
+		className: e("relative", g),
+		children: [
+			/* @__PURE__ */ o(c, { active: v }),
+			/* @__PURE__ */ s("div", {
+				className: e("relative flex items-center gap-4 rounded-2xl border bg-gradient-to-r p-4", O[d], {
+					flame: "from-orange-500/20 via-red-500/10 to-yellow-500/20",
+					lightning: "from-yellow-500/20 via-amber-500/10 to-orange-500/20",
+					trophy: "from-amber-500/20 via-yellow-500/10 to-orange-500/20",
+					star: "from-yellow-500/20 via-amber-500/10 to-yellow-500/20"
+				}[f], T && "ring-2 ring-yellow-500/50"),
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: e("relative", k[d]),
+						children: j[f]
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "flex-1",
+						children: [
+							/* @__PURE__ */ s("div", {
+								className: "flex items-baseline gap-2",
+								children: [/* @__PURE__ */ o("span", {
+									className: e("font-bold tabular-nums transition-transform", A[d], S && "scale-110"),
+									children: b
+								}), h && n >= h && /* @__PURE__ */ o("span", {
+									className: "text-xs font-medium text-yellow-500 uppercase",
+									children: "Best!"
+								})]
+							}),
+							/* @__PURE__ */ o("div", {
+								className: "text-sm text-muted-foreground",
+								children: u
+							}),
+							E && /* @__PURE__ */ s("div", {
+								className: "mt-2",
+								children: [/* @__PURE__ */ s("div", {
+									className: "flex items-center justify-between text-xs text-muted-foreground mb-1",
+									children: [/* @__PURE__ */ s("span", { children: [
+										"Next: ",
+										E,
+										" days"
+									] }), /* @__PURE__ */ s("span", { children: [E - n, " to go"] })]
+								}), /* @__PURE__ */ o("div", {
+									className: "h-1.5 w-full rounded-full bg-muted overflow-hidden",
+									children: /* @__PURE__ */ o("div", {
+										className: "h-full rounded-full bg-gradient-to-r from-orange-500 to-yellow-500 transition-all duration-500",
+										style: { width: `${D}%` }
+									})
+								})]
+							})
+						]
+					}),
+					T && /* @__PURE__ */ o("div", {
+						className: "absolute -top-2 -right-2",
+						children: /* @__PURE__ */ o("div", {
+							className: "flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 text-xs font-bold text-white shadow-lg animate-bounce",
+							children: "🎉"
+						})
+					})
+				]
+			}),
+			h && h > n && /* @__PURE__ */ s("div", {
+				className: "mt-2 text-center text-xs text-muted-foreground",
+				children: [
+					"Best streak: ",
+					/* @__PURE__ */ s("span", {
+						className: "font-semibold",
+						children: [h, " days"]
+					}),
+					/* @__PURE__ */ s("span", {
+						className: "ml-1",
+						children: [
+							"(",
+							h - n,
+							" to beat)"
+						]
+					})
+				]
+			})
+		]
+	});
+}
+function d({ count: t, variant: c = "flame", className: l }) {
+	let u = {
+		flame: /* @__PURE__ */ o(n, { className: "h-4 w-4 text-orange-500" }),
+		lightning: /* @__PURE__ */ o(a, { className: "h-4 w-4 text-yellow-400" }),
+		trophy: /* @__PURE__ */ o(i, { className: "h-4 w-4 text-amber-500" }),
+		star: /* @__PURE__ */ o(r, { className: "h-4 w-4 text-yellow-400 fill-yellow-400" })
+	};
+	return /* @__PURE__ */ s("div", {
+		className: e("inline-flex items-center gap-1.5 rounded-full bg-orange-500/10 px-2.5 py-1", l),
+		children: [u[c], /* @__PURE__ */ o("span", {
+			className: "text-sm font-semibold tabular-nums",
+			children: t
+		})]
+	});
+}
+//#endregion
+export { d as WakaMiniStreak, u as WakaStreakCounter };

package/dist/components/waka-success-explosion/index.cjs.js

@@ -0,0 +1,6 @@
+"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("react/jsx-runtime");var i={sm:{container:80,checkmark:32,particleArea:60},md:{container:120,checkmark:48,particleArea:90},lg:{container:180,checkmark:72,particleArea:140},xl:{container:240,checkmark:96,particleArea:200}},a={primary:`hsl(var(--success))`,secondary:`hsl(var(--info))`,accent:`hsl(var(--warning))`};function o(e,t,n){let r=[`circle`,`square`,`triangle`,`star`];return Array.from({length:e},(t,i)=>({id:i,x:0,y:0,angle:Math.PI*2*i/e+(Math.random()-.5)*.5,speed:.5+Math.random()*1.5,size:4+Math.random()*8,color:n[Math.floor(Math.random()*n.length)],rotation:Math.random()*360,rotationSpeed:(Math.random()-.5)*720,shape:r[Math.floor(Math.random()*r.length)]}))}function s({shape:e,size:t,color:n}){switch(e){case`circle`:return(0,r.jsx)(`circle`,{cx:t/2,cy:t/2,r:t/2,fill:n});case`square`:return(0,r.jsx)(`rect`,{width:t,height:t,fill:n});case`triangle`:return(0,r.jsx)(`polygon`,{points:`${t/2},0 ${t},${t} 0,${t}`,fill:n});case`star`:let e=t/2,i=t/4;return(0,r.jsx)(`polygon`,{points:Array.from({length:10},(n,r)=>{let a=r%2==0?e:i,o=r*Math.PI/5-Math.PI/2;return`${t/2+a*Math.cos(o)},${t/2+a*Math.sin(o)}`}).join(` `),fill:n})}}var c=n.forwardRef(({className:e,trigger:c=!1,onComplete:l,particleCount:u=24,duration:d=1e3,size:f=`md`,primaryColor:p=a.primary,secondaryColor:m=a.secondary,accentColor:h=a.accent,showCheckmark:g=!0,checkmarkColor:_=a.primary,autoHide:v=!0,...y},b)=>{let[x,S]=n.useState(!1),[C,w]=n.useState([]),[T,E]=n.useState(0),[D,O]=n.useState(!1),k=n.useRef(null),A=n.useRef(0),j=i[f],M=n.useMemo(()=>[p,m,h],[p,m,h]),N=n.useCallback(()=>{O(!0),S(!0),E(0),w(o(u,j.particleArea,M)),A.current=performance.now()},[u,j.particleArea,M]),P=n.useCallback(()=>{k.current&&cancelAnimationFrame(k.current),S(!1),E(0),w([]),v&&O(!1)},[v]);if(n.useImperativeHandle(b,()=>({explode:N,reset:P}),[N,P]),n.useEffect(()=>{c&&N()},[c,N]),n.useEffect(()=>{if(!x)return;let e=t=>{let n=t-A.current,r=Math.min(n/d,1);E(r),r<1?k.current=requestAnimationFrame(e):(S(!1),l?.(),v&&setTimeout(()=>O(!1),300))};return k.current=requestAnimationFrame(e),()=>{k.current&&cancelAnimationFrame(k.current)}},[x,d,l,v]),!D&&!c)return null;let F=e=>1-(1-e)**3,I=e=>{let t=7.5625,n=2.75;return e<1/n?t*e*e:e<2/n?t*(e-=1.5/n)*e+.75:e<2.5/n?t*(e-=2.25/n)*e+.9375:t*(e-=2.625/n)*e+.984375};return(0,r.jsxs)(`div`,{className:t.cn(`relative inline-flex items-center justify-center`,e),style:{width:j.container,height:j.container,opacity:v&&T===1?0:1,transition:`opacity 0.3s ease-out`},...y,children:[(0,r.jsx)(`svg`,{width:j.container,height:j.container,viewBox:`0 0 ${j.container} ${j.container}`,className:`absolute inset-0 overflow-visible`,"aria-hidden":`true`,focusable:`false`,children:C.map(e=>{let t=F(T),n=e.speed*j.particleArea*t,i=j.container/2+Math.cos(e.angle)*n,a=j.container/2+Math.sin(e.angle)*n,o=1-T,c=1-T*.5,l=e.rotation+e.rotationSpeed*T;return(0,r.jsx)(`g`,{transform:`translate(${i-e.size/2}, ${a-e.size/2}) rotate(${l}, ${e.size/2}, ${e.size/2}) scale(${c})`,style:{opacity:o},children:(0,r.jsx)(s,{shape:e.shape,size:e.size,color:e.color})},e.id)})}),(0,r.jsx)(`div`,{className:`absolute rounded-full`,style:{width:j.container*.8*F(T),height:j.container*.8*F(T),border:`2px solid ${p}`,opacity:Math.max(0,1-T*1.5),transform:`translate(-50%, -50%)`,left:`50%`,top:`50%`}}),g&&(0,r.jsx)(`div`,{className:`absolute flex items-center justify-center`,style:{width:j.checkmark,height:j.checkmark,transform:`scale(${I(Math.min(T*2,1))})`,opacity:+(T>0)},children:(0,r.jsxs)(`svg`,{viewBox:`0 0 52 52`,className:`overflow-visible`,style:{width:j.checkmark,height:j.checkmark},"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsx)(`circle`,{cx:`26`,cy:`26`,r:`25`,fill:`none`,stroke:_,strokeWidth:`2`,style:{strokeDasharray:157,strokeDashoffset:157*(1-Math.min(T*2,1)),transition:`stroke-dashoffset 0.3s ease-out`}}),(0,r.jsx)(`path`,{d:`M14 27l8 8 16-16`,fill:`none`,stroke:_,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`,style:{strokeDasharray:40,strokeDashoffset:T>.3?40*(1-(T-.3)/.7):40,transition:`stroke-dashoffset 0.3s ease-out`}})]})}),(0,r.jsx)(`style`,{dangerouslySetInnerHTML:{__html:`
+              @keyframes waka-success-pulse {
+                0%, 100% { transform: scale(1); }
+                50% { transform: scale(1.05); }
+              }
+            `}})]})});c.displayName=`WakaSuccessExplosion`;function l(e={}){let t=n.useRef(null),[i,a]=n.useState(!1),o=n.useCallback(()=>{a(!0),t.current?.explode()},[]),s=n.useCallback(()=>{a(!1),t.current?.reset()},[]),l=n.useCallback(()=>{a(!1),e.onComplete?.()},[e]);return{ref:t,isExploding:i,explode:o,reset:s,ExplosionComponent:n.useCallback(()=>(0,r.jsx)(c,{ref:t,particleCount:e.particleCount,duration:e.duration,size:e.size,primaryColor:e.primaryColor,secondaryColor:e.secondaryColor,accentColor:e.accentColor,showCheckmark:e.showCheckmark,checkmarkColor:e.checkmarkColor,autoHide:e.autoHide,onComplete:l}),[e,l])}}exports.WakaSuccessExplosion=c,exports.useSuccessExplosion=l;

package/dist/components/waka-success-explosion/index.d.ts

@@ -43,7 +43,7 @@ export interface UseSuccessExplosionOptions {
     onComplete?: () => void;
 }
 export declare function useSuccessExplosion(options?: UseSuccessExplosionOptions): {
-    ref: React.MutableRefObject<WakaSuccessExplosionRef>;
+    ref: React.RefObject<WakaSuccessExplosionRef | null>;
     isExploding: boolean;
     explode: () => void;
     reset: () => void;

package/dist/components/waka-success-explosion/index.es.js

@@ -0,0 +1,243 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/waka-success-explosion/index.tsx
+var i = {
+	sm: {
+		container: 80,
+		checkmark: 32,
+		particleArea: 60
+	},
+	md: {
+		container: 120,
+		checkmark: 48,
+		particleArea: 90
+	},
+	lg: {
+		container: 180,
+		checkmark: 72,
+		particleArea: 140
+	},
+	xl: {
+		container: 240,
+		checkmark: 96,
+		particleArea: 200
+	}
+}, a = {
+	primary: "hsl(var(--success))",
+	secondary: "hsl(var(--info))",
+	accent: "hsl(var(--warning))"
+};
+function o(e, t, n) {
+	let r = [
+		"circle",
+		"square",
+		"triangle",
+		"star"
+	];
+	return Array.from({ length: e }, (t, i) => ({
+		id: i,
+		x: 0,
+		y: 0,
+		angle: Math.PI * 2 * i / e + (Math.random() - .5) * .5,
+		speed: .5 + Math.random() * 1.5,
+		size: 4 + Math.random() * 8,
+		color: n[Math.floor(Math.random() * n.length)],
+		rotation: Math.random() * 360,
+		rotationSpeed: (Math.random() - .5) * 720,
+		shape: r[Math.floor(Math.random() * r.length)]
+	}));
+}
+function s({ shape: e, size: t, color: r }) {
+	switch (e) {
+		case "circle": return /* @__PURE__ */ n("circle", {
+			cx: t / 2,
+			cy: t / 2,
+			r: t / 2,
+			fill: r
+		});
+		case "square": return /* @__PURE__ */ n("rect", {
+			width: t,
+			height: t,
+			fill: r
+		});
+		case "triangle": return /* @__PURE__ */ n("polygon", {
+			points: `${t / 2},0 ${t},${t} 0,${t}`,
+			fill: r
+		});
+		case "star":
+			let e = t / 2, i = t / 4;
+			return /* @__PURE__ */ n("polygon", {
+				points: Array.from({ length: 10 }, (n, r) => {
+					let a = r % 2 == 0 ? e : i, o = r * Math.PI / 5 - Math.PI / 2;
+					return `${t / 2 + a * Math.cos(o)},${t / 2 + a * Math.sin(o)}`;
+				}).join(" "),
+				fill: r
+			});
+	}
+}
+var c = t.forwardRef(({ className: c, trigger: l = !1, onComplete: u, particleCount: d = 24, duration: f = 1e3, size: p = "md", primaryColor: m = a.primary, secondaryColor: h = a.secondary, accentColor: g = a.accent, showCheckmark: _ = !0, checkmarkColor: v = a.primary, autoHide: y = !0, ...b }, x) => {
+	let [S, C] = t.useState(!1), [w, T] = t.useState([]), [E, D] = t.useState(0), [O, k] = t.useState(!1), A = t.useRef(null), j = t.useRef(0), M = i[p], N = t.useMemo(() => [
+		m,
+		h,
+		g
+	], [
+		m,
+		h,
+		g
+	]), P = t.useCallback(() => {
+		k(!0), C(!0), D(0), T(o(d, M.particleArea, N)), j.current = performance.now();
+	}, [
+		d,
+		M.particleArea,
+		N
+	]), F = t.useCallback(() => {
+		A.current && cancelAnimationFrame(A.current), C(!1), D(0), T([]), y && k(!1);
+	}, [y]);
+	if (t.useImperativeHandle(x, () => ({
+		explode: P,
+		reset: F
+	}), [P, F]), t.useEffect(() => {
+		l && P();
+	}, [l, P]), t.useEffect(() => {
+		if (!S) return;
+		let e = (t) => {
+			let n = t - j.current, r = Math.min(n / f, 1);
+			D(r), r < 1 ? A.current = requestAnimationFrame(e) : (C(!1), u?.(), y && setTimeout(() => k(!1), 300));
+		};
+		return A.current = requestAnimationFrame(e), () => {
+			A.current && cancelAnimationFrame(A.current);
+		};
+	}, [
+		S,
+		f,
+		u,
+		y
+	]), !O && !l) return null;
+	let I = (e) => 1 - (1 - e) ** 3, L = (e) => {
+		let t = 7.5625, n = 2.75;
+		return e < 1 / n ? t * e * e : e < 2 / n ? t * (e -= 1.5 / n) * e + .75 : e < 2.5 / n ? t * (e -= 2.25 / n) * e + .9375 : t * (e -= 2.625 / n) * e + .984375;
+	};
+	return /* @__PURE__ */ r("div", {
+		className: e("relative inline-flex items-center justify-center", c),
+		style: {
+			width: M.container,
+			height: M.container,
+			opacity: y && E === 1 ? 0 : 1,
+			transition: "opacity 0.3s ease-out"
+		},
+		...b,
+		children: [
+			/* @__PURE__ */ n("svg", {
+				width: M.container,
+				height: M.container,
+				viewBox: `0 0 ${M.container} ${M.container}`,
+				className: "absolute inset-0 overflow-visible",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: w.map((e) => {
+					let t = I(E), r = e.speed * M.particleArea * t, i = M.container / 2 + Math.cos(e.angle) * r, a = M.container / 2 + Math.sin(e.angle) * r, o = 1 - E, c = 1 - E * .5, l = e.rotation + e.rotationSpeed * E;
+					return /* @__PURE__ */ n("g", {
+						transform: `translate(${i - e.size / 2}, ${a - e.size / 2}) rotate(${l}, ${e.size / 2}, ${e.size / 2}) scale(${c})`,
+						style: { opacity: o },
+						children: /* @__PURE__ */ n(s, {
+							shape: e.shape,
+							size: e.size,
+							color: e.color
+						})
+					}, e.id);
+				})
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "absolute rounded-full",
+				style: {
+					width: M.container * .8 * I(E),
+					height: M.container * .8 * I(E),
+					border: `2px solid ${m}`,
+					opacity: Math.max(0, 1 - E * 1.5),
+					transform: "translate(-50%, -50%)",
+					left: "50%",
+					top: "50%"
+				}
+			}),
+			_ && /* @__PURE__ */ n("div", {
+				className: "absolute flex items-center justify-center",
+				style: {
+					width: M.checkmark,
+					height: M.checkmark,
+					transform: `scale(${L(Math.min(E * 2, 1))})`,
+					opacity: +(E > 0)
+				},
+				children: /* @__PURE__ */ r("svg", {
+					viewBox: "0 0 52 52",
+					className: "overflow-visible",
+					style: {
+						width: M.checkmark,
+						height: M.checkmark
+					},
+					"aria-hidden": "true",
+					focusable: "false",
+					children: [/* @__PURE__ */ n("circle", {
+						cx: "26",
+						cy: "26",
+						r: "25",
+						fill: "none",
+						stroke: v,
+						strokeWidth: "2",
+						style: {
+							strokeDasharray: 157,
+							strokeDashoffset: 157 * (1 - Math.min(E * 2, 1)),
+							transition: "stroke-dashoffset 0.3s ease-out"
+						}
+					}), /* @__PURE__ */ n("path", {
+						d: "M14 27l8 8 16-16",
+						fill: "none",
+						stroke: v,
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						style: {
+							strokeDasharray: 40,
+							strokeDashoffset: E > .3 ? 40 * (1 - (E - .3) / .7) : 40,
+							transition: "stroke-dashoffset 0.3s ease-out"
+						}
+					})]
+				})
+			}),
+			/* @__PURE__ */ n("style", { dangerouslySetInnerHTML: { __html: "\n              @keyframes waka-success-pulse {\n                0%, 100% { transform: scale(1); }\n                50% { transform: scale(1.05); }\n              }\n            " } })
+		]
+	});
+});
+c.displayName = "WakaSuccessExplosion";
+function l(e = {}) {
+	let r = t.useRef(null), [i, a] = t.useState(!1), o = t.useCallback(() => {
+		a(!0), r.current?.explode();
+	}, []), s = t.useCallback(() => {
+		a(!1), r.current?.reset();
+	}, []), l = t.useCallback(() => {
+		a(!1), e.onComplete?.();
+	}, [e]);
+	return {
+		ref: r,
+		isExploding: i,
+		explode: o,
+		reset: s,
+		ExplosionComponent: t.useCallback(() => /* @__PURE__ */ n(c, {
+			ref: r,
+			particleCount: e.particleCount,
+			duration: e.duration,
+			size: e.size,
+			primaryColor: e.primaryColor,
+			secondaryColor: e.secondaryColor,
+			accentColor: e.accentColor,
+			showCheckmark: e.showCheckmark,
+			checkmarkColor: e.checkmarkColor,
+			autoHide: e.autoHide,
+			onComplete: l
+		}), [e, l])
+	};
+}
+//#endregion
+export { c as WakaSuccessExplosion, l as useSuccessExplosion };

package/dist/components/waka-swipe-card/index.cjs.js

@@ -0,0 +1 @@
+"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");var a=(0,r.cva)(`relative touch-none select-none`,{variants:{size:{sm:`w-64 h-80`,default:`w-80 h-96`,lg:`w-96 h-[28rem]`,full:`w-full h-full`}},defaultVariants:{size:`default`}}),o=(0,r.cva)(`absolute inset-0 rounded-2xl bg-card shadow-xl overflow-hidden transition-shadow`,{variants:{variant:{default:`border border-border`,elevated:`shadow-2xl`,glass:`bg-card/80 backdrop-blur-xl border border-white/20`}},defaultVariants:{variant:`default`}}),s=(0,r.cva)(`absolute inset-0 rounded-2xl flex items-center justify-center transition-opacity pointer-events-none`,{variants:{direction:{left:`bg-destructive/20`,right:`bg-green-500/20`,up:`bg-primary/20`,down:`bg-muted/20`}}});function c(e=`light`){typeof window<`u`&&`vibrate`in navigator&&navigator.vibrate({light:10,medium:20,heavy:30}[e])}function l(e,t,n){return Math.min(Math.max(e,t),n)}function u({cards:e,renderCard:r,onSwipe:u,onSwipeStart:d,onSwipeProgress:f,swipeThreshold:p=.3,allowedDirections:m=[`left`,`right`],showOverlay:h=!0,overlayContent:g,stackSize:_=3,stackScale:v=.95,stackOffset:y=8,animationDuration:b=300,hapticFeedback:x=!0,disabled:S=!1,onEmpty:C,className:w,size:T,...E},D){let O=n.useRef(null),[k,A]=n.useState(0),[j,M]=n.useState([]),[N,P]=n.useState(!1),[F,I]=n.useState({x:0,y:0}),[L,R]=n.useState({x:0,y:0}),[z,B]=n.useState(null),[V,H]=n.useState(!1),[U,W]=n.useState(null),G=e[k]??null,K=e.slice(k,k+_),q=n.useCallback(()=>{if(!O.current)return 0;let{width:e,height:t}=O.current.getBoundingClientRect(),n=Math.abs(L.x),r=Math.abs(L.y),i=Math.max(e,t)*.5;return l(Math.max(n,r)/i,0,1)},[L]),J=n.useCallback((e,t)=>{let n=Math.abs(e),r=Math.abs(t);return n<20&&r<20?null:n>r?e>0?`right`:`left`:t>0?`down`:`up`},[]),Y=n.useCallback(e=>{S||V||!G||(P(!0),I({x:e.clientX,y:e.clientY}),R({x:0,y:0}),e.target.setPointerCapture(e.pointerId))},[S,V,G]),X=n.useCallback(e=>{if(!N||S)return;let t=e.clientX-F.x,n=e.clientY-F.y,r=J(t,n);if(r&&!m.includes(r)?R(r===`left`||r===`right`?{x:0,y:n}:{x:t,y:0}):R({x:t,y:n}),r!==z&&(r&&!z&&G&&(d?.(G,r),x&&c(`light`)),B(r)),r&&G){let e=q();f?.(G,r,e)}},[N,S,F,J,m,z,G,d,x,f,q]),Z=n.useCallback(e=>{if(!N)return;e.target.releasePointerCapture(e.pointerId),P(!1);let t=q(),n=z;n&&t>=p&&m.includes(n)&&G?(x&&c(`medium`),H(!0),W(n),setTimeout(()=>{u?.(G,n),M(e=>[...e,{card:G,direction:n}]),A(e=>e+1),H(!1),W(null),R({x:0,y:0}),B(null)},b)):(R({x:0,y:0}),B(null))},[N,q,z,p,m,G,x,u,b]);n.useImperativeHandle(D,()=>({swipe:e=>{!G||V||(x&&c(`medium`),H(!0),W(e),setTimeout(()=>{u?.(G,e),M(t=>[...t,{card:G,direction:e}]),A(e=>e+1),H(!1),W(null)},b))},rewind:()=>{j.length===0||V||(j[j.length-1],M(e=>e.slice(0,-1)),A(e=>e-1),x&&c(`light`))},getCurrentCard:()=>G}),[G,V,x,u,b,j]),n.useEffect(()=>{k>=e.length&&e.length>0&&C?.()},[k,e.length,C]);let Q=e=>{let t=e-k;if(t===0){let e=L.x/20*!!N;if(U){let e=1e3,n={left:{x:-1e3,y:0,rotate:-30},right:{x:e,y:0,rotate:30},up:{x:0,y:-1e3,rotate:0},down:{x:0,y:e,rotate:0}}[U];return{transform:`translate(${n.x}px, ${n.y}px) rotate(${n.rotate}deg)`,transition:`transform ${b}ms ease-out`,zIndex:_-t}}return{transform:`translate(${L.x}px, ${L.y}px) rotate(${e}deg)`,transition:N?`none`:`transform ${b}ms ease-out`,zIndex:_-t,cursor:S?`default`:`grab`}}let n=v**+t,r=y*t,i=N||U?q():0,a=i*(1-v);return{transform:`translateY(${r-i*y}px) scale(${n+a})`,transition:`transform ${b}ms ease-out`,zIndex:_-t,pointerEvents:`none`}},$=e=>z===e?q():0;return K.length===0?(0,i.jsx)(`div`,{ref:O,className:t.cn(a({size:T}),`flex items-center justify-center`,w),...E,children:(0,i.jsxs)(`div`,{className:`text-muted-foreground text-center`,children:[(0,i.jsx)(`p`,{className:`text-lg font-medium`,children:`No more cards`}),(0,i.jsx)(`p`,{className:`text-sm`,children:`Check back later`})]})}):(0,i.jsx)(`div`,{ref:O,className:t.cn(a({size:T}),w),...E,children:K.map((e,n)=>{let a=k+n,c=n===0;return(0,i.jsxs)(`div`,{className:t.cn(o({variant:`default`})),style:Q(a),onPointerDown:c?Y:void 0,onPointerMove:c?X:void 0,onPointerUp:c?Z:void 0,onPointerCancel:c?Z:void 0,children:[r(e,a),c&&h&&(0,i.jsxs)(i.Fragment,{children:[m.includes(`left`)&&(0,i.jsx)(`div`,{className:t.cn(s({direction:`left`})),style:{opacity:$(`left`)},children:g?.left??(0,i.jsx)(`span`,{className:`text-4xl`,children:`✕`})}),m.includes(`right`)&&(0,i.jsx)(`div`,{className:t.cn(s({direction:`right`})),style:{opacity:$(`right`)},children:g?.right??(0,i.jsx)(`span`,{className:`text-4xl`,children:`❤`})}),m.includes(`up`)&&(0,i.jsx)(`div`,{className:t.cn(s({direction:`up`})),style:{opacity:$(`up`)},children:g?.up??(0,i.jsx)(`span`,{className:`text-4xl`,children:`⬆`})}),m.includes(`down`)&&(0,i.jsx)(`div`,{className:t.cn(s({direction:`down`})),style:{opacity:$(`down`)},children:g?.down??(0,i.jsx)(`span`,{className:`text-4xl`,children:`⬇`})})]})]},e.id)})})}var d=n.forwardRef(u),f=(0,r.cva)(`rounded-full flex items-center justify-center transition-all active:scale-95 shadow-lg`,{variants:{size:{sm:`w-10 h-10 text-lg`,default:`w-14 h-14 text-2xl`,lg:`w-18 h-18 text-3xl`},action:{left:`bg-destructive/10 hover:bg-destructive/20 text-destructive border border-destructive/20`,right:`bg-green-500/10 hover:bg-green-500/20 text-green-500 border border-green-500/20`,up:`bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20`,down:`bg-muted hover:bg-muted/80 text-muted-foreground border border-border`,rewind:`bg-amber-500/10 hover:bg-amber-500/20 text-amber-500 border border-amber-500/20`}},defaultVariants:{size:`default`}});function p({swipeCardRef:e,showRewind:n=!0,directions:r=[`left`,`right`],size:a=`default`,className:o,...s}){let c=t=>{e.current?.swipe(t)},l=()=>{e.current?.rewind()},u={left:`✕`,right:`❤`,up:`⬆`,down:`⬇`,rewind:`↶`};return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-center gap-4`,o),...s,children:[n&&(0,i.jsx)(`button`,{type:`button`,className:t.cn(f({size:`sm`,action:`rewind`})),onClick:l,"aria-label":`Rewind last swipe`,children:u.rewind}),r.includes(`left`)&&(0,i.jsx)(`button`,{type:`button`,className:t.cn(f({size:a,action:`left`})),onClick:()=>c(`left`),"aria-label":`Swipe left`,children:u.left}),r.includes(`up`)&&(0,i.jsx)(`button`,{type:`button`,className:t.cn(f({size:a,action:`up`})),onClick:()=>c(`up`),"aria-label":`Swipe up`,children:u.up}),r.includes(`right`)&&(0,i.jsx)(`button`,{type:`button`,className:t.cn(f({size:a,action:`right`})),onClick:()=>c(`right`),"aria-label":`Swipe right`,children:u.right}),r.includes(`down`)&&(0,i.jsx)(`button`,{type:`button`,className:t.cn(f({size:a,action:`down`})),onClick:()=>c(`down`),"aria-label":`Swipe down`,children:u.down})]})}exports.WakaSwipeCard=d,exports.WakaSwipeCardActions=p;

package/dist/components/waka-swipe-card/index.d.ts

@@ -44,9 +44,9 @@ export interface WakaSwipeCardRef {
     rewind: () => void;
     getCurrentCard: () => SwipeCardData | null;
 }
-declare const swipeCardVariants: (props?: {
-    size?: "default" | "sm" | "lg" | "full";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const swipeCardVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const WakaSwipeCard: <T extends SwipeCardData>(props: WakaSwipeCardProps<T> & {
     ref?: React.ForwardedRef<WakaSwipeCardRef>;
 }) => React.ReactElement;