tembro 2.1.13 → 3.1.1

package/dist/src/showcase/preview-registry.js

@@ -0,0 +1,841 @@
+import { Button as e } from "../components/ui/button/index.js";
+import { Input as t } from "../components/ui/input/index.js";
+import { Badge as n } from "../components/ui/badge/index.js";
+import { Table as r, TableBody as i, TableCell as a, TableHead as o, TableHeader as s, TableRow as c } from "../components/ui/table/index.js";
+import { actionsShowcaseDemoRegistry as l } from "../components/actions/demo.js";
+import { calendarShowcaseDemoRegistry as u } from "../components/calendar/demo.js";
+import { dataTableShowcaseDemoRegistry as d } from "../components/data-table/demo.js";
+import { displayShowcaseDemoRegistry as f } from "../components/display/demo.js";
+import { feedbackShowcaseDemoRegistry as p } from "../components/feedback/demo.js";
+import { filtersShowcaseDemoRegistry as m } from "../components/filters/demo.js";
+import { formShowcaseDemoRegistry as h } from "../components/form/demo.js";
+import { inputsShowcaseDemoRegistry as g } from "../components/inputs/demo.js";
+import { layoutShowcaseDemoRegistry as _ } from "../components/layout/demo.js";
+import { navigationShowcaseDemoRegistry as v } from "../components/navigation/demo.js";
+import { overlayShowcaseDemoRegistry as y } from "../components/overlay/demo.js";
+import { patternsShowcaseDemoRegistry as b } from "../components/patterns/demo.js";
+import { uploadShowcaseDemoRegistry as x } from "../components/upload/demo.js";
+import { wizardShowcaseDemoRegistry as S } from "../components/wizard/demo.js";
+import { defaultComponentDemoState as C } from "./premium/types.js";
+import { premiumShowcaseDemoRegistry as w } from "./premium/index.js";
+import { registrySpecificDemoRegistry as T } from "./registry-specific.js";
+import { supplementalShowcaseDemoRegistry as E } from "./supplemental.js";
+import { previewSurfaceCatalog as D } from "./preview-catalog.js";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region src/showcase/preview-registry.tsx
+var A = [
+	{
+		label: "Revenue",
+		value: "$24,780",
+		delta: "+12.8%"
+	},
+	{
+		label: "Users",
+		value: "18,390",
+		delta: "+7.2%"
+	},
+	{
+		label: "Orders",
+		value: "1,429",
+		delta: "+6.1%"
+	},
+	{
+		label: "Conversion",
+		value: "6.3%",
+		delta: "+1.1%"
+	}
+], j = [
+	[
+		"AZ-001",
+		"Acme Dashboard",
+		"Live",
+		"$8,240"
+	],
+	[
+		"AZ-002",
+		"CRM Workspace",
+		"Review",
+		"$5,180"
+	],
+	[
+		"AZ-003",
+		"Store Command",
+		"Draft",
+		"$3,740"
+	],
+	[
+		"AZ-004",
+		"Finance Dock",
+		"Live",
+		"$7,620"
+	]
+], M = [
+	[
+		"INV-001",
+		"Acme Inc.",
+		"Paid",
+		"$2,400"
+	],
+	[
+		"INV-002",
+		"Larana",
+		"Review",
+		"$1,280"
+	],
+	[
+		"INV-003",
+		"ShipFast",
+		"Draft",
+		"$980"
+	],
+	[
+		"INV-004",
+		"Toolpad",
+		"Paid",
+		"$4,120"
+	],
+	[
+		"INV-005",
+		"Pixels UI",
+		"Paid",
+		"$3,860"
+	]
+], N = "min-h-screen bg-[var(--aui-page-bg-alt)] p-6 aui-text-strong", P = "border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-[var(--aui-shadow-panel)]", F = "border border-[color:var(--aui-divider)] bg-[color:var(--aui-surface-muted)]", I = "aui-surface-strong text-[color:var(--aui-surface-strong-foreground)]", L = "aui-text-muted", R = "text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_28%)]", z = "border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_90%)] text-[color:var(--aui-surface-strong-foreground)]", B = "border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_95%)] text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_18%)]", V = {
+	...l,
+	...u,
+	...d,
+	...f,
+	...p,
+	...m,
+	...h,
+	...g,
+	..._,
+	...v,
+	...y,
+	...b,
+	...x,
+	...S,
+	...T,
+	...E,
+	...w
+};
+function H() {
+	return /* @__PURE__ */ O("div", {
+		className: "flex size-11 items-center justify-center rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-surface-strong)] text-sm font-semibold tracking-[0.2em] text-[color:var(--aui-surface-strong-foreground)]",
+		children: "AZ"
+	});
+}
+function U({ tone: l }) {
+	return l === "dashboard" ? /* @__PURE__ */ O("div", {
+		className: N,
+		children: /* @__PURE__ */ k("div", {
+			className: "grid min-h-[720px] gap-6 lg:grid-cols-[260px_1fr]",
+			children: [/* @__PURE__ */ k("aside", {
+				className: `rounded-[28px] p-5 ${P}`,
+				children: [/* @__PURE__ */ k("div", {
+					className: "mb-6 flex items-center gap-3",
+					children: [/* @__PURE__ */ O(H, {}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+						className: "font-semibold",
+						children: "Azamat UI"
+					}), /* @__PURE__ */ O("p", {
+						className: `text-sm ${L}`,
+						children: "Dashboard shell"
+					})] })]
+				}), /* @__PURE__ */ O("div", {
+					className: "space-y-2 text-sm",
+					children: [
+						"Overview",
+						"Analytics",
+						"Customers",
+						"Orders",
+						"Finance",
+						"Settings"
+					].map((e, t) => /* @__PURE__ */ O("div", {
+						className: t === 0 ? `rounded-2xl px-4 py-3 ${I}` : `rounded-2xl px-4 py-3 ${L}`,
+						children: e
+					}, e))
+				})]
+			}), /* @__PURE__ */ k("main", {
+				className: `space-y-6 rounded-[32px] p-6 ${P}`,
+				children: [
+					/* @__PURE__ */ k("div", {
+						className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+						children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+							className: `text-sm uppercase tracking-[0.24em] ${L}`,
+							children: "Overview"
+						}), /* @__PURE__ */ O("h1", {
+							className: "mt-2 text-4xl font-semibold tracking-tight",
+							children: "Operations dashboard"
+						})] }), /* @__PURE__ */ k("div", {
+							className: "flex gap-3",
+							children: [/* @__PURE__ */ O(e, {
+								variant: "outline",
+								className: "rounded-2xl",
+								children: "Route preview"
+							}), /* @__PURE__ */ O(e, {
+								className: "rounded-2xl",
+								children: "Create report"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "grid gap-4 xl:grid-cols-4",
+						children: A.map((e) => /* @__PURE__ */ k("div", {
+							className: `rounded-[24px] p-5 ${F}`,
+							children: [
+								/* @__PURE__ */ O("p", {
+									className: `text-sm ${L}`,
+									children: e.label
+								}),
+								/* @__PURE__ */ O("p", {
+									className: "mt-2 text-3xl font-semibold tracking-tight",
+									children: e.value
+								}),
+								/* @__PURE__ */ O("p", {
+									className: "mt-3 text-sm text-emerald-600",
+									children: e.delta
+								})
+							]
+						}, e.label))
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "grid gap-6 xl:grid-cols-[1.15fr_0.85fr]",
+						children: [/* @__PURE__ */ k("section", {
+							className: `rounded-[28px] p-5 ${F}`,
+							children: [
+								/* @__PURE__ */ O("h2", {
+									className: "text-xl font-semibold",
+									children: "Revenue trend"
+								}),
+								/* @__PURE__ */ O("p", {
+									className: `mt-2 text-sm leading-6 ${L}`,
+									children: "Monthly performance with steady lift across product lines."
+								}),
+								/* @__PURE__ */ O("div", { className: "mt-5 h-72 rounded-[24px] bg-[color:var(--aui-page-bg)] [background-image:linear-gradient(180deg,color-mix(in_oklch,var(--aui-accent)_18%,transparent),transparent),radial-gradient(circle_at_bottom_left,color-mix(in_oklch,var(--aui-success)_20%,transparent),transparent_40%)]" })
+							]
+						}), /* @__PURE__ */ k("section", {
+							className: `rounded-[28px] p-5 ${F}`,
+							children: [
+								/* @__PURE__ */ O("h2", {
+									className: "text-xl font-semibold",
+									children: "Release checklist"
+								}),
+								/* @__PURE__ */ O("p", {
+									className: `mt-2 text-sm leading-6 ${L}`,
+									children: "Production gating before public deployment."
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "mt-5 space-y-3",
+									children: [
+										"QA approved",
+										"Docs updated",
+										"Tokens synced",
+										"Routes verified"
+									].map((e, t) => /* @__PURE__ */ k("div", {
+										className: `flex items-center justify-between rounded-2xl px-4 py-3 ${P}`,
+										children: [/* @__PURE__ */ O("span", { children: e }), /* @__PURE__ */ O(n, {
+											variant: t === 3 ? "outline" : "secondary",
+											children: t === 3 ? "Pending" : "Done"
+										})]
+									}, e))
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ k("section", {
+						className: `rounded-[28px] p-5 ${F}`,
+						children: [/* @__PURE__ */ k("div", {
+							className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+							children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h2", {
+								className: "text-xl font-semibold",
+								children: "Recent workspaces"
+							}), /* @__PURE__ */ O("p", {
+								className: `mt-2 text-sm leading-6 ${L}`,
+								children: "Dense table preview inside a public docs frame."
+							})] }), /* @__PURE__ */ k("div", {
+								className: "flex gap-3",
+								children: [/* @__PURE__ */ O(t, {
+									placeholder: "Filter rows...",
+									className: "w-full lg:w-64"
+								}), /* @__PURE__ */ O(e, {
+									variant: "outline",
+									className: "rounded-2xl",
+									children: "Export"
+								})]
+							})]
+						}), /* @__PURE__ */ O("div", {
+							className: `mt-5 overflow-hidden rounded-[24px] ${P}`,
+							children: /* @__PURE__ */ k(r, { children: [/* @__PURE__ */ O(s, { children: /* @__PURE__ */ k(c, { children: [
+								/* @__PURE__ */ O(o, { children: "ID" }),
+								/* @__PURE__ */ O(o, { children: "Name" }),
+								/* @__PURE__ */ O(o, { children: "Status" }),
+								/* @__PURE__ */ O(o, {
+									className: "text-right",
+									children: "Revenue"
+								})
+							] }) }), /* @__PURE__ */ O(i, { children: j.map(([e, t, r, i]) => /* @__PURE__ */ k(c, { children: [
+								/* @__PURE__ */ O(a, { children: e }),
+								/* @__PURE__ */ O(a, { children: t }),
+								/* @__PURE__ */ O(a, { children: /* @__PURE__ */ O(n, {
+									variant: r === "Live" ? "secondary" : r === "Review" ? "outline" : "destructive",
+									children: r
+								}) }),
+								/* @__PURE__ */ O(a, {
+									className: "text-right",
+									children: i
+								})
+							] }, e)) })] })
+						})]
+					})
+				]
+			})]
+		})
+	}) : l === "table" ? /* @__PURE__ */ O("div", {
+		className: N,
+		children: /* @__PURE__ */ k("section", {
+			className: `mx-auto max-w-6xl rounded-[32px] p-6 ${P}`,
+			children: [/* @__PURE__ */ k("div", {
+				className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h1", {
+					className: "text-3xl font-semibold tracking-tight",
+					children: "Invoices table"
+				}), /* @__PURE__ */ O("p", {
+					className: `mt-2 text-sm leading-6 ${L}`,
+					children: "Responsive data-table preview route with filters, states and pagination shell."
+				})] }), /* @__PURE__ */ k("div", {
+					className: "flex gap-3",
+					children: [
+						/* @__PURE__ */ O(t, {
+							placeholder: "Search invoices...",
+							className: "w-full lg:w-64"
+						}),
+						/* @__PURE__ */ O(e, {
+							variant: "outline",
+							className: "rounded-2xl",
+							children: "Columns"
+						}),
+						/* @__PURE__ */ O(e, {
+							className: "rounded-2xl",
+							children: "Export CSV"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ k("div", {
+				className: "mt-5 space-y-5",
+				children: [
+					/* @__PURE__ */ O("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							"All",
+							"Paid",
+							"Review",
+							"Draft"
+						].map((e, t) => /* @__PURE__ */ O(n, {
+							variant: t === 0 ? "default" : "outline",
+							children: e
+						}, e))
+					}),
+					/* @__PURE__ */ O("div", {
+						className: `overflow-hidden rounded-[24px] ${P}`,
+						children: /* @__PURE__ */ k(r, { children: [/* @__PURE__ */ O(s, { children: /* @__PURE__ */ k(c, { children: [
+							/* @__PURE__ */ O(o, { children: "Invoice" }),
+							/* @__PURE__ */ O(o, { children: "Customer" }),
+							/* @__PURE__ */ O(o, { children: "Status" }),
+							/* @__PURE__ */ O(o, {
+								className: "text-right",
+								children: "Amount"
+							})
+						] }) }), /* @__PURE__ */ O(i, { children: M.map(([e, t, r, i]) => /* @__PURE__ */ k(c, { children: [
+							/* @__PURE__ */ O(a, { children: e }),
+							/* @__PURE__ */ O(a, { children: t }),
+							/* @__PURE__ */ O(a, { children: /* @__PURE__ */ O(n, {
+								variant: r === "Paid" ? "secondary" : r === "Review" ? "outline" : "destructive",
+								children: r
+							}) }),
+							/* @__PURE__ */ O(a, {
+								className: "text-right",
+								children: i
+							})
+						] }, e)) })] })
+					}),
+					/* @__PURE__ */ k("div", {
+						className: `flex items-center justify-between rounded-[24px] px-4 py-3 text-sm ${F} ${L}`,
+						children: [/* @__PURE__ */ O("span", { children: "5 rows visible" }), /* @__PURE__ */ k("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ O(e, {
+								variant: "outline",
+								size: "sm",
+								children: "Prev"
+							}), /* @__PURE__ */ O(e, {
+								size: "sm",
+								children: "Next"
+							})]
+						})]
+					})
+				]
+			})]
+		})
+	}) : l === "auth" ? /* @__PURE__ */ O("div", {
+		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-warning)_14%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
+		children: /* @__PURE__ */ k("div", {
+			className: "mx-auto grid min-h-[720px] max-w-6xl gap-6 lg:grid-cols-[1.05fr_0.95fr]",
+			children: [/* @__PURE__ */ k("div", {
+				className: "flex flex-col justify-between rounded-[36px] border border-[color:color-mix(in_oklch,var(--aui-warning)_40%,transparent)] bg-[radial-gradient(circle_at_top_left,color-mix(in_oklch,var(--aui-warning)_22%,transparent),transparent_35%),var(--aui-surface-strong)] p-8 text-[color:var(--aui-surface-strong-foreground)] shadow-[var(--aui-shadow-panel)]",
+				children: [/* @__PURE__ */ k("div", { children: [
+					/* @__PURE__ */ k("div", {
+						className: `inline-flex items-center gap-3 rounded-full border px-3 py-2 ${z}`,
+						children: [/* @__PURE__ */ O("div", {
+							className: "flex size-8 items-center justify-center rounded-xl border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:var(--aui-page-bg)] text-xs font-semibold tracking-[0.22em] text-[color:var(--aui-page-foreground)]",
+							children: "AZ"
+						}), /* @__PURE__ */ O("span", {
+							className: "text-sm font-medium",
+							children: "Azamat UI"
+						})]
+					}),
+					/* @__PURE__ */ O("h1", {
+						className: "mt-8 max-w-lg text-5xl font-semibold tracking-tight",
+						children: "Production sign in flow for modern product surfaces."
+					}),
+					/* @__PURE__ */ O("p", {
+						className: `mt-4 max-w-md text-base leading-7 ${R}`,
+						children: "Preview a reusable auth block inside the docs system without leaving the library site."
+					})
+				] }), /* @__PURE__ */ O("div", {
+					className: "grid gap-3 sm:grid-cols-3",
+					children: [
+						"Social login",
+						"Password reset",
+						"Session states"
+					].map((e) => /* @__PURE__ */ O("div", {
+						className: `rounded-2xl border px-4 py-4 text-sm ${B}`,
+						children: e
+					}, e))
+				})]
+			}), /* @__PURE__ */ O("section", {
+				className: `flex items-center rounded-[36px] p-8 ${P}`,
+				children: /* @__PURE__ */ k("div", {
+					className: "mx-auto w-full max-w-md space-y-6",
+					children: [
+						/* @__PURE__ */ k("div", {
+							className: "space-y-2 text-center",
+							children: [/* @__PURE__ */ O("h2", {
+								className: "text-3xl font-semibold tracking-tight",
+								children: "Welcome back"
+							}), /* @__PURE__ */ O("p", {
+								className: `text-sm leading-6 ${L}`,
+								children: "Sign in to continue to your workspace and preview environment."
+							})]
+						}),
+						/* @__PURE__ */ O(e, {
+							variant: "outline",
+							className: "w-full rounded-2xl",
+							children: "Continue with Google"
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "grid gap-4",
+							children: [/* @__PURE__ */ k("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ O("label", {
+									className: "text-sm font-medium aui-text-subtle",
+									children: "Email"
+								}), /* @__PURE__ */ O(t, { defaultValue: "jane@example.com" })]
+							}), /* @__PURE__ */ k("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ O("label", {
+									className: "text-sm font-medium aui-text-subtle",
+									children: "Password"
+								}), /* @__PURE__ */ O(t, {
+									type: "password",
+									defaultValue: "password123"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ O(e, {
+							className: "w-full rounded-2xl",
+							children: "Sign in"
+						}),
+						/* @__PURE__ */ k("div", {
+							className: `flex items-center justify-between text-sm ${L}`,
+							children: [/* @__PURE__ */ O("span", { children: "Forgot password?" }), /* @__PURE__ */ O("span", { children: "Create account" })]
+						})
+					]
+				})
+			})]
+		})
+	}) : l === "product" ? /* @__PURE__ */ O("div", {
+		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-danger)_10%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
+		children: /* @__PURE__ */ k("div", {
+			className: "mx-auto grid max-w-6xl gap-6 lg:grid-cols-[1.05fr_0.95fr]",
+			children: [/* @__PURE__ */ O("section", {
+				className: `rounded-[36px] p-8 ${P}`,
+				children: /* @__PURE__ */ O("div", {
+					className: "flex h-[560px] items-center justify-center rounded-[28px] bg-[radial-gradient(circle_at_top,color-mix(in_oklch,var(--aui-danger)_16%,transparent),transparent_35%),linear-gradient(180deg,var(--aui-page-bg),color-mix(in_oklch,var(--aui-danger)_8%,var(--aui-page-bg)))]",
+					children: /* @__PURE__ */ k("div", {
+						className: "grid gap-6",
+						children: [/* @__PURE__ */ O("div", { className: `mx-auto h-72 w-56 rounded-[28px] ${P}` }), /* @__PURE__ */ O("div", {
+							className: "grid grid-cols-4 gap-3",
+							children: [
+								,
+								,
+								,
+								,
+							].fill(null).map((e, t) => /* @__PURE__ */ O("div", { className: `h-20 rounded-2xl ${P}` }, t))
+						})]
+					})
+				})
+			}), /* @__PURE__ */ k("div", {
+				className: `space-y-6 rounded-[36px] p-8 ${P}`,
+				children: [
+					/* @__PURE__ */ k("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ k("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ O(n, {
+									className: "rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-50",
+									children: "In stock"
+								}), /* @__PURE__ */ O(n, {
+									variant: "outline",
+									children: "Ships today"
+								})]
+							}),
+							/* @__PURE__ */ O("h1", {
+								className: "text-5xl font-semibold tracking-tight",
+								children: "Azamat Chair"
+							}),
+							/* @__PURE__ */ O("p", {
+								className: `text-lg leading-8 ${L}`,
+								children: "A clean product detail surface with media gallery, pricing hierarchy and conversion controls."
+							})
+						]
+					}),
+					/* @__PURE__ */ O("div", {
+						className: `rounded-[28px] p-6 ${F}`,
+						children: /* @__PURE__ */ k("div", {
+							className: "flex items-end justify-between",
+							children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: `text-sm ${L}`,
+								children: "Price"
+							}), /* @__PURE__ */ O("p", {
+								className: "mt-2 text-4xl font-semibold",
+								children: "$249"
+							})] }), /* @__PURE__ */ O("p", {
+								className: "text-sm text-emerald-600",
+								children: "Free shipping"
+							})]
+						})
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "grid gap-3 sm:grid-cols-3",
+						children: [
+							"Oak",
+							"Walnut",
+							"Black"
+						].map((e, t) => /* @__PURE__ */ O("button", {
+							className: t === 0 ? `rounded-2xl border px-4 py-3 text-sm ${I}` : "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm aui-text-subtle",
+							children: e
+						}, e))
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ O(e, {
+							className: "flex-1 rounded-2xl",
+							children: "Add to cart"
+						}), /* @__PURE__ */ O(e, {
+							variant: "outline",
+							className: "flex-1 rounded-2xl",
+							children: "Save"
+						})]
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "grid gap-3",
+						children: [
+							"Premium ash wood frame",
+							"Textured linen seat",
+							"Two-year warranty"
+						].map((e) => /* @__PURE__ */ O("div", {
+							className: "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm aui-text-subtle",
+							children: e
+						}, e))
+					})
+				]
+			})]
+		})
+	}) : l === "command" ? /* @__PURE__ */ O("div", {
+		className: N,
+		children: /* @__PURE__ */ O("div", {
+			className: `mx-auto max-w-4xl rounded-[36px] p-6 ${P}`,
+			children: /* @__PURE__ */ k("div", {
+				className: `mx-auto max-w-3xl overflow-hidden rounded-[28px] bg-[linear-gradient(180deg,var(--aui-page-bg),var(--aui-page-bg-alt))] ${P}`,
+				children: [/* @__PURE__ */ O("div", {
+					className: "border-b border-[color:var(--aui-divider)] px-5 py-4",
+					children: /* @__PURE__ */ O(t, {
+						defaultValue: "Search components, blocks, templates...",
+						className: "border-0 px-0 text-base shadow-none focus-visible:ring-0"
+					})
+				}), /* @__PURE__ */ k("div", {
+					className: "grid gap-6 p-5 md:grid-cols-2",
+					children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+						className: `mb-3 text-xs font-semibold uppercase tracking-[0.24em] ${L}`,
+						children: "Trending"
+					}), /* @__PURE__ */ O("div", {
+						className: "space-y-2",
+						children: [
+							"Button",
+							"Input",
+							"Card",
+							"Dialog",
+							"Data Table"
+						].map((e, t) => /* @__PURE__ */ k("div", {
+							className: t === 0 ? `flex items-center justify-between rounded-2xl px-4 py-3 text-sm ${I}` : "flex items-center justify-between rounded-2xl px-4 py-3 text-sm aui-text-subtle",
+							children: [/* @__PURE__ */ O("span", { children: e }), /* @__PURE__ */ O(n, {
+								variant: t === 0 ? "secondary" : "outline",
+								children: String.fromCharCode(66 + t)
+							})]
+						}, e))
+					})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+						className: `mb-3 text-xs font-semibold uppercase tracking-[0.24em] ${L}`,
+						children: "Quick actions"
+					}), /* @__PURE__ */ O("div", {
+						className: "space-y-2",
+						children: [
+							"Open docs",
+							"Preview template",
+							"Copy install command",
+							"Switch theme"
+						].map((e) => /* @__PURE__ */ O("div", {
+							className: "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm aui-text-subtle",
+							children: e
+						}, e))
+					})] })]
+				})]
+			})
+		})
+	}) : l === "calendar" ? /* @__PURE__ */ O("div", {
+		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-accent)_10%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
+		children: /* @__PURE__ */ k("div", {
+			className: "mx-auto grid max-w-5xl gap-6 lg:grid-cols-[0.95fr_1.05fr]",
+			children: [/* @__PURE__ */ k("section", {
+				className: `rounded-[32px] p-6 ${P}`,
+				children: [
+					/* @__PURE__ */ O("h1", {
+						className: "text-3xl font-semibold tracking-tight",
+						children: "June 2026"
+					}),
+					/* @__PURE__ */ O("p", {
+						className: `mt-2 text-sm leading-6 ${L}`,
+						children: "Calendar family preview with selected dates and scheduling context."
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "mt-5 grid grid-cols-7 gap-2 text-center text-sm",
+						children: [
+							"Mo",
+							"Tu",
+							"We",
+							"Th",
+							"Fr",
+							"Sa",
+							"Su",
+							...Array.from({ length: 35 }, (e, t) => `${t + 1}`)
+						].map((e, t) => /* @__PURE__ */ O("div", {
+							className: t > 10 && t < 13 ? `rounded-2xl px-3 py-3 ${I}` : "rounded-2xl border border-[color:var(--aui-divider)] px-3 py-3 aui-text-subtle",
+							children: e
+						}, `${e}-${t}`))
+					})
+				]
+			}), /* @__PURE__ */ k("section", {
+				className: `rounded-[32px] p-6 ${P}`,
+				children: [
+					/* @__PURE__ */ O("h2", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: "Schedule event"
+					}),
+					/* @__PURE__ */ O("p", {
+						className: `mt-2 text-sm leading-6 ${L}`,
+						children: "Pair calendar surfaces with summary cards and chosen range context."
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "mt-5 space-y-4",
+						children: [/* @__PURE__ */ k("div", {
+							className: `rounded-[24px] p-5 ${F}`,
+							children: [/* @__PURE__ */ O("p", {
+								className: `text-sm ${L}`,
+								children: "Selected range"
+							}), /* @__PURE__ */ O("p", {
+								className: "mt-2 text-2xl font-semibold",
+								children: "12 Jun - 18 Jun"
+							})]
+						}), /* @__PURE__ */ O("div", {
+							className: "grid gap-3",
+							children: [
+								"Design review",
+								"Prototype handoff",
+								"Release QA"
+							].map((e) => /* @__PURE__ */ k("div", {
+								className: "flex items-center justify-between rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ O("span", {
+									className: "text-sm aui-text-subtle",
+									children: e
+								}), /* @__PURE__ */ O(n, {
+									variant: "outline",
+									children: "Scheduled"
+								})]
+							}, e))
+						})]
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ O("div", {
+		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-success)_8%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
+		children: /* @__PURE__ */ O("div", {
+			className: "mx-auto max-w-5xl space-y-6",
+			children: /* @__PURE__ */ k("section", {
+				className: `rounded-[32px] p-6 ${P}`,
+				children: [
+					/* @__PURE__ */ O("h1", {
+						className: "text-3xl font-semibold tracking-tight",
+						children: "Upload assets"
+					}),
+					/* @__PURE__ */ O("p", {
+						className: `mt-2 text-sm leading-6 ${L}`,
+						children: "Preview drag, status and asset-library patterns in one route."
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "mt-5 grid gap-6 lg:grid-cols-[1.05fr_0.95fr]",
+						children: [/* @__PURE__ */ O("div", {
+							className: "flex min-h-[320px] items-center justify-center rounded-[28px] border border-dashed border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)]",
+							children: /* @__PURE__ */ k("div", {
+								className: "space-y-3 text-center",
+								children: [
+									/* @__PURE__ */ O("p", {
+										className: "text-lg font-semibold",
+										children: "Drop files here"
+									}),
+									/* @__PURE__ */ O("p", {
+										className: `text-sm ${L}`,
+										children: "PNG, JPG, SVG, PDF up to 20MB"
+									}),
+									/* @__PURE__ */ O(e, {
+										className: "rounded-2xl",
+										children: "Browse files"
+									})
+								]
+							})
+						}), /* @__PURE__ */ O("div", {
+							className: "space-y-3",
+							children: [
+								"Brand-guide.pdf",
+								"hero-image.png",
+								"avatar-collection.zip"
+							].map((e, t) => /* @__PURE__ */ k("div", {
+								className: "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-4",
+								children: [/* @__PURE__ */ k("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ O("span", {
+										className: "font-medium aui-text-strong",
+										children: e
+									}), /* @__PURE__ */ O(n, {
+										variant: t === 2 ? "outline" : "secondary",
+										children: t === 2 ? "Uploading" : "Done"
+									})]
+								}), /* @__PURE__ */ O("div", {
+									className: "mt-3 h-2 rounded-full bg-[color:var(--aui-surface-muted)]",
+									children: /* @__PURE__ */ O("div", { className: t === 2 ? "h-2 w-2/3 rounded-full bg-[color:var(--aui-surface-strong)]" : "h-2 w-full rounded-full bg-emerald-500" })
+								})]
+							}, e))
+						})]
+					})
+				]
+			})
+		})
+	});
+}
+var W = Object.fromEntries(D.map((e) => [e.slug, {
+	title: e.title,
+	command: e.command,
+	code: e.code,
+	Render: function() {
+		return /* @__PURE__ */ O(U, { tone: e.tone });
+	}
+}]));
+function G(e) {
+	let t = V[e];
+	return t ? {
+		title: `${e} preview`,
+		command: `npx tembro add ${e}`,
+		code: t.mock.code,
+		Render() {
+			return /* @__PURE__ */ O("div", {
+				className: N,
+				children: /* @__PURE__ */ k("div", {
+					className: `mx-auto max-w-5xl space-y-6 rounded-[32px] p-6 ${P}`,
+					children: [
+						/* @__PURE__ */ k("div", {
+							className: "space-y-2",
+							children: [
+								/* @__PURE__ */ k("div", {
+									className: "flex flex-wrap gap-2",
+									children: [/* @__PURE__ */ O("span", {
+										className: `rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${L}`,
+										children: "Component preview"
+									}), /* @__PURE__ */ O("span", {
+										className: `rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${L}`,
+										children: "Playground route"
+									})]
+								}),
+								/* @__PURE__ */ O("h1", {
+									className: "text-4xl font-semibold tracking-tight capitalize",
+									children: e
+								}),
+								/* @__PURE__ */ O("p", {
+									className: `text-base leading-7 ${L}`,
+									children: "Direct component demo route for iframe-based docs preview."
+								})
+							]
+						}),
+						/* @__PURE__ */ O("div", {
+							className: "rounded-[28px] border border-[color:var(--aui-divider)] bg-[linear-gradient(180deg,var(--aui-page-bg),var(--aui-page-bg-alt))] p-6",
+							children: /* @__PURE__ */ O(t.Showcase, {
+								mode: "playground",
+								state: C,
+								setState: () => void 0
+							})
+						}),
+						/* @__PURE__ */ O("div", {
+							className: "grid gap-4 md:grid-cols-3",
+							children: t.mock.highlights.map((e) => /* @__PURE__ */ O("div", {
+								className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-surface-muted)] p-4 text-sm aui-text-subtle",
+								children: e
+							}, e))
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "grid gap-4 md:grid-cols-2",
+							children: [/* @__PURE__ */ k("div", {
+								className: `rounded-[24px] p-4 ${F}`,
+								children: [/* @__PURE__ */ O("p", {
+									className: `text-xs font-semibold uppercase tracking-[0.22em] ${L}`,
+									children: "CLI"
+								}), /* @__PURE__ */ O("code", {
+									className: "mt-3 block text-sm aui-text-strong",
+									children: `npx tembro add ${e}`
+								})]
+							}), /* @__PURE__ */ k("div", {
+								className: `rounded-[24px] p-4 ${F}`,
+								children: [/* @__PURE__ */ O("p", {
+									className: `text-xs font-semibold uppercase tracking-[0.22em] ${L}`,
+									children: "Preview note"
+								}), /* @__PURE__ */ O("p", {
+									className: "mt-3 text-sm leading-6 aui-text-subtle",
+									children: "This route exists to inspect the live reusable surface in isolation before wiring it into docs, templates or application pages."
+								})]
+							})]
+						})
+					]
+				})
+			});
+		}
+	} : null;
+}
+//#endregion
+export { G as getComponentPreview, W as previewBlockRegistry };