tembro 1.0.0

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

@@ -0,0 +1,990 @@
+import { Button as e } from "../components/ui/button/index.js";
+import { ActionMenu as t } from "../components/actions/action-menu.js";
+import { ButtonGroup as n } from "../components/actions/button-group.js";
+import { ClearableInput as r } from "../components/inputs/clearable-input.js";
+import { PasswordInput as i } from "../components/inputs/password-input.js";
+import { SearchInput as a } from "../components/inputs/search-input.js";
+import { Input as o } from "../components/ui/input/index.js";
+import { Badge as s } from "../components/ui/badge/index.js";
+import { QuickActionGrid as c } from "../components/actions/quick-action-grid.js";
+import { SectionHeader as l } from "../components/layout/section-header.js";
+import { AnchorNav as u } from "../components/navigation/anchor-nav.js";
+import { NavTabs as d } from "../components/navigation/nav-tabs.js";
+import { PageTabs as f } from "../components/navigation/page-tabs.js";
+import { Pagination as p } from "../components/navigation/pagination.js";
+import { StepperTabs as m } from "../components/navigation/stepper-tabs.js";
+import { FilterChips as h } from "../components/filters/filter-chips.js";
+import { FilterBar as g } from "../components/filters/filter-bar.js";
+import { AlertDialog as _ } from "../components/overlay/alert-dialog.js";
+import { DialogActionButton as v, DialogActions as y } from "../components/overlay/dialog-actions.js";
+import { Drawer as b } from "../components/overlay/drawer.js";
+import { ColorInput as ee } from "../components/inputs/color-input.js";
+import { OtpInput as te } from "../components/inputs/otp-input.js";
+import { Rating as ne } from "../components/inputs/rating.js";
+import { RangeSlider as re, Slider as ie } from "../components/inputs/slider.js";
+import { TagInput as ae } from "../components/inputs/tag-input.js";
+import { Calendar as oe } from "../components/calendar/calendar.js";
+import { Alert as x } from "../components/feedback/alert.js";
+import { PageState as S } from "../components/feedback/page-state.js";
+import { DescriptionList as C } from "../components/display/description-list.js";
+import { EntityCard as w } from "../components/display/entity-card.js";
+import { List as T } from "../components/display/list.js";
+import { Progress as E } from "../components/display/progress.js";
+import { ProgressCircle as D } from "../components/display/progress-circle.js";
+import { StatusDot as O } from "../components/display/status-dot.js";
+import { StatusLegend as k } from "../components/display/status-legend.js";
+import { Timeline as A } from "../components/display/timeline.js";
+import { UserCard as j } from "../components/display/user-card.js";
+import { CommandPalette as M } from "../components/command/command-palette.js";
+import { FileUpload as N } from "../components/upload/file-upload.js";
+import { FileDropzone as P } from "../components/upload/file-dropzone.js";
+import { Stepper as F } from "../components/wizard/stepper.js";
+import { Wizard as I } from "../components/wizard/wizard.js";
+import { AppHeader as L } from "../components/layout/app-header.js";
+import { StatCard as R } from "../components/layout/stat-card.js";
+import { ResourceDetailPage as z } from "../components/patterns/resource-detail-page.js";
+import { ResourcePage as B, ResourcePageSection as V } from "../components/patterns/resource-page.js";
+import "react";
+import { ArchiveIcon as H, BellIcon as U, ChevronRightIcon as W, DownloadIcon as se, FilterIcon as G, LayoutDashboardIcon as K, MoreHorizontalIcon as q, SearchIcon as J, UploadCloudIcon as ce } from "lucide-react";
+import { Fragment as Y, jsx as X, jsxs as Z } from "react/jsx-runtime";
+//#region src/showcase/render-registry-preview.tsx
+function le(e, t, n) {
+	return e.kind === "inputs" ? /* @__PURE__ */ X(ue, {
+		slug: e.slug,
+		state: t,
+		setState: n
+	}) : e.kind === "form" ? /* @__PURE__ */ X(de, {
+		state: t,
+		setState: n
+	}) : e.kind === "overlay" ? /* @__PURE__ */ X(fe, { slug: e.slug }) : e.kind === "navigation" ? /* @__PURE__ */ X(pe, { slug: e.slug }) : e.kind === "feedback" ? /* @__PURE__ */ X($, { slug: e.slug }) : e.kind === "display" ? /* @__PURE__ */ X(me, { slug: e.slug }) : e.kind === "actions" ? /* @__PURE__ */ X(he, {
+		slug: e.slug,
+		state: t,
+		setState: n
+	}) : e.kind === "layout" ? /* @__PURE__ */ X(ge, { slug: e.slug }) : e.kind === "data-table" ? /* @__PURE__ */ X(_e, { slug: e.slug }) : e.kind === "calendar" ? /* @__PURE__ */ X(ve, {}) : e.kind === "upload" ? /* @__PURE__ */ X(ye, { slug: e.slug }) : e.kind === "wizard" ? /* @__PURE__ */ X(be, { slug: e.slug }) : e.kind === "patterns" ? /* @__PURE__ */ X(xe, { slug: e.slug }) : null;
+}
+function Q({ tone: e, children: t }) {
+	return /* @__PURE__ */ X(s, {
+		variant: e === "danger" ? "destructive" : e === "warning" ? "outline" : "secondary",
+		children: t
+	});
+}
+function ue({ slug: e, state: t, setState: n }) {
+	let s = t.textValue, c = (e) => n({ textValue: e });
+	return e === "search-input" ? /* @__PURE__ */ X(a, {
+		value: s,
+		onValueChange: c,
+		resultCount: 12,
+		shortcut: "Ctrl K",
+		placeholder: "Search customers..."
+	}) : e === "password-input" ? /* @__PURE__ */ X(i, {
+		value: "secret-token",
+		onValueChange: c,
+		placeholder: "Password"
+	}) : e === "clearable-input" ? /* @__PURE__ */ X(r, {
+		value: s,
+		onValueChange: c,
+		placeholder: "Clearable input"
+	}) : e === "slider" ? /* @__PURE__ */ X(ie, {
+		label: "Density",
+		description: "Tune content density.",
+		defaultValue: 64,
+		showValue: !0
+	}) : e === "range-slider" ? /* @__PURE__ */ X(re, {
+		label: "Revenue range",
+		description: "Filter between two values.",
+		defaultValue: [20, 80],
+		showValue: !0
+	}) : e === "rating" ? /* @__PURE__ */ X(ne, {
+		defaultValue: 4,
+		labels: { clear: "Reset" }
+	}) : e === "otp-input" ? /* @__PURE__ */ X(te, {
+		value: s.replace(/\D/g, "").slice(0, 6),
+		onValueChange: c
+	}) : e === "color-input" ? /* @__PURE__ */ X(ee, {
+		defaultValue: "#22c55e",
+		label: "Accent color",
+		description: "Theme token preview."
+	}) : e === "tag-input" ? /* @__PURE__ */ X(ae, {
+		defaultValue: [
+			"dashboard",
+			"beta",
+			"ops"
+		],
+		placeholder: "Add label"
+	}) : /* @__PURE__ */ X(o, {
+		value: s,
+		onChange: (e) => n({ textValue: e.currentTarget.value }),
+		placeholder: "Unified input"
+	});
+}
+function de({ state: e, setState: t }) {
+	return /* @__PURE__ */ Z("div", {
+		className: "grid gap-4 md:grid-cols-2",
+		children: [/* @__PURE__ */ Z("label", {
+			className: "grid gap-2",
+			children: [
+				/* @__PURE__ */ X("span", {
+					className: "text-sm font-medium text-[color:var(--aui-page-foreground)]",
+					children: "Email address"
+				}),
+				/* @__PURE__ */ X(o, {
+					value: e.textValue,
+					onChange: (e) => t({ textValue: e.currentTarget.value })
+				}),
+				/* @__PURE__ */ X("span", {
+					className: "text-xs text-[color:var(--aui-page-muted)]",
+					children: "Form wrappers keep label, hint and error spacing consistent."
+				})
+			]
+		}), /* @__PURE__ */ Z("label", {
+			className: "grid gap-2",
+			children: [
+				/* @__PURE__ */ X("span", {
+					className: "text-sm font-medium text-[color:var(--aui-page-foreground)]",
+					children: "Status"
+				}),
+				/* @__PURE__ */ X(a, {
+					value: "Active customers",
+					resultCount: 7,
+					readOnly: !0
+				}),
+				/* @__PURE__ */ X("span", {
+					className: "text-xs text-emerald-500",
+					children: "Ready to submit"
+				})
+			]
+		})]
+	});
+}
+function fe({ slug: t }) {
+	return t === "dialog-actions" ? /* @__PURE__ */ X("div", {
+		className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
+		children: /* @__PURE__ */ Z(y, {
+			align: "end",
+			children: [
+				/* @__PURE__ */ X(v, {
+					variant: "ghost",
+					children: "Cancel"
+				}),
+				/* @__PURE__ */ X(v, {
+					variant: "outline",
+					children: "Save draft"
+				}),
+				/* @__PURE__ */ X(v, { children: "Publish" })
+			]
+		})
+	}) : t === "alert-dialog" ? /* @__PURE__ */ X(_, {
+		open: !1,
+		title: "Archive invoice?",
+		description: "This keeps the invoice readable but removes it from active queues.",
+		children: /* @__PURE__ */ X(e, {
+			variant: "destructive",
+			children: "Open alert"
+		})
+	}) : t === "drawer" ? /* @__PURE__ */ X(b, {
+		open: !1,
+		trigger: /* @__PURE__ */ X(e, {
+			variant: "outline",
+			children: "Open drawer"
+		}),
+		title: "Customer details",
+		description: "Side panel for fast inspection.",
+		children: /* @__PURE__ */ X(C, { items: [{
+			key: "plan",
+			label: "Plan",
+			value: "Scale"
+		}, {
+			key: "owner",
+			label: "Owner",
+			value: "Azamat UI"
+		}] })
+	}) : /* @__PURE__ */ Z("div", {
+		className: "flex flex-wrap items-center justify-end gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
+		children: [
+			/* @__PURE__ */ X(e, {
+				variant: "ghost",
+				children: "Cancel"
+			}),
+			/* @__PURE__ */ X(e, {
+				variant: "outline",
+				children: "Save draft"
+			}),
+			/* @__PURE__ */ X(e, { children: "Publish" })
+		]
+	});
+}
+function pe({ slug: e }) {
+	return e === "pagination" ? /* @__PURE__ */ X(p, {
+		page: 3,
+		pageCount: 9,
+		onPageChange: () => void 0
+	}) : e === "anchor-nav" ? /* @__PURE__ */ X(u, {
+		orientation: "horizontal",
+		title: "Sections",
+		items: [
+			{
+				key: "overview",
+				label: "Overview",
+				href: "#overview",
+				active: !0
+			},
+			{
+				key: "usage",
+				label: "Usage",
+				href: "#usage"
+			},
+			{
+				key: "api",
+				label: "API",
+				href: "#api"
+			}
+		]
+	}) : e === "page-tabs" ? /* @__PURE__ */ X(f, {
+		value: "overview",
+		variant: "pills",
+		items: [
+			{
+				value: "overview",
+				label: "Overview"
+			},
+			{
+				value: "usage",
+				label: "Usage"
+			},
+			{
+				value: "api",
+				label: "API",
+				badge: "3"
+			}
+		]
+	}) : e === "stepper-tabs" ? /* @__PURE__ */ X(m, {
+		value: "billing",
+		items: [
+			{
+				value: "profile",
+				label: "Profile",
+				description: "Team and owner details",
+				completed: !0
+			},
+			{
+				value: "billing",
+				label: "Billing",
+				description: "Payment and invoices"
+			},
+			{
+				value: "review",
+				label: "Review",
+				description: "Confirm release"
+			}
+		]
+	}) : /* @__PURE__ */ X(d, {
+		value: "overview",
+		items: [
+			{
+				value: "overview",
+				label: "Overview"
+			},
+			{
+				value: "usage",
+				label: "Usage"
+			},
+			{
+				value: "api",
+				label: "API"
+			}
+		]
+	});
+}
+function $({ slug: t }) {
+	return t === "alert" ? /* @__PURE__ */ X(x, {
+		tone: "warning",
+		title: "Review needed",
+		description: "Billing rules changed and one approval is pending.",
+		action: /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "Open"
+		})
+	}) : t === "page-state" ? /* @__PURE__ */ X(S, {
+		title: "Workspace connected",
+		description: "The route is ready to accept live data and team actions.",
+		tone: "success",
+		action: /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "Continue"
+		})
+	}) : /* @__PURE__ */ Z("div", {
+		className: "flex flex-wrap gap-2",
+		children: [
+			/* @__PURE__ */ X(Q, {
+				tone: "success",
+				children: "Live"
+			}),
+			/* @__PURE__ */ X(Q, {
+				tone: "warning",
+				children: "Needs review"
+			}),
+			/* @__PURE__ */ X(Q, {
+				tone: "danger",
+				children: "Blocked"
+			}),
+			/* @__PURE__ */ X(Q, {
+				tone: "info",
+				children: "Queued"
+			})
+		]
+	});
+}
+function me({ slug: t }) {
+	return t === "description-list" ? /* @__PURE__ */ X(C, {
+		title: "Invoice details",
+		description: "Structured facts with responsive columns.",
+		items: [
+			{
+				key: "id",
+				label: "Invoice",
+				value: "#4821"
+			},
+			{
+				key: "amount",
+				label: "Amount",
+				value: "$12,420"
+			},
+			{
+				key: "status",
+				label: "Status",
+				value: /* @__PURE__ */ X(Q, {
+					tone: "success",
+					children: "Paid"
+				})
+			},
+			{
+				key: "owner",
+				label: "Owner",
+				value: "Finance team"
+			}
+		]
+	}) : t === "progress" ? /* @__PURE__ */ X(E, {
+		label: "Migration progress",
+		description: "Production rollout",
+		value: 68,
+		tone: "success",
+		showValue: !0
+	}) : t === "progress-circle" ? /* @__PURE__ */ X(D, {
+		value: 72,
+		label: "Profile completed"
+	}) : t === "timeline" ? /* @__PURE__ */ X(A, {
+		items: [
+			{
+				key: "created",
+				title: "Created",
+				description: "Invoice generated",
+				time: "09:20",
+				tone: "success"
+			},
+			{
+				key: "review",
+				title: "Review",
+				description: "Finance team assigned",
+				time: "10:05",
+				tone: "info"
+			},
+			{
+				key: "approve",
+				title: "Approval",
+				description: "Waiting for manager",
+				time: "Now",
+				tone: "warning"
+			}
+		],
+		pending: !0,
+		pendingLabel: "Paid"
+	}) : t === "metric-card" || t === "stat-card" ? /* @__PURE__ */ X(R, {
+		title: "Revenue",
+		value: "$84.2k",
+		description: "Compared with last month",
+		trend: {
+			value: "+12.4%",
+			tone: "success"
+		},
+		icon: /* @__PURE__ */ X(K, {})
+	}) : t === "status-dot" ? /* @__PURE__ */ Z("div", {
+		className: "grid gap-3",
+		children: [
+			/* @__PURE__ */ X(O, {
+				tone: "success",
+				pulse: !0,
+				label: "API healthy"
+			}),
+			/* @__PURE__ */ X(O, {
+				tone: "warning",
+				label: "Sync delayed"
+			}),
+			/* @__PURE__ */ X(O, {
+				tone: "danger",
+				label: "Webhook failed"
+			})
+		]
+	}) : t === "delta-badge" ? /* @__PURE__ */ Z("div", {
+		className: "flex flex-wrap gap-2",
+		children: [
+			/* @__PURE__ */ X(s, {
+				variant: "secondary",
+				children: "+12.4%"
+			}),
+			/* @__PURE__ */ X(s, {
+				variant: "outline",
+				children: "-3.1%"
+			}),
+			/* @__PURE__ */ X(s, {
+				variant: "destructive",
+				children: "Risk"
+			})
+		]
+	}) : t === "entity-header" ? /* @__PURE__ */ X("div", {
+		className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
+		children: /* @__PURE__ */ Z("div", {
+			className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+			children: [/* @__PURE__ */ Z("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ X(s, {
+					variant: "outline",
+					children: "Customer"
+				}), /* @__PURE__ */ Z("div", { children: [/* @__PURE__ */ X("h3", {
+					className: "text-xl font-semibold",
+					children: "Acme Holdings"
+				}), /* @__PURE__ */ X("p", {
+					className: "text-sm text-[color:var(--aui-page-muted)]",
+					children: "Enterprise account with billing and admin ownership."
+				})] })]
+			}), /* @__PURE__ */ Z("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ X(e, {
+					variant: "outline",
+					size: "sm",
+					children: "Archive"
+				}), /* @__PURE__ */ X(e, {
+					size: "sm",
+					children: "Edit"
+				})]
+			})]
+		})
+	}) : t === "notification-center" ? /* @__PURE__ */ X(T, { items: [
+		{
+			key: "1",
+			title: "Build completed",
+			description: "Dashboard docs deployment is live.",
+			extra: "Now"
+		},
+		{
+			key: "2",
+			title: "New comment",
+			description: "Review requested on DataTable API.",
+			extra: "8m"
+		},
+		{
+			key: "3",
+			title: "Publish reminder",
+			description: "Package version is ready for release.",
+			extra: "1h"
+		}
+	] }) : t === "entity-card" || t === "file-card" ? /* @__PURE__ */ X(w, {
+		title: t === "file-card" ? "Design-spec.pdf" : "Azamat Workspace",
+		description: t === "file-card" ? "Shared with 4 reviewers." : "Admin console and live dashboard route.",
+		status: /* @__PURE__ */ X(s, {
+			variant: "secondary",
+			children: "Live"
+		}),
+		meta: t === "file-card" ? "2.4 MB" : "Updated 8 min ago",
+		actions: /* @__PURE__ */ X(e, {
+			size: "sm",
+			variant: "outline",
+			children: "Open"
+		})
+	}) : t === "data-list" ? /* @__PURE__ */ X(T, { items: [
+		{
+			key: "1",
+			title: "Enterprise plan",
+			description: "Priority support and SSO",
+			extra: "$499"
+		},
+		{
+			key: "2",
+			title: "Growth plan",
+			description: "Most used by product teams",
+			extra: "$199"
+		},
+		{
+			key: "3",
+			title: "Starter plan",
+			description: "Lightweight team setup",
+			extra: "$49"
+		}
+	] }) : t === "status-legend" ? /* @__PURE__ */ X(k, {
+		title: "Delivery states",
+		description: "Explain what each state means and how often it appears.",
+		orientation: "grid",
+		items: [
+			{
+				key: "live",
+				label: "Live",
+				description: "Healthy production routes",
+				tone: "success",
+				count: 18
+			},
+			{
+				key: "review",
+				label: "Review",
+				description: "Waiting for QA approval",
+				tone: "warning",
+				count: 4
+			},
+			{
+				key: "blocked",
+				label: "Blocked",
+				description: "Needs engineering action",
+				tone: "danger",
+				count: 1
+			}
+		]
+	}) : t === "trend-card" || t === "comparison-card" ? /* @__PURE__ */ X(R, {
+		title: t === "trend-card" ? "Weekly revenue" : "Current vs previous",
+		value: "$84.2k",
+		description: "Compared with last month",
+		trend: {
+			value: "+12.4%",
+			tone: "success"
+		},
+		icon: /* @__PURE__ */ X(K, {})
+	}) : /* @__PURE__ */ X(j, {
+		name: "Azamat Jurayev",
+		description: "Product designer and maintainer",
+		meta: "Admin workspace",
+		actions: /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "Invite"
+		})
+	});
+}
+function he({ slug: r, state: i, setState: o }) {
+	return r === "filter-bar" ? /* @__PURE__ */ X(g, {
+		search: /* @__PURE__ */ X(a, {
+			value: i.textValue,
+			onValueChange: (e) => o({ textValue: e }),
+			placeholder: "Search invoices..."
+		}),
+		activeCount: 2,
+		onReset: () => o({ textValue: "" }),
+		filters: /* @__PURE__ */ Z(e, {
+			variant: "outline",
+			size: "sm",
+			children: [/* @__PURE__ */ X(G, { "data-icon": "inline-start" }), "Status"]
+		}),
+		actions: /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "Export"
+		})
+	}) : r === "command-palette" ? /* @__PURE__ */ Z("div", {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ Z("div", {
+			className: "flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 py-2",
+			children: [/* @__PURE__ */ X(J, { className: "size-4 text-[color:var(--aui-page-muted)]" }), /* @__PURE__ */ X("span", {
+				className: "text-sm text-[color:var(--aui-page-muted)]",
+				children: "Command palette preview: search routes, components and actions."
+			})]
+		}), /* @__PURE__ */ X(M, {
+			open: !1,
+			onOpenChange: () => void 0,
+			groups: [{
+				id: "navigation",
+				label: "Navigation",
+				items: [{
+					id: "docs",
+					label: "Open docs",
+					icon: /* @__PURE__ */ X(J, { className: "size-4" })
+				}, {
+					id: "components",
+					label: "Browse components",
+					icon: /* @__PURE__ */ X(K, { className: "size-4" })
+				}]
+			}]
+		})]
+	}) : r === "button-group" ? /* @__PURE__ */ X(n, { items: [
+		{
+			key: "day",
+			label: "Day"
+		},
+		{
+			key: "week",
+			label: "Week"
+		},
+		{
+			key: "month",
+			label: "Month"
+		}
+	] }) : r === "quick-action-grid" ? /* @__PURE__ */ X(c, {
+		columns: 3,
+		items: [
+			{
+				key: "new",
+				label: "New invoice",
+				description: "Create a fresh billing row.",
+				badge: "N"
+			},
+			{
+				key: "import",
+				label: "Import CSV",
+				description: "Bring finance data into the table.",
+				badge: "I"
+			},
+			{
+				key: "share",
+				label: "Share workspace",
+				description: "Invite team members to the route.",
+				badge: "S"
+			}
+		]
+	}) : r === "filter-chips" || r === "data-table-saved-filters" ? /* @__PURE__ */ Z("div", {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ X(h, {
+			chips: [
+				{
+					key: "status",
+					label: "Status",
+					value: "Active",
+					tone: "success"
+				},
+				{
+					key: "owner",
+					label: "Owner",
+					value: "Azamat",
+					tone: "default"
+				},
+				{
+					key: "region",
+					label: "Region",
+					value: "APAC",
+					tone: "info"
+				}
+			],
+			onRemove: () => void 0,
+			onClear: () => void 0
+		}), r === "data-table-saved-filters" ? /* @__PURE__ */ X(n, {
+			attached: !1,
+			items: [
+				{
+					key: "default",
+					label: "Default",
+					variant: "secondary"
+				},
+				{
+					key: "billing",
+					label: "Billing"
+				},
+				{
+					key: "ops",
+					label: "Operations"
+				}
+			]
+		}) : null]
+	}) : /* @__PURE__ */ Z("div", {
+		className: "flex items-center justify-between rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
+		children: [/* @__PURE__ */ Z("div", { children: [/* @__PURE__ */ X("p", {
+			className: "font-medium text-[color:var(--aui-page-foreground)]",
+			children: "Invoice #4821"
+		}), /* @__PURE__ */ X("p", {
+			className: "text-sm text-[color:var(--aui-page-muted)]",
+			children: "Pending approval"
+		})] }), /* @__PURE__ */ X(t, {
+			label: "Actions",
+			actions: [
+				{
+					key: "open",
+					label: "Open",
+					icon: /* @__PURE__ */ X(W, { className: "size-4" })
+				},
+				{
+					key: "download",
+					label: "Download",
+					icon: /* @__PURE__ */ X(se, { className: "size-4" })
+				},
+				{
+					key: "archive",
+					label: "Archive",
+					icon: /* @__PURE__ */ X(H, { className: "size-4" }),
+					destructive: !0
+				}
+			],
+			trigger: /* @__PURE__ */ X(e, {
+				variant: "outline",
+				size: "icon-sm",
+				"aria-label": "Open actions",
+				children: /* @__PURE__ */ X(q, {})
+			})
+		})]
+	});
+}
+function ge({ slug: t }) {
+	return t === "app-header" ? /* @__PURE__ */ X(L, {
+		sticky: !1,
+		left: /* @__PURE__ */ Z(Y, { children: [/* @__PURE__ */ X(K, { className: "size-4" }), /* @__PURE__ */ X("span", {
+			className: "font-medium",
+			children: "Dashboard"
+		})] }),
+		center: /* @__PURE__ */ X(s, {
+			variant: "secondary",
+			children: "Preview"
+		}),
+		right: /* @__PURE__ */ Z(Y, { children: [/* @__PURE__ */ X(e, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": "Notifications",
+			children: /* @__PURE__ */ X(U, {})
+		}), /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "Deploy"
+		})] }),
+		className: "rounded-xl border border-[color:var(--aui-divider)]"
+	}) : t === "section-header" ? /* @__PURE__ */ X(l, {
+		eyebrow: "Components",
+		title: "Production-ready surfaces",
+		description: "SectionHeader keeps copy, metadata and actions aligned.",
+		actions: /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "Add component"
+		})
+	}) : /* @__PURE__ */ X(R, {
+		title: "Revenue",
+		value: "$84.2k",
+		description: "Compared with last month",
+		trend: {
+			value: "+12.4%",
+			tone: "success"
+		},
+		helperText: "StatCard keeps KPI, helper text and trend in one compact tile."
+	});
+}
+function _e({ slug: t }) {
+	return /* @__PURE__ */ Z("div", {
+		className: "overflow-hidden rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]",
+		children: [
+			/* @__PURE__ */ Z("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] p-3",
+				children: [/* @__PURE__ */ X(a, {
+					value: "",
+					placeholder: "Search rows...",
+					className: "max-w-xs",
+					readOnly: !0
+				}), /* @__PURE__ */ Z("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ Z(e, {
+						variant: "outline",
+						size: "sm",
+						children: [/* @__PURE__ */ X(G, { "data-icon": "inline-start" }), "Filters"]
+					}), /* @__PURE__ */ X(e, {
+						size: "sm",
+						children: "Create"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ Z("div", {
+				className: "grid grid-cols-[40px_1fr_120px_72px] border-b border-[color:var(--aui-divider)] px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]",
+				children: [
+					/* @__PURE__ */ X("span", { children: /* @__PURE__ */ X("input", {
+						type: "checkbox",
+						"aria-label": "Select rows"
+					}) }),
+					/* @__PURE__ */ X("span", { children: "Name" }),
+					/* @__PURE__ */ X("span", { children: "Status" }),
+					/* @__PURE__ */ X("span", { children: "Actions" })
+				]
+			}),
+			[
+				"Azamat UI",
+				"Registry",
+				"Dashboard"
+			].map((t, n) => /* @__PURE__ */ Z("div", {
+				className: "grid grid-cols-[40px_1fr_120px_72px] items-center border-b border-[color:var(--aui-divider)] px-3 py-3 last:border-b-0",
+				children: [
+					/* @__PURE__ */ X("span", { children: /* @__PURE__ */ X("input", {
+						type: "checkbox",
+						"aria-label": `Select ${t}`,
+						defaultChecked: n === 0
+					}) }),
+					/* @__PURE__ */ X("span", {
+						className: "font-medium text-[color:var(--aui-page-foreground)]",
+						children: t
+					}),
+					/* @__PURE__ */ X("span", { children: /* @__PURE__ */ X(Q, {
+						tone: n === 2 ? "warning" : "success",
+						children: n === 2 ? "Review" : "Live"
+					}) }),
+					/* @__PURE__ */ X("span", { children: /* @__PURE__ */ X(e, {
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Row actions",
+						children: /* @__PURE__ */ X(q, {})
+					}) })
+				]
+			}, t)),
+			/* @__PURE__ */ Z("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 border-t border-[color:var(--aui-divider)] p-3 text-sm text-[color:var(--aui-page-muted)]",
+				children: [/* @__PURE__ */ Z("span", { children: [{
+					"data-table-pagination": "Pagination footer",
+					"data-table-toolbar": "Search and filter toolbar",
+					"data-table-column-visibility-menu": "Column visibility",
+					"data-table-select-column": "Row selection",
+					"data-table-sortable-header": "Sortable header",
+					"data-table-row-actions": "Row actions",
+					"data-table-actions-column": "Actions column",
+					"data-table-bulk-actions": "Bulk action bar",
+					"data-table-view-presets": "Saved view presets"
+				}[t] ?? "DataTable part", " preview"] }), /* @__PURE__ */ X(p, {
+					page: 1,
+					pageCount: 4,
+					onPageChange: () => void 0,
+					showEdges: !1
+				})]
+			})
+		]
+	});
+}
+function ve() {
+	return /* @__PURE__ */ X(oe, {
+		value: "2026-06-18",
+		defaultMonth: "2026-06-01",
+		onValueChange: () => void 0
+	});
+}
+function ye({ slug: e }) {
+	return e === "file-dropzone" ? /* @__PURE__ */ X(P, {
+		label: "Drop contract files",
+		description: "PDF, PNG or CSV up to 10MB."
+	}) : e === "file-upload" ? /* @__PURE__ */ X(N, {
+		dropzoneLabel: "Upload documents",
+		dropzoneDescription: "Drag files here or choose from your device.",
+		buttonLabel: "Choose files",
+		helperText: "Supports PDF, CSV and images."
+	}) : /* @__PURE__ */ Z("div", {
+		className: "grid gap-4 md:grid-cols-[160px_1fr] md:items-center",
+		children: [/* @__PURE__ */ X("div", {
+			className: "flex aspect-square items-center justify-center rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]",
+			children: /* @__PURE__ */ X(ce, { className: "size-8 text-[color:var(--aui-page-muted)]" })
+		}), /* @__PURE__ */ X(P, {
+			label: "Upload product image",
+			description: "Shows the image-upload flow without custom CSS.",
+			accept: "image/*"
+		})]
+	});
+}
+function be({ slug: e }) {
+	let t = [
+		{
+			id: "profile",
+			title: "Profile",
+			description: "Account details",
+			completed: !0
+		},
+		{
+			id: "billing",
+			title: "Billing",
+			description: "Payment setup"
+		},
+		{
+			id: "review",
+			title: "Review",
+			description: "Confirm data"
+		}
+	];
+	return e === "stepper" ? /* @__PURE__ */ X(F, {
+		steps: t,
+		currentStep: "billing",
+		onStepChange: () => void 0
+	}) : /* @__PURE__ */ X(I, {
+		steps: t,
+		currentStep: "billing",
+		onNext: () => void 0,
+		onPrevious: () => void 0,
+		onFinish: () => void 0,
+		children: /* @__PURE__ */ Z("div", {
+			className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
+			children: [/* @__PURE__ */ X("p", {
+				className: "font-medium text-[color:var(--aui-page-foreground)]",
+				children: "Billing setup"
+			}), /* @__PURE__ */ X("p", {
+				className: "mt-1 text-sm text-[color:var(--aui-page-muted)]",
+				children: "Wizard combines steps, content and footer controls."
+			})]
+		})
+	});
+}
+function xe({ slug: t }) {
+	return t === "resource-detail-page" ? /* @__PURE__ */ X(z, {
+		title: "Customer profile",
+		description: "ResourceDetailPage organizes detail screens.",
+		actions: /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "Edit"
+		}),
+		children: /* @__PURE__ */ X(V, {
+			title: "Account",
+			children: /* @__PURE__ */ X(C, { items: [{
+				key: "plan",
+				label: "Plan",
+				value: "Scale"
+			}, {
+				key: "owner",
+				label: "Owner",
+				value: "Design team"
+			}] })
+		})
+	}) : /* @__PURE__ */ X(B, {
+		title: "Customers",
+		description: "ResourcePage combines header, stats, filters and sections.",
+		actions: /* @__PURE__ */ X(e, {
+			size: "sm",
+			children: "New customer"
+		}),
+		stats: /* @__PURE__ */ Z("div", {
+			className: "grid gap-3 sm:grid-cols-2",
+			children: [/* @__PURE__ */ X(R, {
+				title: "Active",
+				value: "2,418",
+				trend: {
+					value: "+8%",
+					tone: "success"
+				}
+			}), /* @__PURE__ */ X(R, {
+				title: "Health",
+				value: "94%",
+				trend: {
+					value: "Stable",
+					tone: "default"
+				}
+			})]
+		}),
+		filters: /* @__PURE__ */ X(g, {
+			search: /* @__PURE__ */ X(a, {
+				value: "",
+				placeholder: "Search...",
+				readOnly: !0
+			}),
+			activeCount: 1
+		}),
+		children: /* @__PURE__ */ X(V, {
+			title: "Recent activity",
+			children: /* @__PURE__ */ X(A, { items: [{
+				key: "a",
+				title: "Customer added",
+				description: "Acme workspace",
+				tone: "success"
+			}, {
+				key: "b",
+				title: "Plan updated",
+				description: "Scale plan enabled",
+				tone: "info"
+			}] })
+		})
+	});
+}
+//#endregion
+export { le as renderShowcasePreview };