@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-funnel-chart/index.es.js

@@ -0,0 +1,347 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ArrowDown as n, ArrowRight as r, Info as i, TrendingDown as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/waka-funnel-chart/index.tsx
+function c({ data: e, minWidthPercentage: n = 20 }) {
+	let [r, i] = t.useState(null), [a, o] = t.useState(null), s = t.useMemo(() => {
+		if (e.length === 0) return [];
+		let t = e[0].value, r = Math.max(...e.map((e) => e.value));
+		return e.map((i, a) => {
+			let o = a > 0 ? e[a - 1] : null, s = o && o.value > 0 ? i.value / o.value * 100 : null, c = o ? o.value - i.value : null, l = o && o.value > 0 ? (o.value - i.value) / o.value * 100 : null, u = r > 0 ? i.value / r * 100 : 0, d = Math.max(u, n);
+			return {
+				...i,
+				percentageOfTotal: t > 0 ? i.value / t * 100 : 0,
+				conversionRate: s,
+				dropOff: c,
+				dropOffPercentage: l,
+				widthPercentage: d
+			};
+		});
+	}, [e, n]), c = e.length > 0 ? e[0].value : 0, l = e.length > 0 ? e[e.length - 1].value : 0;
+	return {
+		stages: s,
+		totalValue: c,
+		overallConversionRate: c > 0 ? l / c * 100 : 0,
+		totalDropOff: c - l,
+		hoveredStage: r,
+		setHoveredStage: i,
+		activeStage: a,
+		setActiveStage: o
+	};
+}
+function l(e, t, n = "$", r = "en-US") {
+	switch (t) {
+		case "percentage": return `${e.toFixed(1)}%`;
+		case "currency": return `${n}${e.toLocaleString(r, {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 0
+		})}`;
+		default: return e.toLocaleString(r);
+	}
+}
+var u = [
+	"hsl(var(--chart-1))",
+	"hsl(var(--chart-2))",
+	"hsl(var(--chart-3))",
+	"hsl(var(--chart-4))",
+	"hsl(var(--chart-5))",
+	"hsl(var(--primary))",
+	"hsl(var(--info))",
+	"hsl(var(--destructive))"
+];
+function d(e, t) {
+	return t.color || u[e % u.length];
+}
+function f({ stage: t, index: n, totalStages: r, width: i, stageHeight: a, gap: c, isHovered: l, isAnimated: u, animationDelay: f, animationDuration: p }) {
+	let m = n < r - 1 ? t : null, h = d(n, t), g = t.widthPercentage / 100 * i, _ = (i - g) / 2, v = _ + g, y = m ? t.widthPercentage / 100 * i * .85 : g * .7, b = (i - y) / 2, x = `
+    M ${_} 0
+    L ${v} 0
+    L ${b + y} ${a}
+    L ${b} ${a}
+    Z
+  `;
+	return /* @__PURE__ */ s("g", {
+		style: { transform: `translateY(${n * (a + c)}px)` },
+		children: [/* @__PURE__ */ o("path", {
+			d: x,
+			fill: h,
+			className: e("transition-all duration-300", l && "brightness-110"),
+			style: {
+				opacity: +!!u,
+				transform: u ? "scaleY(1)" : "scaleY(0)",
+				transformOrigin: "top",
+				transition: `opacity ${p}ms ease-out ${f}ms, transform ${p}ms ease-out ${f}ms`
+			}
+		}), l && /* @__PURE__ */ o("path", {
+			d: x,
+			fill: "none",
+			stroke: "white",
+			strokeWidth: "2",
+			className: "opacity-50"
+		})]
+	});
+}
+function p({ stage: t, index: n, totalStages: r, stageWidth: i, height: a, gap: c, isHovered: l, isAnimated: u, animationDelay: f, animationDuration: p }) {
+	let m = d(n, t), h = t.widthPercentage / 100 * a, g = (a - h) / 2, _ = g + h, v = n < r - 1 ? h * .85 : h * .7, y = (a - v) / 2, b = `
+    M 0 ${g}
+    L ${i} ${y}
+    L ${i} ${y + v}
+    L 0 ${_}
+    Z
+  `;
+	return /* @__PURE__ */ s("g", {
+		style: { transform: `translateX(${n * (i + c)}px)` },
+		children: [/* @__PURE__ */ o("path", {
+			d: b,
+			fill: m,
+			className: e("transition-all duration-300", l && "brightness-110"),
+			style: {
+				opacity: +!!u,
+				transform: u ? "scaleX(1)" : "scaleX(0)",
+				transformOrigin: "left",
+				transition: `opacity ${p}ms ease-out ${f}ms, transform ${p}ms ease-out ${f}ms`
+			}
+		}), l && /* @__PURE__ */ o("path", {
+			d: b,
+			fill: "none",
+			stroke: "white",
+			strokeWidth: "2",
+			className: "opacity-50"
+		})]
+	});
+}
+function m({ stage: t, index: n, position: r, valueFormat: a, currencySymbol: c, locale: u, showConversionRates: d, showDropOff: f }) {
+	return /* @__PURE__ */ s("div", {
+		className: e("absolute z-50 px-3 py-2 text-sm rounded-lg shadow-lg", "bg-foreground text-background", "animate-in fade-in-0 zoom-in-95 duration-150", "pointer-events-none min-w-[180px]"),
+		style: {
+			left: r.x,
+			top: r.y,
+			transform: "translate(-50%, -100%) translateY(-12px)"
+		},
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "font-semibold mb-1",
+				children: t.label
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "space-y-1 text-xs opacity-90",
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: "flex justify-between gap-4",
+						children: [/* @__PURE__ */ o("span", { children: "Value:" }), /* @__PURE__ */ o("span", {
+							className: "font-medium",
+							children: l(t.value, a, c, u)
+						})]
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "flex justify-between gap-4",
+						children: [/* @__PURE__ */ o("span", { children: "% of Total:" }), /* @__PURE__ */ s("span", {
+							className: "font-medium",
+							children: [t.percentageOfTotal.toFixed(1), "%"]
+						})]
+					}),
+					d && t.conversionRate !== null && /* @__PURE__ */ s("div", {
+						className: "flex justify-between gap-4",
+						children: [/* @__PURE__ */ o("span", { children: "Conversion:" }), /* @__PURE__ */ s("span", {
+							className: "font-medium text-green-400",
+							children: [t.conversionRate.toFixed(1), "%"]
+						})]
+					}),
+					f && t.dropOff !== null && /* @__PURE__ */ s("div", {
+						className: "flex justify-between gap-4",
+						children: [/* @__PURE__ */ o("span", { children: "Drop-off:" }), /* @__PURE__ */ s("span", {
+							className: "font-medium text-red-400",
+							children: [
+								"-",
+								l(t.dropOff, a, c, u),
+								" (",
+								t.dropOffPercentage?.toFixed(1),
+								"%)"
+							]
+						})]
+					}),
+					t.details && /* @__PURE__ */ s("div", {
+						className: "mt-2 pt-2 border-t border-background/20 flex items-start gap-1",
+						children: [/* @__PURE__ */ o(i, { className: "w-3 h-3 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ o("span", { children: t.details })]
+					})
+				]
+			}),
+			/* @__PURE__ */ o("div", { className: "absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-3 rotate-45 bg-foreground" })
+		]
+	});
+}
+function h({ conversionRate: t, dropOffPercentage: i, orientation: c, showDropOff: l }) {
+	let u = c === "vertical" ? n : r;
+	return /* @__PURE__ */ s("div", {
+		className: e("flex items-center gap-1 text-xs text-muted-foreground", c === "vertical" ? "justify-center py-1" : "flex-col justify-center px-1"),
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ o(u, { className: "w-3 h-3" }), /* @__PURE__ */ s("span", {
+				className: "font-medium text-green-600 dark:text-green-400",
+				children: [t.toFixed(1), "%"]
+			})]
+		}), l && /* @__PURE__ */ s("div", {
+			className: "flex items-center gap-1 text-red-600 dark:text-red-400",
+			children: [/* @__PURE__ */ o(a, { className: "w-3 h-3" }), /* @__PURE__ */ s("span", { children: [
+				"-",
+				i.toFixed(1),
+				"%"
+			] })]
+		})]
+	});
+}
+function g({ data: n, orientation: r = "vertical", width: i = 400, height: a = 300, showConversionRates: u = !0, showDropOff: d = !0, showValues: g = !0, showPercentages: _ = !0, valueFormat: v = "number", currencySymbol: y = "$", locale: b = "en-US", animated: x = !0, animationDuration: S = 500, staggerDelay: C = 100, showTooltips: w = !0, minWidthPercentage: T = 20, gap: E = 4, className: D, onStageClick: O, onStageHover: k }) {
+	let [A, j] = t.useState(!x), [M, N] = t.useState(null), P = t.useRef(null), { stages: F, hoveredStage: I, setHoveredStage: L, overallConversionRate: R } = c({
+		data: n,
+		minWidthPercentage: T
+	});
+	t.useEffect(() => {
+		if (x) {
+			let e = setTimeout(() => {
+				j(!0);
+			}, 50);
+			return () => clearTimeout(e);
+		}
+	}, [x]);
+	let z = (e, t) => {
+		if (P.current && w) {
+			let t = P.current.getBoundingClientRect();
+			N({
+				x: e.clientX - t.left,
+				y: e.clientY - t.top
+			});
+		}
+	}, B = (e, t, n) => {
+		L(t.id), k?.(t, n), z(e, t);
+	}, V = () => {
+		L(null), N(null), k?.(null, null);
+	}, H = (e, t) => {
+		O?.(e, t);
+	}, U = F.find((e) => e.id === I), W = F.findIndex((e) => e.id === I), G = r === "vertical", K = F.length, q = E * (K - 1), J = u ? (K - 1) * 32 : 0, Y = G ? (a - q - J) / K : a, X = G ? i : (i - q - J) / K;
+	return G && K * Y + q, !G && K * X + q, /* @__PURE__ */ s("div", {
+		ref: P,
+		className: e("relative inline-flex flex-col", D),
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "mb-4 flex items-center justify-between text-sm",
+				children: [/* @__PURE__ */ s("span", {
+					className: "text-muted-foreground",
+					children: [F.length, " stages"]
+				}), /* @__PURE__ */ s("span", {
+					className: "font-medium",
+					children: [
+						"Overall: ",
+						R.toFixed(1),
+						"% conversion"
+					]
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: e("flex", G ? "flex-col" : "flex-row items-center"),
+				children: F.map((n, c) => /* @__PURE__ */ s(t.Fragment, { children: [/* @__PURE__ */ s("div", {
+					className: e("relative cursor-pointer group", G ? "w-full" : "h-full"),
+					onMouseEnter: (e) => B(e, n, c),
+					onMouseMove: (e) => z(e, n),
+					onMouseLeave: V,
+					onClick: () => H(n, c),
+					children: [/* @__PURE__ */ o("svg", {
+						width: G ? i : X,
+						height: G ? Y : a,
+						className: "overflow-visible",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: G ? /* @__PURE__ */ o(f, {
+							stage: n,
+							index: 0,
+							totalStages: K,
+							width: i,
+							stageHeight: Y,
+							gap: E,
+							isHovered: I === n.id,
+							isAnimated: A,
+							animationDelay: c * C,
+							animationDuration: S
+						}) : /* @__PURE__ */ o(p, {
+							stage: n,
+							index: 0,
+							totalStages: K,
+							stageWidth: X,
+							height: a,
+							gap: E,
+							isHovered: I === n.id,
+							isAnimated: A,
+							animationDelay: c * C,
+							animationDuration: S
+						})
+					}), /* @__PURE__ */ s("div", {
+						className: e("absolute inset-0 flex items-center justify-center", "text-white pointer-events-none", "flex-col gap-0.5"),
+						style: {
+							opacity: +!!A,
+							transition: `opacity ${S}ms ease-out ${c * C + S / 2}ms`
+						},
+						children: [
+							/* @__PURE__ */ o("span", {
+								className: "font-semibold text-sm drop-shadow-md",
+								children: n.label
+							}),
+							g && /* @__PURE__ */ o("span", {
+								className: "text-xs opacity-90 drop-shadow-md",
+								children: l(n.value, v, y, b)
+							}),
+							_ && /* @__PURE__ */ s("span", {
+								className: "text-xs opacity-75 drop-shadow-md",
+								children: [n.percentageOfTotal.toFixed(1), "%"]
+							})
+						]
+					})]
+				}), u && c < F.length - 1 && F[c + 1].conversionRate !== null && /* @__PURE__ */ o("div", {
+					className: e(G ? "py-1" : "px-1", "opacity-0 transition-opacity duration-300", A && "opacity-100"),
+					style: { transitionDelay: `${(c + 1) * C + S}ms` },
+					children: /* @__PURE__ */ o(h, {
+						conversionRate: F[c + 1].conversionRate,
+						dropOffPercentage: F[c + 1].dropOffPercentage,
+						orientation: r,
+						showDropOff: d
+					})
+				})] }, n.id))
+			}),
+			w && I && M && U && /* @__PURE__ */ o(m, {
+				stage: U,
+				index: W,
+				position: M,
+				valueFormat: v,
+				currencySymbol: y,
+				locale: b,
+				showConversionRates: u,
+				showDropOff: d
+			})
+		]
+	});
+}
+function _({ labels: e, values: t, colors: n, ...r }) {
+	return /* @__PURE__ */ o(g, {
+		data: e.map((e, r) => ({
+			id: `stage-${r}`,
+			label: e,
+			value: t[r] ?? 0,
+			color: n?.[r]
+		})),
+		...r
+	});
+}
+function v({ minimal: e = !0, width: t = 200, height: n = 150, gap: r = 2, ...i }) {
+	return /* @__PURE__ */ o(g, {
+		width: t,
+		height: n,
+		gap: r,
+		showConversionRates: !e,
+		showDropOff: !1,
+		showPercentages: !e,
+		...i
+	});
+}
+//#endregion
+export { v as WakaFunnelChartCompact, _ as WakaFunnelChartSimple, g as default, c as useFunnelChart };

package/dist/components/waka-glow-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(`react/jsx-runtime`);function i({glowColor:e=`hsl(var(--primary))`,glowIntensity:i=.15,glowSize:a=400,borderGlow:o=!0,followCursor:s=!0,hoverEffect:c=`lift`,gradient:l=!1,className:u,children:d,...f}){let p=n.useRef(null),[m,h]=n.useState({x:0,y:0}),[g,_]=n.useState(!1),v=n.useCallback(e=>{if(!p.current||!s)return;let t=p.current.getBoundingClientRect();h({x:e.clientX-t.left,y:e.clientY-t.top})},[s]),y={lift:`hover:-translate-y-1 hover:shadow-xl`,scale:`hover:scale-[1.02]`,tilt:``,none:``},b=n.useCallback(()=>{if(c!==`tilt`||!g||!p.current)return{};let e=p.current.getBoundingClientRect(),t=e.width/2,n=e.height/2;return{transform:`perspective(1000px) rotateX(${(m.y-n)/n*-5}deg) rotateY(${(m.x-t)/t*5}deg)`}},[c,g,m]);return(0,r.jsxs)(`div`,{ref:p,onMouseMove:v,onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),className:t.cn(`relative overflow-hidden rounded-xl border bg-card transition-all duration-300`,y[c],u),style:b(),...f,children:[s&&(0,r.jsx)(`div`,{className:`pointer-events-none absolute transition-opacity duration-300`,style:{left:m.x-a/2,top:m.y-a/2,width:a,height:a,background:`radial-gradient(circle, ${e} 0%, transparent 70%)`,opacity:g?i:0,filter:`blur(40px)`}}),o&&(0,r.jsx)(`div`,{className:`pointer-events-none absolute inset-0 rounded-xl transition-opacity duration-300`,style:{background:s?`radial-gradient(circle at ${m.x}px ${m.y}px, ${e} 0%, transparent 50%)`:`radial-gradient(circle at 50% 50%, ${e} 0%, transparent 50%)`,opacity:g?i*.5:0,mask:`linear-gradient(black, black) content-box, linear-gradient(black, black)`,maskComposite:`xor`,WebkitMaskComposite:`xor`,padding:`1px`}}),l&&(0,r.jsx)(`div`,{className:`pointer-events-none absolute inset-0 transition-opacity duration-500`,style:{background:`linear-gradient(135deg, ${e}10 0%, transparent 50%, ${e}05 100%)`,opacity:g?1:.5}}),(0,r.jsx)(`div`,{className:`relative z-10`,children:d}),(0,r.jsx)(`div`,{className:`pointer-events-none absolute inset-0 transition-opacity duration-500`,style:{background:s?`linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.03) 55%, transparent 60%)`:`none`,transform:`translateX(${g?`0%`:`-100%`})`,opacity:+!!g}})]})}function a(e){return(0,r.jsx)(i,{glowColor:`hsl(var(--primary))`,...e})}function o(e){return(0,r.jsx)(i,{glowColor:`hsl(142.1 76.2% 36.3%)`,...e})}function s(e){return(0,r.jsx)(i,{glowColor:`hsl(47.9 95.8% 53.1%)`,...e})}function c(e){return(0,r.jsx)(i,{glowColor:`hsl(var(--destructive))`,...e})}function l(e){let t=n.useRef(null),[a,o]=n.useState(0);return n.useEffect(()=>{let e=setInterval(()=>{o(e=>(e+1)%360)},20);return()=>clearInterval(e)},[]),(0,r.jsxs)(`div`,{ref:t,className:`relative`,children:[(0,r.jsx)(`div`,{className:`absolute -inset-[1px] rounded-xl opacity-75 blur-sm`,style:{background:`conic-gradient(from ${a}deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff, #ff0080, #ff0000)`}}),(0,r.jsx)(i,{borderGlow:!1,className:`relative`,...e})]})}function u({children:e,columns:n=3,gap:i=`md`,className:a}){return(0,r.jsx)(`div`,{className:t.cn(`grid`,{1:`grid-cols-1`,2:`grid-cols-1 md:grid-cols-2`,3:`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`,4:`grid-cols-1 md:grid-cols-2 lg:grid-cols-4`}[n],{sm:`gap-3`,md:`gap-6`,lg:`gap-8`}[i],a),children:e})}exports.WakaGlowCard=i,exports.WakaGlowCardDanger=c,exports.WakaGlowCardPrimary=a,exports.WakaGlowCardRainbow=l,exports.WakaGlowCardSuccess=o,exports.WakaGlowCardWarning=s,exports.WakaGlowGrid=u;

package/dist/components/waka-glow-card/index.es.js

@@ -0,0 +1,146 @@
+"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-glow-card/index.tsx
+function i({ glowColor: i = "hsl(var(--primary))", glowIntensity: a = .15, glowSize: o = 400, borderGlow: s = !0, followCursor: c = !0, hoverEffect: l = "lift", gradient: u = !1, className: d, children: f, ...p }) {
+	let m = t.useRef(null), [h, g] = t.useState({
+		x: 0,
+		y: 0
+	}), [_, v] = t.useState(!1), y = t.useCallback((e) => {
+		if (!m.current || !c) return;
+		let t = m.current.getBoundingClientRect();
+		g({
+			x: e.clientX - t.left,
+			y: e.clientY - t.top
+		});
+	}, [c]), b = {
+		lift: "hover:-translate-y-1 hover:shadow-xl",
+		scale: "hover:scale-[1.02]",
+		tilt: "",
+		none: ""
+	}, x = t.useCallback(() => {
+		if (l !== "tilt" || !_ || !m.current) return {};
+		let e = m.current.getBoundingClientRect(), t = e.width / 2, n = e.height / 2;
+		return { transform: `perspective(1000px) rotateX(${(h.y - n) / n * -5}deg) rotateY(${(h.x - t) / t * 5}deg)` };
+	}, [
+		l,
+		_,
+		h
+	]);
+	return /* @__PURE__ */ r("div", {
+		ref: m,
+		onMouseMove: y,
+		onMouseEnter: () => v(!0),
+		onMouseLeave: () => v(!1),
+		className: e("relative overflow-hidden rounded-xl border bg-card transition-all duration-300", b[l], d),
+		style: x(),
+		...p,
+		children: [
+			c && /* @__PURE__ */ n("div", {
+				className: "pointer-events-none absolute transition-opacity duration-300",
+				style: {
+					left: h.x - o / 2,
+					top: h.y - o / 2,
+					width: o,
+					height: o,
+					background: `radial-gradient(circle, ${i} 0%, transparent 70%)`,
+					opacity: _ ? a : 0,
+					filter: "blur(40px)"
+				}
+			}),
+			s && /* @__PURE__ */ n("div", {
+				className: "pointer-events-none absolute inset-0 rounded-xl transition-opacity duration-300",
+				style: {
+					background: c ? `radial-gradient(circle at ${h.x}px ${h.y}px, ${i} 0%, transparent 50%)` : `radial-gradient(circle at 50% 50%, ${i} 0%, transparent 50%)`,
+					opacity: _ ? a * .5 : 0,
+					mask: "linear-gradient(black, black) content-box, linear-gradient(black, black)",
+					maskComposite: "xor",
+					WebkitMaskComposite: "xor",
+					padding: "1px"
+				}
+			}),
+			u && /* @__PURE__ */ n("div", {
+				className: "pointer-events-none absolute inset-0 transition-opacity duration-500",
+				style: {
+					background: `linear-gradient(135deg, ${i}10 0%, transparent 50%, ${i}05 100%)`,
+					opacity: _ ? 1 : .5
+				}
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "relative z-10",
+				children: f
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "pointer-events-none absolute inset-0 transition-opacity duration-500",
+				style: {
+					background: c ? "linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.03) 55%, transparent 60%)" : "none",
+					transform: `translateX(${_ ? "0%" : "-100%"})`,
+					opacity: +!!_
+				}
+			})
+		]
+	});
+}
+function a(e) {
+	return /* @__PURE__ */ n(i, {
+		glowColor: "hsl(var(--primary))",
+		...e
+	});
+}
+function o(e) {
+	return /* @__PURE__ */ n(i, {
+		glowColor: "hsl(142.1 76.2% 36.3%)",
+		...e
+	});
+}
+function s(e) {
+	return /* @__PURE__ */ n(i, {
+		glowColor: "hsl(47.9 95.8% 53.1%)",
+		...e
+	});
+}
+function c(e) {
+	return /* @__PURE__ */ n(i, {
+		glowColor: "hsl(var(--destructive))",
+		...e
+	});
+}
+function l(e) {
+	let a = t.useRef(null), [o, s] = t.useState(0);
+	return t.useEffect(() => {
+		let e = setInterval(() => {
+			s((e) => (e + 1) % 360);
+		}, 20);
+		return () => clearInterval(e);
+	}, []), /* @__PURE__ */ r("div", {
+		ref: a,
+		className: "relative",
+		children: [/* @__PURE__ */ n("div", {
+			className: "absolute -inset-[1px] rounded-xl opacity-75 blur-sm",
+			style: { background: `conic-gradient(from ${o}deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff, #ff0080, #ff0000)` }
+		}), /* @__PURE__ */ n(i, {
+			borderGlow: !1,
+			className: "relative",
+			...e
+		})]
+	});
+}
+function u({ children: t, columns: r = 3, gap: i = "md", className: a }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("grid", {
+			1: "grid-cols-1",
+			2: "grid-cols-1 md:grid-cols-2",
+			3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+			4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+		}[r], {
+			sm: "gap-3",
+			md: "gap-6",
+			lg: "gap-8"
+		}[i], a),
+		children: t
+	});
+}
+//#endregion
+export { i as WakaGlowCard, c as WakaGlowCardDanger, a as WakaGlowCardPrimary, l as WakaGlowCardRainbow, o as WakaGlowCardSuccess, s as WakaGlowCardWarning, u as WakaGlowGrid };

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

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