@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-checkout-stepper/index.es.js

@@ -0,0 +1,379 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertCircle as n, Check as r, ChevronLeft as i, ChevronRight as a, ClipboardCheck as o, CreditCard as s, Loader2 as c, PartyPopper as l, ShoppingCart as u, SkipForward as d, Truck as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/waka-checkout-stepper/index.tsx
+var g = {
+	cart: u,
+	shipping: f,
+	payment: s,
+	review: o,
+	confirmation: l
+};
+function _({ initialStep: e = 0, steps: n, onStepChange: r, onComplete: i, validateOnNext: a = !0 }) {
+	let [o, s] = t.useState(e), [c, l] = t.useState(/* @__PURE__ */ new Set()), [u, d] = t.useState(/* @__PURE__ */ new Set()), [f, p] = t.useState(!1), [m, h] = t.useState(!1), [g, _] = t.useState(null), v = n.length, y = o === 0, b = o === v - 1, x = n[o], S = t.useCallback((e) => u.has(e) ? "skipped" : c.has(e) ? "completed" : e === o ? "current" : e < o ? "completed" : "pending", [
+		o,
+		c,
+		u
+	]), C = t.useMemo(() => n.map((e, t) => ({
+		...e,
+		status: S(t)
+	})), [n, S]), w = t.useCallback(async () => {
+		let e = n[o];
+		if (!e?.validate) return !0;
+		h(!0), _(null);
+		try {
+			let t = await e.validate();
+			return t.isValid ? !0 : (_(t.errorMessage || "Validation failed"), !1);
+		} catch {
+			return _("An error occurred during validation"), !1;
+		} finally {
+			h(!1);
+		}
+	}, [o, n]), T = t.useCallback(async (e) => e < 0 || e >= v || n[e]?.disabled || e > o && a && !await w() ? !1 : (e > o && l((e) => new Set(e).add(o)), s(e), _(null), r?.(e, n[e].id), !0), [
+		o,
+		v,
+		n,
+		a,
+		w,
+		r
+	]);
+	return {
+		currentStep: o,
+		currentStepData: x,
+		stepsWithStatus: C,
+		totalSteps: v,
+		isFirstStep: y,
+		isLastStep: b,
+		isComplete: f,
+		isValidating: m,
+		validationError: g,
+		goToStep: T,
+		nextStep: t.useCallback(async () => b ? !1 : T(o + 1), [
+			b,
+			o,
+			T
+		]),
+		prevStep: t.useCallback(() => {
+			y || (s((e) => e - 1), _(null), r?.(o - 1, n[o - 1].id));
+		}, [
+			y,
+			o,
+			n,
+			r
+		]),
+		skipStep: t.useCallback(() => {
+			!n[o]?.optional || b || (d((e) => new Set(e).add(o)), s((e) => e + 1), _(null), r?.(o + 1, n[o + 1].id));
+		}, [
+			o,
+			n,
+			b,
+			r
+		]),
+		completeCheckout: t.useCallback(async () => a && !await w() ? !1 : (l((e) => new Set(e).add(o)), p(!0), i?.(), !0), [
+			o,
+			a,
+			w,
+			i
+		]),
+		reset: t.useCallback(() => {
+			s(e), l(/* @__PURE__ */ new Set()), d(/* @__PURE__ */ new Set()), p(!1), h(!1), _(null);
+		}, [e]),
+		getStepStatus: S,
+		skippedSteps: u,
+		markStepCompleted: t.useCallback((e) => {
+			l((t) => new Set(t).add(e));
+		}, [])
+	};
+}
+var v = t.createContext(null);
+function y() {
+	let e = t.useContext(v);
+	if (!e) throw Error("useCheckoutStepperContext must be used within a WakaCheckoutStepper");
+	return e;
+}
+function b({ step: t, index: i }) {
+	let { size: a, animated: o } = y(), s = {
+		sm: "h-8 w-8 text-xs",
+		md: "h-10 w-10 text-sm",
+		lg: "h-12 w-12 text-base"
+	}, c = {
+		sm: "h-4 w-4",
+		md: "h-5 w-5",
+		lg: "h-6 w-6"
+	}, l = {
+		pending: "bg-muted text-muted-foreground border-2 border-muted-foreground/30",
+		current: "bg-primary text-primary-foreground border-2 border-primary shadow-lg shadow-primary/25",
+		completed: "bg-green-500 text-white border-2 border-green-500",
+		error: "bg-destructive text-destructive-foreground border-2 border-destructive",
+		skipped: "bg-muted text-muted-foreground border-2 border-dashed border-muted-foreground/50"
+	}, u = t.icon || g[t.id];
+	return /* @__PURE__ */ m("div", {
+		className: e("rounded-full flex items-center justify-center transition-all duration-300", s[a], l[t.status], o && t.status === "current" && "animate-pulse"),
+		children: t.status === "completed" ? /* @__PURE__ */ m(r, { className: c[a] }) : t.status === "error" ? /* @__PURE__ */ m(n, { className: c[a] }) : t.status === "skipped" ? /* @__PURE__ */ m(d, { className: c[a] }) : u ? /* @__PURE__ */ m(u, { className: c[a] }) : /* @__PURE__ */ m("span", {
+			className: "font-semibold",
+			children: i + 1
+		})
+	});
+}
+function x({ status: t, nextStatus: n, orientation: r }) {
+	return /* @__PURE__ */ m("div", { className: e("transition-all duration-500", r === "horizontal" ? "flex-1 h-0.5 mx-2 min-w-[20px]" : "w-0.5 min-h-[32px] mx-auto my-1", t === "completed" || t === "skipped" ? "bg-green-500" : "bg-muted-foreground/30") });
+}
+function S({ step: t, index: n, isLast: r, nextStatus: i }) {
+	let { orientation: a, size: o, clickable: s, allowPreviousOnly: c, currentStep: l, goToStep: u } = y(), d = s && !t.disabled && (c ? n < l : n !== l), f = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	}, g = {
+		sm: "text-[10px]",
+		md: "text-xs",
+		lg: "text-sm"
+	}, _ = async () => {
+		d && await u(n);
+	};
+	return a === "vertical" ? /* @__PURE__ */ h("div", {
+		className: "flex",
+		children: [/* @__PURE__ */ h("div", {
+			className: "flex flex-col items-center",
+			children: [/* @__PURE__ */ m("button", {
+				type: "button",
+				onClick: _,
+				disabled: !d,
+				className: e("flex items-center", d && "cursor-pointer hover:opacity-80", !d && "cursor-default"),
+				"aria-current": t.status === "current" ? "step" : void 0,
+				children: /* @__PURE__ */ m(b, {
+					step: t,
+					index: n
+				})
+			}), !r && /* @__PURE__ */ m(x, {
+				status: t.status,
+				nextStatus: i || "pending",
+				orientation: "vertical"
+			})]
+		}), /* @__PURE__ */ m("div", {
+			className: "ml-4 pb-8",
+			children: /* @__PURE__ */ h("button", {
+				type: "button",
+				onClick: _,
+				disabled: !d,
+				className: e("text-left", d && "cursor-pointer hover:opacity-80", !d && "cursor-default"),
+				children: [/* @__PURE__ */ h("p", {
+					className: e("font-semibold", f[o], t.status === "current" ? "text-foreground" : t.status === "completed" ? "text-green-600 dark:text-green-400" : "text-muted-foreground", t.disabled && "opacity-50"),
+					children: [t.title, t.optional && /* @__PURE__ */ m("span", {
+						className: "ml-2 text-muted-foreground font-normal text-xs",
+						children: "(Optional)"
+					})]
+				}), t.description && /* @__PURE__ */ m("p", {
+					className: e("text-muted-foreground mt-0.5", g[o]),
+					children: t.description
+				})]
+			})
+		})]
+	}) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
+		className: "flex flex-col items-center flex-shrink-0",
+		children: /* @__PURE__ */ h("button", {
+			type: "button",
+			onClick: _,
+			disabled: !d,
+			className: e("flex flex-col items-center gap-2", d && "cursor-pointer hover:opacity-80", !d && "cursor-default"),
+			"aria-current": t.status === "current" ? "step" : void 0,
+			children: [/* @__PURE__ */ m(b, {
+				step: t,
+				index: n
+			}), /* @__PURE__ */ h("div", {
+				className: "text-center min-w-[60px] max-w-[100px]",
+				children: [/* @__PURE__ */ m("p", {
+					className: e("font-semibold truncate", f[o], t.status === "current" ? "text-foreground" : t.status === "completed" ? "text-green-600 dark:text-green-400" : "text-muted-foreground", t.disabled && "opacity-50"),
+					children: t.title
+				}), t.description && /* @__PURE__ */ m("p", {
+					className: e("text-muted-foreground mt-0.5 hidden md:block truncate", g[o]),
+					children: t.description
+				})]
+			})]
+		})
+	}), !r && /* @__PURE__ */ m(x, {
+		status: t.status,
+		nextStatus: i || "pending",
+		orientation: "horizontal"
+	})] });
+}
+function C({ children: n, isActive: r, direction: i, animated: a }) {
+	let [o, s] = t.useState(r);
+	if (t.useEffect(() => {
+		if (r) s(!0);
+		else if (a) {
+			let e = setTimeout(() => s(!1), 300);
+			return () => clearTimeout(e);
+		} else s(!1);
+	}, [r, a]), !o) return null;
+	let c = {
+		slide: e("transition-all duration-300", r ? "opacity-100 translate-x-0" : "opacity-0 translate-x-8"),
+		fade: e("transition-opacity duration-300", r ? "opacity-100" : "opacity-0"),
+		scale: e("transition-all duration-300", r ? "opacity-100 scale-100" : "opacity-0 scale-95")
+	};
+	return /* @__PURE__ */ m("div", {
+		className: a ? c[i] : void 0,
+		children: n
+	});
+}
+function w({ steps: t, position: n, className: i }) {
+	let a = t.filter((e) => e.status === "completed" || e.status === "skipped");
+	return /* @__PURE__ */ h("div", {
+		className: e("w-full lg:w-80 p-4 bg-muted/50 rounded-lg border", n === "left" ? "lg:order-first" : "lg:order-last", i),
+		children: [/* @__PURE__ */ m("h3", {
+			className: "font-semibold text-lg mb-4",
+			children: "Order Summary"
+		}), /* @__PURE__ */ h("div", {
+			className: "space-y-4",
+			children: [a.map((e) => /* @__PURE__ */ h("div", {
+				className: "pb-3 border-b border-border last:border-0",
+				children: [/* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2 mb-1",
+					children: [/* @__PURE__ */ m(r, { className: "h-4 w-4 text-green-500" }), /* @__PURE__ */ m("span", {
+						className: "font-medium text-sm",
+						children: e.title
+					})]
+				}), e.summary && /* @__PURE__ */ m("div", {
+					className: "text-sm text-muted-foreground ml-6",
+					children: e.summary
+				})]
+			}, e.id)), a.length === 0 && /* @__PURE__ */ m("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Complete steps to see your order summary."
+			})]
+		})]
+	});
+}
+function T({ className: t, labels: o = {} }) {
+	let { currentStep: s, currentStepData: l, isFirstStep: u, isLastStep: f, isValidating: g, isLoading: _, validationError: v, nextStep: b, prevStep: x, skipStep: S, completeCheckout: C } = y(), { back: w = "Back", next: T = "Continue", skip: E = "Skip", complete: D = "Complete Order", processing: O = "Processing..." } = o, k = g || _;
+	return /* @__PURE__ */ h("div", {
+		className: e("space-y-4", t),
+		children: [v && /* @__PURE__ */ h("div", {
+			className: "flex items-center gap-2 p-3 bg-destructive/10 text-destructive rounded-lg text-sm",
+			children: [/* @__PURE__ */ m(n, { className: "h-4 w-4 flex-shrink-0" }), /* @__PURE__ */ m("span", { children: v })]
+		}), /* @__PURE__ */ h("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ h("button", {
+				type: "button",
+				onClick: x,
+				disabled: u || k,
+				className: e("flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg border transition-all", u || k ? "opacity-50 cursor-not-allowed bg-muted" : "hover:bg-muted"),
+				children: [/* @__PURE__ */ m(i, { className: "h-4 w-4" }), w]
+			}), /* @__PURE__ */ h("div", {
+				className: "flex items-center gap-2",
+				children: [l?.optional && !f && /* @__PURE__ */ h("button", {
+					type: "button",
+					onClick: S,
+					disabled: k,
+					className: e("flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg transition-all", "text-muted-foreground hover:text-foreground hover:bg-muted", k && "opacity-50 cursor-not-allowed"),
+					children: [/* @__PURE__ */ m(d, { className: "h-4 w-4" }), E]
+				}), /* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: f ? C : b,
+					disabled: k,
+					className: e("flex items-center gap-2 px-6 py-2.5 text-sm font-medium rounded-lg transition-all", "bg-primary text-primary-foreground", k ? "opacity-70 cursor-not-allowed" : "hover:bg-primary/90"),
+					children: k ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(c, { className: "h-4 w-4 animate-spin" }), O] }) : f ? /* @__PURE__ */ h(p, { children: [D, /* @__PURE__ */ m(r, { className: "h-4 w-4" })] }) : /* @__PURE__ */ h(p, { children: [T, /* @__PURE__ */ m(a, { className: "h-4 w-4" })] })
+				})]
+			})]
+		})]
+	});
+}
+function E({ className: t }) {
+	let { currentStep: n, totalSteps: r, stepsWithStatus: i } = y(), a = i.filter((e) => e.status === "completed" || e.status === "skipped").length, o = Math.round(a / r * 100);
+	return /* @__PURE__ */ h("div", {
+		className: e("space-y-2", t),
+		children: [/* @__PURE__ */ h("div", {
+			className: "flex justify-between text-sm",
+			children: [/* @__PURE__ */ h("span", {
+				className: "text-muted-foreground",
+				children: [
+					"Step ",
+					n + 1,
+					" of ",
+					r
+				]
+			}), /* @__PURE__ */ h("span", {
+				className: "font-medium",
+				children: [o, "% complete"]
+			})]
+		}), /* @__PURE__ */ m("div", {
+			className: "h-2 bg-muted rounded-full overflow-hidden",
+			children: /* @__PURE__ */ m("div", {
+				className: "h-full bg-primary transition-all duration-500 ease-out rounded-full",
+				style: { width: `${o}%` }
+			})
+		})]
+	});
+}
+function D({ steps: n, currentStep: r, onStepChange: i, onComplete: a, orientation: o = "horizontal", size: s = "md", clickable: c = !0, allowPreviousOnly: l = !0, showContent: u = !0, showSummary: d = !1, summaryPosition: f = "right", animated: p = !0, animationDirection: g = "slide", isLoading: y = !1, className: b, labels: x }) {
+	let E = _({
+		initialStep: r ?? 0,
+		steps: n,
+		onStepChange: i,
+		onComplete: a,
+		validateOnNext: !0
+	});
+	t.useEffect(() => {
+		r !== void 0 && r !== E.currentStep && E.goToStep(r);
+	}, [r]);
+	let D = {
+		...E,
+		orientation: o,
+		size: s,
+		clickable: c,
+		allowPreviousOnly: l,
+		animated: p,
+		animationDirection: g,
+		isLoading: y
+	};
+	return /* @__PURE__ */ m(v.Provider, {
+		value: D,
+		children: /* @__PURE__ */ h("div", {
+			className: e("w-full", b),
+			children: [/* @__PURE__ */ m("nav", {
+				"aria-label": "Checkout progress",
+				className: e("mb-8", o === "horizontal" ? "flex items-start justify-between overflow-x-auto pb-2" : "flex flex-col"),
+				children: E.stepsWithStatus.map((e, t) => /* @__PURE__ */ m(S, {
+					step: e,
+					index: t,
+					isLast: t === n.length - 1,
+					nextStatus: E.stepsWithStatus[t + 1]?.status
+				}, e.id))
+			}), /* @__PURE__ */ h("div", {
+				className: e("flex flex-col lg:flex-row gap-6", d && f === "left" && "lg:flex-row-reverse"),
+				children: [u && /* @__PURE__ */ h("div", {
+					className: "flex-1 min-w-0",
+					children: [n.map((e, t) => /* @__PURE__ */ m(C, {
+						isActive: t === E.currentStep,
+						direction: g,
+						animated: p,
+						children: /* @__PURE__ */ h("div", {
+							className: "p-6 rounded-lg border bg-card",
+							children: [
+								/* @__PURE__ */ m("h2", {
+									className: "text-xl font-semibold mb-2",
+									children: e.title
+								}),
+								e.description && /* @__PURE__ */ m("p", {
+									className: "text-muted-foreground mb-6",
+									children: e.description
+								}),
+								e.content
+							]
+						})
+					}, e.id)), /* @__PURE__ */ m("div", {
+						className: "mt-6",
+						children: /* @__PURE__ */ m(T, { labels: x })
+					})]
+				}), d && /* @__PURE__ */ m(w, {
+					steps: E.stepsWithStatus,
+					position: f
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { T as CheckoutNavigation, E as CheckoutProgressBar, D as WakaCheckoutStepper, D as default, _ as useCheckoutStepper, y as useCheckoutStepperContext };

package/dist/components/waka-cohort-table/index.cjs.js

@@ -0,0 +1,2 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../../utils/local-date.cjs.js");let r=require("react");r=e.__toESM(r);let i=require("lucide-react"),a=require("react/jsx-runtime");var o={min:`#fef2f2`,mid:`#fef9c3`,max:`#dcfce7`,midValue:50};function s(e,t,n,r){let i=(Math.max(t,Math.min(n,e))-t)/(n-t),a=e=>{let t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:{r:255,g:255,b:255}},o=a(r.min),s=a(r.max),c=r.mid?a(r.mid):null,l=(r.midValue??50)/100,u,d,f;if(c&&i<=l){let e=i/l;u=Math.round(o.r+(c.r-o.r)*e),d=Math.round(o.g+(c.g-o.g)*e),f=Math.round(o.b+(c.b-o.b)*e)}else if(c&&i>l){let e=(i-l)/(1-l);u=Math.round(c.r+(s.r-c.r)*e),d=Math.round(c.g+(s.g-c.g)*e),f=Math.round(c.b+(s.b-c.b)*e)}else u=Math.round(o.r+(s.r-o.r)*i),d=Math.round(o.g+(s.g-o.g)*i),f=Math.round(o.b+(s.b-o.b)*i);return`rgb(${u}, ${d}, ${f})`}function c(e,t,n){return t?`${e.toFixed(n)}%`:e.toFixed(n)}function l(e){return e>=1e6?`${(e/1e6).toFixed(1)}M`:e>=1e3?`${(e/1e3).toFixed(1)}K`:e.toString()}function u(e,t){return`${{day:`Day`,week:`Week`,month:`Month`,quarter:`Q`,year:`Year`}[e]} ${t}`}function d(e){if(e.length===0)return[];let t=Math.max(...e.map(e=>e.data.length)),n=[];for(let r=0;r<t;r++){let t=e.map(e=>e.data[r]?.value).filter(e=>e!==void 0);if(t.length>0){let e=t.reduce((e,t)=>e+t,0);n.push({value:e/t.length,count:t.length})}}return n}function f(e,t){let n=e-t;return Math.abs(n)<.5?`neutral`:n>0?`up`:`down`}function p(e,t,n){let r=Math.max(...e.map(e=>e.data.length)),i=[`Cohort`,`Size`,...Array.from({length:r},(e,n)=>u(t,n))],a=e.map(e=>[e.label,e.size.toString(),...e.data.map(e=>e.value.toString())]);return[i.join(`,`),...a.map(e=>e.join(`,`))].join(`
+`)}function m(e,t){let n=e.map(e=>({id:e.id,label:e.label,date:e.date.toISOString(),size:e.size,data:e.data.map(e=>({value:e.value,count:e.count,...t&&e.metadata?{metadata:e.metadata}:{}}))}));return JSON.stringify(n,null,2)}function h({children:e,content:t,visible:n,position:r}){return(0,a.jsxs)(`div`,{className:`relative inline-block`,children:[e,n&&(0,a.jsxs)(`div`,{className:`fixed z-50 px-3 py-2 text-sm bg-popover text-popover-foreground rounded-md shadow-lg border max-w-xs`,style:{left:r.x,top:r.y-10,transform:`translate(-50%, -100%)`},children:[t,(0,a.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover`})]})]})}function g({colorScale:e,min:t,max:n,showAsPercentage:r}){return(n-t)/4,(0,a.jsxs)(`div`,{className:`flex items-center gap-2 text-xs text-muted-foreground`,children:[(0,a.jsx)(`span`,{children:r?`${t}%`:t}),(0,a.jsx)(`div`,{className:`flex h-3 rounded overflow-hidden`,children:Array.from({length:20},(r,i)=>(0,a.jsx)(`div`,{className:`w-3 h-full`,style:{backgroundColor:s(t+(n-t)*(i/19),t,n,e)}},i))}),(0,a.jsx)(`span`,{children:r?`${n}%`:n})]})}function _({dataPoint:e,row:n,periodIndex:i,colorScale:o,showAsPercentage:u,decimalPlaces:d,highlighted:f,onClick:p,renderCell:m,renderTooltip:g,className:_}){let[v,y]=r.useState(!1),[b,x]=r.useState({x:0,y:0}),S=r.useRef(null),C=s(e.value,0,100,o),w=e=>{y(!0);let t=e.target.getBoundingClientRect();x({x:t.left+t.width/2,y:t.top})},T=()=>{y(!1)},E=(0,a.jsxs)(`div`,{className:`space-y-1`,children:[(0,a.jsx)(`div`,{className:`font-medium`,children:n.label}),(0,a.jsxs)(`div`,{children:[`Period `,i,`: `,c(e.value,u,d)]}),e.count!==void 0&&(0,a.jsxs)(`div`,{className:`text-muted-foreground`,children:[`Count: `,l(e.count)]}),e.metadata&&Object.keys(e.metadata).length>0&&(0,a.jsx)(`div`,{className:`pt-1 border-t`,children:Object.entries(e.metadata).map(([e,t])=>(0,a.jsxs)(`div`,{className:`text-muted-foreground`,children:[e,`: `,String(t)]},e))})]});return(0,a.jsx)(`td`,{ref:S,className:t.cn(`px-3 py-2 text-center text-sm font-medium transition-all cursor-pointer`,`border-r border-border last:border-r-0`,f&&`ring-2 ring-primary ring-inset`,_),style:{backgroundColor:C},onClick:p,onMouseEnter:w,onMouseLeave:T,children:(0,a.jsx)(h,{content:g?g(e,n,i):E,visible:v,position:b,children:m?m(e,n,i):c(e.value,u,d)})})}function v({data:e,period:h=`month`,metric:v=`retention`,metricLabel:y,showAsPercentage:b=!0,decimalPlaces:x=1,colorScale:S=o,showCohortSize:C=!0,showAverageRow:w=!0,showTrends:T=!0,highlightOnHover:E=!0,showLegend:D=!0,enableExport:O=!0,onCellClick:k,onExport:A,renderCell:j,renderTooltip:M,className:N,tableClassName:P,headerClassName:F,cellClassName:I}){let[L,R]=r.useState(null),[z,B]=r.useState(null),V=r.useMemo(()=>Math.max(...e.map(e=>e.data.length),0),[e]),H=r.useMemo(()=>d(e),[e]),U=r.useCallback(t=>{let r=y||v,i=`cohort-${r}-${n.localDateKey(new Date)}`;if(A){A({format:t,filename:i,includeMetadata:!0});return}let a,o,s;t===`csv`?(a=p(e,h,r),o=`text/csv`,s=`csv`):(a=m(e,!0),o=`application/json`,s=`json`);let c=new Blob([a],{type:o}),l=URL.createObjectURL(c),u=document.createElement(`a`);u.href=l,u.download=`${i}.${s}`,document.body.appendChild(u),u.click(),document.body.removeChild(u),URL.revokeObjectURL(l)},[e,h,v,y,A]),W=r.useCallback((e,t)=>{E&&(R(e),B(t))},[E]),G=r.useCallback(()=>{R(null),B(null)},[]),K=y||{retention:`Retention`,churn:`Churn`,revenue:`Revenue`,engagement:`Engagement`,custom:`Value`}[v];return e.length===0?(0,a.jsxs)(`div`,{className:t.cn(`flex flex-col items-center justify-center py-12 text-center`,N),children:[(0,a.jsx)(i.Users,{className:`h-12 w-12 text-muted-foreground/50 mb-4`}),(0,a.jsx)(`h3`,{className:`text-lg font-medium text-muted-foreground`,children:`No cohort data`}),(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground/70 mt-1`,children:`Add cohort data to see the analysis table.`})]}):(0,a.jsxs)(`div`,{className:t.cn(`space-y-4`,N),children:[(0,a.jsxs)(`div`,{className:`flex items-center justify-between flex-wrap gap-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-4`,children:[(0,a.jsxs)(`h3`,{className:`text-lg font-semibold`,children:[K,` Analysis`]}),D&&(0,a.jsx)(g,{colorScale:S,min:0,max:100,showAsPercentage:b})]}),O&&(0,a.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,a.jsxs)(`button`,{onClick:()=>U(`csv`),className:`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors`,children:[(0,a.jsx)(i.Download,{className:`h-4 w-4`}),`CSV`]}),(0,a.jsxs)(`button`,{onClick:()=>U(`json`),className:`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors`,children:[(0,a.jsx)(i.Download,{className:`h-4 w-4`}),`JSON`]})]})]}),(0,a.jsx)(`div`,{className:`overflow-x-auto rounded-lg border border-border`,children:(0,a.jsxs)(`table`,{className:t.cn(`w-full border-collapse`,P),children:[(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{className:`bg-muted/50`,children:[(0,a.jsx)(`th`,{className:t.cn(`px-4 py-3 text-left text-sm font-semibold text-foreground border-b border-r border-border sticky left-0 bg-muted/50 z-10`,F),children:`Cohort`}),C&&(0,a.jsx)(`th`,{className:t.cn(`px-4 py-3 text-center text-sm font-semibold text-foreground border-b border-r border-border`,F),children:(0,a.jsxs)(`div`,{className:`flex items-center justify-center gap-1`,children:[(0,a.jsx)(i.Users,{className:`h-4 w-4`}),`Size`]})}),Array.from({length:V},(e,n)=>(0,a.jsx)(`th`,{className:t.cn(`px-3 py-3 text-center text-sm font-semibold text-foreground border-b border-r border-border last:border-r-0 transition-colors`,z===n&&E&&`bg-accent`,F),children:u(h,n)},n))]})}),(0,a.jsxs)(`tbody`,{children:[e.map((n,r)=>{let o=L===n.id;return(0,a.jsxs)(`tr`,{className:t.cn(`transition-colors`,o&&E&&`bg-accent/30`),onMouseEnter:()=>R(n.id),onMouseLeave:()=>R(null),children:[(0,a.jsx)(`td`,{className:t.cn(`px-4 py-2 text-sm font-medium text-foreground border-b border-r border-border sticky left-0 bg-background z-10`,o&&E&&`bg-accent/30`,I),children:(0,a.jsxs)(`div`,{className:`flex items-center gap-2`,children:[n.label,T&&r>0&&n.data[0]&&e[r-1].data[0]&&(0,a.jsxs)(a.Fragment,{children:[f(n.data[0].value,e[r-1].data[0].value)===`up`&&(0,a.jsx)(i.TrendingUp,{className:`h-3 w-3 text-green-600`}),f(n.data[0].value,e[r-1].data[0].value)===`down`&&(0,a.jsx)(i.TrendingDown,{className:`h-3 w-3 text-red-600`})]})]})}),C&&(0,a.jsx)(`td`,{className:t.cn(`px-4 py-2 text-center text-sm text-muted-foreground border-b border-r border-border`,I),children:l(n.size)}),Array.from({length:V},(e,r)=>{let i=n.data[r];return i?(0,a.jsx)(_,{dataPoint:i,row:n,periodIndex:r,colorScale:S,showAsPercentage:b,decimalPlaces:x,highlighted:(o||z===r)&&E,onClick:()=>k?.(n,r,i),renderCell:j,renderTooltip:M,className:t.cn(`border-b`,z===r&&E&&`ring-2 ring-primary/50 ring-inset`,I)},r):(0,a.jsx)(`td`,{className:t.cn(`px-3 py-2 text-center text-sm text-muted-foreground border-b border-r border-border last:border-r-0 bg-muted/20`,I),onMouseEnter:()=>W(n.id,r),onMouseLeave:G,children:`-`},r)})]},n.id)}),w&&H.length>0&&(0,a.jsxs)(`tr`,{className:`bg-muted/30 font-medium`,children:[(0,a.jsx)(`td`,{className:t.cn(`px-4 py-2 text-sm font-semibold text-foreground border-r border-border sticky left-0 bg-muted/30 z-10`,I),children:(0,a.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,a.jsx)(i.Info,{className:`h-4 w-4 text-muted-foreground`}),`Average`]})}),C&&(0,a.jsx)(`td`,{className:t.cn(`px-4 py-2 text-center text-sm text-muted-foreground border-r border-border`,I),children:l(Math.round(e.reduce((e,t)=>e+t.size,0)/e.length))}),Array.from({length:V},(e,n)=>{let r=H[n];return r?(0,a.jsx)(`td`,{className:t.cn(`px-3 py-2 text-center text-sm font-semibold border-r border-border last:border-r-0`,I),style:{backgroundColor:s(r.value,0,100,S)},children:c(r.value,b,x)},n):(0,a.jsx)(`td`,{className:t.cn(`px-3 py-2 text-center text-sm text-muted-foreground border-r border-border last:border-r-0`,I),children:`-`},n)})]})]})]})}),(0,a.jsxs)(`div`,{className:`flex items-center justify-between text-xs text-muted-foreground`,children:[(0,a.jsxs)(`span`,{children:[e.length,` cohort`,e.length===1?``:`s`,` | `,V,` period`,V===1?``:`s`]}),(0,a.jsxs)(`span`,{children:[`Total users: `,l(e.reduce((e,t)=>e+t.size,0))]})]})]})}function y({initialData:e=[],defaultPeriod:t=`month`,defaultMetric:n=`retention`}={}){let[i,a]=r.useState(e),[o,s]=r.useState(t),[c,l]=r.useState(n),[u,d]=r.useState(null);return{data:i,period:o,metric:c,selectedCohort:u,statistics:r.useMemo(()=>{if(i.length===0)return{totalCohorts:0,totalUsers:0,averageCohortSize:0,averageRetentionByPeriod:[],overallAverageRetention:0,bestCohort:null,worstCohort:null};let e=i.reduce((e,t)=>e+t.size,0),t=e/i.length,n=Math.max(...i.map(e=>e.data.length)),r=Array.from({length:n},(e,t)=>{let n=i.map(e=>e.data[t]?.value).filter(e=>e!==void 0);return n.length>0?n.reduce((e,t)=>e+t,0)/n.length:0}),a=i.flatMap(e=>e.data.map(e=>e.value)),o=a.length>0?a.reduce((e,t)=>e+t,0)/a.length:0,s=[...i.map(e=>({row:e,average:e.data.length>0?e.data.reduce((e,t)=>e+t.value,0)/e.data.length:0}))].sort((e,t)=>t.average-e.average),c=s[0]?.row||null,l=s[s.length-1]?.row||null;return{totalCohorts:i.length,totalUsers:e,averageCohortSize:t,averageRetentionByPeriod:r,overallAverageRetention:o,bestCohort:c,worstCohort:l}},[i]),setData:a,setPeriod:s,setMetric:l,setSelectedCohort:d,addCohort:r.useCallback(e=>{a(t=>[...t,e])},[]),updateCohort:r.useCallback((e,t)=>{a(n=>n.map(n=>n.id===e?{...n,...t}:n))},[]),removeCohort:r.useCallback(e=>{a(t=>t.filter(t=>t.id!==e))},[]),updateDataPoint:r.useCallback((e,t,n)=>{a(r=>r.map(r=>{if(r.id!==e)return r;let i=[...r.data];return i[t]&&(i[t]={...i[t],...n}),{...r,data:i}}))},[]),sortCohorts:r.useCallback((e,t=`desc`)=>{a(n=>[...n].sort((n,r)=>{let i=0;switch(e){case`date`:i=n.date.getTime()-r.date.getTime();break;case`size`:i=n.size-r.size;break;case`retention`:i=(n.data.length>0?n.data.reduce((e,t)=>e+t.value,0)/n.data.length:0)-(r.data.length>0?r.data.reduce((e,t)=>e+t.value,0)/r.data.length:0);break}return t===`asc`?i:-i}))},[]),filterByDateRange:r.useCallback((e,t)=>i.filter(n=>n.date>=e&&n.date<=t),[i]),getCohortById:r.useCallback(e=>i.find(t=>t.id===e),[i]),reset:r.useCallback(()=>{a(e),s(t),l(n),d(null)},[e,t,n])}}exports.WakaCohortTable=v,exports.default=v,exports.useCohortTable=y;

package/dist/components/waka-cohort-table/index.d.ts

@@ -112,19 +112,19 @@ export declare function useCohortTable({ initialData, defaultPeriod, defaultMetr
     data: CohortRow[];
     period: CohortPeriod;
     metric: CohortMetric;
-    selectedCohort: string;
+    selectedCohort: string | null;
     statistics: CohortStatistics;
     setData: React.Dispatch<React.SetStateAction<CohortRow[]>>;
     setPeriod: React.Dispatch<React.SetStateAction<CohortPeriod>>;
     setMetric: React.Dispatch<React.SetStateAction<CohortMetric>>;
-    setSelectedCohort: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedCohort: React.Dispatch<React.SetStateAction<string | null>>;
     addCohort: (cohort: CohortRow) => void;
     updateCohort: (id: string, updates: Partial<CohortRow>) => void;
     removeCohort: (id: string) => void;
     updateDataPoint: (cohortId: string, periodIndex: number, value: Partial<CohortDataPoint>) => void;
     sortCohorts: (sortBy: "date" | "size" | "retention", order?: "asc" | "desc") => void;
     filterByDateRange: (startDate: Date, endDate: Date) => CohortRow[];
-    getCohortById: (id: string) => CohortRow;
+    getCohortById: (id: string) => CohortRow | undefined;
     reset: () => void;
 };
 export default WakaCohortTable;