tembro 3.1.16 → 4.0.0

package/dist/src/showcase/fallback.js

@@ -1,956 +0,0 @@
-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 { Input as r } from "../components/ui/input/index.js";
-import { Card as i, CardContent as a } from "../components/ui/card/index.js";
-import { Badge as o } from "../components/ui/badge/index.js";
-import { Accordion as ee } from "../components/ui/accordion/index.js";
-import { Skeleton as te, SkeletonCard as ne, SkeletonText as s } from "../components/ui/skeleton/index.js";
-import { Divider as c } from "../components/ui/divider/index.js";
-import { SegmentedControl as l } from "../components/ui/segmented-control/index.js";
-import { Spinner as u } from "../components/ui/spinner/index.js";
-import { QuickActionGrid as d } from "../components/actions/quick-action-grid.js";
-import { Section as f } from "../components/layout/section.js";
-import { FilterBar as p } from "../components/filters/filter-bar.js";
-import { SavedFilterSelect as m } from "../components/filters/saved-filter-select.js";
-import { OtpInput as h } from "../components/inputs/otp-input.js";
-import { Rating as g } from "../components/inputs/rating.js";
-import { RangeSlider as re, Slider as ie } from "../components/inputs/slider.js";
-import { TagInput as _ } from "../components/inputs/tag-input.js";
-import { JsonInput as v } from "../components/inputs/json-input.js";
-import { TimePicker as y, TimeRangePicker as b } from "../components/inputs/time-picker.js";
-import { ColorPicker as x } from "../components/inputs/color-picker.js";
-import { SignaturePad as S } from "../components/inputs/signature-pad.js";
-import { Alert as C } from "../components/feedback/alert.js";
-import { PageState as w } from "../components/feedback/page-state.js";
-import { Avatar as T, AvatarGroup as E } from "../components/display/avatar.js";
-import { KanbanBoard as D } from "../components/display/kanban.js";
-import { CodeBlock as O } from "../components/display/code-block.js";
-import { DataState as k } from "../components/display/data-state.js";
-import { List as A } from "../components/display/list.js";
-import { Statistic as j, StatisticCard as M, StatisticGrid as N } from "../components/display/statistic.js";
-import { StatusLegend as P } from "../components/display/status-legend.js";
-import { TreeView as F } from "../components/display/tree-view.js";
-import { VirtualList as ae } from "../components/display/virtual-list.js";
-import { QRCode as I } from "../components/display/qr-code.js";
-import { Carousel as L, CarouselItem as R } from "../components/display/carousel.js";
-import { Tag as z, TagGroup as B } from "../components/display/tag.js";
-import { Heading as V, Mark as H, Text as U } from "../components/display/typography.js";
-import { CalendarScheduler as W } from "../components/modern/calendar-scheduler.js";
-import { DualListPicker as G } from "../components/modern/dual-list-picker.js";
-import { ResizableHandle as K, ResizablePanel as q, ResizablePanelGroup as J } from "../components/modern/resizable-panel.js";
-import { RichTextEditor as oe } from "../components/modern/rich-text-editor.js";
-import { ImageCropper as se } from "../components/modern/image-cropper.js";
-import { CommandPalette as ce } from "../components/command/command-palette.js";
-import { SortableList as le } from "../components/dnd/sortable-list.js";
-import { 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 = ue(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 ue(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, ue, Q, $, de) {
-	return Z.slug === "avatar" ? /* @__PURE__ */ X("div", {
-		className: "flex flex-wrap items-center gap-4",
-		children: [
-			/* @__PURE__ */ Y(T, { name: "Tembro" }),
-			/* @__PURE__ */ Y(T, {
-				fallback: "AJ",
-				shape: "rounded"
-			}),
-			/* @__PURE__ */ Y(E, { items: [
-				{
-					key: "1",
-					name: "Azamat"
-				},
-				{
-					key: "2",
-					name: "Nodir"
-				},
-				{
-					key: "3",
-					name: "Dilshod"
-				},
-				{
-					key: "4",
-					name: "Madina"
-				}
-			] })
-		]
-	}) : Z.slug === "accordion" ? /* @__PURE__ */ Y(ee, {
-		type: "single",
-		defaultValue: "install",
-		items: [{
-			key: "install",
-			title: "Install with CLI",
-			description: "Copy source into your app.",
-			content: "Run `npx tembro add accordion`, then edit the local component source."
-		}, {
-			key: "compose",
-			title: "Compose route content",
-			description: "Use it for settings, FAQ and dense docs groups.",
-			content: "Accordion items keep title, description, meta, badges and disabled states together."
-		}]
-	}) : Z.slug === "calendar-scheduler" ? /* @__PURE__ */ Y(W, { 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(L, {
-		index: 0,
-		children: [/* @__PURE__ */ Y(R, { children: /* @__PURE__ */ Y(i, { children: /* @__PURE__ */ X(a, {
-			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(R, { children: /* @__PURE__ */ Y(i, { children: /* @__PURE__ */ X(a, {
-			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 === "code-block" ? /* @__PURE__ */ Y(O, {
-		title: "Install",
-		language: "bash",
-		code: "npx tembro init --template next\nnpx tembro add button"
-	}) : Z.slug === "command-palette" ? /* @__PURE__ */ Y(ce, {
-		open: !0,
-		onOpenChange: () => void 0,
-		title: "Preview command palette",
-		description: "Command palette preview with grouped actions.",
-		placeholder: "Search commands...",
-		groups: [{
-			id: "components",
-			label: "Components",
-			items: [
-				{
-					id: "button",
-					label: "Button",
-					description: "Open button docs",
-					shortcut: "B"
-				},
-				{
-					id: "input",
-					label: "Input",
-					description: "Open input docs",
-					shortcut: "I"
-				},
-				{
-					id: "data-table",
-					label: "DataTable",
-					description: "Open table docs",
-					shortcut: "T"
-				}
-			]
-		}],
-		contentClassName: "relative inset-auto translate-x-0 translate-y-0 shadow-none"
-	}) : Z.slug === "copy-button" ? /* @__PURE__ */ Y(n, {
-		value: "npx tembro add button",
-		children: "Copy command"
-	}) : Z.slug === "data-state" ? /* @__PURE__ */ Y(k, {
-		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 === "color-picker" ? /* @__PURE__ */ Y(x, {
-		label: "Brand accent",
-		defaultValue: "#2563ebcc",
-		showAlpha: !0,
-		swatches: [
-			"#0f172a",
-			"#2563eb",
-			"#059669",
-			"#d97706",
-			"#dc2626",
-			"#7c3aed"
-		]
-	}) : Z.slug === "divider" ? /* @__PURE__ */ X("div", {
-		className: "grid gap-3",
-		children: [
-			/* @__PURE__ */ Y("div", {
-				className: "text-sm font-medium",
-				children: "Section above"
-			}),
-			/* @__PURE__ */ Y(c, { label: "Summary" }),
-			/* @__PURE__ */ Y("div", {
-				className: "text-sm text-muted-foreground",
-				children: "Section below"
-			})
-		]
-	}) : Z.slug === "dual-list-picker" ? /* @__PURE__ */ Y(G, {
-		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(l, {
-		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(u, { size: "xs" }),
-			/* @__PURE__ */ Y(u, { size: "sm" }),
-			/* @__PURE__ */ Y(u, { size: "md" }),
-			/* @__PURE__ */ Y(u, { size: "lg" })
-		]
-	}) : Z.slug === "skeleton" ? /* @__PURE__ */ X("div", {
-		className: "grid gap-3",
-		children: [
-			/* @__PURE__ */ Y(te, { className: "h-10 w-full" }),
-			/* @__PURE__ */ Y(s, { rows: 3 }),
-			/* @__PURE__ */ Y(ne, { avatar: !0 })
-		]
-	}) : Z.slug === "slider" ? /* @__PURE__ */ Y(ie, {
-		label: "Spacing scale",
-		description: "Adjust dashboard density.",
-		defaultValue: 64,
-		showValue: !0
-	}) : Z.slug === "statistic" ? /* @__PURE__ */ X(N, {
-		columns: 3,
-		children: [
-			/* @__PURE__ */ Y(M, {
-				label: "ARR",
-				value: "$84.2k",
-				change: "+12.4%",
-				trend: "up",
-				description: "vs previous month"
-			}),
-			/* @__PURE__ */ Y(j, {
-				label: "MRR",
-				value: "$7.0k",
-				change: "+3.1%",
-				trend: "up",
-				description: "Live subscriptions"
-			}),
-			/* @__PURE__ */ Y(j, {
-				label: "Churn",
-				value: "1.9%",
-				change: "-0.4%",
-				trend: "down",
-				description: "Healthy range"
-			})
-		]
-	}) : Z.slug === "tag" ? /* @__PURE__ */ X(B, { children: [
-		/* @__PURE__ */ Y(z, { children: "Default" }),
-		/* @__PURE__ */ Y(z, {
-			tone: "success",
-			children: "Live"
-		}),
-		/* @__PURE__ */ Y(z, {
-			tone: "warning",
-			children: "Review"
-		}),
-		/* @__PURE__ */ Y(z, {
-			tone: "danger",
-			children: "Blocked"
-		})
-	] }) : Z.slug === "time-picker" ? /* @__PURE__ */ X("div", {
-		className: "grid gap-3",
-		children: [/* @__PURE__ */ Y(y, {
-			label: "Start time",
-			defaultValue: "09:30"
-		}), /* @__PURE__ */ Y(b, {
-			from: "09:30",
-			to: "17:30"
-		})]
-	}) : Z.slug === "tree-view" ? /* @__PURE__ */ Y(F, {
-		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(V, {
-				level: 2,
-				children: "Dashboard typography"
-			}),
-			/* @__PURE__ */ Y(U, { 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(U, {
-				muted: !0,
-				size: "sm",
-				children: [
-					"Use ",
-					/* @__PURE__ */ Y(H, { children: "Mark" }),
-					" only for emphasis that matters."
-				]
-			})
-		]
-	}) : Z.slug === "range-slider" ? /* @__PURE__ */ Y(re, {
-		label: "Revenue band",
-		description: "Filter a metric window.",
-		defaultValue: [20, 80],
-		showValue: !0
-	}) : Z.slug === "rating" ? /* @__PURE__ */ Y(g, {
-		defaultValue: 4,
-		labels: { clear: "Reset" }
-	}) : Z.slug === "otp-input" ? /* @__PURE__ */ Y(h, {
-		value: Q.textValue.replace(/\D/g, "").slice(0, 6),
-		onValueChange: (e) => $({ textValue: e })
-	}) : Z.slug === "color-input" ? /* @__PURE__ */ Y(r, {
-		type: "color",
-		defaultValue: "#22c55e",
-		"aria-label": "Accent color"
-	}) : 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" ? /* @__PURE__ */ Y(d, {
-		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"
-			}
-		]
-	}) : Z.slug === "data-table-saved-filters" ? /* @__PURE__ */ X("div", {
-		className: "grid gap-3",
-		children: [/* @__PURE__ */ Y(p, {
-			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"
-				}
-			],
-			onRemoveChip: () => void 0,
-			onReset: () => void 0
-		}), /* @__PURE__ */ Y(t, {
-			attached: !1,
-			items: [
-				{
-					key: "default",
-					label: "Default",
-					variant: "secondary"
-				},
-				{
-					key: "billing",
-					label: "Billing"
-				},
-				{
-					key: "ops",
-					label: "Operations"
-				}
-			]
-		})]
-	}) : 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(w, {
-		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 === "list" ? /* @__PURE__ */ Y(A, { 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 === "status-legend" ? /* @__PURE__ */ Y(P, {
-		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 === "notification-center" ? /* @__PURE__ */ Y(A, { 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(r, {
-			value: Q.textValue,
-			onChange: (e) => $({ textValue: e.currentTarget.value })
-		}), /* @__PURE__ */ Y(e, {
-			size: "sm",
-			children: "Save label"
-		})]
-	}) : Z.slug === "json-input" ? /* @__PURE__ */ Y(v, {
-		value: "{\n  \"workspace\": \"tembro\",\n  \"theme\": \"dashboard\"\n}",
-		onValueChange: () => void 0,
-		rows: 7
-	}) : Z.slug === "sortable-list" ? /* @__PURE__ */ Y(le, {
-		defaultItems: [
-			{
-				id: "docs",
-				title: "Docs polish",
-				meta: "Ready"
-			},
-			{
-				id: "api",
-				title: "API table",
-				meta: "Review"
-			},
-			{
-				id: "preview",
-				title: "Live preview",
-				meta: "Live"
-			}
-		],
-		getItemId: (e) => e.id,
-		getItemLabel: (e) => e.title,
-		renderItem: (e) => /* @__PURE__ */ X("div", {
-			className: "flex min-w-0 items-center justify-between gap-3",
-			children: [/* @__PURE__ */ Y("span", {
-				className: "truncate text-sm font-medium",
-				children: e.title
-			}), /* @__PURE__ */ Y(o, {
-				variant: "outline",
-				children: e.meta
-			})]
-		})
-	}) : Z.slug === "virtual-list" ? /* @__PURE__ */ Y(ae, {
-		items: Array.from({ length: 80 }, (e, t) => ({
-			id: `row-${t + 1}`,
-			name: `Virtual record ${t + 1}`,
-			status: t % 3 == 0 ? "Review" : "Live"
-		})),
-		height: 280,
-		estimateSize: 56,
-		getItemKey: (e) => e.id,
-		renderItem: (e) => /* @__PURE__ */ X("div", {
-			className: "mx-1 flex items-center justify-between rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-3",
-			children: [/* @__PURE__ */ Y("span", {
-				className: "text-sm font-medium",
-				children: e.name
-			}), /* @__PURE__ */ Y(o, {
-				variant: e.status === "Live" ? "secondary" : "outline",
-				children: e.status
-			})]
-		})
-	}) : Z.slug === "signature-pad" ? /* @__PURE__ */ Y(S, {
-		defaultValue: [[
-			{
-				x: .16,
-				y: .58,
-				pressure: .5
-			},
-			{
-				x: .26,
-				y: .38,
-				pressure: .5
-			},
-			{
-				x: .38,
-				y: .62,
-				pressure: .5
-			},
-			{
-				x: .54,
-				y: .42,
-				pressure: .5
-			},
-			{
-				x: .72,
-				y: .56,
-				pressure: .5
-			}
-		]],
-		labels: {
-			canvas: "Signature preview",
-			undo: "Undo",
-			clear: "Clear"
-		}
-	}) : Z.slug === "qr-code" ? /* @__PURE__ */ X("div", {
-		className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center",
-		children: [/* @__PURE__ */ Y("div", {
-			className: "rounded-2xl border border-[color:var(--aui-divider)] bg-white p-4",
-			children: /* @__PURE__ */ Y(I, {
-				value: "https://tembro.dev/components",
-				size: 148,
-				alt: "Tembro components QR"
-			})
-		}), /* @__PURE__ */ X("div", { children: [/* @__PURE__ */ Y("p", {
-			className: "font-semibold aui-text-strong",
-			children: "QR code"
-		}), /* @__PURE__ */ Y("p", {
-			className: "mt-2 text-sm leading-6 aui-text-muted",
-			children: "Generates SVG output, supports custom colors, error fallback and async loading."
-		})] })]
-	}) : Z.slug === "rich-text-editor" ? /* @__PURE__ */ Y(oe, {
-		defaultValue: "<h2>Release notes</h2><p>Write rich product copy with toolbar actions, links and placeholder support.</p>",
-		minHeight: 180,
-		onLinkRequest: () => "https://tembro.dev"
-	}) : Z.slug === "image-cropper" ? /* @__PURE__ */ Y(se, {
-		src: "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20420%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%230f172a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2322c55e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22420%22%20fill%3D%22url(%23g)%22%2F%3E%3Ccircle%20cx%3D%22460%22%20cy%3D%22150%22%20r%3D%2288%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.22%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%22245%22%20width%3D%22310%22%20height%3D%2264%22%20rx%3D%2220%22%20fill%3D%22%23fff%22%20opacity%3D%22.88%22%2F%3E%3Ctext%20x%3D%2295%22%20y%3D%22287%22%20font-family%3D%22Arial%22%20font-size%3D%2228%22%20font-weight%3D%22700%22%20fill%3D%22%230f172a%22%3ETembro%20crop%3C%2Ftext%3E%3C%2Fsvg%3E",
-		aspect: 16 / 9,
-		defaultZoom: 1.15,
-		defaultRotation: -2
-	}) : Z.slug === "kanban" ? /* @__PURE__ */ Y(D, { 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 === "overlay" ? /* @__PURE__ */ X("div", {
-		className: "grid gap-3 sm:grid-cols-3",
-		children: [
-			/* @__PURE__ */ Y(i, { children: /* @__PURE__ */ X(a, {
-				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(i, { children: /* @__PURE__ */ X(a, {
-				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(i, { children: /* @__PURE__ */ X(a, {
-				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 === "resizable-panel" ? /* @__PURE__ */ X(J, { 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(K, {}),
-		/* @__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 === "saved-filter-select" ? /* @__PURE__ */ Y(m, {
-		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(f, {
-		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(r, {
-			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: "grid gap-4 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-sm font-semibold text-[color:var(--aui-page-foreground)]",
-				children: Z.title
-			}), /* @__PURE__ */ Y("p", {
-				className: "mt-2 max-w-xl text-sm leading-6 text-[color:var(--aui-page-muted)]",
-				children: "Overlay surfaces should stay compact, focused, and secondary to the route behind them."
-			})] }), /* @__PURE__ */ Y(o, {
-				variant: "outline",
-				children: "Overlay"
-			})]
-		}), /* @__PURE__ */ Y("div", {
-			className: "rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-			children: /* @__PURE__ */ X("div", {
-				className: "flex flex-wrap items-center justify-end gap-2",
-				children: [
-					/* @__PURE__ */ Y(e, {
-						variant: "ghost",
-						children: "Cancel"
-					}),
-					/* @__PURE__ */ Y(e, {
-						variant: "outline",
-						children: "Save draft"
-					}),
-					/* @__PURE__ */ Y(e, { children: "Confirm" })
-				]
-			})
-		})]
-	}) : Z.category === "Data Display" ? /* @__PURE__ */ X("div", {
-		className: "grid gap-4 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: "Display surfaces should prioritize readable values, compact metadata, and clear scanning order."
-			})] }), /* @__PURE__ */ Y(o, {
-				variant: "outline",
-				children: de
-			})]
-		}), /* @__PURE__ */ Y("div", {
-			className: "grid gap-3 md:grid-cols-3",
-			children: [
-				{
-					label: "Primary value",
-					value: "84.2k",
-					note: "Strong first read"
-				},
-				{
-					label: "Supporting meta",
-					value: "12 teams",
-					note: "Context stays secondary"
-				},
-				{
-					label: "Status",
-					value: "Live",
-					note: "One concise badge or tone"
-				}
-			].map((e) => /* @__PURE__ */ X("div", {
-				className: "rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-				children: [
-					/* @__PURE__ */ Y("p", {
-						className: "text-xs uppercase tracking-[0.18em] text-muted-foreground",
-						children: e.label
-					}),
-					/* @__PURE__ */ Y("p", {
-						className: "mt-2 text-lg font-semibold text-[color:var(--aui-page-foreground)]",
-						children: e.value
-					}),
-					/* @__PURE__ */ Y("p", {
-						className: "mt-1 text-sm text-muted-foreground",
-						children: e.note
-					})
-				]
-			}, e.label))
-		})]
-	}) : /* @__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(o, {
-				variant: "outline",
-				children: Z.category
-			})]
-		})
-	});
-}
-//#endregion
-export { Z as createGenericShowcaseDemo };