@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

@@ -0,0 +1,359 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ChevronUp as n, Sparkles as r, Star as i, Zap as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/waka-level-progress/index.tsx
+var c = {
+	default: {
+		gradient: "from-blue-500 to-purple-600",
+		bgGradient: "from-blue-500/20 to-purple-600/20",
+		text: "text-blue-600",
+		glow: "#3b82f6",
+		border: "border-blue-500/30"
+	},
+	gold: {
+		gradient: "from-yellow-400 to-orange-500",
+		bgGradient: "from-yellow-400/20 to-orange-500/20",
+		text: "text-yellow-600",
+		glow: "#f59e0b",
+		border: "border-yellow-500/30"
+	},
+	purple: {
+		gradient: "from-purple-500 to-pink-600",
+		bgGradient: "from-purple-500/20 to-pink-600/20",
+		text: "text-purple-600",
+		glow: "#a855f7",
+		border: "border-purple-500/30"
+	},
+	green: {
+		gradient: "from-green-500 to-emerald-600",
+		bgGradient: "from-green-500/20 to-emerald-600/20",
+		text: "text-green-600",
+		glow: "#22c55e",
+		border: "border-green-500/30"
+	},
+	blue: {
+		gradient: "from-cyan-500 to-blue-600",
+		bgGradient: "from-cyan-500/20 to-blue-600/20",
+		text: "text-cyan-600",
+		glow: "#06b6d4",
+		border: "border-cyan-500/30"
+	}
+};
+function l({ active: e, onComplete: i }) {
+	let [a, c] = t.useState(!1);
+	if (t.useEffect(() => {
+		if (e) {
+			c(!0);
+			let e = setTimeout(() => {
+				c(!1), i?.();
+			}, 3e3);
+			return () => clearTimeout(e);
+		}
+	}, [e, i]), !a) return null;
+	let l = [
+		"#fbbf24",
+		"#f59e0b",
+		"#ef4444",
+		"#8b5cf6",
+		"#06b6d4",
+		"#22c55e"
+	];
+	return /* @__PURE__ */ s("div", {
+		className: "pointer-events-none fixed inset-0 z-50 overflow-hidden",
+		children: [
+			[...Array(60)].map((e, t) => {
+				let n = t / 60 * 360, r = 200 + Math.random() * 300, i = 8 + Math.random() * 12, a = 1 + Math.random() * .5;
+				return /* @__PURE__ */ o("div", {
+					className: "absolute left-1/2 top-1/2 animate-confetti-burst",
+					style: {
+						width: i,
+						height: i,
+						backgroundColor: l[Math.floor(Math.random() * l.length)],
+						borderRadius: Math.random() > .5 ? "50%" : "2px",
+						"--angle": `${n}deg`,
+						"--distance": `${r}px`,
+						animationDuration: `${a}s`,
+						animationDelay: `${Math.random() * .2}s`
+					}
+				}, t);
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-level-up-text",
+				children: /* @__PURE__ */ s("div", {
+					className: "flex items-center gap-2 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 px-8 py-4 text-white shadow-2xl",
+					children: [
+						/* @__PURE__ */ o(n, { className: "h-8 w-8 animate-bounce" }),
+						/* @__PURE__ */ o("span", {
+							className: "text-3xl font-bold",
+							children: "LEVEL UP!"
+						}),
+						/* @__PURE__ */ o(n, { className: "h-8 w-8 animate-bounce" })
+					]
+				})
+			}),
+			[...Array(20)].map((e, t) => /* @__PURE__ */ o(r, {
+				className: "absolute animate-sparkle",
+				style: {
+					left: `${Math.random() * 100}%`,
+					top: `${Math.random() * 100}%`,
+					color: l[Math.floor(Math.random() * l.length)],
+					animationDelay: `${Math.random() * 2}s`,
+					fontSize: `${16 + Math.random() * 16}px`
+				}
+			}, `sparkle-${t}`)),
+			/* @__PURE__ */ o("style", { children: "\n        @keyframes confetti-burst {\n          0% {\n            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);\n            opacity: 1;\n          }\n          100% {\n            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0) rotate(720deg);\n            opacity: 0;\n          }\n        }\n        @keyframes level-up-text {\n          0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }\n          20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }\n          30% { transform: translate(-50%, -50%) scale(1); }\n          70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n          100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }\n        }\n        @keyframes sparkle {\n          0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }\n          50% { transform: scale(1) rotate(180deg); opacity: 1; }\n        }\n        .animate-confetti-burst {\n          animation: confetti-burst 1.5s ease-out forwards;\n        }\n        .animate-level-up-text {\n          animation: level-up-text 2.5s ease-out forwards;\n        }\n        .animate-sparkle {\n          animation: sparkle 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+function u({ level: t, size: n = "default", animated: r = !0, theme: i = "gold", className: a }) {
+	let l = c[i], u = {
+		sm: {
+			container: "h-8 w-8",
+			text: "text-xs",
+			ring: "ring-2"
+		},
+		default: {
+			container: "h-12 w-12",
+			text: "text-lg",
+			ring: "ring-2"
+		},
+		lg: {
+			container: "h-16 w-16",
+			text: "text-2xl",
+			ring: "ring-4"
+		},
+		xl: {
+			container: "h-24 w-24",
+			text: "text-4xl",
+			ring: "ring-4"
+		}
+	}[n];
+	return /* @__PURE__ */ s("div", {
+		className: e("relative flex items-center justify-center rounded-full bg-gradient-to-br font-bold text-white shadow-lg", l.gradient, u.container, u.ring, "ring-white/30", r && "animate-pulse-glow", a),
+		style: r ? { "--glow-color": l.glow } : {},
+		children: [
+			/* @__PURE__ */ o("div", { className: "absolute inset-1 rounded-full bg-black/10" }),
+			/* @__PURE__ */ o("span", {
+				className: e("relative z-10 font-bold", u.text),
+				children: t
+			}),
+			r && /* @__PURE__ */ o("div", {
+				className: "absolute inset-0 overflow-hidden rounded-full",
+				children: /* @__PURE__ */ o("div", { className: "absolute inset-0 animate-shine bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full" })
+			}),
+			/* @__PURE__ */ o("style", { children: "\n        @keyframes pulse-glow {\n          0%, 100% { box-shadow: 0 0 20px var(--glow-color, #f59e0b)40; }\n          50% { box-shadow: 0 0 30px var(--glow-color, #f59e0b)60; }\n        }\n        @keyframes shine {\n          0% { transform: translateX(-100%); }\n          50%, 100% { transform: translateX(100%); }\n        }\n        .animate-pulse-glow {\n          animation: pulse-glow 2s ease-in-out infinite;\n        }\n        .animate-shine {\n          animation: shine 3s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+function d({ currentXp: n, currentLevel: r, xpForNextLevel: d, xpAtCurrentLevel: f = 0, levelLabel: p = "Level", size: m = "default", showXpNumbers: h = !0, showPercentage: g = !1, milestones: _ = [], animate: v = !0, showLevelUpCelebration: y = !0, onLevelUp: b, theme: x = "gold", className: S }) {
+	let [C, w] = t.useState(0), [T, E] = t.useState(!1), D = t.useRef(r), O = c[x], k = n - f, A = d - f, j = Math.min(100, k / A * 100), M = Math.max(0, d - n), N = {
+		sm: {
+			container: "gap-2",
+			bar: "h-2",
+			levelBadge: "sm",
+			text: "text-xs",
+			milestone: "h-3 w-3"
+		},
+		default: {
+			container: "gap-3",
+			bar: "h-3",
+			levelBadge: "default",
+			text: "text-sm",
+			milestone: "h-4 w-4"
+		},
+		lg: {
+			container: "gap-4",
+			bar: "h-4",
+			levelBadge: "lg",
+			text: "text-base",
+			milestone: "h-5 w-5"
+		}
+	}[m];
+	return t.useEffect(() => {
+		if (!v) {
+			w(j);
+			return;
+		}
+		let e = C, t = j - e, n = Date.now(), r = () => {
+			let i = Date.now() - n, a = Math.min(i / 1e3, 1);
+			w(e + t * (1 - (1 - a) ** 3)), a < 1 && requestAnimationFrame(r);
+		};
+		requestAnimationFrame(r);
+	}, [j, v]), t.useEffect(() => {
+		r > D.current && (y && E(!0), b?.(r)), D.current = r;
+	}, [
+		r,
+		y,
+		b
+	]), /* @__PURE__ */ s("div", {
+		className: e("relative", S),
+		children: [
+			/* @__PURE__ */ o(l, {
+				active: T,
+				onComplete: () => E(!1)
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e("flex items-center", N.container),
+				children: [
+					/* @__PURE__ */ o(u, {
+						level: r,
+						size: N.levelBadge,
+						theme: x,
+						animated: v
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ s("div", {
+							className: "mb-1 flex items-center justify-between",
+							children: [/* @__PURE__ */ s("span", {
+								className: e("font-medium", N.text),
+								children: [
+									p,
+									" ",
+									r
+								]
+							}), /* @__PURE__ */ s("div", {
+								className: e("flex items-center gap-2 text-muted-foreground", N.text),
+								children: [h && /* @__PURE__ */ s("span", {
+									className: "flex items-center gap-1",
+									children: [
+										/* @__PURE__ */ o(a, { className: "h-3.5 w-3.5 text-yellow-500" }),
+										/* @__PURE__ */ o("span", {
+											className: "font-medium tabular-nums",
+											children: k.toLocaleString()
+										}),
+										/* @__PURE__ */ o("span", { children: "/" }),
+										/* @__PURE__ */ s("span", {
+											className: "tabular-nums",
+											children: [A.toLocaleString(), " XP"]
+										})
+									]
+								}), g && /* @__PURE__ */ s("span", {
+									className: "font-medium tabular-nums",
+									children: [Math.round(j), "%"]
+								})]
+							})]
+						}), /* @__PURE__ */ s("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ s("div", {
+								className: e("relative w-full overflow-hidden rounded-full bg-muted", N.bar),
+								children: [
+									/* @__PURE__ */ o("div", {
+										className: e("absolute inset-0 rounded-full opacity-30 blur-sm bg-gradient-to-r", O.gradient),
+										style: { width: `${C}%` }
+									}),
+									/* @__PURE__ */ o("div", {
+										className: e("relative h-full rounded-full bg-gradient-to-r transition-all duration-300", O.gradient),
+										style: { width: `${C}%` },
+										children: /* @__PURE__ */ o("div", {
+											className: "absolute inset-0 overflow-hidden rounded-full",
+											children: /* @__PURE__ */ o("div", { className: "absolute inset-0 animate-progress-shine" })
+										})
+									}),
+									_.map((t) => {
+										let n = (t.xpRequired - f) / A * 100;
+										return n <= 0 || n >= 100 ? null : /* @__PURE__ */ o("div", {
+											className: "absolute top-1/2 -translate-y-1/2 z-10",
+											style: { left: `${n}%` },
+											children: /* @__PURE__ */ o("div", {
+												className: e("flex items-center justify-center rounded-full border-2 border-background bg-muted transition-all", N.milestone, j >= n && e("bg-gradient-to-br", O.gradient, "text-white")),
+												children: t.icon || /* @__PURE__ */ o(i, { className: "h-2 w-2" })
+											})
+										}, t.level);
+									})
+								]
+							}), h && /* @__PURE__ */ s("div", {
+								className: e("mt-1 text-muted-foreground text-right", N.text),
+								children: [/* @__PURE__ */ o("span", {
+									className: "tabular-nums",
+									children: M.toLocaleString()
+								}), " XP to next level"]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "flex flex-col items-center opacity-50",
+						children: /* @__PURE__ */ o(u, {
+							level: r + 1,
+							size: N.levelBadge,
+							theme: x,
+							animated: !1
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ o("style", { children: "\n        @keyframes progress-shine {\n          0% { transform: translateX(-100%); opacity: 0; }\n          50% { opacity: 0.3; }\n          100% { transform: translateX(100%); opacity: 0; }\n        }\n        .animate-progress-shine {\n          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n          animation: progress-shine 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+function f({ currentLevel: t, progressPercent: n, theme: r = "gold", className: i }) {
+	let a = c[r];
+	return /* @__PURE__ */ s("div", {
+		className: e("flex items-center gap-2", i),
+		children: [/* @__PURE__ */ o(u, {
+			level: t,
+			size: "sm",
+			theme: r,
+			animated: !1
+		}), /* @__PURE__ */ o("div", {
+			className: "h-1.5 w-20 overflow-hidden rounded-full bg-muted",
+			children: /* @__PURE__ */ o("div", {
+				className: e("h-full rounded-full bg-gradient-to-r transition-all", a.gradient),
+				style: { width: `${n}%` }
+			})
+		})]
+	});
+}
+function p({ initialXp: e = 0, xpPerLevel: n = 1e3, maxLevel: r = 100, onLevelChange: i } = {}) {
+	let [a, o] = t.useState(e);
+	t.useCallback((e) => {
+		if (typeof n == "function") {
+			let t = 0;
+			for (let r = 1; r < e; r++) t += n(r);
+			return t;
+		}
+		return (e - 1) * n;
+	}, [n]);
+	let s = t.useCallback((e) => typeof n == "function" ? n(e) : n, [n]), { level: c, xpAtLevel: l } = t.useCallback((e) => {
+		let t = 1, n = 0;
+		for (; t < r;) {
+			let r = n + s(t);
+			if (e < r) break;
+			n = r, t++;
+		}
+		return {
+			level: t,
+			xpAtLevel: n
+		};
+	}, [r, s])(a), u = l + s(c), d = t.useRef(c);
+	t.useEffect(() => {
+		c !== d.current && (i?.(c, d.current), d.current = c);
+	}, [c, i]);
+	let f = t.useCallback((e) => {
+		o((t) => t + e);
+	}, []), p = t.useCallback((e) => {
+		o(e);
+	}, []), m = t.useCallback(() => {
+		o(0);
+	}, []);
+	return {
+		totalXp: a,
+		currentLevel: c,
+		currentXp: a,
+		xpAtCurrentLevel: l,
+		xpForNextLevel: u,
+		xpInCurrentLevel: a - l,
+		xpNeededForLevel: u - l,
+		xpRemaining: u - a,
+		progressPercent: (a - l) / (u - l) * 100,
+		addXp: f,
+		setXp: p,
+		reset: m,
+		isMaxLevel: c >= r
+	};
+}
+//#endregion
+export { f as WakaCompactLevelProgress, u as WakaLevelBadge, d as WakaLevelProgress, p as useLevelProgress };

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

@@ -0,0 +1,36 @@
+"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 inline-flex items-center justify-center gap-2 overflow-visible whitespace-nowrap 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:``,secondary:``,destructive:``,success:``,gradient:``,neon:``},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`},rounded:{default:`rounded-xl`,sm:`rounded-lg`,lg:`rounded-2xl`,full:`rounded-full`}},defaultVariants:{variant:`default`,size:`default`,rounded:`default`}}),o={default:{bg:`hsl(var(--primary))`,text:`hsl(var(--primary-foreground))`,hover:`hsl(var(--primary) / 0.9)`,glow:`hsl(var(--primary) / 0.4)`},secondary:{bg:`hsl(var(--secondary))`,text:`hsl(var(--secondary-foreground))`,hover:`hsl(var(--secondary) / 0.9)`,glow:`hsl(var(--secondary) / 0.4)`},destructive:{bg:`hsl(var(--destructive))`,text:`hsl(var(--destructive-foreground))`,hover:`hsl(var(--destructive) / 0.9)`,glow:`hsl(var(--destructive) / 0.4)`},success:{bg:`#22c55e`,text:`#ffffff`,hover:`#16a34a`,glow:`rgba(34, 197, 94, 0.4)`},gradient:{bg:`linear-gradient(135deg, hsl(var(--primary)), hsl(280, 80%, 60%))`,text:`#ffffff`,hover:`linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(280, 80%, 55%))`,glow:`hsl(var(--primary) / 0.4)`,gradient:`linear-gradient(135deg, hsl(var(--primary)), hsl(280, 80%, 60%))`},neon:{bg:`transparent`,text:`hsl(var(--primary))`,hover:`hsl(var(--primary) / 0.1)`,glow:`hsl(var(--primary) / 0.6)`}};function s({id:e,intensity:t}){let n=.02+t*.03,r=2+t*6;return(0,i.jsx)(`svg`,{className:`absolute w-0 h-0`,"aria-hidden":`true`,children:(0,i.jsx)(`defs`,{children:(0,i.jsxs)(`filter`,{id:e,x:`-50%`,y:`-50%`,width:`200%`,height:`200%`,children:[(0,i.jsx)(`feTurbulence`,{type:`fractalNoise`,baseFrequency:n,numOctaves:3,result:`noise`,children:(0,i.jsx)(`animate`,{attributeName:`baseFrequency`,dur:`3s`,values:`${n};${n*1.5};${n}`,repeatCount:`indefinite`})}),(0,i.jsx)(`feDisplacementMap`,{in:`SourceGraphic`,in2:`noise`,scale:r,xChannelSelector:`R`,yChannelSelector:`G`,result:`displaced`}),(0,i.jsx)(`feGaussianBlur`,{in:`displaced`,stdDeviation:`0.5`,result:`blurred`}),(0,i.jsx)(`feMerge`,{children:(0,i.jsx)(`feMergeNode`,{in:`blurred`})})]})})})}function c({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`})]})}function l({variant:e,isHovered:t,isPressed:r,blobPoints:a,animationSpeed:s}){let c=o[e],[l,u]=n.useState(``),d=n.useCallback((e=0)=>{let n=a,i=Math.PI*2/n,o=t?8:r?4:6,s=``,c=[];for(let t=0;t<n;t++){let n=t*i+e,r=50+Math.sin(n*3+e*5)*o,a=50+r*Math.cos(n),s=50+r*Math.sin(n);c.push({x:a,y:s})}for(let e=0;e<c.length;e++){let t=c[e],n=c[(e+1)%c.length],r=c[(e-1+c.length)%c.length];e===0&&(s=`M ${t.x} ${t.y}`);let i=t.x+(n.x-r.x)*.2,a=t.y+(n.y-r.y)*.2,o=n.x-(c[(e+2)%c.length].x-t.x)*.2,l=n.y-(c[(e+2)%c.length].y-t.y)*.2;s+=` C ${i} ${a}, ${o} ${l}, ${n.x} ${n.y}`}return s+=` Z`,s},[a,t,r]);n.useEffect(()=>{let e=0,t,n=()=>{e+=s/1e3*.02,u(d(e)),t=requestAnimationFrame(n)};return t=requestAnimationFrame(n),()=>cancelAnimationFrame(t)},[d,s]);let f=e===`gradient`,p=e===`neon`;return(0,i.jsxs)(`svg`,{className:`absolute inset-0 w-full h-full`,viewBox:`0 0 100 100`,preserveAspectRatio:`none`,style:{filter:t?`drop-shadow(0 0 10px ${c.glow})`:void 0,transition:`filter ${s}ms ease-out`},children:[(0,i.jsx)(`defs`,{children:f&&(0,i.jsxs)(`linearGradient`,{id:`liquid-gradient`,x1:`0%`,y1:`0%`,x2:`100%`,y2:`100%`,children:[(0,i.jsx)(`stop`,{offset:`0%`,stopColor:`hsl(var(--primary))`}),(0,i.jsx)(`stop`,{offset:`100%`,stopColor:`hsl(280, 80%, 60%)`})]})}),(0,i.jsx)(`path`,{d:l,fill:f?`url(#liquid-gradient)`:p?`transparent`:c.bg,stroke:p?c.text:`none`,strokeWidth:p?2:0,style:{transform:r?`scale(0.98)`:t?`scale(1.02)`:`scale(1)`,transformOrigin:`center`,transition:`transform ${s/2}ms ease-out`}})]})}var u=0,d=n.forwardRef(({className:e,variant:r=`default`,size:d,rounded:f,children:p,liquidEffect:m=!0,liquidIntensity:h=.5,liquidSpeed:g=1e3,blobPoints:_=8,loading:v=!1,loadingText:y=`Loading...`,leftIcon:b,rightIcon:x,filterId:S,disabled:C,onClick:w,onMouseEnter:T,onMouseLeave:E,onMouseDown:D,onMouseUp:O,...k},A)=>{let[j,M]=n.useState(!1),[N,P]=n.useState(!1),[F]=n.useState(()=>S??`liquid-filter-${++u}`),I=o[r??`default`],L=n.useCallback(e=>{C||v||(M(!0),T?.(e))},[C,v,T]),R=n.useCallback(e=>{M(!1),P(!1),E?.(e)},[E]),z=n.useCallback(e=>{C||v||(P(!0),D?.(e))},[C,v,D]),B=n.useCallback(e=>{P(!1),O?.(e)},[O]),V=n.useCallback(e=>{C||v||w?.(e)},[C,v,w]);return(0,i.jsxs)(i.Fragment,{children:[m&&(0,i.jsx)(s,{id:F,intensity:h}),(0,i.jsxs)(`button`,{ref:A,className:t.cn(a({variant:r,size:d,rounded:f}),`z-10`,e),style:{filter:m&&j?`url(#${F})`:void 0,color:I.text},disabled:C||v,onClick:V,onMouseEnter:L,onMouseLeave:R,onMouseDown:z,onMouseUp:B,...k,children:[(0,i.jsx)(l,{variant:r??`default`,isHovered:j,isPressed:N,blobPoints:_,animationSpeed:g}),(0,i.jsx)(`span`,{className:`relative z-10 flex items-center gap-2`,children:v?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(c,{}),(0,i.jsx)(`span`,{children:y})]}):(0,i.jsxs)(i.Fragment,{children:[b&&(0,i.jsx)(`span`,{className:`flex-shrink-0`,children:b}),(0,i.jsx)(`span`,{children:p}),x&&(0,i.jsx)(`span`,{className:`flex-shrink-0`,children:x})]})})]})]})});if(d.displayName=`WakaLiquidButton`,typeof document<`u`){let e=`waka-liquid-button-styles`;if(!document.getElementById(e)){let t=document.createElement(`style`);t.id=e,t.textContent=`
+      @keyframes liquid-pulse {
+        0%, 100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.02);
+        }
+      }
+
+      @keyframes liquid-loading {
+        0% {
+          transform: rotate(0deg) scale(1);
+        }
+        25% {
+          transform: rotate(90deg) scale(1.05);
+        }
+        50% {
+          transform: rotate(180deg) scale(1);
+        }
+        75% {
+          transform: rotate(270deg) scale(1.05);
+        }
+        100% {
+          transform: rotate(360deg) scale(1);
+        }
+      }
+
+      .animate-liquid-pulse {
+        animation: liquid-pulse 2s ease-in-out infinite;
+      }
+
+      .animate-liquid-loading {
+        animation: liquid-loading 2s ease-in-out infinite;
+      }
+    `,document.head.appendChild(t)}}var f=n.forwardRef((e,t)=>(0,i.jsx)(d,{ref:t,variant:`default`,...e}));f.displayName=`WakaLiquidButtonPrimary`;var p=n.forwardRef((e,t)=>(0,i.jsx)(d,{ref:t,variant:`secondary`,...e}));p.displayName=`WakaLiquidButtonSecondary`;var m=n.forwardRef((e,t)=>(0,i.jsx)(d,{ref:t,variant:`destructive`,...e}));m.displayName=`WakaLiquidButtonDestructive`;var h=n.forwardRef((e,t)=>(0,i.jsx)(d,{ref:t,variant:`success`,...e}));h.displayName=`WakaLiquidButtonSuccess`;var g=n.forwardRef((e,t)=>(0,i.jsx)(d,{ref:t,variant:`gradient`,...e}));g.displayName=`WakaLiquidButtonGradient`;var _=n.forwardRef((e,t)=>(0,i.jsx)(d,{ref:t,variant:`neon`,...e}));_.displayName=`WakaLiquidButtonNeon`,exports.WakaLiquidButton=d,exports.WakaLiquidButtonDestructive=m,exports.WakaLiquidButtonGradient=g,exports.WakaLiquidButtonNeon=_,exports.WakaLiquidButtonPrimary=f,exports.WakaLiquidButtonSecondary=p,exports.WakaLiquidButtonSuccess=h;

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

@@ -24,11 +24,11 @@ export interface WakaLiquidButtonProps extends Omit<React.ButtonHTMLAttributes<H
     /** Unique ID for SVG filter (auto-generated if not provided) */
     filterId?: string;
 }
-declare const liquidButtonVariants: (props?: {
-    variant?: "default" | "gradient" | "destructive" | "secondary" | "success" | "neon";
-    size?: "default" | "sm" | "lg" | "xl";
-    rounded?: "default" | "sm" | "lg" | "full";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const liquidButtonVariants: (props?: ({
+    variant?: "default" | "gradient" | "destructive" | "secondary" | "success" | "neon" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | 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="liquid"` instead (futur, dans `@wakastellar/ui-effects-decorative`).