@wakastellar/ui 4.0.0 → 4.1.1

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

@@ -0,0 +1,372 @@
+"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, Zap as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/waka-combo-counter/index.tsx
+var s = {
+	low: {
+		shakeIntensity: 1,
+		glowOpacity: .2,
+		particleCount: 0,
+		pulseSpeed: "2s",
+		showFlames: !1,
+		showSparks: !1,
+		bgGlow: "rgba(251, 146, 60, 0.1)"
+	},
+	medium: {
+		shakeIntensity: 2,
+		glowOpacity: .4,
+		particleCount: 4,
+		pulseSpeed: "1.5s",
+		showFlames: !0,
+		showSparks: !1,
+		bgGlow: "rgba(251, 146, 60, 0.2)"
+	},
+	high: {
+		shakeIntensity: 3,
+		glowOpacity: .6,
+		particleCount: 8,
+		pulseSpeed: "1s",
+		showFlames: !0,
+		showSparks: !0,
+		bgGlow: "rgba(251, 146, 60, 0.3)"
+	},
+	extreme: {
+		shakeIntensity: 5,
+		glowOpacity: .9,
+		particleCount: 16,
+		pulseSpeed: "0.5s",
+		showFlames: !0,
+		showSparks: !0,
+		bgGlow: "rgba(239, 68, 68, 0.4)"
+	}
+}, c = {
+	sm: {
+		container: "h-20 w-32",
+		comboText: "text-3xl",
+		multiplierBadge: "text-xs px-1.5 py-0.5",
+		timerHeight: "h-1",
+		iconSize: "h-4 w-4",
+		padding: "p-2"
+	},
+	md: {
+		container: "h-28 w-44",
+		comboText: "text-5xl",
+		multiplierBadge: "text-sm px-2 py-1",
+		timerHeight: "h-1.5",
+		iconSize: "h-5 w-5",
+		padding: "p-3"
+	},
+	lg: {
+		container: "h-36 w-56",
+		comboText: "text-6xl",
+		multiplierBadge: "text-base px-2.5 py-1",
+		timerHeight: "h-2",
+		iconSize: "h-6 w-6",
+		padding: "p-4"
+	},
+	xl: {
+		container: "h-48 w-72",
+		comboText: "text-8xl",
+		multiplierBadge: "text-lg px-3 py-1.5",
+		timerHeight: "h-2.5",
+		iconSize: "h-8 w-8",
+		padding: "p-6"
+	}
+};
+function l({ intensity: t, active: r }) {
+	let i = s[t];
+	if (!r || !i.showFlames) return null;
+	let o = t === "extreme" ? 7 : t === "high" ? 5 : 3;
+	return /* @__PURE__ */ a("div", {
+		className: "absolute -bottom-1 left-0 right-0 flex justify-center pointer-events-none",
+		children: [...Array(o)].map((r, i) => {
+			let s = (i - Math.floor(o / 2)) * 100 / o, c = i * .08, l = .6 + Math.random() * .4;
+			return /* @__PURE__ */ a("div", {
+				className: "absolute animate-flame",
+				style: {
+					left: `calc(50% + ${s}%)`,
+					animationDelay: `${c}s`,
+					transform: `translateX(-50%) scale(${l})`
+				},
+				children: /* @__PURE__ */ a(n, {
+					className: e("text-orange-500", t === "extreme" && "text-red-500", t === "high" && "text-orange-400"),
+					style: {
+						filter: `drop-shadow(0 0 ${t === "extreme" ? 12 : 8}px ${t === "extreme" ? "#ef4444" : "#f97316"})`,
+						height: t === "extreme" ? 28 : t === "high" ? 24 : 20,
+						width: t === "extreme" ? 28 : t === "high" ? 24 : 20
+					}
+				})
+			}, i);
+		})
+	});
+}
+function u({ intensity: t, active: n }) {
+	let r = s[t];
+	return !n || !r.showSparks ? null : /* @__PURE__ */ a("div", {
+		className: "absolute inset-0 pointer-events-none overflow-hidden",
+		children: [...Array(r.particleCount)].map((n, r) => /* @__PURE__ */ a("div", {
+			className: "absolute animate-spark",
+			style: {
+				left: `${10 + Math.random() * 80}%`,
+				top: `${20 + Math.random() * 60}%`,
+				animationDelay: `${Math.random() * 2}s`,
+				animationDuration: `${.5 + Math.random() * .5}s`
+			},
+			children: /* @__PURE__ */ a(i, {
+				className: e("text-yellow-400", t === "extreme" && "text-yellow-300"),
+				style: {
+					height: 8 + Math.random() * 8,
+					width: 8 + Math.random() * 8,
+					filter: "drop-shadow(0 0 4px #fbbf24)"
+				}
+			})
+		}, r))
+	});
+}
+function d({ intensity: e, active: t }) {
+	return !t || e === "low" ? null : /* @__PURE__ */ o("div", {
+		className: "absolute inset-0 pointer-events-none",
+		children: [/* @__PURE__ */ a("div", {
+			className: "absolute inset-0 rounded-xl animate-energy-ring",
+			style: { background: `linear-gradient(135deg, transparent, ${e === "extreme" ? "rgba(239, 68, 68, 0.3)" : "rgba(251, 146, 60, 0.2)"}, transparent)` }
+		}), e === "extreme" && /* @__PURE__ */ a("div", {
+			className: "absolute inset-0 rounded-xl animate-energy-ring-alt",
+			style: {
+				background: "linear-gradient(225deg, transparent, rgba(239, 68, 68, 0.2), transparent)",
+				animationDelay: "0.5s"
+			}
+		})]
+	});
+}
+function f({ active: e, milestone: t }) {
+	return e ? /* @__PURE__ */ o("div", {
+		className: "absolute inset-0 pointer-events-none overflow-hidden",
+		children: [
+			[...Array(20)].map((e, t) => {
+				let n = t / 20 * 360, i = 80 + Math.random() * 40;
+				return /* @__PURE__ */ a("div", {
+					className: "absolute left-1/2 top-1/2 animate-milestone-burst",
+					style: {
+						"--angle": `${n}deg`,
+						"--distance": `${i}px`,
+						animationDelay: `${Math.random() * .1}s`
+					},
+					children: /* @__PURE__ */ a(r, {
+						className: "h-3 w-3 text-yellow-400 fill-yellow-400",
+						style: { filter: "drop-shadow(0 0 4px #fbbf24)" }
+					})
+				}, t);
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full animate-milestone-badge",
+				children: /* @__PURE__ */ o("div", {
+					className: "bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 text-white px-4 py-2 rounded-full font-bold text-lg shadow-lg",
+					children: [t, " COMBO!"]
+				})
+			}),
+			/* @__PURE__ */ a("div", { className: "absolute inset-0 bg-white/30 animate-flash rounded-xl" })
+		]
+	}) : null;
+}
+function p({ active: e }) {
+	return e ? /* @__PURE__ */ o("div", {
+		className: "absolute inset-0 pointer-events-none overflow-hidden rounded-xl",
+		children: [[...Array(12)].map((e, t) => {
+			let n = t / 12 * 360, r = 20 + Math.random() * 20;
+			return /* @__PURE__ */ a("div", {
+				className: "absolute left-1/2 top-1/2 animate-shatter",
+				style: {
+					"--angle": `${n}deg`,
+					"--distance": `${100 + Math.random() * 50}px`,
+					width: r,
+					height: r,
+					background: "linear-gradient(135deg, #ef4444, #991b1b)",
+					borderRadius: Math.random() > .5 ? "2px" : "50%",
+					animationDelay: `${Math.random() * .1}s`
+				}
+			}, t);
+		}), /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-red-500/40 animate-flash-red rounded-xl" })]
+	}) : null;
+}
+function m({ timeRemaining: t, size: n, intensity: r }) {
+	let i = c[n], o = t < 30, s = t < 15;
+	return /* @__PURE__ */ a("div", {
+		className: e("w-full rounded-full bg-muted overflow-hidden", i.timerHeight),
+		children: /* @__PURE__ */ a("div", {
+			className: e("h-full rounded-full transition-all duration-100", s ? "bg-gradient-to-r from-red-600 to-red-400 animate-pulse-fast" : o ? "bg-gradient-to-r from-orange-500 to-yellow-400" : "bg-gradient-to-r from-green-500 to-emerald-400"),
+			style: {
+				width: `${t}%`,
+				boxShadow: s ? "0 0 10px rgba(239, 68, 68, 0.6)" : o ? "0 0 8px rgba(251, 146, 60, 0.5)" : "0 0 6px rgba(34, 197, 94, 0.4)"
+			}
+		})
+	});
+}
+function h({ multiplier: t, maxMultiplier: n, size: r, animated: i }) {
+	let s = c[r], l = t >= n;
+	return /* @__PURE__ */ o("div", {
+		className: e("absolute -top-2 -right-2 rounded-full font-bold shadow-lg", s.multiplierBadge, l ? "bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white animate-rainbow-pulse" : "bg-gradient-to-r from-orange-500 to-yellow-400 text-white", i && "animate-bounce-subtle"),
+		style: { boxShadow: l ? "0 0 20px rgba(168, 85, 247, 0.6)" : "0 0 12px rgba(251, 146, 60, 0.5)" },
+		children: [
+			"x",
+			t,
+			l && /* @__PURE__ */ a("span", {
+				className: "ml-1 text-yellow-300",
+				children: "MAX"
+			})
+		]
+	});
+}
+function g({ combo: n, multiplier: r = 1, maxMultiplier: i = 10, timeRemaining: g = 100, onComboBreak: _, milestones: v = [
+	10,
+	25,
+	50,
+	100
+], onMilestone: y, size: b = "md", showTimer: x = !0, showMultiplier: S = !0, intensity: C = "medium", animated: w = !0, className: T, onPlayIncrementSound: E, onPlayMilestoneSound: D, onPlayBreakSound: O }) {
+	let [k, A] = t.useState(n), [j, M] = t.useState(!1), [N, P] = t.useState(!1), [F, I] = t.useState(0), [L, R] = t.useState(!1), z = t.useRef(n), B = t.useRef(g), V = t.useRef(/* @__PURE__ */ new Set()), H = c[b], U = s[C], W = t.useMemo(() => C === "low" ? n >= 100 ? "extreme" : n >= 50 ? "high" : n >= 25 ? "medium" : "low" : C, [n, C]);
+	return t.useEffect(() => {
+		let e = z.current;
+		if (n > e && w) {
+			M(!0), E?.();
+			let t = n - e, r = Math.min(t, 10), i = t / r, a = 0, o = setInterval(() => {
+				a++, A(Math.round(e + i * a)), a >= r && (clearInterval(o), A(n));
+			}, 30);
+			setTimeout(() => M(!1), 200);
+			let s = v.find((t) => n >= t && e < t && !V.current.has(t));
+			return s && (V.current.add(s), I(s), P(!0), y?.(s), D?.(), setTimeout(() => P(!1), 1500)), () => clearInterval(o);
+		} else n < e ? (A(n), n === 0 && e > 0 && (R(!0), _?.(), O?.(), V.current.clear(), setTimeout(() => R(!1), 600))) : A(n);
+		z.current = n;
+	}, [
+		n,
+		w,
+		v,
+		y,
+		_,
+		E,
+		D,
+		O
+	]), t.useEffect(() => {
+		let e = B.current;
+		g === 0 && e > 0 && n > 0 && (_?.(), O?.()), B.current = g;
+	}, [
+		g,
+		n,
+		_,
+		O
+	]), /* @__PURE__ */ o("div", {
+		className: e("relative inline-block", T),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: e("relative flex flex-col items-center justify-center rounded-xl border-2 overflow-hidden", H.container, H.padding, w && j && "animate-shake", w && C !== "low" && "animate-pulse-glow"),
+				style: {
+					background: `radial-gradient(ellipse at center, ${U.bgGlow}, transparent)`,
+					borderColor: C === "extreme" ? "#ef4444" : C === "high" ? "#f97316" : "#fbbf24",
+					boxShadow: `0 0 ${C === "extreme" ? 30 : C === "high" ? 20 : 10}px ${U.bgGlow}`
+				},
+				children: [
+					/* @__PURE__ */ a(d, {
+						intensity: W,
+						active: w && n > 0
+					}),
+					/* @__PURE__ */ a(u, {
+						intensity: W,
+						active: w && n > 0
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-1",
+						children: "Combo"
+					}),
+					/* @__PURE__ */ a("div", {
+						className: e("font-black tabular-nums leading-none", H.comboText, w && "transition-transform duration-100", j && "scale-110"),
+						style: {
+							textShadow: C === "low" ? "none" : `0 0 ${C === "extreme" ? 20 : 12}px ${C === "extreme" ? "#ef4444" : "#f97316"}`,
+							color: C === "extreme" ? "#fef2f2" : C === "high" ? "#fff7ed" : "inherit"
+						},
+						children: k
+					}),
+					x && /* @__PURE__ */ a("div", {
+						className: "w-full mt-2",
+						children: /* @__PURE__ */ a(m, {
+							timeRemaining: g,
+							size: b,
+							intensity: W
+						})
+					}),
+					/* @__PURE__ */ a(l, {
+						intensity: W,
+						active: w && n > 0
+					}),
+					/* @__PURE__ */ a(f, {
+						active: N,
+						milestone: F
+					}),
+					/* @__PURE__ */ a(p, { active: L })
+				]
+			}),
+			S && r > 1 && /* @__PURE__ */ a(h, {
+				multiplier: r,
+				maxMultiplier: i,
+				size: b,
+				animated: w
+			}),
+			/* @__PURE__ */ a("style", { children: "\n        @keyframes shake {\n          0%, 100% { transform: translateX(0); }\n          10% { transform: translateX(-4px) rotate(-1deg); }\n          20% { transform: translateX(4px) rotate(1deg); }\n          30% { transform: translateX(-4px) rotate(-1deg); }\n          40% { transform: translateX(4px) rotate(1deg); }\n          50% { transform: translateX(-2px) rotate(-0.5deg); }\n          60% { transform: translateX(2px) rotate(0.5deg); }\n          70% { transform: translateX(-2px); }\n          80% { transform: translateX(2px); }\n          90% { transform: translateX(-1px); }\n        }\n        .animate-shake {\n          animation: shake 0.2s ease-in-out;\n        }\n\n        @keyframes flame {\n          0%, 100% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 0.9; }\n          25% { transform: translateX(-50%) scale(1.1) rotate(2deg); opacity: 1; }\n          50% { transform: translateX(-50%) scale(0.9) rotate(-1deg); opacity: 0.8; }\n          75% { transform: translateX(-50%) scale(1.05) rotate(1deg); opacity: 0.95; }\n        }\n        .animate-flame {\n          animation: flame 0.4s ease-in-out infinite;\n        }\n\n        @keyframes spark {\n          0% { transform: translateY(0) scale(1); opacity: 1; }\n          50% { transform: translateY(-20px) scale(0.8); opacity: 0.8; }\n          100% { transform: translateY(-40px) scale(0); opacity: 0; }\n        }\n        .animate-spark {\n          animation: spark 0.8s ease-out infinite;\n        }\n\n        @keyframes energy-ring {\n          0% { opacity: 0; transform: scale(0.95); }\n          50% { opacity: 1; transform: scale(1.02); }\n          100% { opacity: 0; transform: scale(0.95); }\n        }\n        .animate-energy-ring {\n          animation: energy-ring 2s ease-in-out infinite;\n        }\n        .animate-energy-ring-alt {\n          animation: energy-ring 2s ease-in-out infinite reverse;\n        }\n\n        @keyframes pulse-glow {\n          0%, 100% { filter: brightness(1); }\n          50% { filter: brightness(1.1); }\n        }\n        .animate-pulse-glow {\n          animation: pulse-glow 1.5s ease-in-out infinite;\n        }\n\n        @keyframes pulse-fast {\n          0%, 100% { opacity: 1; }\n          50% { opacity: 0.7; }\n        }\n        .animate-pulse-fast {\n          animation: pulse-fast 0.3s ease-in-out infinite;\n        }\n\n        @keyframes bounce-subtle {\n          0%, 100% { transform: translateY(0); }\n          50% { transform: translateY(-2px); }\n        }\n        .animate-bounce-subtle {\n          animation: bounce-subtle 0.6s ease-in-out infinite;\n        }\n\n        @keyframes rainbow-pulse {\n          0%, 100% { filter: hue-rotate(0deg) brightness(1); }\n          50% { filter: hue-rotate(30deg) brightness(1.2); }\n        }\n        .animate-rainbow-pulse {\n          animation: rainbow-pulse 1s ease-in-out infinite;\n        }\n\n        @keyframes milestone-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);\n            opacity: 0;\n          }\n        }\n        .animate-milestone-burst {\n          animation: milestone-burst 0.8s ease-out forwards;\n        }\n\n        @keyframes milestone-badge {\n          0% { transform: translate(-50%, 0) scale(0); opacity: 0; }\n          30% { transform: translate(-50%, -100%) scale(1.2); opacity: 1; }\n          50% { transform: translate(-50%, -100%) scale(1); }\n          100% { transform: translate(-50%, -100%) scale(1); opacity: 0; }\n        }\n        .animate-milestone-badge {\n          animation: milestone-badge 1.5s ease-out forwards;\n        }\n\n        @keyframes flash {\n          0% { opacity: 0.6; }\n          100% { opacity: 0; }\n        }\n        .animate-flash {\n          animation: flash 0.3s ease-out forwards;\n        }\n\n        @keyframes shatter {\n          0% {\n            transform: translate(-50%, -50%) rotate(0deg) translateX(0);\n            opacity: 1;\n          }\n          100% {\n            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance));\n            opacity: 0;\n          }\n        }\n        .animate-shatter {\n          animation: shatter 0.6s ease-out forwards;\n        }\n\n        @keyframes flash-red {\n          0% { opacity: 0.5; }\n          100% { opacity: 0; }\n        }\n        .animate-flash-red {\n          animation: flash-red 0.4s ease-out forwards;\n        }\n      " })
+		]
+	});
+}
+function _({ initialCombo: e = 0, initialMultiplier: n = 1, maxMultiplier: r = 10, timerDuration: i = 3e3, multiplierThresholds: a = [
+	10,
+	25,
+	50,
+	100,
+	200,
+	500
+], autoDecay: o = !0, decayRate: s = 30 } = {}) {
+	let [c, l] = t.useState(e), [u, d] = t.useState(n), [f, p] = t.useState(100), [m, h] = t.useState(!1), g = t.useRef(null), _ = t.useCallback((e) => {
+		let t = a.filter((t) => e >= t).length;
+		return Math.min(1 + t, r);
+	}, [a, r]);
+	return t.useEffect(() => {
+		if (!o || m || c === 0) {
+			g.current &&= (clearInterval(g.current), null);
+			return;
+		}
+		return g.current = setInterval(() => {
+			p((e) => {
+				let t = e - 100 / (i / s);
+				return t <= 0 ? (l(0), d(1), 100) : t;
+			});
+		}, s), () => {
+			g.current && clearInterval(g.current);
+		};
+	}, [
+		o,
+		m,
+		c,
+		i,
+		s
+	]), {
+		combo: c,
+		multiplier: u,
+		timeRemaining: f,
+		increment: t.useCallback((e = 1) => {
+			l((t) => {
+				let n = t + e;
+				return d(_(n)), n;
+			}), p(100);
+		}, [_]),
+		reset: t.useCallback(() => {
+			l(0), d(1), p(100);
+		}, []),
+		pause: t.useCallback(() => {
+			h(!0);
+		}, []),
+		resume: t.useCallback(() => {
+			h(!1);
+		}, []),
+		isPaused: m
+	};
+}
+//#endregion
+export { g as WakaComboCounter, _ as useComboCounter };

package/dist/components/waka-combobox/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../badge/index.cjs.js"),r=require("../button/index.cjs.js"),i=require("../command/index.cjs.js"),a=require("../popover/index.cjs.js");let o=require("react");o=e.__toESM(o);let s=require("lucide-react"),c=require("react/jsx-runtime");function l(e){let t=new Map;for(let n of e){let e=n.group;t.has(e)||t.set(e,[]),t.get(e).push(n)}return t}function u({options:e,value:u,onChange:d,placeholder:f=`Sélectionner...`,searchPlaceholder:p=`Rechercher...`,emptyMessage:m=`Aucun résultat trouvé.`,multiple:h=!1,creatable:g=!1,onCreate:_,createLabel:v=`Créer`,onSearch:y,searchDebounce:b=300,disabled:x=!1,error:S=!1,loading:C=!1,size:w=`md`,clearable:T=!0,maxSelections:E,className:D,id:O,name:k}){let[A,j]=o.useState(!1),[M,N]=o.useState(``),[P,F]=o.useState(e),[I,L]=o.useState(!1),[R,z]=o.useState([]),B=C||I;o.useEffect(()=>{y||F(e)},[e,y]),o.useEffect(()=>{if(!y)return;let e=setTimeout(async()=>{L(!0);try{let e=await y(M);F(e)}catch(e){console.error(`Search error:`,e)}finally{L(!1)}},b);return()=>clearTimeout(e)},[M,y,b]);let V=o.useMemo(()=>[...P,...R],[P,R]),H=o.useMemo(()=>{if(y||!M)return V;let e=M.toLowerCase();return V.filter(t=>t.label.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))},[V,M,y]),U=o.useMemo(()=>u===void 0?[]:Array.isArray(u)?u:[u],[u]),W=o.useMemo(()=>V.filter(e=>U.some(t=>t===e.value)),[V,U]),G=e=>{if(!e.disabled)if(h){let t=U.includes(e.value),n;if(t)n=U.filter(t=>t!==e.value);else{if(E&&U.length>=E)return;n=[...U,e.value]}d?.(n.length>0?n:void 0)}else U.includes(e.value)?d?.(void 0):d?.(e.value),j(!1)},K=async()=>{if(!(!g||!M.trim())){L(!0);try{let e;e=_?await _(M.trim()):{value:M.trim(),label:M.trim()},z(t=>[...t,e]),G(e),N(``)}catch(e){console.error(`Creation error:`,e)}finally{L(!1)}}},q=e=>{e.stopPropagation(),d?.(void 0),N(``)},J=e=>{if(h){let t=U.filter(t=>t!==e);d?.(t.length>0?t:void 0)}},Y=o.useMemo(()=>{if(!g||!M.trim())return!1;let e=M.trim().toLowerCase();return!V.some(t=>t.label.toLowerCase()===e)},[g,M,V]),X=o.useMemo(()=>l(H),[H]),Z=o.useMemo(()=>W.length===0?``:h?`${W.length} sélectionné${W.length>1?`s`:``}`:W[0]?.label||``,[W,h]),Q={sm:`h-8 text-xs`,md:`h-9 text-sm`,lg:`h-10 text-base`},$={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`};return(0,c.jsxs)(a.Popover,{open:A,onOpenChange:j,children:[(0,c.jsx)(a.PopoverTrigger,{asChild:!0,children:(0,c.jsxs)(r.Button,{id:O,variant:`outline`,role:`combobox`,"aria-expanded":A,disabled:x,className:t.cn(`w-full justify-between font-normal`,Q[w],!Z&&`text-muted-foreground`,S&&`border-destructive focus-visible:ring-destructive`,D),children:[(0,c.jsx)(`span`,{className:`flex-1 text-left truncate`,children:Z||f}),(0,c.jsxs)(`div`,{className:`flex items-center gap-1 ml-2`,children:[B&&(0,c.jsx)(s.Loader2,{className:t.cn($[w],`animate-spin`)}),T&&U.length>0&&!x&&(0,c.jsx)(s.X,{className:t.cn($[w],`opacity-50 hover:opacity-100`),onClick:q}),(0,c.jsx)(s.ChevronsUpDown,{className:t.cn($[w],`opacity-50`)})]})]})}),(0,c.jsx)(a.PopoverContent,{className:`w-[--radix-popover-trigger-width] p-0`,align:`start`,children:(0,c.jsxs)(i.Command,{shouldFilter:!1,children:[(0,c.jsx)(i.CommandInput,{placeholder:p,value:M,onValueChange:N}),(0,c.jsxs)(i.CommandList,{children:[B&&(0,c.jsx)(`div`,{className:`flex items-center justify-center py-6`,children:(0,c.jsx)(s.Loader2,{className:`h-5 w-5 animate-spin text-muted-foreground`})}),!B&&H.length===0&&!Y&&(0,c.jsx)(i.CommandEmpty,{children:m}),!B&&Array.from(X.entries()).map(([e,n],r)=>(0,c.jsxs)(o.Fragment,{children:[r>0&&(0,c.jsx)(i.CommandSeparator,{}),(0,c.jsx)(i.CommandGroup,{heading:e,children:n.map(e=>{let n=U.includes(e.value);return(0,c.jsxs)(i.CommandItem,{value:String(e.value),onSelect:()=>G(e),disabled:e.disabled||h&&!!E&&U.length>=E&&!n,className:t.cn(`flex items-center gap-2`,e.disabled&&`opacity-50`),children:[(0,c.jsx)(`div`,{className:t.cn(`flex items-center justify-center w-4 h-4 border rounded`,n?`bg-primary border-primary text-primary-foreground`:`border-muted-foreground/30`),children:n&&(0,c.jsx)(s.Check,{className:`h-3 w-3`})}),e.icon&&(0,c.jsx)(`span`,{className:`flex-shrink-0`,children:e.icon}),(0,c.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,c.jsx)(`div`,{className:`truncate`,children:e.label}),e.description&&(0,c.jsx)(`div`,{className:`text-xs text-muted-foreground truncate`,children:e.description})]})]},String(e.value))})})]},e||`ungrouped`)),Y&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i.CommandSeparator,{}),(0,c.jsx)(i.CommandGroup,{children:(0,c.jsxs)(i.CommandItem,{onSelect:K,className:`flex items-center gap-2`,children:[(0,c.jsx)(s.Plus,{className:$[w]}),(0,c.jsxs)(`span`,{children:[v,` "`,M.trim(),`"`]})]})})]})]})]})}),k&&(0,c.jsx)(`input`,{type:`hidden`,name:k,value:h?U.join(`,`):String(U[0]||``)}),h&&W.length>0&&(0,c.jsx)(`div`,{className:`flex flex-wrap gap-1 mt-2`,children:W.map(e=>(0,c.jsxs)(n.Badge,{variant:`secondary`,className:`gap-1`,children:[e.icon,e.label,(0,c.jsx)(s.X,{className:`h-3 w-3 cursor-pointer hover:text-destructive`,onClick:()=>J(e.value)})]},String(e.value)))})]})}function d(e={}){let{options:t=[],initialValue:n,multiple:r=!1}=e,[i,a]=o.useState(n),[s,c]=o.useState(t);return{value:i,onChange:a,options:s,setOptions:c,clear:()=>a(void 0),addOption:e=>{c(t=>[...t,e])},removeOption:e=>{c(t=>t.filter(t=>t.value!==e)),r&&Array.isArray(i)?a(i.filter(t=>t!==e)):i===e&&a(void 0)},selectAll:()=>{r&&a(s.filter(e=>!e.disabled).map(e=>e.value))},selectNone:()=>a(r?[]:void 0),multiple:r}}exports.WakaCombobox=u,exports.default=u,exports.useCombobox=d;

package/dist/components/waka-combobox/index.d.ts

@@ -67,8 +67,8 @@ export interface UseComboboxOptions<T = string> {
     multiple?: boolean;
 }
 export declare function useCombobox<T = string>(options?: UseComboboxOptions<T>): {
-    value: T | T[];
-    onChange: React.Dispatch<React.SetStateAction<T | T[]>>;
+    value: T | T[] | undefined;
+    onChange: React.Dispatch<React.SetStateAction<T | T[] | undefined>>;
     options: ComboboxOption<T>[];
     setOptions: React.Dispatch<React.SetStateAction<ComboboxOption<T>[]>>;
     clear: () => void;

package/dist/components/waka-combobox/index.es.js

@@ -0,0 +1,234 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Command as r, CommandEmpty as i, CommandGroup as a, CommandInput as o, CommandItem as s, CommandList as c, CommandSeparator as l } from "../command/index.es.js";
+import { Popover as u, PopoverContent as ee, PopoverTrigger as te } from "../popover/index.es.js";
+import * as d from "react";
+import { Check as ne, ChevronsUpDown as f, Loader2 as p, Plus as m, X as h } from "lucide-react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/waka-combobox/index.tsx
+function re(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = n.group;
+		t.has(e) || t.set(e, []), t.get(e).push(n);
+	}
+	return t;
+}
+function y({ options: y, value: b, onChange: x, placeholder: ie = "Sélectionner...", searchPlaceholder: ae = "Rechercher...", emptyMessage: oe = "Aucun résultat trouvé.", multiple: S = !1, creatable: C = !1, onCreate: w, createLabel: T = "Créer", onSearch: E, searchDebounce: D = 300, disabled: O = !1, error: se = !1, loading: ce = !1, size: k = "md", clearable: A = !0, maxSelections: j, className: M, id: N, name: P }) {
+	let [F, I] = d.useState(!1), [L, R] = d.useState(""), [z, B] = d.useState(y), [V, H] = d.useState(!1), [U, W] = d.useState([]), G = ce || V;
+	d.useEffect(() => {
+		E || B(y);
+	}, [y, E]), d.useEffect(() => {
+		if (!E) return;
+		let e = setTimeout(async () => {
+			H(!0);
+			try {
+				let e = await E(L);
+				B(e);
+			} catch (e) {
+				console.error("Search error:", e);
+			} finally {
+				H(!1);
+			}
+		}, D);
+		return () => clearTimeout(e);
+	}, [
+		L,
+		E,
+		D
+	]);
+	let K = d.useMemo(() => [...z, ...U], [z, U]), q = d.useMemo(() => {
+		if (E || !L) return K;
+		let e = L.toLowerCase();
+		return K.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e));
+	}, [
+		K,
+		L,
+		E
+	]), J = d.useMemo(() => b === void 0 ? [] : Array.isArray(b) ? b : [b], [b]), Y = d.useMemo(() => K.filter((e) => J.some((t) => t === e.value)), [K, J]), X = (e) => {
+		if (!e.disabled) if (S) {
+			let t = J.includes(e.value), n;
+			if (t) n = J.filter((t) => t !== e.value);
+			else {
+				if (j && J.length >= j) return;
+				n = [...J, e.value];
+			}
+			x?.(n.length > 0 ? n : void 0);
+		} else J.includes(e.value) ? x?.(void 0) : x?.(e.value), I(!1);
+	}, le = async () => {
+		if (!(!C || !L.trim())) {
+			H(!0);
+			try {
+				let e;
+				e = w ? await w(L.trim()) : {
+					value: L.trim(),
+					label: L.trim()
+				}, W((t) => [...t, e]), X(e), R("");
+			} catch (e) {
+				console.error("Creation error:", e);
+			} finally {
+				H(!1);
+			}
+		}
+	}, ue = (e) => {
+		e.stopPropagation(), x?.(void 0), R("");
+	}, de = (e) => {
+		if (S) {
+			let t = J.filter((t) => t !== e);
+			x?.(t.length > 0 ? t : void 0);
+		}
+	}, Z = d.useMemo(() => {
+		if (!C || !L.trim()) return !1;
+		let e = L.trim().toLowerCase();
+		return !K.some((t) => t.label.toLowerCase() === e);
+	}, [
+		C,
+		L,
+		K
+	]), fe = d.useMemo(() => re(q), [q]), Q = d.useMemo(() => Y.length === 0 ? "" : S ? `${Y.length} sélectionné${Y.length > 1 ? "s" : ""}` : Y[0]?.label || "", [Y, S]), pe = {
+		sm: "h-8 text-xs",
+		md: "h-9 text-sm",
+		lg: "h-10 text-base"
+	}, $ = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	};
+	return /* @__PURE__ */ v(u, {
+		open: F,
+		onOpenChange: I,
+		children: [
+			/* @__PURE__ */ _(te, {
+				asChild: !0,
+				children: /* @__PURE__ */ v(n, {
+					id: N,
+					variant: "outline",
+					role: "combobox",
+					"aria-expanded": F,
+					disabled: O,
+					className: e("w-full justify-between font-normal", pe[k], !Q && "text-muted-foreground", se && "border-destructive focus-visible:ring-destructive", M),
+					children: [/* @__PURE__ */ _("span", {
+						className: "flex-1 text-left truncate",
+						children: Q || ie
+					}), /* @__PURE__ */ v("div", {
+						className: "flex items-center gap-1 ml-2",
+						children: [
+							G && /* @__PURE__ */ _(p, { className: e($[k], "animate-spin") }),
+							A && J.length > 0 && !O && /* @__PURE__ */ _(h, {
+								className: e($[k], "opacity-50 hover:opacity-100"),
+								onClick: ue
+							}),
+							/* @__PURE__ */ _(f, { className: e($[k], "opacity-50") })
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ _(ee, {
+				className: "w-[--radix-popover-trigger-width] p-0",
+				align: "start",
+				children: /* @__PURE__ */ v(r, {
+					shouldFilter: !1,
+					children: [/* @__PURE__ */ _(o, {
+						placeholder: ae,
+						value: L,
+						onValueChange: R
+					}), /* @__PURE__ */ v(c, { children: [
+						G && /* @__PURE__ */ _("div", {
+							className: "flex items-center justify-center py-6",
+							children: /* @__PURE__ */ _(p, { className: "h-5 w-5 animate-spin text-muted-foreground" })
+						}),
+						!G && q.length === 0 && !Z && /* @__PURE__ */ _(i, { children: oe }),
+						!G && Array.from(fe.entries()).map(([t, n], r) => /* @__PURE__ */ v(d.Fragment, { children: [r > 0 && /* @__PURE__ */ _(l, {}), /* @__PURE__ */ _(a, {
+							heading: t,
+							children: n.map((t) => {
+								let n = J.includes(t.value);
+								return /* @__PURE__ */ v(s, {
+									value: String(t.value),
+									onSelect: () => X(t),
+									disabled: t.disabled || S && !!j && J.length >= j && !n,
+									className: e("flex items-center gap-2", t.disabled && "opacity-50"),
+									children: [
+										/* @__PURE__ */ _("div", {
+											className: e("flex items-center justify-center w-4 h-4 border rounded", n ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/30"),
+											children: n && /* @__PURE__ */ _(ne, { className: "h-3 w-3" })
+										}),
+										t.icon && /* @__PURE__ */ _("span", {
+											className: "flex-shrink-0",
+											children: t.icon
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "flex-1 min-w-0",
+											children: [/* @__PURE__ */ _("div", {
+												className: "truncate",
+												children: t.label
+											}), t.description && /* @__PURE__ */ _("div", {
+												className: "text-xs text-muted-foreground truncate",
+												children: t.description
+											})]
+										})
+									]
+								}, String(t.value));
+							})
+						})] }, t || "ungrouped")),
+						Z && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(l, {}), /* @__PURE__ */ _(a, { children: /* @__PURE__ */ v(s, {
+							onSelect: le,
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ _(m, { className: $[k] }), /* @__PURE__ */ v("span", { children: [
+								T,
+								" \"",
+								L.trim(),
+								"\""
+							] })]
+						}) })] })
+					] })]
+				})
+			}),
+			P && /* @__PURE__ */ _("input", {
+				type: "hidden",
+				name: P,
+				value: S ? J.join(",") : String(J[0] || "")
+			}),
+			S && Y.length > 0 && /* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-1 mt-2",
+				children: Y.map((e) => /* @__PURE__ */ v(t, {
+					variant: "secondary",
+					className: "gap-1",
+					children: [
+						e.icon,
+						e.label,
+						/* @__PURE__ */ _(h, {
+							className: "h-3 w-3 cursor-pointer hover:text-destructive",
+							onClick: () => de(e.value)
+						})
+					]
+				}, String(e.value)))
+			})
+		]
+	});
+}
+function b(e = {}) {
+	let { options: t = [], initialValue: n, multiple: r = !1 } = e, [i, a] = d.useState(n), [o, s] = d.useState(t);
+	return {
+		value: i,
+		onChange: a,
+		options: o,
+		setOptions: s,
+		clear: () => a(void 0),
+		addOption: (e) => {
+			s((t) => [...t, e]);
+		},
+		removeOption: (e) => {
+			s((t) => t.filter((t) => t.value !== e)), r && Array.isArray(i) ? a(i.filter((t) => t !== e)) : i === e && a(void 0);
+		},
+		selectAll: () => {
+			r && a(o.filter((e) => !e.disabled).map((e) => e.value));
+		},
+		selectNone: () => a(r ? [] : void 0),
+		multiple: r
+	};
+}
+//#endregion
+export { y as WakaCombobox, y as default, b as useCombobox };

package/dist/components/waka-command-bar/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../../utils/security.cjs.js");let r=require("react");r=e.__toESM(r);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t){if(!t)return{match:!0,score:1};let n=e.toLowerCase(),r=t.toLowerCase();if(n.includes(r))return{match:!0,score:n.indexOf(r)===0?1:.8};let i=0,a=0,o=0;for(let e=0;e<n.length&&i<r.length;e++)n[e]===r[i]?(a+=1+o*.5,o++,i++):o=0;let s=i===r.length;return{match:s,score:s?a/r.length:0}}function s(e,t){return t?e.map(e=>{let n=o(e.label,t),r=e.description?o(e.description,t):{match:!1,score:0},i=e.keywords?.some(e=>o(e,t).match)?{match:!0,score:.5}:{match:!1,score:0};return{item:e,score:Math.max(n.score,r.score*.7,i.score),matched:n.match||r.match||i.match}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).map(e=>e.item):e}function c({open:e,onOpenChange:t,items:o,placeholder:c=`Type a command or search...`,onSelect:u,emptyMessage:d=`No results found.`,recentItems:f,footer:p,shortcut:m=[`⌘`,`K`]}){let[h,g]=r.useState(``),[_,v]=r.useState(0),y=r.useRef(null),b=r.useRef(null),x=o.length>0&&`items`in o[0],S=r.useMemo(()=>x?o.flatMap(e=>e.items.map(t=>({...t,category:e.label}))):o,[o,x]),C=r.useMemo(()=>s(S,h),[S,h]),w=r.useMemo(()=>!x||h?[{label:h?`Results`:`Commands`,items:C}]:o,[o,x,C,h]),T=r.useMemo(()=>w.flatMap(e=>e.items),[w]);r.useEffect(()=>{if(!e)return;let n=e=>{switch(e.key){case`ArrowDown`:e.preventDefault(),v(e=>Math.min(e+1,T.length-1));break;case`ArrowUp`:e.preventDefault(),v(e=>Math.max(e-1,0));break;case`Enter`:e.preventDefault();let n=T[_];n&&E(n);break;case`Escape`:e.preventDefault(),t(!1);break}};return window.addEventListener(`keydown`,n),()=>window.removeEventListener(`keydown`,n)},[e,_,T,t]),r.useEffect(()=>{e&&(g(``),v(0),setTimeout(()=>y.current?.focus(),0))},[e]),r.useEffect(()=>{(b.current?.querySelector(`[data-index="${_}"]`))?.scrollIntoView({block:`nearest`})},[_]),r.useEffect(()=>{let n=n=>{(n.metaKey||n.ctrlKey)&&n.key===`k`&&(n.preventDefault(),t(!e))};return window.addEventListener(`keydown`,n),()=>window.removeEventListener(`keydown`,n)},[e,t]);let E=e=>{u?.(e),e.action?.(),e.href&&n.safeNavigate(e.href),t(!1)};if(!e)return null;let D=-1;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`div`,{className:`fixed inset-0 z-50 bg-black/50 backdrop-blur-sm animate-in fade-in-0`,onClick:()=>t(!1)}),(0,a.jsx)(`div`,{className:`fixed left-1/2 top-[20%] z-50 w-full max-w-xl -translate-x-1/2 animate-in fade-in-0 zoom-in-95 slide-in-from-top-2`,children:(0,a.jsxs)(`div`,{className:`overflow-hidden rounded-xl border bg-popover shadow-2xl`,children:[(0,a.jsxs)(`div`,{className:`flex items-center border-b px-4`,children:[(0,a.jsx)(i.Search,{className:`h-5 w-5 shrink-0 text-muted-foreground`}),(0,a.jsx)(`input`,{ref:y,type:`text`,value:h,onChange:e=>{g(e.target.value),v(0)},placeholder:c,className:`flex-1 bg-transparent py-4 px-3 text-sm outline-none placeholder:text-muted-foreground`}),(0,a.jsx)(`kbd`,{className:`hidden sm:inline-flex h-6 items-center gap-1 rounded border bg-muted px-2 text-xs text-muted-foreground`,children:`ESC`})]}),(0,a.jsxs)(`div`,{ref:b,className:`max-h-80 overflow-y-auto p-2`,children:[!h&&f&&f.length>0&&(0,a.jsxs)(`div`,{className:`mb-2`,children:[(0,a.jsx)(`div`,{className:`px-2 py-1.5 text-xs font-medium text-muted-foreground`,children:`Recent`}),f.map(e=>{D++;let t=D;return(0,a.jsx)(l,{item:e,selected:_===t,dataIndex:t,onSelect:()=>E(e),onHover:()=>v(t)},`recent-${e.id}`)})]}),w.map(e=>(0,a.jsxs)(`div`,{className:`mb-2`,children:[(0,a.jsx)(`div`,{className:`px-2 py-1.5 text-xs font-medium text-muted-foreground`,children:e.label}),e.items.length===0?(0,a.jsx)(`div`,{className:`px-2 py-8 text-center text-sm text-muted-foreground`,children:d}):e.items.map(e=>{D++;let t=D;return(0,a.jsx)(l,{item:e,selected:_===t,dataIndex:t,onSelect:()=>E(e),onHover:()=>v(t)},e.id)})]},e.label))]}),(0,a.jsx)(`div`,{className:`flex items-center justify-between border-t bg-muted/50 px-4 py-2 text-xs text-muted-foreground`,children:p||(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-4`,children:[(0,a.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,a.jsx)(`kbd`,{className:`rounded border bg-background px-1.5 py-0.5`,children:`↑↓`}),`Navigate`]}),(0,a.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,a.jsx)(`kbd`,{className:`rounded border bg-background px-1.5 py-0.5`,children:`↵`}),`Select`]})]}),(0,a.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,a.jsx)(`kbd`,{className:`rounded border bg-background px-1.5 py-0.5`,children:`ESC`}),`Close`]})]})})]})})]})}function l({item:e,selected:n,dataIndex:r,onSelect:o,onHover:s}){return(0,a.jsxs)(`button`,{"data-index":r,onClick:o,onMouseEnter:s,className:t.cn(`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors`,n?`bg-accent text-accent-foreground`:`hover:bg-accent/50`),children:[e.icon&&(0,a.jsx)(`span`,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background`,children:e.icon}),(0,a.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,a.jsx)(`div`,{className:`font-medium truncate`,children:e.label}),e.description&&(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground truncate`,children:e.description})]}),e.shortcut&&(0,a.jsx)(`div`,{className:`flex items-center gap-1 shrink-0`,children:e.shortcut.map((e,t)=>(0,a.jsx)(`kbd`,{className:`rounded border bg-muted px-1.5 py-0.5 text-xs`,children:e},t))}),n&&!e.shortcut&&(0,a.jsx)(i.CornerDownLeft,{className:`h-4 w-4 shrink-0 text-muted-foreground`})]})}function u(){let[e,t]=r.useState(!1);return{open:e,onOpenChange:t,openCommandBar:()=>t(!0),closeCommandBar:()=>t(!1),toggleCommandBar:()=>t(e=>!e)}}exports.WakaCommandBar=c,exports.useCommandBar=u;

package/dist/components/waka-command-bar/index.d.ts

@@ -35,7 +35,7 @@ export interface WakaCommandBarProps {
     /** Keyboard shortcut to open (default: cmd+k) */
     shortcut?: string[];
 }
-export declare function WakaCommandBar({ open, onOpenChange, items, placeholder, onSelect, emptyMessage, recentItems, footer, shortcut, }: WakaCommandBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaCommandBar({ open, onOpenChange, items, placeholder, onSelect, emptyMessage, recentItems, footer, shortcut, }: WakaCommandBarProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function useCommandBar(): {
     open: boolean;
     onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;