@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-device-trust/index.es.js

@@ -0,0 +1,683 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertTriangle as n, Clock as r, Eye as i, EyeOff as a, Key as o, Laptop as s, Loader2 as c, Monitor as l, Plus as u, RefreshCw as d, Shield as f, ShieldAlert as p, ShieldCheck as m, ShieldX as h, Smartphone as g, Tablet as _, Trash2 as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/waka-device-trust/index.tsx
+var x = {
+	desktop: {
+		icon: l,
+		label: "Desktop"
+	},
+	laptop: {
+		icon: s,
+		label: "Laptop"
+	},
+	mobile: {
+		icon: g,
+		label: "Mobile"
+	},
+	tablet: {
+		icon: _,
+		label: "Tablet"
+	},
+	unknown: {
+		icon: l,
+		label: "Unknown Device"
+	}
+}, S = {
+	trusted: {
+		icon: m,
+		color: "text-green-600",
+		bgColor: "bg-green-100 dark:bg-green-900/30",
+		label: "Trusted"
+	},
+	pending: {
+		icon: f,
+		color: "text-amber-600",
+		bgColor: "bg-amber-100 dark:bg-amber-900/30",
+		label: "Pending"
+	},
+	expired: {
+		icon: p,
+		color: "text-orange-600",
+		bgColor: "bg-orange-100 dark:bg-orange-900/30",
+		label: "Expired"
+	},
+	revoked: {
+		icon: h,
+		color: "text-red-600",
+		bgColor: "bg-red-100 dark:bg-red-900/30",
+		label: "Revoked"
+	}
+}, C = [
+	{
+		value: "7d",
+		label: "7 days"
+	},
+	{
+		value: "30d",
+		label: "30 days"
+	},
+	{
+		value: "90d",
+		label: "90 days"
+	},
+	{
+		value: "365d",
+		label: "1 year"
+	},
+	{
+		value: "never",
+		label: "Never"
+	}
+], w = {
+	sm: {
+		icon: "h-4 w-4",
+		deviceIcon: "h-8 w-8",
+		text: "text-xs",
+		name: "text-sm",
+		button: "px-2 py-1 text-xs",
+		card: "p-3",
+		gap: "gap-2"
+	},
+	md: {
+		icon: "h-5 w-5",
+		deviceIcon: "h-10 w-10",
+		text: "text-sm",
+		name: "text-base",
+		button: "px-3 py-1.5 text-sm",
+		card: "p-4",
+		gap: "gap-3"
+	},
+	lg: {
+		icon: "h-6 w-6",
+		deviceIcon: "h-12 w-12",
+		text: "text-base",
+		name: "text-lg",
+		button: "px-4 py-2 text-base",
+		card: "p-5",
+		gap: "gap-4"
+	}
+}, T = {
+	maxDevices: 5,
+	defaultExpiryPeriod: "30d",
+	requireVerification: !0
+};
+function E(e) {
+	return new Intl.DateTimeFormat("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	}).format(e);
+}
+function D(e) {
+	let t = Math.floor(((/* @__PURE__ */ new Date()).getTime() - e.getTime()) / 1e3);
+	if (t < 60) return "just now";
+	let n = Math.floor(t / 60);
+	if (n < 60) return `${n}m ago`;
+	let r = Math.floor(n / 60);
+	if (r < 24) return `${r}h ago`;
+	let i = Math.floor(r / 24);
+	return i < 7 ? `${i}d ago` : E(e);
+}
+function O(e) {
+	if (!e) return "active";
+	let t = /* @__PURE__ */ new Date();
+	return e < t ? "expired" : Math.ceil((e.getTime() - t.getTime()) / (1e3 * 60 * 60 * 24)) <= 7 ? "expiring" : "active";
+}
+function k(e) {
+	if (!e) return null;
+	let t = /* @__PURE__ */ new Date();
+	return Math.ceil((e.getTime() - t.getTime()) / (1e3 * 60 * 60 * 24));
+}
+function A({ type: t, isCurrentDevice: n, size: r, className: i }) {
+	let a = w[r], o = x[t].icon;
+	return /* @__PURE__ */ b("div", {
+		className: e("relative flex items-center justify-center rounded-lg", "bg-muted", a.deviceIcon, n && "ring-2 ring-primary ring-offset-2", i),
+		children: [/* @__PURE__ */ y(o, { className: e(a.icon, "text-muted-foreground") }), n && /* @__PURE__ */ y("div", { className: "absolute -top-1 -right-1 h-3 w-3 rounded-full bg-green-500 border-2 border-background" })]
+	});
+}
+function j({ status: t, expiresAt: n, size: i }) {
+	let a = w[i], o = S[t], s = o.icon, c = O(n), l = k(n);
+	return /* @__PURE__ */ b("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ b("div", {
+			className: e("flex items-center gap-1 rounded-full px-2 py-0.5", o.bgColor),
+			children: [/* @__PURE__ */ y(s, { className: e("h-3 w-3", o.color) }), /* @__PURE__ */ y("span", {
+				className: e(a.text, o.color, "font-medium"),
+				children: o.label
+			})]
+		}), t === "trusted" && c === "expiring" && l !== null && /* @__PURE__ */ b("div", {
+			className: "flex items-center gap-1 text-amber-600",
+			children: [/* @__PURE__ */ y(r, { className: "h-3 w-3" }), /* @__PURE__ */ b("span", {
+				className: e(a.text),
+				children: [
+					"Expires in ",
+					l,
+					"d"
+				]
+			})]
+		})]
+	});
+}
+function M({ isOpen: n, onClose: r, onVerify: s, loading: l, title: u, description: d }) {
+	let [f, p] = t.useState(""), [m, h] = t.useState(!1);
+	return n ? /* @__PURE__ */ b("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		children: [/* @__PURE__ */ y("div", {
+			className: "absolute inset-0 bg-black/50",
+			onClick: r,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ b("div", {
+			className: e("relative z-10 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg", "animate-in fade-in-0 zoom-in-95"),
+			children: [/* @__PURE__ */ b("div", {
+				className: "flex items-center gap-3 mb-4",
+				children: [/* @__PURE__ */ y("div", {
+					className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/10",
+					children: /* @__PURE__ */ y(o, { className: "h-5 w-5 text-primary" })
+				}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h3", {
+					className: "text-lg font-semibold",
+					children: u
+				}), /* @__PURE__ */ y("p", {
+					className: "text-sm text-muted-foreground",
+					children: d
+				})] })]
+			}), /* @__PURE__ */ b("form", {
+				onSubmit: (e) => {
+					e.preventDefault(), s(f);
+				},
+				className: "space-y-4",
+				children: [/* @__PURE__ */ b("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ y("input", {
+						type: m ? "text" : "password",
+						value: f,
+						onChange: (e) => p(e.target.value),
+						placeholder: "Enter verification code",
+						className: "w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary pr-10",
+						autoFocus: !0,
+						disabled: l
+					}), /* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: () => h(!m),
+						className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
+						children: y(m ? a : i, { className: "h-4 w-4" })
+					})]
+				}), /* @__PURE__ */ b("div", {
+					className: "flex gap-2 justify-end",
+					children: [/* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: r,
+						disabled: l,
+						className: "px-4 py-2 text-sm font-medium rounded-md hover:bg-muted transition-colors",
+						children: "Cancel"
+					}), /* @__PURE__ */ y("button", {
+						type: "submit",
+						disabled: l || !f,
+						className: e("px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+						children: l ? /* @__PURE__ */ y(c, { className: "h-4 w-4 animate-spin" }) : "Verify"
+					})]
+				})]
+			})]
+		})]
+	}) : null;
+}
+function N({ isOpen: t, device: r, onClose: i, onConfirm: a, loading: o }) {
+	return !t || !r ? null : /* @__PURE__ */ b("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		children: [/* @__PURE__ */ y("div", {
+			className: "absolute inset-0 bg-black/50",
+			onClick: i,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ b("div", {
+			className: e("relative z-10 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg", "animate-in fade-in-0 zoom-in-95"),
+			children: [
+				/* @__PURE__ */ b("div", {
+					className: "flex items-center gap-3 mb-4",
+					children: [/* @__PURE__ */ y("div", {
+						className: "flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30",
+						children: /* @__PURE__ */ y(v, { className: "h-5 w-5 text-red-600" })
+					}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h3", {
+						className: "text-lg font-semibold",
+						children: "Remove Trusted Device"
+					}), /* @__PURE__ */ y("p", {
+						className: "text-sm text-muted-foreground",
+						children: "This action cannot be undone"
+					})] })]
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "mb-6 p-4 rounded-lg bg-muted/50",
+					children: /* @__PURE__ */ b("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ y(A, {
+							type: r.type,
+							size: "sm"
+						}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "font-medium",
+							children: r.name
+						}), /* @__PURE__ */ b("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								r.os,
+								" ",
+								r.browser && `- ${r.browser}`
+							]
+						})] })]
+					})
+				}),
+				r.isCurrentDevice && /* @__PURE__ */ y("div", {
+					className: "mb-4 p-3 rounded-lg bg-amber-100 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800",
+					children: /* @__PURE__ */ b("div", {
+						className: "flex items-start gap-2",
+						children: [/* @__PURE__ */ y(n, { className: "h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ y("p", {
+							className: "text-sm text-amber-700 dark:text-amber-400",
+							children: "This is your current device. Removing it will sign you out."
+						})]
+					})
+				}),
+				/* @__PURE__ */ b("div", {
+					className: "flex gap-2 justify-end",
+					children: [/* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: i,
+						disabled: o,
+						className: "px-4 py-2 text-sm font-medium rounded-md hover:bg-muted transition-colors",
+						children: "Cancel"
+					}), /* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: a,
+						disabled: o,
+						className: e("px-4 py-2 text-sm font-medium rounded-md", "bg-red-600 text-white hover:bg-red-700 transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+						children: o ? /* @__PURE__ */ y(c, { className: "h-4 w-4 animate-spin" }) : "Remove Device"
+					})]
+				})
+			]
+		})]
+	});
+}
+function P({ deviceId: n, currentExpiry: i, onUpdate: a, size: o, disabled: s }) {
+	let [c, l] = t.useState(!1), [u, d] = t.useState(!1), f = w[o], p = t.useRef(null);
+	t.useEffect(() => {
+		let e = (e) => {
+			p.current && !p.current.contains(e.target) && l(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let m = async (e) => {
+		d(!0);
+		try {
+			await a(n, e), l(!1);
+		} finally {
+			d(!1);
+		}
+	}, h = i ? `Expires ${E(i)}` : "Never expires";
+	return /* @__PURE__ */ b("div", {
+		className: "relative",
+		ref: p,
+		children: [/* @__PURE__ */ b("button", {
+			type: "button",
+			onClick: () => !s && l(!c),
+			disabled: s || u,
+			className: e("flex items-center gap-1 rounded-md border px-2 py-1 transition-colors", "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary", f.text, s && "opacity-50 cursor-not-allowed"),
+			children: [/* @__PURE__ */ y(r, { className: "h-3 w-3 text-muted-foreground" }), /* @__PURE__ */ y("span", {
+				className: "text-muted-foreground",
+				children: u ? "Updating..." : h
+			})]
+		}), c && /* @__PURE__ */ y("div", {
+			className: e("absolute right-0 top-full mt-1 z-10 w-40 rounded-md border bg-popover shadow-lg", "animate-in fade-in-0 zoom-in-95"),
+			children: C.map((t) => /* @__PURE__ */ y("button", {
+				onClick: () => m(t.value),
+				className: e("w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors", "first:rounded-t-md last:rounded-b-md"),
+				children: t.label
+			}, t.value))
+		})]
+	});
+}
+function F({ device: t, size: n, showDetails: i, onRemove: a, onUpdateExpiry: o }) {
+	let s = w[n], c = x[t.type];
+	return /* @__PURE__ */ y("div", {
+		className: e("group rounded-lg border bg-card transition-all duration-200", "hover:shadow-md hover:border-border/80", t.isCurrentDevice && "ring-2 ring-primary/20", s.card),
+		children: /* @__PURE__ */ b("div", {
+			className: e("flex items-start", s.gap),
+			children: [/* @__PURE__ */ y(A, {
+				type: t.type,
+				isCurrentDevice: t.isCurrentDevice,
+				size: n
+			}), /* @__PURE__ */ b("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ b("div", {
+						className: "flex items-start justify-between gap-2",
+						children: [/* @__PURE__ */ b("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ b("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ y("h3", {
+									className: e("font-medium truncate", s.name),
+									children: t.name
+								}), t.isCurrentDevice && /* @__PURE__ */ y("span", {
+									className: "flex-shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+									children: "Current"
+								})]
+							}), /* @__PURE__ */ b("p", {
+								className: e("text-muted-foreground mt-0.5", s.text),
+								children: [
+									c.label,
+									t.os && ` - ${t.os}`,
+									t.browser && ` - ${t.browser}`
+								]
+							})]
+						}), /* @__PURE__ */ y("button", {
+							onClick: () => a(t),
+							className: e("flex-shrink-0 rounded-md p-1.5 transition-colors", "text-muted-foreground hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-900/30", "opacity-0 group-hover:opacity-100 focus:opacity-100"),
+							"aria-label": `Remove ${t.name}`,
+							children: /* @__PURE__ */ y(v, { className: s.icon })
+						})]
+					}),
+					/* @__PURE__ */ b("div", {
+						className: e("mt-3 flex items-center flex-wrap", s.gap),
+						children: [
+							/* @__PURE__ */ y(j, {
+								status: t.status,
+								expiresAt: t.expiresAt,
+								size: n
+							}),
+							/* @__PURE__ */ b("div", {
+								className: "flex items-center gap-1 text-muted-foreground",
+								children: [/* @__PURE__ */ y(r, { className: "h-3 w-3" }), /* @__PURE__ */ b("span", {
+									className: s.text,
+									children: ["Trusted ", E(t.trustedAt)]
+								})]
+							}),
+							t.lastUsedAt && /* @__PURE__ */ y("div", {
+								className: "flex items-center gap-1 text-muted-foreground",
+								children: /* @__PURE__ */ b("span", {
+									className: s.text,
+									children: ["Last used ", D(t.lastUsedAt)]
+								})
+							})
+						]
+					}),
+					i && /* @__PURE__ */ b("div", {
+						className: e("mt-3 pt-3 border-t space-y-1.5", s.text),
+						children: [
+							t.fingerprint && /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-2 text-muted-foreground",
+								children: [/* @__PURE__ */ y("span", {
+									className: "font-medium",
+									children: "Fingerprint:"
+								}), /* @__PURE__ */ y("code", {
+									className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs",
+									children: t.fingerprint
+								})]
+							}),
+							t.lastIpAddress && /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-2 text-muted-foreground",
+								children: [/* @__PURE__ */ y("span", {
+									className: "font-medium",
+									children: "IP Address:"
+								}), /* @__PURE__ */ y("span", { children: t.lastIpAddress })]
+							}),
+							t.lastLocation && /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-2 text-muted-foreground",
+								children: [/* @__PURE__ */ y("span", {
+									className: "font-medium",
+									children: "Location:"
+								}), /* @__PURE__ */ y("span", { children: t.lastLocation })]
+							})
+						]
+					}),
+					o && t.status === "trusted" && /* @__PURE__ */ y("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ y(P, {
+							deviceId: t.id,
+							currentExpiry: t.expiresAt,
+							onUpdate: o,
+							size: n
+						})
+					})
+				]
+			})]
+		})
+	});
+}
+function I({ onAddDevice: t, size: n }) {
+	let r = w[n];
+	return /* @__PURE__ */ b("div", {
+		className: "flex flex-col items-center justify-center py-12 text-center",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4",
+				children: /* @__PURE__ */ y(f, { className: "h-8 w-8 text-muted-foreground" })
+			}),
+			/* @__PURE__ */ y("h3", {
+				className: "text-lg font-medium",
+				children: "No trusted devices"
+			}),
+			/* @__PURE__ */ y("p", {
+				className: "text-sm text-muted-foreground mt-1 max-w-sm",
+				children: "Add devices you trust to enable faster sign-ins and enhanced security."
+			}),
+			t && /* @__PURE__ */ b("button", {
+				onClick: t,
+				className: e("mt-4 flex items-center gap-2 rounded-md bg-primary text-primary-foreground font-medium", "hover:bg-primary/90 transition-colors", r.button),
+				children: [/* @__PURE__ */ y(u, { className: "h-4 w-4" }), "Add This Device"]
+			})
+		]
+	});
+}
+function L({ currentCount: t, maxDevices: r, size: i }) {
+	let a = w[i], o = t >= r;
+	return t >= r - 1 ? /* @__PURE__ */ b("div", {
+		className: e("flex items-start gap-2 rounded-lg p-3 mb-4", o ? "bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800" : "bg-amber-100 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800"),
+		children: [/* @__PURE__ */ y(n, { className: e("h-4 w-4 flex-shrink-0 mt-0.5", o ? "text-red-600" : "text-amber-600") }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+			className: e(a.text, "font-medium", o ? "text-red-700 dark:text-red-400" : "text-amber-700 dark:text-amber-400"),
+			children: o ? "Device limit reached" : "Approaching device limit"
+		}), /* @__PURE__ */ b("p", {
+			className: e(a.text, o ? "text-red-600 dark:text-red-500" : "text-amber-600 dark:text-amber-500"),
+			children: [
+				t,
+				" of ",
+				r,
+				" devices trusted.",
+				o && " Remove a device to add a new one."
+			]
+		})] })]
+	}) : null;
+}
+function R({ devices: n, currentDeviceId: r, config: i = T, onAddDevice: a, onRemoveDevice: o, onVerificationRequired: s, onUpdateExpiry: l, onRefresh: f, loading: p = !1, size: m = "md", showDetails: h = !1, className: g }) {
+	let [_, v] = t.useState(null), [x, S] = t.useState(!1), [C, E] = t.useState(!1), [D, O] = t.useState(null), [k, A] = t.useState(!1), [j, P] = t.useState(!1), R = w[m], z = t.useMemo(() => n.map((e) => ({
+		...e,
+		isCurrentDevice: e.id === r || e.isCurrentDevice
+	})), [n, r]), B = t.useMemo(() => [...z].sort((e, t) => e.isCurrentDevice && !t.isCurrentDevice ? -1 : !e.isCurrentDevice && t.isCurrentDevice ? 1 : e.lastUsedAt && t.lastUsedAt ? new Date(t.lastUsedAt).getTime() - new Date(e.lastUsedAt).getTime() : 0), [z]), V = async () => {
+		i.requireVerification && s ? (O({ type: "add" }), E(!0)) : a?.();
+	}, H = async (e) => {
+		v(e), i.requireVerification && s ? (O({
+			type: "remove",
+			deviceId: e.id
+		}), E(!0)) : S(!0);
+	}, U = async (e) => {
+		if (!(!D || !s)) {
+			A(!0);
+			try {
+				await s(D.type, D.deviceId) && (E(!1), D.type === "add" ? a?.() : D.type === "remove" && _ && S(!0));
+			} finally {
+				A(!1), O(null);
+			}
+		}
+	}, W = async () => {
+		if (!(!_ || !o)) {
+			A(!0);
+			try {
+				await o(_.id), S(!1), v(null);
+			} finally {
+				A(!1);
+			}
+		}
+	}, G = async () => {
+		if (f) {
+			P(!0);
+			try {
+				await f();
+			} finally {
+				P(!1);
+			}
+		}
+	}, K = n.filter((e) => e.status === "trusted").length, q = K < i.maxDevices;
+	return /* @__PURE__ */ b("div", {
+		className: e("relative", g),
+		children: [
+			/* @__PURE__ */ b("div", {
+				className: "flex items-center justify-between mb-4",
+				children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
+					className: "text-lg font-semibold",
+					children: "Trusted Devices"
+				}), /* @__PURE__ */ b("p", {
+					className: e("text-muted-foreground", R.text),
+					children: [
+						K,
+						" of ",
+						i.maxDevices,
+						" devices trusted"
+					]
+				})] }), /* @__PURE__ */ b("div", {
+					className: "flex items-center gap-2",
+					children: [f && /* @__PURE__ */ y("button", {
+						onClick: G,
+						disabled: j || p,
+						className: e("rounded-md p-2 transition-colors", "text-muted-foreground hover:text-foreground hover:bg-muted", "disabled:opacity-50"),
+						"aria-label": "Refresh device list",
+						children: /* @__PURE__ */ y(d, { className: e(R.icon, (j || p) && "animate-spin") })
+					}), a && /* @__PURE__ */ b("button", {
+						onClick: V,
+						disabled: !q || p,
+						className: e("flex items-center gap-2 rounded-md bg-primary text-primary-foreground font-medium", "hover:bg-primary/90 transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed", R.button),
+						children: [/* @__PURE__ */ y(u, { className: "h-4 w-4" }), "Add Device"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ y(L, {
+				currentCount: K,
+				maxDevices: i.maxDevices,
+				size: m
+			}),
+			p ? /* @__PURE__ */ y("div", {
+				className: "flex items-center justify-center py-12",
+				children: /* @__PURE__ */ y(c, { className: "h-8 w-8 animate-spin text-muted-foreground" })
+			}) : B.length === 0 ? /* @__PURE__ */ y(I, {
+				onAddDevice: a,
+				size: m
+			}) : /* @__PURE__ */ y("div", {
+				className: "space-y-3",
+				children: B.map((e) => /* @__PURE__ */ y(F, {
+					device: e,
+					size: m,
+					showDetails: h,
+					onRemove: H,
+					onUpdateExpiry: l
+				}, e.id))
+			}),
+			/* @__PURE__ */ y(M, {
+				isOpen: C,
+				onClose: () => {
+					E(!1), O(null), v(null);
+				},
+				onVerify: U,
+				loading: k,
+				title: "Verification Required",
+				description: "Enter your verification code to continue"
+			}),
+			/* @__PURE__ */ y(N, {
+				isOpen: x,
+				device: _,
+				onClose: () => {
+					S(!1), v(null);
+				},
+				onConfirm: W,
+				loading: k
+			}),
+			/* @__PURE__ */ y("style", { children: "\n        @keyframes fade-in-0 {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n        @keyframes zoom-in-95 {\n          from { transform: scale(0.95); }\n          to { transform: scale(1); }\n        }\n        .animate-in {\n          animation: fade-in-0 0.15s ease-out, zoom-in-95 0.15s ease-out;\n        }\n      " })
+		]
+	});
+}
+function z({ initialDevices: e = [], currentDeviceId: n, config: r = T, onChange: i } = {}) {
+	let [a, o] = t.useState(e), [s, c] = t.useState(!1), [l, u] = t.useState(null);
+	return t.useEffect(() => {
+		o(e);
+	}, [e]), {
+		devices: a,
+		loading: s,
+		error: l,
+		addDevice: t.useCallback(async (e) => {
+			if (a.filter((e) => e.status === "trusted").length >= r.maxDevices) return u(`Maximum of ${r.maxDevices} devices allowed`), !1;
+			let t = {
+				...e,
+				id: crypto.randomUUID(),
+				trustedAt: /* @__PURE__ */ new Date(),
+				status: "trusted",
+				isCurrentDevice: e.name === n
+			}, s = [...a, t];
+			return o(s), i?.(s), u(null), !0;
+		}, [
+			a,
+			r.maxDevices,
+			n,
+			i
+		]),
+		removeDevice: t.useCallback(async (e) => {
+			let t = a.filter((t) => t.id !== e);
+			return o(t), i?.(t), !0;
+		}, [a, i]),
+		updateDeviceStatus: t.useCallback(async (e, t) => {
+			let n = a.map((n) => n.id === e ? {
+				...n,
+				status: t
+			} : n);
+			return o(n), i?.(n), !0;
+		}, [a, i]),
+		updateDeviceExpiry: t.useCallback(async (e, t) => {
+			let n = /* @__PURE__ */ new Date(), r;
+			if (t !== "never") {
+				let e = {
+					"7d": 7,
+					"30d": 30,
+					"90d": 90,
+					"365d": 365
+				}[t];
+				r = new Date(n.getTime() + e * 24 * 60 * 60 * 1e3);
+			}
+			let s = a.map((t) => t.id === e ? {
+				...t,
+				expiresAt: r
+			} : t);
+			return o(s), i?.(s), !0;
+		}, [a, i]),
+		refreshDevices: t.useCallback(async (e) => {
+			c(!0), u(null);
+			try {
+				if (e) {
+					let t = await e();
+					o(t), i?.(t);
+				}
+			} catch (e) {
+				u(e instanceof Error ? e.message : "Failed to refresh devices");
+			} finally {
+				c(!1);
+			}
+		}, [i]),
+		getCurrentDevice: t.useCallback(() => a.find((e) => e.id === n || e.isCurrentDevice), [a, n]),
+		getTrustedDevices: t.useCallback(() => a.filter((e) => e.status === "trusted"), [a]),
+		getExpiredDevices: t.useCallback(() => {
+			let e = /* @__PURE__ */ new Date();
+			return a.filter((t) => t.status === "expired" || t.expiresAt && t.expiresAt < e);
+		}, [a]),
+		clearAllDevices: t.useCallback(async () => (o([]), i?.([]), !0), [i]),
+		canAddDevice: t.useMemo(() => a.filter((e) => e.status === "trusted").length < r.maxDevices, [a, r.maxDevices]),
+		setLoading: c,
+		setError: u
+	};
+}
+//#endregion
+export { R as default, z as useDeviceTrust };

package/dist/components/waka-doc-breadcrumb/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(`lucide-react`),i=require(`react/jsx-runtime`);function a({items:e,onItemClick:a,className:o}){return e.length===0?null:(0,i.jsxs)(`nav`,{className:t.cn(`flex items-center gap-1 text-sm`,o),children:[(0,i.jsx)(r.BookOpen,{className:`h-4 w-4 text-muted-foreground`}),e.map((t,o)=>(0,i.jsxs)(n.Fragment,{children:[o>0&&(0,i.jsx)(r.ChevronRight,{className:`h-3 w-3 text-muted-foreground/50`}),o===e.length-1?(0,i.jsx)(`span`,{className:`font-medium text-foreground`,children:t.label}):(0,i.jsx)(`button`,{onClick:()=>a?.(t),className:`text-muted-foreground transition-colors hover:text-foreground`,children:t.label})]},t.id))]})}exports.WakaDocBreadcrumb=a;

package/dist/components/waka-doc-breadcrumb/index.d.ts

@@ -8,4 +8,4 @@ export interface WakaDocBreadcrumbProps {
     onItemClick?: (item: DocBreadcrumbItem) => void;
     className?: string;
 }
-export declare function WakaDocBreadcrumb({ items, onItemClick, className }: WakaDocBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaDocBreadcrumb({ items, onItemClick, className }: WakaDocBreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;