@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-presence-indicator/index.es.js

@@ -0,0 +1,533 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Avatar as t, AvatarFallback as n, AvatarImage as r } from "../avatar/index.es.js";
+import { DropdownMenu as i, DropdownMenuContent as a, DropdownMenuItem as o, DropdownMenuSeparator as s, DropdownMenuTrigger as c } from "../dropdown-menu/index.es.js";
+import * as l from "react";
+import { BellOff as u, Check as d, ChevronDown as f, Circle as p, Clock as m, Eye as h, EyeOff as g, MinusCircle as _, Moon as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/waka-presence-indicator/index.tsx
+function S(e) {
+	let t = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(t / 6e4), r = Math.floor(n / 60), i = Math.floor(r / 24);
+	return i > 0 ? `${i}d` : r > 0 ? `${r}h` : n > 0 ? `${n}m` : "Just now";
+}
+function C(e) {
+	let t = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(t / 6e4), r = Math.floor(n / 60), i = Math.floor(r / 24);
+	return i > 0 ? `${i} day${i > 1 ? "s" : ""} ago` : r > 0 ? `${r} hour${r > 1 ? "s" : ""} ago` : n > 0 ? `${n} minute${n > 1 ? "s" : ""} ago` : "Just now";
+}
+function w(e = {}) {
+	let { initialState: t, onStatusChange: n, autoAwayTimeout: r, persistKey: i } = e, [a, o] = l.useState(() => {
+		if (i && typeof window < "u") {
+			let e = localStorage.getItem(i);
+			if (e) try {
+				let t = JSON.parse(e);
+				return {
+					status: t.status || "offline",
+					customMessage: t.customMessage,
+					updatedAt: t.updatedAt ? new Date(t.updatedAt) : /* @__PURE__ */ new Date(),
+					lastSeen: t.lastSeen ? new Date(t.lastSeen) : void 0,
+					doNotDisturb: t.doNotDisturb || !1
+				};
+			} catch {}
+		}
+		return {
+			status: t?.status || "offline",
+			customMessage: t?.customMessage,
+			updatedAt: t?.updatedAt || /* @__PURE__ */ new Date(),
+			lastSeen: t?.lastSeen,
+			doNotDisturb: t?.doNotDisturb || !1
+		};
+	}), s = l.useRef(void 0), c = l.useRef(Date.now());
+	return l.useEffect(() => {
+		i && typeof window < "u" && localStorage.setItem(i, JSON.stringify({
+			status: a.status,
+			customMessage: a.customMessage,
+			updatedAt: a.updatedAt?.toISOString(),
+			lastSeen: a.lastSeen?.toISOString(),
+			doNotDisturb: a.doNotDisturb
+		}));
+	}, [a, i]), l.useEffect(() => {
+		if (!r || a.status !== "online") return;
+		let e = () => {
+			c.current = Date.now(), a.status === "away" && o((e) => ({
+				...e,
+				status: "online",
+				updatedAt: /* @__PURE__ */ new Date()
+			}));
+		};
+		return window.addEventListener("mousemove", e), window.addEventListener("keydown", e), window.addEventListener("click", e), window.addEventListener("scroll", e), s.current = setInterval(() => {
+			Date.now() - c.current >= r && a.status === "online" && o((e) => ({
+				...e,
+				status: "away",
+				updatedAt: /* @__PURE__ */ new Date()
+			}));
+		}, 1e4), () => {
+			window.removeEventListener("mousemove", e), window.removeEventListener("keydown", e), window.removeEventListener("click", e), window.removeEventListener("scroll", e), s.current && clearInterval(s.current);
+		};
+	}, [r, a.status]), {
+		presence: a,
+		setStatus: l.useCallback((e) => {
+			o((t) => ({
+				...t,
+				status: e,
+				updatedAt: /* @__PURE__ */ new Date(),
+				lastSeen: t.status !== "offline" && e === "offline" ? /* @__PURE__ */ new Date() : t.lastSeen
+			})), n?.(e);
+		}, [n]),
+		setCustomMessage: l.useCallback((e) => {
+			o((t) => ({
+				...t,
+				customMessage: e
+			}));
+		}, []),
+		toggleDoNotDisturb: l.useCallback(() => {
+			o((e) => ({
+				...e,
+				doNotDisturb: !e.doNotDisturb
+			}));
+		}, []),
+		setPresence: l.useCallback((e) => {
+			o((t) => ({
+				...t,
+				...e,
+				updatedAt: e.status === t.status ? t.updatedAt : /* @__PURE__ */ new Date()
+			})), e.status && e.status !== a.status && n?.(e.status);
+		}, [n, a.status]),
+		getStatusDuration: l.useCallback(() => a.updatedAt ? S(a.updatedAt) : null, [a.updatedAt]),
+		getLastSeen: l.useCallback(() => a.lastSeen ? C(a.lastSeen) : null, [a.lastSeen])
+	};
+}
+var T = {
+	online: {
+		label: "Online",
+		color: "bg-green-500",
+		bgColor: "bg-green-500/20",
+		ringColor: "ring-green-500/50",
+		icon: p
+	},
+	away: {
+		label: "Away",
+		color: "bg-yellow-500",
+		bgColor: "bg-yellow-500/20",
+		ringColor: "ring-yellow-500/50",
+		icon: m
+	},
+	busy: {
+		label: "Busy",
+		color: "bg-red-500",
+		bgColor: "bg-red-500/20",
+		ringColor: "ring-red-500/50",
+		icon: _
+	},
+	offline: {
+		label: "Offline",
+		color: "bg-gray-400",
+		bgColor: "bg-gray-400/20",
+		ringColor: "ring-gray-400/50",
+		icon: p
+	},
+	invisible: {
+		label: "Invisible",
+		color: "bg-gray-400",
+		bgColor: "bg-gray-400/20",
+		ringColor: "ring-gray-400/50",
+		icon: g
+	}
+}, E = {
+	xs: {
+		dot: "h-2 w-2",
+		dotPosition: "-bottom-0 -right-0",
+		avatar: "h-6 w-6",
+		text: "text-xs",
+		icon: "h-2 w-2",
+		ring: "ring-1",
+		padding: "p-0.5"
+	},
+	sm: {
+		dot: "h-2.5 w-2.5",
+		dotPosition: "-bottom-0.5 -right-0.5",
+		avatar: "h-8 w-8",
+		text: "text-xs",
+		icon: "h-2.5 w-2.5",
+		ring: "ring-2",
+		padding: "p-0.5"
+	},
+	md: {
+		dot: "h-3 w-3",
+		dotPosition: "-bottom-0.5 -right-0.5",
+		avatar: "h-10 w-10",
+		text: "text-sm",
+		icon: "h-3 w-3",
+		ring: "ring-2",
+		padding: "p-1"
+	},
+	lg: {
+		dot: "h-4 w-4",
+		dotPosition: "-bottom-1 -right-1",
+		avatar: "h-12 w-12",
+		text: "text-base",
+		icon: "h-3.5 w-3.5",
+		ring: "ring-2",
+		padding: "p-1"
+	},
+	xl: {
+		dot: "h-5 w-5",
+		dotPosition: "-bottom-1 -right-1",
+		avatar: "h-16 w-16",
+		text: "text-lg",
+		icon: "h-4 w-4",
+		ring: "ring-[3px]",
+		padding: "p-1.5"
+	}
+};
+function D({ status: t, size: n = "md", pulse: r = !0, doNotDisturb: i = !1, className: a }) {
+	let o = T[t], s = E[n], c = r && t === "online" && !i;
+	return /* @__PURE__ */ x("div", {
+		className: e("relative inline-flex", a),
+		children: [
+			c && /* @__PURE__ */ b("span", { className: e("absolute inset-0 rounded-full animate-presence-ping", o.color, "opacity-75") }),
+			/* @__PURE__ */ b("span", {
+				className: e("relative inline-flex rounded-full", s.dot, o.color, i && "ring-1 ring-background"),
+				children: i && /* @__PURE__ */ b("span", {
+					className: "absolute inset-0 flex items-center justify-center",
+					children: /* @__PURE__ */ b("span", { className: "h-[1px] w-2/3 bg-background rounded-full" })
+				})
+			}),
+			/* @__PURE__ */ b("style", { children: "\n        @keyframes presence-ping {\n          0% {\n            transform: scale(1);\n            opacity: 0.75;\n          }\n          75%, 100% {\n            transform: scale(2);\n            opacity: 0;\n          }\n        }\n        .animate-presence-ping {\n          animation: presence-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;\n        }\n      " })
+		]
+	});
+}
+function O({ src: i, fallback: a, alt: o, status: s, size: c = "md", pulse: l = !0, doNotDisturb: u = !1, className: d, showRing: f = !1, onClick: p }) {
+	let m = T[s], h = E[c];
+	return /* @__PURE__ */ x("div", {
+		className: e("relative inline-flex", p && "cursor-pointer", d),
+		onClick: p,
+		children: [/* @__PURE__ */ x(t, {
+			className: e(h.avatar, f && [
+				h.ring,
+				"ring-offset-2 ring-offset-background",
+				m.ringColor
+			]),
+			children: [i && /* @__PURE__ */ b(r, {
+				src: i,
+				alt: o || "User avatar"
+			}), /* @__PURE__ */ b(n, {
+				className: "text-xs font-medium",
+				children: a || "?"
+			})]
+		}), /* @__PURE__ */ b("span", {
+			className: e("absolute flex items-center justify-center rounded-full ring-2 ring-background", h.dot, h.dotPosition),
+			children: /* @__PURE__ */ b(D, {
+				status: s,
+				size: c,
+				pulse: l,
+				doNotDisturb: u
+			})
+		})]
+	});
+}
+function k({ status: t, customMessage: n, showDuration: r = !1, updatedAt: i, size: a = "md", doNotDisturb: o = !1, className: s }) {
+	let c = T[t], l = E[a], d = i ? S(i) : null;
+	return /* @__PURE__ */ x("div", {
+		className: e("inline-flex items-center gap-2 rounded-full border px-3 py-1.5", c.bgColor, s),
+		children: [
+			/* @__PURE__ */ b(D, {
+				status: t,
+				size: "sm",
+				pulse: t === "online",
+				doNotDisturb: o
+			}),
+			/* @__PURE__ */ b("span", {
+				className: e("font-medium", l.text),
+				children: n || c.label
+			}),
+			r && d && d !== "Just now" && /* @__PURE__ */ x("span", {
+				className: e("text-muted-foreground", l.text),
+				children: ["for ", d]
+			}),
+			o && /* @__PURE__ */ b(u, { className: e("text-muted-foreground", l.icon) })
+		]
+	});
+}
+function A({ presence: t, onStatusChange: n, onToggleDND: r, onSetCustomMessage: p, showCustomMessage: m = !0, size: g = "md", disabled: _ = !1, className: S, avatar: C, triggerVariant: w = "badge" }) {
+	let [k, A] = l.useState(t.customMessage || ""), [j, M] = l.useState(!1), N = T[t.status], P = E[g], F = (e) => {
+		n(e);
+	}, I = () => {
+		p?.(k.trim() || void 0), M(!1);
+	};
+	return /* @__PURE__ */ x(i, { children: [/* @__PURE__ */ b(c, {
+		asChild: !0,
+		disabled: _,
+		children: /* @__PURE__ */ b("button", {
+			className: e("focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-full", _ && "opacity-50 cursor-not-allowed", S),
+			type: "button",
+			children: w === "avatar" && C ? /* @__PURE__ */ b(O, {
+				src: C.src,
+				fallback: C.fallback,
+				alt: C.alt,
+				status: t.status,
+				size: g,
+				doNotDisturb: t.doNotDisturb
+			}) : w === "minimal" ? /* @__PURE__ */ x("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ b(D, {
+					status: t.status,
+					size: g,
+					doNotDisturb: t.doNotDisturb
+				}), /* @__PURE__ */ b(f, { className: e("text-muted-foreground", P.icon) })]
+			}) : /* @__PURE__ */ x("div", {
+				className: e("inline-flex items-center gap-2 rounded-full border px-3 py-1.5 transition-colors", "hover:bg-muted/50 cursor-pointer", N.bgColor),
+				children: [
+					/* @__PURE__ */ b(D, {
+						status: t.status,
+						size: "sm",
+						doNotDisturb: t.doNotDisturb
+					}),
+					/* @__PURE__ */ b("span", {
+						className: e("font-medium", P.text),
+						children: t.customMessage || N.label
+					}),
+					/* @__PURE__ */ b(f, { className: e("text-muted-foreground", P.icon) })
+				]
+			})
+		})
+	}), /* @__PURE__ */ x(a, {
+		align: "start",
+		className: "w-56",
+		children: [
+			[
+				"online",
+				"away",
+				"busy",
+				"offline",
+				"invisible"
+			].map((n) => {
+				let r = T[n];
+				return r.icon, /* @__PURE__ */ x(o, {
+					onClick: () => F(n),
+					className: "flex items-center gap-2 cursor-pointer",
+					children: [
+						/* @__PURE__ */ b("span", { className: e("h-2.5 w-2.5 rounded-full", r.color) }),
+						/* @__PURE__ */ b("span", {
+							className: "flex-1",
+							children: r.label
+						}),
+						t.status === n && /* @__PURE__ */ b(d, { className: "h-4 w-4 text-primary" }),
+						n === "invisible" && /* @__PURE__ */ b(h, { className: "h-3.5 w-3.5 text-muted-foreground" })
+					]
+				}, n);
+			}),
+			(m || r) && /* @__PURE__ */ b(s, {}),
+			r && /* @__PURE__ */ x(o, {
+				onClick: r,
+				className: "flex items-center gap-2 cursor-pointer",
+				children: [
+					/* @__PURE__ */ b(u, { className: "h-4 w-4" }),
+					/* @__PURE__ */ b("span", {
+						className: "flex-1",
+						children: "Do Not Disturb"
+					}),
+					t.doNotDisturb && /* @__PURE__ */ b(d, { className: "h-4 w-4 text-primary" })
+				]
+			}),
+			m && p && /* @__PURE__ */ x(y, { children: [j ? /* @__PURE__ */ b("div", {
+				className: "p-2",
+				children: /* @__PURE__ */ x("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ b("input", {
+						type: "text",
+						value: k,
+						onChange: (e) => A(e.target.value),
+						placeholder: "What's your status?",
+						className: e("flex-1 px-2 py-1 text-sm rounded border bg-background", "focus:outline-none focus:ring-1 focus:ring-ring"),
+						onKeyDown: (e) => {
+							e.key === "Enter" && I(), e.key === "Escape" && M(!1);
+						},
+						autoFocus: !0
+					}), /* @__PURE__ */ b("button", {
+						onClick: I,
+						className: "px-2 py-1 text-sm bg-primary text-primary-foreground rounded hover:bg-primary/90",
+						type: "button",
+						children: "Save"
+					})]
+				})
+			}) : /* @__PURE__ */ x(o, {
+				onClick: () => M(!0),
+				className: "flex items-center gap-2 cursor-pointer",
+				children: [/* @__PURE__ */ b(v, { className: "h-4 w-4" }), /* @__PURE__ */ b("span", {
+					className: "flex-1",
+					children: t.customMessage ? "Edit status message" : "Set status message"
+				})]
+			}), t.customMessage && !j && /* @__PURE__ */ x(o, {
+				onClick: () => p(void 0),
+				className: "flex items-center gap-2 cursor-pointer text-muted-foreground",
+				children: [/* @__PURE__ */ b("span", { className: "h-4 w-4" }), /* @__PURE__ */ b("span", { children: "Clear status message" })]
+			})] })
+		]
+	})] });
+}
+function j({ lastSeen: t, size: n = "md", showPrefix: r = !0, className: i }) {
+	let a = E[n], [o, s] = l.useState(C(t));
+	return l.useEffect(() => {
+		let e = setInterval(() => {
+			s(C(t));
+		}, 6e4);
+		return () => clearInterval(e);
+	}, [t]), /* @__PURE__ */ x("div", {
+		className: e("inline-flex items-center gap-1.5 text-muted-foreground", a.text, i),
+		children: [/* @__PURE__ */ b(m, { className: a.icon }), /* @__PURE__ */ x("span", { children: [r && "Last seen ", o] })]
+	});
+}
+function M({ name: t, avatarSrc: n, avatarFallback: r, presence: i, showDuration: a = !0, showLastSeen: o = !0, size: s = "md", className: c, onClick: l }) {
+	let d = T[i.status], f = E[s], p = i.updatedAt ? S(i.updatedAt) : null;
+	return /* @__PURE__ */ x("div", {
+		className: e("flex items-center gap-3 p-3 rounded-lg border bg-card", l && "cursor-pointer hover:bg-muted/50 transition-colors", c),
+		onClick: l,
+		children: [
+			/* @__PURE__ */ b(O, {
+				src: n,
+				fallback: r || t.slice(0, 2).toUpperCase(),
+				alt: t,
+				status: i.status,
+				size: s,
+				doNotDisturb: i.doNotDisturb
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ b("div", {
+						className: e("font-medium truncate", f.text),
+						children: t
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ b("span", {
+							className: e("inline-flex items-center gap-1", f.text, d.label === "Online" ? "text-green-600 dark:text-green-400" : d.label === "Away" ? "text-yellow-600 dark:text-yellow-400" : d.label === "Busy" ? "text-red-600 dark:text-red-400" : "text-muted-foreground"),
+							children: i.customMessage || d.label
+						}), a && p && i.status !== "offline" && p !== "Just now" && /* @__PURE__ */ x("span", {
+							className: e("text-muted-foreground", f.text),
+							children: ["- ", p]
+						})]
+					}),
+					o && i.status === "offline" && i.lastSeen && /* @__PURE__ */ b(j, {
+						lastSeen: i.lastSeen,
+						size: "sm",
+						className: "mt-0.5"
+					})
+				]
+			}),
+			i.doNotDisturb && /* @__PURE__ */ b(u, { className: e("text-muted-foreground shrink-0", f.icon) })
+		]
+	});
+}
+function N({ users: t, size: n = "md", showLastSeen: r = !0, groupByStatus: i = !1, maxVisible: a, onUserClick: o, className: s }) {
+	let c = E[n], u = l.useMemo(() => {
+		let e = {
+			online: 0,
+			busy: 1,
+			away: 2,
+			invisible: 3,
+			offline: 4
+		};
+		return [...t].sort((t, n) => e[t.presence.status] - e[n.presence.status]);
+	}, [t]), d = l.useMemo(() => {
+		if (!i) return null;
+		let e = {
+			online: [],
+			away: [],
+			busy: [],
+			offline: [],
+			invisible: []
+		};
+		return u.forEach((t) => {
+			e[t.presence.status].push(t);
+		}), e;
+	}, [u, i]), f = a ? u.slice(0, a) : u, p = a ? Math.max(0, t.length - a) : 0, m = (e) => /* @__PURE__ */ b(M, {
+		name: e.name,
+		avatarSrc: e.avatarSrc,
+		avatarFallback: e.avatarFallback,
+		presence: e.presence,
+		showLastSeen: r,
+		size: n,
+		onClick: o ? () => o(e.id) : void 0
+	}, e.id);
+	return i && d ? /* @__PURE__ */ b("div", {
+		className: e("space-y-4", s),
+		children: [
+			"online",
+			"busy",
+			"away",
+			"offline",
+			"invisible"
+		].map((t) => {
+			let n = d[t];
+			if (n.length === 0) return null;
+			let r = T[t];
+			return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("div", {
+				className: e("flex items-center gap-2 mb-2", c.text),
+				children: [
+					/* @__PURE__ */ b("span", { className: e("h-2 w-2 rounded-full", r.color) }),
+					/* @__PURE__ */ b("span", {
+						className: "font-medium",
+						children: r.label
+					}),
+					/* @__PURE__ */ x("span", {
+						className: "text-muted-foreground",
+						children: [
+							"(",
+							n.length,
+							")"
+						]
+					})
+				]
+			}), /* @__PURE__ */ b("div", {
+				className: "space-y-2",
+				children: n.map(m)
+			})] }, t);
+		})
+	}) : /* @__PURE__ */ x("div", {
+		className: e("space-y-2", s),
+		children: [f.map(m), p > 0 && /* @__PURE__ */ x("div", {
+			className: e("flex items-center justify-center p-2 rounded-lg border border-dashed text-muted-foreground", c.text),
+			children: [
+				"+",
+				p,
+				" more"
+			]
+		})]
+	});
+}
+function P({ users: t, max: n = 5, size: r = "md", className: i }) {
+	let a = E[r], o = t.slice(0, n), s = Math.max(0, t.length - n), c = {
+		xs: "-ml-2",
+		sm: "-ml-2.5",
+		md: "-ml-3",
+		lg: "-ml-4",
+		xl: "-ml-5"
+	};
+	return /* @__PURE__ */ x("div", {
+		className: e("flex items-center", i),
+		children: [o.map((t, n) => /* @__PURE__ */ b("div", {
+			className: e("relative", n > 0 && c[r]),
+			style: { zIndex: o.length - n },
+			children: /* @__PURE__ */ b(O, {
+				src: t.avatarSrc,
+				fallback: t.avatarFallback || t.name.slice(0, 2).toUpperCase(),
+				alt: t.name,
+				status: t.presence.status,
+				size: r,
+				pulse: !1,
+				doNotDisturb: t.presence.doNotDisturb
+			})
+		}, t.id)), s > 0 && /* @__PURE__ */ b("div", {
+			className: e("relative flex items-center justify-center rounded-full bg-muted border-2 border-background", a.avatar, c[r]),
+			style: { zIndex: 0 },
+			children: /* @__PURE__ */ x("span", {
+				className: e("text-muted-foreground font-medium", a.text),
+				children: ["+", s]
+			})
+		})]
+	});
+}
+//#endregion
+export { P as WakaPresenceAvatarStack, M as WakaPresenceCard, j as WakaPresenceLastSeen, N as WakaPresenceList, A as WakaPresenceSelector, k as WakaPresenceStatusBadge, O as WakaPresenceWithAvatar, D as default, w as usePresence };

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

@@ -0,0 +1,15 @@
+"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`);function a(e,t=`$`){if(e===null)return``;let n=e/100;return n===0?`Free`:Number.isInteger(n)?`${t}${n}`:`${t}${n.toFixed(2)}`}function o({value:e,onChange:n,annualDiscount:r,className:a}){return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-center gap-3`,a),children:[(0,i.jsx)(`button`,{type:`button`,onClick:()=>n(`monthly`),className:t.cn(`text-sm font-medium transition-colors duration-200`,e===`monthly`?`text-foreground`:`text-muted-foreground hover:text-foreground`),children:`Monthly`}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>n(e===`monthly`?`annual`:`monthly`),className:`relative h-6 w-11 rounded-full bg-muted transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,role:`switch`,"aria-checked":e===`annual`,children:(0,i.jsx)(`span`,{className:t.cn(`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-primary shadow-sm transition-transform duration-200 ease-out`,e===`annual`&&`translate-x-5`)})}),(0,i.jsxs)(`button`,{type:`button`,onClick:()=>n(`annual`),className:t.cn(`flex items-center gap-1.5 text-sm font-medium transition-colors duration-200`,e===`annual`?`text-foreground`:`text-muted-foreground hover:text-foreground`),children:[`Annual`,r&&r>0&&(0,i.jsxs)(`span`,{className:`inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary`,children:[`Save `,r,`%`]})]})]})}function s({tier:e,billingPeriod:n,animating:r}){let o=n===`monthly`?e.monthlyPrice:e.annualPrice;if(o===null)return(0,i.jsxs)(`div`,{className:`flex flex-col items-start`,children:[(0,i.jsx)(`span`,{className:`text-3xl font-bold text-foreground`,children:e.customPriceLabel||`Custom`}),(0,i.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`Contact for pricing`})]});let s=a(o,e.currency),c=n===`monthly`?`/month`:`/year`;return(0,i.jsxs)(`div`,{className:`flex items-baseline gap-1`,children:[(0,i.jsx)(`span`,{className:t.cn(`text-4xl font-bold text-foreground transition-all duration-300`,r&&`animate-price-change`),children:s}),o>0&&(0,i.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:c})]})}function c({included:e,value:t}){return t?(0,i.jsx)(`span`,{className:`text-sm font-medium text-foreground`,children:t}):e?(0,i.jsx)(r.Check,{className:`h-5 w-5 text-primary`}):(0,i.jsx)(r.X,{className:`h-5 w-5 text-muted-foreground/50`})}function l({tier:e,billingPeriod:n,onCtaClick:a,animatingPrice:o}){let l={default:`bg-secondary text-secondary-foreground hover:bg-secondary/80`,primary:`bg-primary text-primary-foreground hover:bg-primary/90`,outline:`border border-input bg-background hover:bg-accent hover:text-accent-foreground`},u=e.ctaVariant||(e.highlighted?`primary`:`default`);return(0,i.jsxs)(`div`,{className:t.cn(`relative flex flex-col rounded-xl border bg-card p-6 transition-all duration-300`,e.highlighted&&[`border-primary shadow-lg shadow-primary/10`,`ring-1 ring-primary/20`],e.disabled&&`opacity-50 pointer-events-none`),children:[e.highlighted&&e.highlightLabel&&(0,i.jsx)(`div`,{className:`absolute -top-3 left-1/2 -translate-x-1/2`,children:(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground shadow-sm`,children:[(0,i.jsx)(r.Sparkles,{className:`h-3 w-3`}),e.highlightLabel]})}),(0,i.jsxs)(`div`,{className:`mb-4`,children:[(0,i.jsx)(`h3`,{className:`text-xl font-semibold text-foreground`,children:e.name}),e.description&&(0,i.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:e.description})]}),(0,i.jsx)(`div`,{className:`mb-6`,children:(0,i.jsx)(s,{tier:e,billingPeriod:n,animating:o})}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>a?.(e),className:t.cn(`mb-6 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition-colors duration-200`,l[u]),children:e.ctaText||`Get Started`}),(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsx)(`p`,{className:`mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground`,children:`What's included`}),(0,i.jsx)(`ul`,{className:`space-y-3`,children:e.features.map(e=>(0,i.jsxs)(`li`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(c,{included:e.included,value:e.value}),(0,i.jsx)(`span`,{className:t.cn(`text-sm`,e.included?`text-foreground`:`text-muted-foreground line-through`),children:e.name})]},e.name))})]})]})}function u({tiers:e,features:n,billingPeriod:a,onCtaClick:o,animatingPrice:l}){let u={default:`bg-secondary text-secondary-foreground hover:bg-secondary/80`,primary:`bg-primary text-primary-foreground hover:bg-primary/90`,outline:`border border-input bg-background hover:bg-accent hover:text-accent-foreground`};return(0,i.jsx)(`div`,{className:`overflow-x-auto`,children:(0,i.jsxs)(`table`,{className:`w-full border-collapse`,children:[(0,i.jsxs)(`thead`,{children:[(0,i.jsxs)(`tr`,{children:[(0,i.jsx)(`th`,{className:`sticky left-0 z-10 bg-background p-4 text-left`,children:(0,i.jsx)(`span`,{className:`sr-only`,children:`Features`})}),e.map(e=>(0,i.jsx)(`th`,{className:t.cn(`min-w-[200px] p-4 text-center`,e.highlighted&&`bg-primary/5`),children:(0,i.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[e.highlighted&&e.highlightLabel&&(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1 rounded-full bg-primary px-2.5 py-0.5 text-xs font-semibold text-primary-foreground`,children:[(0,i.jsx)(r.Zap,{className:`h-3 w-3`}),e.highlightLabel]}),(0,i.jsx)(`span`,{className:`text-lg font-semibold text-foreground`,children:e.name}),e.description&&(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:e.description})]})},e.id))]}),(0,i.jsxs)(`tr`,{className:`border-b`,children:[(0,i.jsx)(`td`,{className:`sticky left-0 z-10 bg-background p-4`,children:(0,i.jsx)(`span`,{className:`text-sm font-medium text-muted-foreground`,children:`Price`})}),e.map(e=>(0,i.jsx)(`td`,{className:t.cn(`p-4 text-center`,e.highlighted&&`bg-primary/5`),children:(0,i.jsx)(s,{tier:e,billingPeriod:a,animating:l})},e.id))]}),(0,i.jsxs)(`tr`,{className:`border-b`,children:[(0,i.jsx)(`td`,{className:`sticky left-0 z-10 bg-background p-4`}),e.map(e=>{let n=e.ctaVariant||(e.highlighted?`primary`:`default`);return(0,i.jsx)(`td`,{className:t.cn(`p-4 text-center`,e.highlighted&&`bg-primary/5`),children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>o?.(e),disabled:e.disabled,className:t.cn(`w-full max-w-[160px] rounded-lg px-4 py-2 text-sm font-semibold transition-colors duration-200`,u[n],e.disabled&&`opacity-50 cursor-not-allowed`),children:e.ctaText||`Get Started`})},e.id)})]})]}),(0,i.jsx)(`tbody`,{children:n.map((n,a)=>(0,i.jsxs)(`tr`,{className:t.cn(`border-b transition-colors hover:bg-muted/50`,a%2==0&&`bg-muted/20`),children:[(0,i.jsxs)(`td`,{className:`sticky left-0 z-10 bg-inherit p-4`,children:[(0,i.jsx)(`span`,{className:`text-sm font-medium text-foreground`,children:n.name}),n.tooltip&&(0,i.jsx)(`p`,{className:`mt-0.5 text-xs text-muted-foreground`,children:n.tooltip})]}),e.map(e=>{let a=e.features.find(e=>e.name===n.name);return(0,i.jsx)(`td`,{className:t.cn(`p-4 text-center`,e.highlighted&&`bg-primary/5`),children:a?(0,i.jsx)(`div`,{className:`flex justify-center`,children:(0,i.jsx)(c,{included:a.included,value:a.value})}):(0,i.jsx)(r.X,{className:`mx-auto h-5 w-5 text-muted-foreground/50`})},e.id)})]},n.name))})]})})}function d({tiers:e,features:r,billingPeriod:a,onBillingPeriodChange:s,onCtaClick:c,annualDiscount:d=20,showBillingToggle:f=!0,variant:p=`auto`,className:m}){let[h,g]=n.useState(`monthly`),[_,v]=n.useState(!1),y=a??h,b=e=>{v(!0),setTimeout(()=>v(!1),300),s?s(e):g(e)},x=p===`table`||p===`auto`&&r&&r.length>0,S=n.useMemo(()=>{if(r)return r;let t=new Set;return e.forEach(e=>{e.features.forEach(e=>t.add(e.name))}),Array.from(t).map(e=>({name:e}))},[r,e]);return(0,i.jsxs)(`div`,{className:t.cn(`w-full`,m),children:[(0,i.jsx)(`style`,{children:`
+        @keyframes priceChange {
+          0% {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-price-change {
+          animation: priceChange 0.3s ease-out;
+        }
+      `}),f&&(0,i.jsx)(o,{value:y,onChange:b,annualDiscount:d,className:`mb-8`}),x?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`hidden lg:block rounded-xl border bg-card overflow-hidden`,children:(0,i.jsx)(u,{tiers:e,features:S,billingPeriod:y,onCtaClick:c,animatingPrice:_})}),(0,i.jsx)(`div`,{className:`grid grid-cols-1 gap-6 lg:hidden md:grid-cols-2`,children:e.map(e=>(0,i.jsx)(l,{tier:e,billingPeriod:y,onCtaClick:c,animatingPrice:_},e.id))})]}):(0,i.jsx)(`div`,{className:t.cn(`grid gap-6`,e.length===1&&`grid-cols-1 max-w-md mx-auto`,e.length===2&&`grid-cols-1 md:grid-cols-2 max-w-3xl mx-auto`,e.length===3&&`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`,e.length>=4&&`grid-cols-1 md:grid-cols-2 lg:grid-cols-4`),children:e.map(e=>(0,i.jsx)(l,{tier:e,billingPeriod:y,onCtaClick:c,animatingPrice:_},e.id))})]})}function f(e={}){let{initialBillingPeriod:t=`monthly`}=e,[r,i]=n.useState(t),[a,o]=n.useState(null);return{billingPeriod:r,selectedTier:a,onBillingPeriodChange:n.useCallback(e=>{i(e)},[]),onCtaClick:n.useCallback(e=>{o(e)},[]),calculateSavings:n.useCallback(e=>e.monthlyPrice===null||e.annualPrice===null?0:e.monthlyPrice*12-e.annualPrice,[]),getEffectiveMonthlyPrice:n.useCallback(e=>r===`monthly`?e.monthlyPrice:e.annualPrice===null?null:Math.round(e.annualPrice/12),[r])}}var p=[{id:`free`,name:`Free`,description:`For individuals getting started`,monthlyPrice:0,annualPrice:0,ctaText:`Start Free`,ctaVariant:`outline`,features:[{name:`Up to 3 projects`,included:!0},{name:`Basic analytics`,included:!0},{name:`Community support`,included:!0},{name:`API access`,included:!1},{name:`Custom domains`,included:!1},{name:`Team collaboration`,included:!1}]},{id:`pro`,name:`Pro`,description:`For professionals and small teams`,monthlyPrice:2900,annualPrice:29e3,highlighted:!0,highlightLabel:`Most Popular`,ctaText:`Start Pro Trial`,ctaVariant:`primary`,features:[{name:`Up to 3 projects`,included:!0,value:`Unlimited`},{name:`Basic analytics`,included:!0,value:`Advanced`},{name:`Community support`,included:!0,value:`Priority`},{name:`API access`,included:!0},{name:`Custom domains`,included:!0},{name:`Team collaboration`,included:!0,value:`5 members`}]},{id:`enterprise`,name:`Enterprise`,description:`For large organizations`,monthlyPrice:null,annualPrice:null,customPriceLabel:`Custom`,ctaText:`Contact Sales`,ctaVariant:`default`,features:[{name:`Up to 3 projects`,included:!0,value:`Unlimited`},{name:`Basic analytics`,included:!0,value:`Custom`},{name:`Community support`,included:!0,value:`Dedicated`},{name:`API access`,included:!0},{name:`Custom domains`,included:!0},{name:`Team collaboration`,included:!0,value:`Unlimited`}]}],m=[{name:`Up to 3 projects`,tooltip:`Number of active projects`},{name:`Basic analytics`,tooltip:`Usage and performance metrics`},{name:`Community support`,tooltip:`Access to community forums`},{name:`API access`,tooltip:`Programmatic access to your data`},{name:`Custom domains`,tooltip:`Use your own domain name`},{name:`Team collaboration`,tooltip:`Invite team members`}];exports.default=d,exports.defaultFeatures=m,exports.defaultTiers=p,exports.usePricingTable=f;

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

@@ -66,7 +66,7 @@ export interface UsePricingTableOptions {
 }
 export declare function usePricingTable(options?: UsePricingTableOptions): {
     billingPeriod: "monthly" | "annual";
-    selectedTier: PricingTier;
+    selectedTier: PricingTier | null;
     onBillingPeriodChange: (period: "monthly" | "annual") => void;
     onCtaClick: (tier: PricingTier) => void;
     calculateSavings: (tier: PricingTier) => number;