tembro 1.0.0

package/dist/showcase/fallback.js

@@ -0,0 +1,1173 @@
+import { Button as e } from "../components/ui/button/index.js";
+import { ButtonGroup as t } from "../components/actions/button-group.js";
+import { CopyButton as n } from "../components/actions/copy-button.js";
+import { CopyField as r } from "../components/actions/copy-field.js";
+import { Input as i } from "../components/ui/input/index.js";
+import { Card as a, CardContent as o, CardHeader as s, CardTitle as ee } from "../components/ui/card/index.js";
+import { Badge as c } from "../components/ui/badge/index.js";
+import { Accordion as l } from "../components/ui/accordion/index.js";
+import { Skeleton as u, SkeletonCard as d, SkeletonText as te } from "../components/ui/skeleton/index.js";
+import { Divider as ne } from "../components/ui/divider/index.js";
+import { SegmentedControl as re } from "../components/ui/segmented-control/index.js";
+import { Spinner as f } from "../components/ui/spinner/index.js";
+import { QuickActionGrid as ie } from "../components/actions/quick-action-grid.js";
+import { Section as ae } from "../components/layout/section.js";
+import { Grid as oe, Stack as se } from "../components/layout/stack.js";
+import { StickyFooterBar as ce } from "../components/layout/sticky-footer-bar.js";
+import { AnchorNav as le } from "../components/navigation/anchor-nav.js";
+import { PageTabs as ue } from "../components/navigation/page-tabs.js";
+import { StepperTabs as de } from "../components/navigation/stepper-tabs.js";
+import { FilterChips as fe } from "../components/filters/filter-chips.js";
+import { SavedFilterSelect as pe } from "../components/filters/saved-filter-select.js";
+import { ColorInput as me } from "../components/inputs/color-input.js";
+import { OtpInput as he } from "../components/inputs/otp-input.js";
+import { QuantityStepper as p } from "../components/inputs/quantity-stepper.js";
+import { Rating as m } from "../components/inputs/rating.js";
+import { RangeSlider as h, Slider as g } from "../components/inputs/slider.js";
+import { TagInput as _ } from "../components/inputs/tag-input.js";
+import { Cascader as v } from "../components/inputs/cascader.js";
+import { JsonInput as y } from "../components/inputs/json-input.js";
+import { MentionInput as b } from "../components/inputs/mention-input.js";
+import { TimePicker as x, TimeRangePicker as S } from "../components/inputs/time-picker.js";
+import { Alert as C } from "../components/feedback/alert.js";
+import { EmptyState as w } from "../components/feedback/empty-state.js";
+import { PageState as T } from "../components/feedback/page-state.js";
+import { DescriptionList as E } from "../components/display/description-list.js";
+import { Avatar as D, AvatarGroup as O } from "../components/display/avatar.js";
+import { Descriptions as k } from "../components/display/descriptions.js";
+import { KeyboardShortcut as A } from "../components/display/keyboard-shortcut.js";
+import { KanbanBoard as j } from "../components/display/kanban.js";
+import { CodeBlock as M } from "../components/display/code-block.js";
+import { DataState as N } from "../components/display/data-state.js";
+import { EntityCard as P } from "../components/display/entity-card.js";
+import { List as F } from "../components/display/list.js";
+import { PropertyGrid as I } from "../components/display/property-grid.js";
+import { Statistic as L, StatisticCard as R, StatisticGrid as ge } from "../components/display/statistic.js";
+import { StatusLegend as _e } from "../components/display/status-legend.js";
+import { TagList as ve } from "../components/display/tag-list.js";
+import { TreeView as ye } from "../components/display/tree-view.js";
+import { SkeletonTable as be } from "../components/display/skeleton-table.js";
+import { SkeletonForm as xe } from "../components/display/skeleton-form.js";
+import { AspectRatio as Se } from "../components/display/aspect-ratio.js";
+import { Carousel as Ce, CarouselItem as z } from "../components/display/carousel.js";
+import { FloatButton as we } from "../components/display/float-button.js";
+import { QRCode as Te } from "../components/display/qr-code.js";
+import { Tag as B, TagGroup as Ee } from "../components/display/tag.js";
+import { Heading as De, Mark as Oe, Text as V } from "../components/display/typography.js";
+import { Watermark as ke } from "../components/display/watermark.js";
+import { Affix as Ae } from "../components/modern/affix.js";
+import { CalendarScheduler as je } from "../components/modern/calendar-scheduler.js";
+import { DualListPicker as Me } from "../components/modern/dual-list-picker.js";
+import { Menubar as Ne, MenubarContent as Pe, MenubarItem as H, MenubarMenu as U, MenubarTrigger as W } from "../components/modern/menubar.js";
+import { NavigationMenu as Fe, NavigationMenuItem as G, NavigationMenuLink as K, NavigationMenuList as Ie } from "../components/modern/navigation-menu.js";
+import { ResizableHandle as Le, ResizablePanel as q, ResizablePanelGroup as Re } from "../components/modern/resizable-panel.js";
+import { RichTextEditor as ze } from "../components/modern/rich-text-editor.js";
+import { Tour as J } from "../components/modern/tour.js";
+import { StatCard as Be } from "../components/layout/stat-card.js";
+import { Fragment as Ve, jsx as Y, jsxs as X } from "react/jsx-runtime";
+//#region src/showcase/fallback.tsx
+function Z({ item: e, groupLabel: t, importSnippet: n }) {
+	let r = He(e.slug);
+	return {
+		Showcase: (n) => /* @__PURE__ */ Y(Q, {
+			...n,
+			item: e,
+			groupLabel: t
+		}),
+		mock: {
+			cliCommand: `npx tembro add ${e.slug}`,
+			code: `${n}\n\nexport function Example() {\n  return <${r} />\n}`,
+			highlights: e.features,
+			scenarios: e.features.slice(0, 3).map((t) => ({
+				title: t,
+				description: `${e.title} can be copied into your app and adjusted locally.`
+			})),
+			capabilityNotes: e.features.slice(0, 3)
+		}
+	};
+}
+function He(e) {
+	return e.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("");
+}
+function Q({ item: e, groupLabel: t, state: n, setState: r, mode: i }) {
+	let a = e.features.length ? e.features : [
+		t,
+		"CLI add",
+		"Local file"
+	];
+	return /* @__PURE__ */ X("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ X("div", {
+				className: "flex flex-col gap-5 border-b border-[color:var(--aui-divider)] pb-5 lg:flex-row lg:items-start lg:justify-between",
+				children: [/* @__PURE__ */ X("div", {
+					className: "max-w-xl",
+					children: [
+						/* @__PURE__ */ Y("p", {
+							className: "text-sm font-semibold uppercase tracking-[0.22em] text-[color:var(--aui-brand-strong)]",
+							children: "CLI component"
+						}),
+						/* @__PURE__ */ Y("h3", {
+							className: "mt-2.5 text-2xl font-semibold tracking-tight text-[color:var(--aui-page-foreground)]",
+							children: e.title
+						}),
+						/* @__PURE__ */ Y("p", {
+							className: "mt-3 text-sm leading-7 text-[color:var(--aui-page-muted)]",
+							children: "Copy this component into your app and adjust it inside your own `components` folder."
+						})
+					]
+				}), /* @__PURE__ */ Y("div", {
+					className: "rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted-strong)]",
+					children: i === "docs" ? "Docs" : "Preview"
+				})]
+			}),
+			/* @__PURE__ */ Y("div", {
+				className: "grid gap-3 sm:grid-cols-3",
+				children: a.slice(0, 3).map((e) => /* @__PURE__ */ X("div", {
+					className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-3.5",
+					children: [/* @__PURE__ */ Y("p", {
+						className: "text-sm font-semibold text-[color:var(--aui-page-foreground)]",
+						children: e
+					}), /* @__PURE__ */ Y("p", {
+						className: "mt-1.5 text-xs leading-5 text-[color:var(--aui-page-muted)]",
+						children: "Lives in your local component source."
+					})]
+				}, e))
+			}),
+			/* @__PURE__ */ Y("div", {
+				className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-code-bg)] px-4 py-3",
+				children: /* @__PURE__ */ X("code", {
+					className: "text-sm text-[color:var(--aui-code-fg)]",
+					children: ["npx tembro add ", e.slug]
+				})
+			}),
+			/* @__PURE__ */ Y("div", {
+				className: "rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4 sm:p-5",
+				children: $(e, t, n, r, i)
+			})
+		]
+	});
+}
+function $(Z, He, Q, $, Ue) {
+	return Z.slug === "accordion" ? /* @__PURE__ */ Y(l, {
+		type: "single",
+		defaultValue: "api",
+		items: [{
+			key: "api",
+			title: "Single open section",
+			description: "Open one section at a time.",
+			content: "Use one expanded panel when the page needs compact disclosure."
+		}, {
+			key: "states",
+			title: "State handling",
+			description: "Controlled or uncontrolled usage.",
+			content: "Use one expanded section for FAQs, settings clusters, and compact disclosure flows."
+		}]
+	}) : Z.slug === "affix" ? /* @__PURE__ */ X("div", {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ Y(Ae, {
+			offsetTop: 0,
+			children: /* @__PURE__ */ Y("div", {
+				className: "rounded-lg border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 py-2 text-sm font-medium",
+				children: "Sticky helper bar"
+			})
+		}), /* @__PURE__ */ Y("div", {
+			className: "rounded-xl border border-dashed border-[color:var(--aui-divider)] p-4 text-sm text-[color:var(--aui-page-muted)]",
+			children: "Use `Affix` when a small control or summary should remain visible while the surrounding content scrolls."
+		})]
+	}) : Z.slug === "aspect-ratio" ? /* @__PURE__ */ Y(Se, {
+		ratio: 16 / 9,
+		className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]",
+		children: /* @__PURE__ */ Y("div", {
+			className: "flex size-full items-center justify-center bg-[linear-gradient(135deg,color-mix(in_oklch,var(--aui-brand),transparent_88%),transparent)] text-sm font-medium text-[color:var(--aui-page-foreground)]",
+			children: "16:9 media surface"
+		})
+	}) : Z.slug === "avatar" ? /* @__PURE__ */ X("div", {
+		className: "flex flex-wrap items-center gap-4",
+		children: [
+			/* @__PURE__ */ Y(D, { name: "Azamat UI" }),
+			/* @__PURE__ */ Y(D, {
+				fallback: "AJ",
+				shape: "rounded"
+			}),
+			/* @__PURE__ */ Y(O, { items: [
+				{
+					key: "1",
+					name: "Azamat"
+				},
+				{
+					key: "2",
+					name: "Nodir"
+				},
+				{
+					key: "3",
+					name: "Dilshod"
+				},
+				{
+					key: "4",
+					name: "Madina"
+				}
+			] })
+		]
+	}) : Z.slug === "calendar-scheduler" ? /* @__PURE__ */ Y(je, { events: [
+		{
+			id: "1",
+			title: "Design review",
+			date: "Mon",
+			time: "10:00",
+			tone: "default"
+		},
+		{
+			id: "2",
+			title: "Release QA",
+			date: "Tue",
+			time: "14:00",
+			tone: "warning"
+		},
+		{
+			id: "3",
+			title: "Go live",
+			date: "Fri",
+			time: "09:30",
+			tone: "success"
+		}
+	] }) : Z.slug === "carousel" ? /* @__PURE__ */ X(Ce, {
+		index: 0,
+		children: [/* @__PURE__ */ Y(z, { children: /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+			className: "p-5",
+			children: [/* @__PURE__ */ Y("p", {
+				className: "text-lg font-semibold",
+				children: "Release dashboard"
+			}), /* @__PURE__ */ Y("p", {
+				className: "mt-2 text-sm text-muted-foreground",
+				children: "Compact KPI slide for weekly review."
+			})]
+		}) }) }), /* @__PURE__ */ Y(z, { children: /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+			className: "p-5",
+			children: [/* @__PURE__ */ Y("p", {
+				className: "text-lg font-semibold",
+				children: "Customer health"
+			}), /* @__PURE__ */ Y("p", {
+				className: "mt-2 text-sm text-muted-foreground",
+				children: "Second slide with account risk summary."
+			})]
+		}) }) })]
+	}) : Z.slug === "cascader" ? /* @__PURE__ */ Y(v, {
+		value: [
+			"workspace",
+			"billing",
+			"invoices"
+		],
+		options: [{
+			value: "workspace",
+			label: "Workspace",
+			children: [{
+				value: "billing",
+				label: "Billing",
+				children: [{
+					value: "invoices",
+					label: "Invoices"
+				}, {
+					value: "plans",
+					label: "Plans"
+				}]
+			}]
+		}, {
+			value: "settings",
+			label: "Settings",
+			children: [{
+				value: "team",
+				label: "Team"
+			}]
+		}]
+	}) : Z.slug === "code-block" ? /* @__PURE__ */ Y(M, {
+		title: "Install",
+		language: "bash",
+		code: "npx tembro init --template next\nnpx tembro add button"
+	}) : Z.slug === "copy-button" ? /* @__PURE__ */ Y(n, {
+		value: "npx tembro add button",
+		children: "Copy command"
+	}) : Z.slug === "copy-field" ? /* @__PURE__ */ Y(r, {
+		label: "CLI command",
+		description: "Quick source-copy command",
+		value: "npx tembro add input"
+	}) : Z.slug === "data-state" ? /* @__PURE__ */ Y(N, {
+		status: "empty",
+		title: "No matching rows",
+		description: "Try another filter or import the first record.",
+		actions: /* @__PURE__ */ Y(e, {
+			size: "sm",
+			children: "Import CSV"
+		})
+	}) : Z.slug === "descriptions" ? /* @__PURE__ */ Y(k, {
+		title: "Workspace details",
+		columns: 3,
+		items: [
+			{
+				key: "owner",
+				label: "Owner",
+				value: "Azamat UI"
+			},
+			{
+				key: "plan",
+				label: "Plan",
+				value: "Scale"
+			},
+			{
+				key: "renewal",
+				label: "Renewal",
+				value: "Jul 14, 2026"
+			}
+		]
+	}) : Z.slug === "divider" ? /* @__PURE__ */ X("div", {
+		className: "grid gap-3",
+		children: [
+			/* @__PURE__ */ Y("div", {
+				className: "text-sm font-medium",
+				children: "Section above"
+			}),
+			/* @__PURE__ */ Y(ne, { label: "Summary" }),
+			/* @__PURE__ */ Y("div", {
+				className: "text-sm text-muted-foreground",
+				children: "Section below"
+			})
+		]
+	}) : Z.slug === "dual-list-picker" ? /* @__PURE__ */ Y(Me, {
+		picked: ["billing", "support"],
+		items: [
+			{
+				value: "billing",
+				label: "Billing"
+			},
+			{
+				value: "support",
+				label: "Support"
+			},
+			{
+				value: "analytics",
+				label: "Analytics"
+			},
+			{
+				value: "security",
+				label: "Security"
+			}
+		]
+	}) : Z.slug === "segmented-control" ? /* @__PURE__ */ Y(re, {
+		options: [
+			{
+				value: "overview",
+				label: "Overview"
+			},
+			{
+				value: "activity",
+				label: "Activity"
+			},
+			{
+				value: "settings",
+				label: "Settings"
+			}
+		],
+		defaultValue: "overview"
+	}) : Z.slug === "spinner" ? /* @__PURE__ */ X("div", {
+		className: "flex items-center gap-5",
+		children: [
+			/* @__PURE__ */ Y(f, { size: "xs" }),
+			/* @__PURE__ */ Y(f, { size: "sm" }),
+			/* @__PURE__ */ Y(f, { size: "md" }),
+			/* @__PURE__ */ Y(f, { size: "lg" })
+		]
+	}) : Z.slug === "skeleton" ? /* @__PURE__ */ X("div", {
+		className: "grid gap-3",
+		children: [
+			/* @__PURE__ */ Y(u, { className: "h-10 w-full" }),
+			/* @__PURE__ */ Y(te, { rows: 3 }),
+			/* @__PURE__ */ Y(d, { avatar: !0 })
+		]
+	}) : Z.slug === "skeleton-form" ? /* @__PURE__ */ Y(xe, {}) : Z.slug === "skeleton-table" ? /* @__PURE__ */ Y(be, {
+		rows: 5,
+		columns: 4
+	}) : Z.slug === "slider" ? /* @__PURE__ */ Y(g, {
+		label: "Spacing scale",
+		description: "Adjust dashboard density.",
+		defaultValue: 64,
+		showValue: !0
+	}) : Z.slug === "stack" ? /* @__PURE__ */ X(se, {
+		gap: "sm",
+		children: [
+			/* @__PURE__ */ Y("div", {
+				className: "rounded-lg border p-3 text-sm",
+				children: "Header area"
+			}),
+			/* @__PURE__ */ Y("div", {
+				className: "rounded-lg border p-3 text-sm",
+				children: "Content area"
+			}),
+			/* @__PURE__ */ Y("div", {
+				className: "rounded-lg border p-3 text-sm",
+				children: "Footer area"
+			})
+		]
+	}) : Z.slug === "statistic" ? /* @__PURE__ */ X(ge, {
+		columns: 3,
+		children: [
+			/* @__PURE__ */ Y(R, {
+				label: "ARR",
+				value: "$84.2k",
+				change: "+12.4%",
+				trend: "up",
+				description: "vs previous month"
+			}),
+			/* @__PURE__ */ Y(L, {
+				label: "MRR",
+				value: "$7.0k",
+				change: "+3.1%",
+				trend: "up",
+				description: "Live subscriptions"
+			}),
+			/* @__PURE__ */ Y(L, {
+				label: "Churn",
+				value: "1.9%",
+				change: "-0.4%",
+				trend: "down",
+				description: "Healthy range"
+			})
+		]
+	}) : Z.slug === "sticky-footer-bar" ? /* @__PURE__ */ X("div", {
+		className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]",
+		children: [/* @__PURE__ */ Y("div", {
+			className: "p-4 text-sm text-muted-foreground",
+			children: "Scrollable page content"
+		}), /* @__PURE__ */ Y(ce, {
+			start: /* @__PURE__ */ Y("div", {
+				className: "text-sm font-medium",
+				children: "2 unsaved changes"
+			}),
+			end: /* @__PURE__ */ X(Ve, { children: [/* @__PURE__ */ Y(e, {
+				size: "sm",
+				variant: "outline",
+				children: "Discard"
+			}), /* @__PURE__ */ Y(e, {
+				size: "sm",
+				children: "Save"
+			})] })
+		})]
+	}) : Z.slug === "tag" ? /* @__PURE__ */ X(Ee, { children: [
+		/* @__PURE__ */ Y(B, { children: "Default" }),
+		/* @__PURE__ */ Y(B, {
+			tone: "success",
+			children: "Live"
+		}),
+		/* @__PURE__ */ Y(B, {
+			tone: "warning",
+			children: "Review"
+		}),
+		/* @__PURE__ */ Y(B, {
+			tone: "danger",
+			children: "Blocked"
+		})
+	] }) : Z.slug === "tag-list" ? /* @__PURE__ */ Y(ve, {
+		removable: !0,
+		items: [
+			{
+				key: "1",
+				label: "Dashboard"
+			},
+			{
+				key: "2",
+				label: "Billing",
+				variant: "secondary"
+			},
+			{
+				key: "3",
+				label: "Priority",
+				variant: "outline"
+			}
+		]
+	}) : Z.slug === "time-picker" ? /* @__PURE__ */ X("div", {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ Y(x, {
+			label: "Start time",
+			defaultValue: "09:30"
+		}), /* @__PURE__ */ Y(S, {
+			from: "09:30",
+			to: "17:30"
+		})]
+	}) : Z.slug === "tour" ? /* @__PURE__ */ Y(J, {
+		index: 1,
+		steps: [
+			{
+				title: "Workspace setup",
+				description: "Initialize theme tokens first."
+			},
+			{
+				title: "Component add",
+				description: "Copy only the component you need."
+			},
+			{
+				title: "Detail route",
+				description: "Open docs, API and preview together."
+			}
+		]
+	}) : Z.slug === "tree-view" ? /* @__PURE__ */ Y(ye, {
+		defaultExpandedKeys: ["components", "inputs"],
+		selectedKey: "button",
+		items: [{
+			key: "components",
+			label: "Components",
+			children: [{
+				key: "inputs",
+				label: "Inputs",
+				children: [{
+					key: "button",
+					label: "Button"
+				}, {
+					key: "input",
+					label: "Input"
+				}]
+			}]
+		}]
+	}) : Z.slug === "typography" ? /* @__PURE__ */ X("div", {
+		className: "grid gap-3",
+		children: [
+			/* @__PURE__ */ Y(De, {
+				level: 2,
+				children: "Dashboard typography"
+			}),
+			/* @__PURE__ */ Y(V, { children: "Readable defaults for product copy and operational labels." }),
+			/* @__PURE__ */ Y("blockquote", {
+				className: "border-l-4 pl-4 italic text-muted-foreground",
+				children: "Ship simple text hierarchy before adding decorative layout layers."
+			}),
+			/* @__PURE__ */ X(V, {
+				muted: !0,
+				size: "sm",
+				children: [
+					"Use ",
+					/* @__PURE__ */ Y(Oe, { children: "Mark" }),
+					" only for emphasis that matters."
+				]
+			})
+		]
+	}) : Z.slug === "watermark" ? /* @__PURE__ */ Y(ke, {
+		text: "AZAMAT UI",
+		children: /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+			className: "p-6",
+			children: [/* @__PURE__ */ Y("p", {
+				className: "text-lg font-semibold",
+				children: "Preview export"
+			}), /* @__PURE__ */ Y("p", {
+				className: "mt-2 text-sm text-muted-foreground",
+				children: "Subtle branding surface for internal screenshots or mockups."
+			})]
+		}) })
+	}) : Z.slug === "range-slider" ? /* @__PURE__ */ Y(h, {
+		label: "Revenue band",
+		description: "Filter a metric window.",
+		defaultValue: [20, 80],
+		showValue: !0
+	}) : Z.slug === "rating" ? /* @__PURE__ */ Y(m, {
+		defaultValue: 4,
+		labels: { clear: "Reset" }
+	}) : Z.slug === "otp-input" ? /* @__PURE__ */ Y(he, {
+		value: Q.textValue.replace(/\D/g, "").slice(0, 6),
+		onValueChange: (e) => $({ textValue: e })
+	}) : Z.slug === "color-input" ? /* @__PURE__ */ Y(me, {
+		defaultValue: "#22c55e",
+		label: "Accent color",
+		description: "Theme token preview."
+	}) : Z.slug === "tag-input" ? /* @__PURE__ */ Y(_, {
+		defaultValue: [
+			"dashboard",
+			"beta",
+			"ops"
+		],
+		placeholder: "Add label"
+	}) : Z.slug === "button-group" ? /* @__PURE__ */ Y(t, { items: [
+		{
+			key: "day",
+			label: "Day"
+		},
+		{
+			key: "week",
+			label: "Week"
+		},
+		{
+			key: "month",
+			label: "Month"
+		}
+	] }) : Z.slug === "quick-action-grid" || Z.slug === "command-bar" ? /* @__PURE__ */ Y(ie, {
+		columns: Z.slug === "command-bar" ? 4 : 3,
+		compact: Z.slug === "command-bar",
+		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"
+			}
+		]
+	}) : Z.slug === "filter-chips" || Z.slug === "data-table-saved-filters" ? /* @__PURE__ */ X("div", {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ Y(fe, {
+			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
+		}), Z.slug === "data-table-saved-filters" ? /* @__PURE__ */ Y(t, {
+			attached: !1,
+			items: [
+				{
+					key: "default",
+					label: "Default",
+					variant: "secondary"
+				},
+				{
+					key: "billing",
+					label: "Billing"
+				},
+				{
+					key: "ops",
+					label: "Operations"
+				}
+			]
+		}) : null]
+	}) : Z.slug === "anchor-nav" ? /* @__PURE__ */ Y(le, {
+		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"
+			}
+		]
+	}) : Z.slug === "page-tabs" ? /* @__PURE__ */ Y(ue, {
+		value: "overview",
+		variant: "pills",
+		items: [
+			{
+				value: "overview",
+				label: "Overview"
+			},
+			{
+				value: "usage",
+				label: "Usage"
+			},
+			{
+				value: "api",
+				label: "API",
+				badge: "3"
+			}
+		]
+	}) : Z.slug === "stepper-tabs" ? /* @__PURE__ */ Y(de, {
+		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"
+			}
+		]
+	}) : Z.slug === "alert" ? /* @__PURE__ */ Y(C, {
+		tone: "warning",
+		title: "Review needed",
+		description: "Billing rules changed and one approval is pending.",
+		action: /* @__PURE__ */ Y(e, {
+			size: "sm",
+			children: "Open"
+		})
+	}) : Z.slug === "page-state" ? /* @__PURE__ */ Y(T, {
+		title: "Workspace connected",
+		description: "The route is ready to accept live data and team actions.",
+		tone: "success",
+		action: /* @__PURE__ */ Y(e, {
+			size: "sm",
+			children: "Continue"
+		})
+	}) : Z.slug === "empty-search-state" ? /* @__PURE__ */ Y(w, {
+		title: "No matching components",
+		description: "Try a shorter keyword or switch to a broader family.",
+		action: /* @__PURE__ */ Y(e, {
+			size: "sm",
+			children: "Clear search"
+		})
+	}) : Z.slug === "float-button" ? /* @__PURE__ */ X("div", {
+		className: "relative min-h-28 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
+		children: [/* @__PURE__ */ Y("p", {
+			className: "text-sm text-muted-foreground",
+			children: "Floating action inside a content area."
+		}), /* @__PURE__ */ Y(we, {
+			className: "absolute bottom-4 right-4",
+			children: "+"
+		})]
+	}) : Z.slug === "data-list" || Z.slug === "list" ? /* @__PURE__ */ Y(F, { 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"
+		}
+	] }) : Z.slug === "key-value-card" ? /* @__PURE__ */ X(a, { children: [/* @__PURE__ */ Y(s, { children: /* @__PURE__ */ Y(ee, { children: "Account summary" }) }), /* @__PURE__ */ Y(o, { children: /* @__PURE__ */ Y(E, { items: [
+		{
+			key: "owner",
+			label: "Owner",
+			value: "Azamat UI"
+		},
+		{
+			key: "plan",
+			label: "Plan",
+			value: "Scale"
+		},
+		{
+			key: "renewal",
+			label: "Renewal",
+			value: "July 14, 2026"
+		}
+	] }) })] }) : Z.slug === "entity-card" || Z.slug === "file-card" ? /* @__PURE__ */ Y(P, {
+		title: Z.slug === "file-card" ? "Design-spec.pdf" : "Azamat Workspace",
+		description: Z.slug === "file-card" ? "Shared with 4 reviewers." : "Admin console and live dashboard route.",
+		status: /* @__PURE__ */ Y(c, {
+			variant: "secondary",
+			children: "Live"
+		}),
+		meta: Z.slug === "file-card" ? "2.4 MB" : "Updated 8 min ago",
+		actions: /* @__PURE__ */ Y(e, {
+			size: "sm",
+			variant: "outline",
+			children: "Open"
+		})
+	}) : Z.slug === "status-legend" ? /* @__PURE__ */ Y(_e, {
+		title: "Delivery states",
+		items: [
+			{
+				key: "live",
+				label: "Live",
+				description: "Healthy production routes",
+				tone: "success",
+				count: 18
+			},
+			{
+				key: "review",
+				label: "Review",
+				description: "Awaiting QA approval",
+				tone: "warning",
+				count: 4
+			},
+			{
+				key: "blocked",
+				label: "Blocked",
+				description: "Needs engineering action",
+				tone: "danger",
+				count: 1
+			}
+		]
+	}) : Z.slug === "trend-card" || Z.slug === "comparison-card" ? /* @__PURE__ */ Y(Be, {
+		title: Z.slug === "trend-card" ? "Weekly revenue" : "Current vs previous",
+		value: "$84.2k",
+		description: "Compared with last month",
+		trend: {
+			value: "+12.4%",
+			tone: "success"
+		}
+	}) : Z.slug === "delta-badge" ? /* @__PURE__ */ X("div", {
+		className: "flex flex-wrap gap-2",
+		children: [
+			/* @__PURE__ */ Y(c, {
+				variant: "secondary",
+				children: "+12.4%"
+			}),
+			/* @__PURE__ */ Y(c, {
+				variant: "outline",
+				children: "-3.1%"
+			}),
+			/* @__PURE__ */ Y(c, {
+				variant: "destructive",
+				children: "Risk"
+			})
+		]
+	}) : Z.slug === "entity-header" ? /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+		className: "flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ X("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ Y(c, {
+				variant: "outline",
+				children: "Customer"
+			}), /* @__PURE__ */ X("div", { children: [/* @__PURE__ */ Y("h3", {
+				className: "text-xl font-semibold",
+				children: "Acme Holdings"
+			}), /* @__PURE__ */ Y("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Enterprise account with billing and admin ownership."
+			})] })]
+		}), /* @__PURE__ */ X("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ Y(e, {
+				variant: "outline",
+				size: "sm",
+				children: "Archive"
+			}), /* @__PURE__ */ Y(e, {
+				size: "sm",
+				children: "Edit"
+			})]
+		})]
+	}) }) : Z.slug === "notification-center" ? /* @__PURE__ */ Y(F, { 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"
+		}
+	] }) : Z.slug === "inline-editable" ? /* @__PURE__ */ X("div", {
+		className: "flex flex-col gap-3 sm:flex-row",
+		children: [/* @__PURE__ */ Y(i, {
+			value: Q.textValue,
+			onChange: (e) => $({ textValue: e.currentTarget.value })
+		}), /* @__PURE__ */ Y(e, {
+			size: "sm",
+			children: "Save label"
+		})]
+	}) : Z.slug === "json-input" ? /* @__PURE__ */ Y(y, {
+		value: "{\n  \"workspace\": \"azamat-ui\",\n  \"theme\": \"dashboard\"\n}",
+		onValueChange: () => void 0,
+		rows: 7
+	}) : Z.slug === "kanban" ? /* @__PURE__ */ Y(j, { columns: [
+		{
+			key: "todo",
+			title: "Todo",
+			cards: [{
+				key: "1",
+				title: "Polish Button demo",
+				description: "Improve interactive preview states."
+			}]
+		},
+		{
+			key: "progress",
+			title: "In progress",
+			cards: [{
+				key: "2",
+				title: "Refresh Input docs",
+				description: "Clean API notes and examples."
+			}]
+		},
+		{
+			key: "done",
+			title: "Done",
+			cards: [{
+				key: "3",
+				title: "Publish 1.0.0",
+				description: "Release package and sync docs."
+			}]
+		}
+	] }) : Z.slug === "keyboard-shortcut" ? /* @__PURE__ */ X("div", {
+		className: "flex flex-wrap gap-3",
+		children: [
+			/* @__PURE__ */ Y(A, { keys: ["Ctrl", "K"] }),
+			/* @__PURE__ */ Y(A, { keys: ["Shift", "Enter"] }),
+			/* @__PURE__ */ Y(A, { keys: ["Alt", "S"] })
+		]
+	}) : Z.slug === "mention-input" ? /* @__PURE__ */ Y(b, {
+		defaultValue: "@azamat can you review the DataTable route?",
+		options: [
+			{
+				value: "@azamat",
+				label: "@azamat"
+			},
+			{
+				value: "@team",
+				label: "@team"
+			},
+			{
+				value: "@design",
+				label: "@design"
+			}
+		]
+	}) : Z.slug === "menubar" ? /* @__PURE__ */ X(Ne, { children: [
+		/* @__PURE__ */ X(U, { children: [/* @__PURE__ */ Y(W, { children: "File" }), /* @__PURE__ */ X(Pe, {
+			className: "relative mt-2",
+			children: [/* @__PURE__ */ Y(H, { children: "New page" }), /* @__PURE__ */ Y(H, { children: "Duplicate" })]
+		})] }),
+		/* @__PURE__ */ Y(U, { children: /* @__PURE__ */ Y(W, { children: "Edit" }) }),
+		/* @__PURE__ */ Y(U, { children: /* @__PURE__ */ Y(W, { children: "View" }) })
+	] }) : Z.slug === "navigation-menu" ? /* @__PURE__ */ Y(Fe, { children: /* @__PURE__ */ X(Ie, { children: [
+		/* @__PURE__ */ Y(G, { children: /* @__PURE__ */ Y(K, {
+			href: "#",
+			active: !0,
+			children: "Overview"
+		}) }),
+		/* @__PURE__ */ Y(G, { children: /* @__PURE__ */ Y(K, {
+			href: "#",
+			children: "Components"
+		}) }),
+		/* @__PURE__ */ Y(G, { children: /* @__PURE__ */ Y(K, {
+			href: "#",
+			children: "Docs"
+		}) })
+	] }) }) : Z.slug === "overlay" ? /* @__PURE__ */ X(oe, {
+		columns: 3,
+		gap: "sm",
+		children: [
+			/* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+				className: "p-4",
+				children: [/* @__PURE__ */ Y("p", {
+					className: "font-medium",
+					children: "Dialog"
+				}), /* @__PURE__ */ Y("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: "Focused confirmation and forms."
+				})]
+			}) }),
+			/* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+				className: "p-4",
+				children: [/* @__PURE__ */ Y("p", {
+					className: "font-medium",
+					children: "Popover"
+				}), /* @__PURE__ */ Y("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: "Compact contextual actions."
+				})]
+			}) }),
+			/* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+				className: "p-4",
+				children: [/* @__PURE__ */ Y("p", {
+					className: "font-medium",
+					children: "Sheet"
+				}), /* @__PURE__ */ Y("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: "Side panel workflows."
+				})]
+			}) })
+		]
+	}) : Z.slug === "property-grid" ? /* @__PURE__ */ Y(I, {
+		columns: 3,
+		items: [
+			{
+				key: "framework",
+				label: "Framework",
+				value: "Next.js",
+				description: "App Router setup"
+			},
+			{
+				key: "theme",
+				label: "Theme",
+				value: "Light / Dark",
+				description: "CSS tokens ready"
+			},
+			{
+				key: "mode",
+				label: "Mode",
+				value: "Source-copy",
+				description: "Editable local files"
+			}
+		]
+	}) : Z.slug === "qr-code" ? /* @__PURE__ */ Y(Te, {
+		value: "https://azamat-ui.vercel.app",
+		alt: "Azamat UI"
+	}) : Z.slug === "quantity-stepper" ? /* @__PURE__ */ Y(p, {
+		defaultValue: 3,
+		min: 1,
+		max: 10
+	}) : Z.slug === "repeater-field" ? /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+		className: "grid gap-3 p-5",
+		children: [
+			/* @__PURE__ */ Y(i, {
+				placeholder: "First item",
+				defaultValue: "Revenue KPI"
+			}),
+			/* @__PURE__ */ Y(i, {
+				placeholder: "Second item",
+				defaultValue: "Churn guardrail"
+			}),
+			/* @__PURE__ */ Y("div", { children: /* @__PURE__ */ Y(e, {
+				size: "sm",
+				variant: "outline",
+				children: "Add row"
+			}) })
+		]
+	}) }) : Z.slug === "resizable-panel" ? /* @__PURE__ */ X(Re, { children: [
+		/* @__PURE__ */ X(q, {
+			defaultSize: "45%",
+			children: [/* @__PURE__ */ Y("p", {
+				className: "text-sm font-medium",
+				children: "Preview panel"
+			}), /* @__PURE__ */ Y("p", {
+				className: "mt-2 text-sm text-muted-foreground",
+				children: "Resize this surface in product screens with long content."
+			})]
+		}),
+		/* @__PURE__ */ Y(Le, {}),
+		/* @__PURE__ */ X(q, {
+			defaultSize: "55%",
+			children: [/* @__PURE__ */ Y("p", {
+				className: "text-sm font-medium",
+				children: "Inspector panel"
+			}), /* @__PURE__ */ Y("p", {
+				className: "mt-2 text-sm text-muted-foreground",
+				children: "Use for side-by-side data and editing tools."
+			})]
+		})
+	] }) : Z.slug === "rich-text-editor" ? /* @__PURE__ */ Y(ze, {
+		value: "<p><strong>Release note</strong> with product details.</p>",
+		onValueChange: () => void 0
+	}) : Z.slug === "saved-filter-select" ? /* @__PURE__ */ Y(pe, {
+		value: "billing",
+		filters: [
+			{
+				value: "billing",
+				label: "Billing",
+				description: "Invoices and payment status"
+			},
+			{
+				value: "ops",
+				label: "Operations",
+				description: "Queues and workload"
+			},
+			{
+				value: "owners",
+				label: "Owner: Azamat",
+				description: "Assigned records only"
+			}
+		],
+		onValueChange: () => void 0,
+		onSave: () => void 0,
+		onDelete: () => void 0
+	}) : Z.slug === "section" ? /* @__PURE__ */ Y(ae, {
+		title: "Revenue summary",
+		description: "Section wrapper for grouped content and actions.",
+		actions: /* @__PURE__ */ Y(e, {
+			size: "sm",
+			children: "Export"
+		}),
+		bordered: !0,
+		children: /* @__PURE__ */ Y("div", {
+			className: "text-sm text-muted-foreground",
+			children: "Place chart, filters, table or any route content inside."
+		})
+	}) : Z.category === "Forms" ? /* @__PURE__ */ X("div", {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ Y(i, {
+			value: Q.textValue,
+			onChange: (e) => $({ textValue: e.currentTarget.value }),
+			placeholder: `${Z.title} preview`
+		}), /* @__PURE__ */ Y("p", {
+			className: "text-sm text-muted-foreground",
+			children: "Generic field preview for this form surface."
+		})]
+	}) : Z.category === "Overlay" ? /* @__PURE__ */ X("div", {
+		className: "rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
+		children: [/* @__PURE__ */ Y("p", {
+			className: "text-sm font-semibold text-[color:var(--aui-page-foreground)]",
+			children: Z.title
+		}), /* @__PURE__ */ Y("p", {
+			className: "mt-2 text-sm leading-6 text-[color:var(--aui-page-muted)]",
+			children: "This overlay route needs a dedicated interactive demo. The docs fallback avoids rendering a different component as a substitute."
+		})]
+	}) : Z.category === "Data Display" ? /* @__PURE__ */ Y("div", {
+		className: "rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
+		children: /* @__PURE__ */ X("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ X("div", { children: [/* @__PURE__ */ Y("p", {
+				className: "text-lg font-semibold",
+				children: Z.title
+			}), /* @__PURE__ */ Y("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: "Generic display fallback kept neutral until a dedicated showcase is added."
+			})] }), /* @__PURE__ */ Y(c, {
+				variant: "outline",
+				children: Ue
+			})]
+		})
+	}) : /* @__PURE__ */ Y("div", {
+		className: "rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
+		children: /* @__PURE__ */ X("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ X("div", { children: [/* @__PURE__ */ Y("p", {
+				className: "text-lg font-semibold",
+				children: Z.title
+			}), /* @__PURE__ */ Y("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: "Neutral starter preview for this surface. Copy it into your app, then shape the final state with your real data and props."
+			})] }), /* @__PURE__ */ Y(c, {
+				variant: "outline",
+				children: Z.category
+			})]
+		})
+	});
+}
+//#endregion
+export { Z as createGenericShowcaseDemo };