@wakastellar/ui 4.0.0 → 4.0.1

package/dist/blocks/apm-overview/index.es.js

@@ -0,0 +1,597 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../../components/badge/index.es.js";
+import { Button as n } from "../../components/button/index.es.js";
+import { Card as r, CardContent as i, CardHeader as a, CardTitle as o } from "../../components/card/index.es.js";
+import { Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d } from "../../components/select/index.es.js";
+import { Progress as f } from "../../components/progress/index.es.js";
+import { ScrollArea as p } from "../../components/scroll-area/index.es.js";
+import * as m from "react";
+import { Activity as h, AlertTriangle as g, CheckCircle2 as _, Clock as v, Cpu as y, Database as b, Globe as x, HardDrive as S, MemoryStick as C, RefreshCw as w, TrendingDown as T, TrendingUp as E, XCircle as D, Zap as O } from "lucide-react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+//#region src/blocks/apm-overview/index.tsx
+var j = {
+	healthy: {
+		color: "text-green-500",
+		bgColor: "bg-green-500",
+		label: "Healthy"
+	},
+	warning: {
+		color: "text-yellow-500",
+		bgColor: "bg-yellow-500",
+		label: "Warning"
+	},
+	critical: {
+		color: "text-red-500",
+		bgColor: "bg-red-500",
+		label: "Critical"
+	},
+	unknown: {
+		color: "text-gray-500",
+		bgColor: "bg-gray-500",
+		label: "Unknown"
+	}
+}, M = {
+	api: {
+		icon: x,
+		color: "text-blue-500"
+	},
+	web: {
+		icon: x,
+		color: "text-purple-500"
+	},
+	worker: {
+		icon: y,
+		color: "text-orange-500"
+	},
+	database: {
+		icon: b,
+		color: "text-green-500"
+	},
+	cache: {
+		icon: S,
+		color: "text-red-500"
+	},
+	queue: {
+		icon: h,
+		color: "text-cyan-500"
+	}
+};
+function N(e) {
+	return e < 1 ? `${(e * 1e3).toFixed(0)}µs` : e < 1e3 ? `${e.toFixed(0)}ms` : `${(e / 1e3).toFixed(2)}s`;
+}
+function P(e) {
+	return e < 1e3 ? e.toFixed(0) : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : `${(e / 1e6).toFixed(1)}M`;
+}
+function F({ current: t, previous: n }) {
+	if (n === void 0) return null;
+	let r = (t - n) / n * 100, i = r > 0;
+	return /* @__PURE__ */ A("span", {
+		className: e("text-xs flex items-center gap-0.5", i ? "text-red-500" : "text-green-500"),
+		children: [
+			k(i ? E : T, { className: "h-3 w-3" }),
+			Math.abs(r).toFixed(1),
+			"%"
+		]
+	});
+}
+function I({ title: t, value: n, unit: a, previousValue: o, status: s, icon: c }) {
+	let l = s ? j[s] : null;
+	return /* @__PURE__ */ k(r, { children: /* @__PURE__ */ A(i, {
+		className: "p-4",
+		children: [/* @__PURE__ */ A("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ k("div", {
+				className: "p-2 rounded-lg bg-muted",
+				children: /* @__PURE__ */ k(c, { className: "h-4 w-4 text-muted-foreground" })
+			}), l && /* @__PURE__ */ k("div", { className: e("w-2 h-2 rounded-full", l.bgColor) })]
+		}), /* @__PURE__ */ A("div", {
+			className: "mt-3",
+			children: [/* @__PURE__ */ A("div", {
+				className: "flex items-baseline gap-1",
+				children: [/* @__PURE__ */ k("span", {
+					className: "text-2xl font-bold",
+					children: P(n)
+				}), a && /* @__PURE__ */ k("span", {
+					className: "text-sm text-muted-foreground",
+					children: a
+				})]
+			}), /* @__PURE__ */ A("div", {
+				className: "flex items-center justify-between mt-1",
+				children: [/* @__PURE__ */ k("span", {
+					className: "text-sm text-muted-foreground",
+					children: t
+				}), /* @__PURE__ */ k(F, {
+					current: n,
+					previous: o
+				})]
+			})]
+		})]
+	}) });
+}
+function L({ service: n, onClick: a }) {
+	let o = j[n.status], s = M[n.type], c = s.icon, { metrics: l, previousMetrics: u } = n;
+	return l.successRate / 100 * (1 - l.p95ResponseTime / 3e3), /* @__PURE__ */ k(r, {
+		className: e("cursor-pointer transition-all hover:shadow-md", n.status === "critical" && "border-red-500/50", n.status === "warning" && "border-yellow-500/30"),
+		onClick: a,
+		children: /* @__PURE__ */ A(i, {
+			className: "p-4",
+			children: [/* @__PURE__ */ A("div", {
+				className: "flex items-start gap-4",
+				children: [
+					/* @__PURE__ */ k("div", {
+						className: e("p-2 rounded-lg", `${s.color.replace("text-", "bg-")}/10`),
+						children: /* @__PURE__ */ k(c, { className: e("h-5 w-5", s.color) })
+					}),
+					/* @__PURE__ */ A("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ A("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ k("h4", {
+										className: "font-semibold truncate",
+										children: n.name
+									}),
+									/* @__PURE__ */ k("div", { className: e("w-2 h-2 rounded-full shrink-0", o.bgColor) }),
+									n.version && /* @__PURE__ */ A(t, {
+										variant: "outline",
+										className: "text-xs",
+										children: ["v", n.version]
+									})
+								]
+							}),
+							/* @__PURE__ */ A("div", {
+								className: "flex items-center gap-4 mt-2 text-sm",
+								children: [
+									/* @__PURE__ */ A("span", {
+										className: "flex items-center gap-1",
+										children: [
+											/* @__PURE__ */ k(O, { className: "h-3 w-3 text-muted-foreground" }),
+											l.requestsPerSecond,
+											"/s"
+										]
+									}),
+									/* @__PURE__ */ A("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ k(v, { className: "h-3 w-3 text-muted-foreground" }), N(l.avgResponseTime)]
+									}),
+									/* @__PURE__ */ A("span", {
+										className: e("flex items-center gap-1", l.errorRate > 5 && "text-red-500", l.errorRate > 1 && l.errorRate <= 5 && "text-yellow-500"),
+										children: [
+											/* @__PURE__ */ k(g, { className: "h-3 w-3" }),
+											l.errorRate.toFixed(2),
+											"%"
+										]
+									})
+								]
+							}),
+							/* @__PURE__ */ A("div", {
+								className: "flex items-center gap-4 mt-3 text-xs text-muted-foreground",
+								children: [
+									/* @__PURE__ */ A("span", { children: ["p50: ", N(l.p50ResponseTime)] }),
+									/* @__PURE__ */ A("span", { children: ["p95: ", N(l.p95ResponseTime)] }),
+									/* @__PURE__ */ A("span", { children: ["p99: ", N(l.p99ResponseTime)] })
+								]
+							}),
+							n.tags && n.tags.length > 0 && /* @__PURE__ */ A("div", {
+								className: "flex items-center gap-1 mt-2",
+								children: [n.tags.slice(0, 3).map((e) => /* @__PURE__ */ k(t, {
+									variant: "secondary",
+									className: "text-xs",
+									children: e
+								}, e)), n.tags.length > 3 && /* @__PURE__ */ A("span", {
+									className: "text-xs text-muted-foreground",
+									children: ["+", n.tags.length - 3]
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ A("div", {
+						className: "text-right shrink-0 space-y-1",
+						children: [
+							/* @__PURE__ */ A("div", {
+								className: "text-lg font-bold text-green-500",
+								children: [l.successRate.toFixed(1), "%"]
+							}),
+							/* @__PURE__ */ k("div", {
+								className: "text-xs text-muted-foreground",
+								children: "Success"
+							}),
+							n.instances && /* @__PURE__ */ A("div", {
+								className: "text-xs text-muted-foreground",
+								children: [n.instances, " instances"]
+							})
+						]
+					})
+				]
+			}), (l.cpuUsage !== void 0 || l.memoryUsage !== void 0) && /* @__PURE__ */ A("div", {
+				className: "grid grid-cols-2 gap-3 mt-4 pt-3 border-t",
+				children: [l.cpuUsage !== void 0 && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center justify-between text-xs mb-1",
+					children: [/* @__PURE__ */ A("span", {
+						className: "text-muted-foreground flex items-center gap-1",
+						children: [/* @__PURE__ */ k(y, { className: "h-3 w-3" }), " CPU"]
+					}), /* @__PURE__ */ A("span", {
+						className: e(l.cpuUsage > 80 && "text-red-500"),
+						children: [l.cpuUsage, "%"]
+					})]
+				}), /* @__PURE__ */ k(f, {
+					value: l.cpuUsage,
+					className: e("h-1.5", l.cpuUsage > 80 && "[&>div]:bg-red-500")
+				})] }), l.memoryUsage !== void 0 && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center justify-between text-xs mb-1",
+					children: [/* @__PURE__ */ A("span", {
+						className: "text-muted-foreground flex items-center gap-1",
+						children: [/* @__PURE__ */ k(C, { className: "h-3 w-3" }), " Memory"]
+					}), /* @__PURE__ */ A("span", {
+						className: e(l.memoryUsage > 80 && "text-red-500"),
+						children: [l.memoryUsage, "%"]
+					})]
+				}), /* @__PURE__ */ k(f, {
+					value: l.memoryUsage,
+					className: e("h-1.5", l.memoryUsage > 80 && "[&>div]:bg-red-500")
+				})] })]
+			})]
+		})
+	});
+}
+function R({ transactions: t, onClick: n }) {
+	return /* @__PURE__ */ A(r, { children: [/* @__PURE__ */ k(a, {
+		className: "pb-2",
+		children: /* @__PURE__ */ A(o, {
+			className: "text-base flex items-center gap-2",
+			children: [/* @__PURE__ */ k(h, { className: "h-4 w-4" }), "Recent Transactions"]
+		})
+	}), /* @__PURE__ */ k(i, { children: /* @__PURE__ */ k(p, {
+		className: "h-[300px]",
+		children: /* @__PURE__ */ k("div", {
+			className: "space-y-2",
+			children: t.map((t) => /* @__PURE__ */ A("div", {
+				className: "flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors",
+				onClick: () => n?.(t),
+				children: [
+					t.status === "success" ? /* @__PURE__ */ k(_, { className: "h-4 w-4 text-green-500 shrink-0" }) : /* @__PURE__ */ k(D, { className: "h-4 w-4 text-red-500 shrink-0" }),
+					/* @__PURE__ */ A("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ k("div", {
+							className: "font-medium text-sm truncate",
+							children: t.name
+						}), /* @__PURE__ */ k("div", {
+							className: "text-xs text-muted-foreground",
+							children: t.service
+						})]
+					}),
+					/* @__PURE__ */ A("div", {
+						className: "text-right shrink-0",
+						children: [/* @__PURE__ */ k("div", {
+							className: e("text-sm font-medium", t.duration > 1e3 && "text-yellow-500", t.duration > 3e3 && "text-red-500"),
+							children: N(t.duration)
+						}), /* @__PURE__ */ k("div", {
+							className: "text-xs text-muted-foreground",
+							children: t.timestamp.toLocaleTimeString()
+						})]
+					})
+				]
+			}, t.id))
+		})
+	}) })] });
+}
+function z({ services: t, recentTransactions: i = [], timeRange: f = "1h", onTimeRangeChange: y, onServiceClick: b, onTransactionClick: x, onRefresh: S, className: C }) {
+	let [T, E] = m.useState("all"), D = m.useMemo(() => ({
+		totalRequests: t.reduce((e, t) => e + t.metrics.requestsPerSecond, 0),
+		avgResponseTime: t.reduce((e, t) => e + t.metrics.avgResponseTime, 0) / t.length,
+		avgErrorRate: t.reduce((e, t) => e + t.metrics.errorRate, 0) / t.length,
+		healthyCount: t.filter((e) => e.status === "healthy").length,
+		totalServices: t.length
+	}), [t]), M = m.useMemo(() => T === "all" ? t : t.filter((e) => e.status === T), [t, T]);
+	return /* @__PURE__ */ A("div", {
+		className: e("space-y-6", C),
+		children: [
+			/* @__PURE__ */ k(r, { children: /* @__PURE__ */ k(a, { children: /* @__PURE__ */ A("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ k(h, { className: "h-6 w-6" }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k(o, { children: "Application Performance" }), /* @__PURE__ */ k("p", {
+						className: "text-sm text-muted-foreground",
+						children: "Monitor service health and performance metrics"
+					})] })]
+				}), /* @__PURE__ */ A("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ A(s, {
+						value: f,
+						onValueChange: (e) => y?.(e),
+						children: [/* @__PURE__ */ A(u, {
+							className: "w-28",
+							children: [/* @__PURE__ */ k(v, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ k(d, {})]
+						}), /* @__PURE__ */ A(c, { children: [
+							/* @__PURE__ */ k(l, {
+								value: "1h",
+								children: "Last 1h"
+							}),
+							/* @__PURE__ */ k(l, {
+								value: "6h",
+								children: "Last 6h"
+							}),
+							/* @__PURE__ */ k(l, {
+								value: "24h",
+								children: "Last 24h"
+							}),
+							/* @__PURE__ */ k(l, {
+								value: "7d",
+								children: "Last 7d"
+							}),
+							/* @__PURE__ */ k(l, {
+								value: "30d",
+								children: "Last 30d"
+							})
+						] })]
+					}), S && /* @__PURE__ */ k(n, {
+						variant: "outline",
+						onClick: S,
+						children: /* @__PURE__ */ k(w, { className: "h-4 w-4" })
+					})]
+				})]
+			}) }) }),
+			/* @__PURE__ */ A("div", {
+				className: "grid grid-cols-4 gap-4",
+				children: [
+					/* @__PURE__ */ k(I, {
+						title: "Total Requests",
+						value: D.totalRequests,
+						unit: "/s",
+						icon: O
+					}),
+					/* @__PURE__ */ k(I, {
+						title: "Avg Response Time",
+						value: D.avgResponseTime,
+						unit: "ms",
+						icon: v,
+						status: D.avgResponseTime > 500 ? "warning" : "healthy"
+					}),
+					/* @__PURE__ */ k(I, {
+						title: "Error Rate",
+						value: D.avgErrorRate,
+						unit: "%",
+						icon: g,
+						status: D.avgErrorRate > 5 ? "critical" : D.avgErrorRate > 1 ? "warning" : "healthy"
+					}),
+					/* @__PURE__ */ k(I, {
+						title: "Services Healthy",
+						value: D.healthyCount,
+						unit: `/ ${D.totalServices}`,
+						icon: _,
+						status: D.healthyCount === D.totalServices ? "healthy" : "warning"
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "grid grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ A("div", {
+					className: "col-span-2 space-y-4",
+					children: [/* @__PURE__ */ A("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ k("h3", {
+							className: "font-semibold",
+							children: "Services"
+						}), /* @__PURE__ */ k("div", {
+							className: "flex items-center gap-2",
+							children: [
+								"all",
+								"healthy",
+								"warning",
+								"critical"
+							].map((e) => /* @__PURE__ */ k(n, {
+								variant: T === e ? "default" : "ghost",
+								size: "sm",
+								onClick: () => E(e),
+								children: e === "all" ? "All" : j[e].label
+							}, e))
+						})]
+					}), /* @__PURE__ */ k(p, {
+						className: "h-[500px]",
+						children: /* @__PURE__ */ k("div", {
+							className: "space-y-4 pr-4",
+							children: M.map((e) => /* @__PURE__ */ k(L, {
+								service: e,
+								onClick: () => b?.(e)
+							}, e.id))
+						})
+					})]
+				}), /* @__PURE__ */ k("div", { children: /* @__PURE__ */ k(R, {
+					transactions: i,
+					onClick: x
+				}) })]
+			})
+		]
+	});
+}
+var B = [
+	{
+		id: "1",
+		name: "api-gateway",
+		type: "api",
+		status: "healthy",
+		version: "2.4.1",
+		instances: 3,
+		metrics: {
+			requestsPerSecond: 1250,
+			avgResponseTime: 45,
+			p50ResponseTime: 32,
+			p95ResponseTime: 120,
+			p99ResponseTime: 250,
+			errorRate: .12,
+			successRate: 99.88,
+			activeConnections: 450,
+			cpuUsage: 45,
+			memoryUsage: 62
+		},
+		tags: ["production", "critical"]
+	},
+	{
+		id: "2",
+		name: "user-service",
+		type: "api",
+		status: "healthy",
+		version: "1.8.0",
+		instances: 2,
+		metrics: {
+			requestsPerSecond: 350,
+			avgResponseTime: 85,
+			p50ResponseTime: 65,
+			p95ResponseTime: 180,
+			p99ResponseTime: 450,
+			errorRate: .5,
+			successRate: 99.5,
+			activeConnections: 120,
+			cpuUsage: 35,
+			memoryUsage: 55
+		},
+		tags: ["production"]
+	},
+	{
+		id: "3",
+		name: "payment-service",
+		type: "api",
+		status: "warning",
+		version: "3.1.0",
+		instances: 2,
+		metrics: {
+			requestsPerSecond: 150,
+			avgResponseTime: 520,
+			p50ResponseTime: 280,
+			p95ResponseTime: 1200,
+			p99ResponseTime: 2500,
+			errorRate: 2.5,
+			successRate: 97.5,
+			activeConnections: 85,
+			cpuUsage: 78,
+			memoryUsage: 82
+		},
+		tags: ["production", "payment"]
+	},
+	{
+		id: "4",
+		name: "notification-worker",
+		type: "worker",
+		status: "healthy",
+		instances: 5,
+		metrics: {
+			requestsPerSecond: 500,
+			avgResponseTime: 25,
+			p50ResponseTime: 18,
+			p95ResponseTime: 55,
+			p99ResponseTime: 120,
+			errorRate: .05,
+			successRate: 99.95,
+			activeConnections: 0,
+			cpuUsage: 25,
+			memoryUsage: 40
+		}
+	},
+	{
+		id: "5",
+		name: "postgres-primary",
+		type: "database",
+		status: "healthy",
+		instances: 1,
+		metrics: {
+			requestsPerSecond: 2500,
+			avgResponseTime: 8,
+			p50ResponseTime: 5,
+			p95ResponseTime: 25,
+			p99ResponseTime: 80,
+			errorRate: .01,
+			successRate: 99.99,
+			activeConnections: 120,
+			cpuUsage: 55,
+			memoryUsage: 72
+		}
+	},
+	{
+		id: "6",
+		name: "redis-cache",
+		type: "cache",
+		status: "healthy",
+		instances: 3,
+		metrics: {
+			requestsPerSecond: 15e3,
+			avgResponseTime: .5,
+			p50ResponseTime: .3,
+			p95ResponseTime: 1.2,
+			p99ResponseTime: 3,
+			errorRate: .001,
+			successRate: 99.999,
+			activeConnections: 500,
+			memoryUsage: 45
+		}
+	}
+], V = [
+	{
+		id: "1",
+		name: "POST /api/users",
+		service: "user-service",
+		duration: 85,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 5e3),
+		status: "success"
+	},
+	{
+		id: "2",
+		name: "GET /api/products",
+		service: "api-gateway",
+		duration: 42,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 12e3),
+		status: "success"
+	},
+	{
+		id: "3",
+		name: "POST /api/payments",
+		service: "payment-service",
+		duration: 1250,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 25e3),
+		status: "error"
+	},
+	{
+		id: "4",
+		name: "GET /api/orders/:id",
+		service: "api-gateway",
+		duration: 65,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 45e3),
+		status: "success"
+	},
+	{
+		id: "5",
+		name: "POST /api/notifications",
+		service: "notification-worker",
+		duration: 22,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 6e4),
+		status: "success"
+	},
+	{
+		id: "6",
+		name: "GET /api/users/:id",
+		service: "user-service",
+		duration: 95,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 9e4),
+		status: "success"
+	},
+	{
+		id: "7",
+		name: "PUT /api/cart",
+		service: "api-gateway",
+		duration: 180,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 12e4),
+		status: "success"
+	},
+	{
+		id: "8",
+		name: "POST /api/checkout",
+		service: "payment-service",
+		duration: 3200,
+		timestamp: /* @__PURE__ */ new Date(Date.now() - 18e4),
+		status: "error"
+	}
+];
+//#endregion
+export { z as APMOverview, B as defaultAPMServices, V as defaultAPMTransactions };

package/dist/blocks/auth-2fa/index.cjs.js

@@ -0,0 +1,3 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../../components/badge/index.cjs.js`),r=require(`../../components/button/index.cjs.js`),i=require(`../../components/card/index.cjs.js`),a=require(`../../components/label/index.cjs.js`),o=require(`../../components/input/index.cjs.js`),s=require(`../../components/radio-group/index.cjs.js`),c=require(`../../components/separator/index.cjs.js`);let l=require(`react`);l=e.__toESM(l);let u=require(`lucide-react`),d=require(`react/jsx-runtime`);var f={authenticator:{icon:(0,d.jsx)(u.Smartphone,{className:`h-5 w-5`}),title:`Authenticator App`,description:`Use an app like Google Authenticator or Authy`,recommended:!0},sms:{icon:(0,d.jsx)(u.MessageSquare,{className:`h-5 w-5`}),title:`SMS`,description:`Receive codes via text message`,recommended:!1},email:{icon:(0,d.jsx)(u.Mail,{className:`h-5 w-5`}),title:`Email`,description:`Receive codes via email`,recommended:!1},hardware:{icon:(0,d.jsx)(u.Key,{className:`h-5 w-5`}),title:`Hardware Key`,description:`Use a physical security key (YubiKey, etc.)`,recommended:!0}};function p({methods:e,selected:r,onSelect:i}){return(0,d.jsx)(s.RadioGroup,{value:r,onValueChange:e=>i(e),children:(0,d.jsx)(`div`,{className:`space-y-3`,children:e.map(e=>{let i=f[e];return(0,d.jsxs)(a.Label,{className:t.cn(`flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-colors`,r===e?`border-primary bg-primary/5`:`hover:bg-muted/50`),children:[(0,d.jsx)(s.RadioGroupItem,{value:e}),(0,d.jsx)(`div`,{className:`h-10 w-10 rounded-lg bg-muted flex items-center justify-center`,children:i.icon}),(0,d.jsxs)(`div`,{className:`flex-1`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(`span`,{className:`font-medium`,children:i.title}),i.recommended&&(0,d.jsx)(n.Badge,{variant:`secondary`,className:`text-xs`,children:`Recommended`})]}),(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:i.description})]})]},e)})})})}function m({length:e=6,value:t,onChange:n}){let r=l.useRef([]),i=t.padEnd(e,``).split(``).slice(0,e),a=(t,a)=>{if(!/^\d*$/.test(a))return;let o=[...i];o[t]=a.slice(-1),n(o.join(``)),a&&t<e-1&&r.current[t+1]?.focus()},s=(e,t)=>{t.key===`Backspace`&&!i[e]&&e>0&&r.current[e-1]?.focus()},c=t=>{t.preventDefault(),n(t.clipboardData.getData(`text`).replace(/\D/g,``).slice(0,e))};return(0,d.jsx)(`div`,{className:`flex gap-2 justify-center`,children:i.map((e,t)=>(0,d.jsx)(o.Input,{ref:e=>{r.current[t]=e},type:`text`,inputMode:`numeric`,maxLength:1,value:e,onChange:e=>a(t,e.target.value),onKeyDown:e=>s(t,e),onPaste:c,className:`w-12 h-14 text-center text-2xl font-mono`},t))})}function h({codes:e,onRegenerate:n,onDownload:a}){let[o,s]=l.useState(!1),[c,f]=l.useState(!1),p=()=>{let t=e.map(e=>e.code).join(`
+`);navigator.clipboard.writeText(t),s(!0),setTimeout(()=>s(!1),2e3)},m=e.filter(e=>!e.used);return(0,d.jsxs)(i.Card,{children:[(0,d.jsx)(i.CardHeader,{children:(0,d.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsxs)(i.CardTitle,{className:`flex items-center gap-2`,children:[(0,d.jsx)(u.Key,{className:`h-5 w-5`}),`Backup Codes`]}),(0,d.jsxs)(i.CardDescription,{children:[m.length,` of `,e.length,` codes remaining`]})]}),(0,d.jsx)(r.Button,{variant:`ghost`,size:`icon`,onClick:()=>f(!c),children:c?(0,d.jsx)(u.EyeOff,{className:`h-4 w-4`}):(0,d.jsx)(u.Eye,{className:`h-4 w-4`})})]})}),(0,d.jsxs)(i.CardContent,{children:[(0,d.jsx)(`div`,{className:`grid grid-cols-2 gap-2`,children:e.map((e,n)=>(0,d.jsx)(`div`,{className:t.cn(`font-mono text-sm p-2 rounded border text-center`,e.used?`bg-muted text-muted-foreground line-through`:`bg-card`),children:c?e.code:`••••••••`},n))}),m.length<3&&(0,d.jsxs)(`div`,{className:`mt-4 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 flex items-center gap-3`,children:[(0,d.jsx)(u.AlertTriangle,{className:`h-5 w-5 text-yellow-500`}),(0,d.jsx)(`p`,{className:`text-sm`,children:`You're running low on backup codes. Consider regenerating them.`})]})]}),(0,d.jsxs)(i.CardFooter,{className:`flex gap-2`,children:[(0,d.jsxs)(r.Button,{variant:`outline`,size:`sm`,onClick:p,children:[o?(0,d.jsx)(u.Check,{className:`h-4 w-4 mr-2`}):(0,d.jsx)(u.Copy,{className:`h-4 w-4 mr-2`}),o?`Copied`:`Copy All`]}),a&&(0,d.jsxs)(r.Button,{variant:`outline`,size:`sm`,onClick:a,children:[(0,d.jsx)(u.Download,{className:`h-4 w-4 mr-2`}),`Download`]}),n&&(0,d.jsxs)(r.Button,{variant:`outline`,size:`sm`,onClick:n,children:[(0,d.jsx)(u.RefreshCw,{className:`h-4 w-4 mr-2`}),`Regenerate`]})]})]})}function g({status:e={enabled:!1},availableMethods:s=[`authenticator`,`sms`,`email`],qrCodeUrl:g,secretKey:_,backupCodes:v,onEnable:y,onDisable:b,onRegenerateBackupCodes:x,onSendCode:S,className:C}){let[w,T]=l.useState(`overview`),[E,D]=l.useState(s[0]),[O,k]=l.useState(``),[A,j]=l.useState(!1),[M,N]=l.useState(null),[P,F]=l.useState(!1),[I,L]=l.useState(!1);return(0,d.jsxs)(`div`,{className:t.cn(`space-y-6 max-w-2xl`,C),children:[(0,d.jsxs)(i.Card,{children:[(0,d.jsx)(i.CardHeader,{children:(0,d.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-3`,children:[e.enabled?(0,d.jsx)(`div`,{className:`h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center`,children:(0,d.jsx)(u.ShieldCheck,{className:`h-6 w-6 text-green-500`})}):(0,d.jsx)(`div`,{className:`h-12 w-12 rounded-full bg-yellow-500/10 flex items-center justify-center`,children:(0,d.jsx)(u.ShieldAlert,{className:`h-6 w-6 text-yellow-500`})}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(i.CardTitle,{children:`Two-Factor Authentication`}),(0,d.jsx)(i.CardDescription,{children:e.enabled?`Enabled via ${f[e.method]?.title}`:`Add an extra layer of security to your account`})]})]}),(0,d.jsx)(n.Badge,{variant:e.enabled?`default`:`secondary`,children:e.enabled?`Enabled`:`Disabled`})]})}),w===`overview`&&(0,d.jsx)(i.CardFooter,{children:e.enabled?(0,d.jsxs)(`div`,{className:`flex gap-2 w-full`,children:[(0,d.jsx)(r.Button,{variant:`outline`,className:`flex-1`,onClick:()=>T(`setup`),children:`Change Method`}),(0,d.jsx)(r.Button,{variant:`destructive`,className:`flex-1`,onClick:()=>T(`disable`),children:`Disable 2FA`})]}):(0,d.jsxs)(r.Button,{className:`w-full`,onClick:()=>T(`setup`),children:[(0,d.jsx)(u.Shield,{className:`h-4 w-4 mr-2`}),`Enable Two-Factor Authentication`]})})]}),w===`setup`&&(0,d.jsxs)(i.Card,{children:[(0,d.jsxs)(i.CardHeader,{children:[(0,d.jsx)(i.CardTitle,{children:`Choose Authentication Method`}),(0,d.jsx)(i.CardDescription,{children:`Select how you want to receive verification codes`})]}),(0,d.jsx)(i.CardContent,{children:(0,d.jsx)(p,{methods:s,selected:E,onSelect:D})}),(0,d.jsxs)(i.CardFooter,{className:`flex gap-2`,children:[(0,d.jsx)(r.Button,{variant:`outline`,onClick:()=>T(`overview`),children:`Cancel`}),(0,d.jsxs)(r.Button,{className:`flex-1`,onClick:()=>T(`verify`),children:[`Continue`,(0,d.jsx)(u.ChevronRight,{className:`h-4 w-4 ml-2`})]})]})]}),w===`verify`&&(0,d.jsxs)(i.Card,{children:[(0,d.jsxs)(i.CardHeader,{children:[(0,d.jsx)(i.CardTitle,{children:E===`authenticator`?`Set Up Authenticator`:`Verify Your Identity`}),(0,d.jsx)(i.CardDescription,{children:E===`authenticator`?`Scan the QR code with your authenticator app`:`Enter the code sent to your ${E}`})]}),(0,d.jsxs)(i.CardContent,{className:`space-y-6`,children:[E===`authenticator`&&(0,d.jsxs)(d.Fragment,{children:[g&&(0,d.jsx)(`div`,{className:`flex justify-center`,children:(0,d.jsx)(`div`,{className:`p-4 bg-white rounded-lg`,children:(0,d.jsx)(`img`,{src:g,alt:`QR Code`,className:`h-48 w-48`})})}),_&&(0,d.jsxs)(`div`,{className:`space-y-2`,children:[(0,d.jsx)(a.Label,{children:`Or enter this code manually:`}),(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(o.Input,{value:_,readOnly:!0,className:`font-mono`}),(0,d.jsx)(r.Button,{variant:`outline`,size:`icon`,onClick:()=>{_&&(navigator.clipboard.writeText(_),F(!0),setTimeout(()=>F(!1),2e3))},children:P?(0,d.jsx)(u.Check,{className:`h-4 w-4`}):(0,d.jsx)(u.Copy,{className:`h-4 w-4`})})]})]}),(0,d.jsx)(c.Separator,{})]}),(E===`sms`||E===`email`)&&!I&&(0,d.jsxs)(`div`,{className:`text-center`,children:[(0,d.jsxs)(`p`,{className:`text-sm text-muted-foreground mb-4`,children:[`We'll send a verification code to your `,E===`sms`?`phone`:`email`]}),(0,d.jsxs)(r.Button,{onClick:async()=>{if(S){j(!0);try{await S(E),L(!0)}finally{j(!1)}}},disabled:A,children:[A?(0,d.jsx)(u.RefreshCw,{className:`h-4 w-4 mr-2 animate-spin`}):E===`sms`?(0,d.jsx)(u.MessageSquare,{className:`h-4 w-4 mr-2`}):(0,d.jsx)(u.Mail,{className:`h-4 w-4 mr-2`}),`Send Code`]})]}),(E===`authenticator`||I)&&(0,d.jsxs)(`div`,{className:`space-y-4`,children:[(0,d.jsx)(a.Label,{className:`text-center block`,children:`Enter the 6-digit code`}),(0,d.jsx)(m,{value:O,onChange:k}),M&&(0,d.jsx)(`p`,{className:`text-sm text-destructive text-center`,children:M})]})]}),(0,d.jsxs)(i.CardFooter,{className:`flex gap-2`,children:[(0,d.jsx)(r.Button,{variant:`outline`,onClick:()=>T(`setup`),children:`Back`}),(0,d.jsxs)(r.Button,{className:`flex-1`,onClick:async()=>{if(y){j(!0),N(null);try{await y(E,O)?(T(`overview`),k(``)):N(`Invalid verification code. Please try again.`)}finally{j(!1)}}},disabled:O.length!==6||A,children:[A?(0,d.jsx)(u.RefreshCw,{className:`h-4 w-4 mr-2 animate-spin`}):(0,d.jsx)(u.Lock,{className:`h-4 w-4 mr-2`}),`Verify & Enable`]})]})]}),w===`disable`&&(0,d.jsxs)(i.Card,{children:[(0,d.jsxs)(i.CardHeader,{children:[(0,d.jsx)(i.CardTitle,{className:`text-destructive`,children:`Disable Two-Factor Authentication`}),(0,d.jsx)(i.CardDescription,{children:`Enter your verification code to confirm. This will make your account less secure.`})]}),(0,d.jsxs)(i.CardContent,{className:`space-y-4`,children:[(0,d.jsx)(`div`,{className:`p-4 rounded-lg bg-destructive/10 border border-destructive/20`,children:(0,d.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,d.jsx)(u.AlertTriangle,{className:`h-5 w-5 text-destructive mt-0.5`}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`p`,{className:`font-medium text-destructive`,children:`Warning`}),(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Disabling 2FA will remove an important layer of security from your account. Anyone with your password will be able to access your account.`})]})]})}),(0,d.jsxs)(`div`,{className:`space-y-2`,children:[(0,d.jsx)(a.Label,{children:`Enter your verification code`}),(0,d.jsx)(m,{value:O,onChange:k}),M&&(0,d.jsx)(`p`,{className:`text-sm text-destructive text-center`,children:M})]})]}),(0,d.jsxs)(i.CardFooter,{className:`flex gap-2`,children:[(0,d.jsx)(r.Button,{variant:`outline`,onClick:()=>T(`overview`),children:`Cancel`}),(0,d.jsxs)(r.Button,{variant:`destructive`,className:`flex-1`,onClick:async()=>{if(b){j(!0),N(null);try{await b(O)?(T(`overview`),k(``)):N(`Invalid verification code. Please try again.`)}finally{j(!1)}}},disabled:O.length!==6||A,children:[A?(0,d.jsx)(u.RefreshCw,{className:`h-4 w-4 mr-2 animate-spin`}):(0,d.jsx)(u.ShieldAlert,{className:`h-4 w-4 mr-2`}),`Disable 2FA`]})]})]}),e.enabled&&v&&v.length>0&&w===`overview`&&(0,d.jsx)(h,{codes:v,onRegenerate:x,onDownload:()=>{let e=v.map(e=>e.code).join(`
+`),t=new Blob([e],{type:`text/plain`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`backup-codes.txt`,r.click()}}),(0,d.jsxs)(i.Card,{children:[(0,d.jsx)(i.CardHeader,{children:(0,d.jsxs)(i.CardTitle,{className:`flex items-center gap-2`,children:[(0,d.jsx)(u.Fingerprint,{className:`h-5 w-5`}),`Security Tips`]})}),(0,d.jsxs)(i.CardContent,{className:`space-y-3`,children:[(0,d.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,d.jsx)(u.Check,{className:`h-4 w-4 text-green-500 mt-1`}),(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Use an authenticator app for the most secure experience`})]}),(0,d.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,d.jsx)(u.Check,{className:`h-4 w-4 text-green-500 mt-1`}),(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Store your backup codes in a safe place (password manager, safe deposit box)`})]}),(0,d.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,d.jsx)(u.Check,{className:`h-4 w-4 text-green-500 mt-1`}),(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Never share your verification codes with anyone`})]})]})]})]})}var _=[{code:`ABCD-1234`,used:!1},{code:`EFGH-5678`,used:!1},{code:`IJKL-9012`,used:!0},{code:`MNOP-3456`,used:!1},{code:`QRST-7890`,used:!1},{code:`UVWX-1234`,used:!0},{code:`YZAB-5678`,used:!1},{code:`CDEF-9012`,used:!1}],v={enabled:!0,method:`authenticator`,lastVerified:new Date(`2024-03-01`)};exports.default=g,exports.defaultBackupCodes=_,exports.defaultStatus=v;