tembro 2.0.4 → 2.0.6

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

@@ -1,123 +1,121 @@
 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 { PasswordInput as r } from "../components/inputs/password-input.js";
+import { Input as i } from "../components/ui/input/index.js";
+import { Badge as a } from "../components/ui/badge/index.js";
+import { QuickActionGrid as o } from "../components/actions/quick-action-grid.js";
+import { SectionHeader as s } from "../components/layout/section-header.js";
+import { AnchorNav as ee } from "../components/navigation/anchor-nav.js";
+import { NavTabs as c } from "../components/navigation/nav-tabs.js";
+import { PageTabs as l } from "../components/navigation/page-tabs.js";
+import { Pagination as u } from "../components/navigation/pagination.js";
+import { StepperTabs as d } from "../components/navigation/stepper-tabs.js";
+import { FilterBar as f } from "../components/filters/filter-bar.js";
+import { AlertDialog as p } from "../components/overlay/alert-dialog.js";
+import { DialogActionButton as m, DialogActions as h } from "../components/overlay/dialog-actions.js";
+import { Drawer as g } from "../components/overlay/drawer.js";
+import { ColorInput as _ } from "../components/inputs/color-input.js";
+import { OtpInput as v } from "../components/inputs/otp-input.js";
+import { Rating as y } from "../components/inputs/rating.js";
+import { RangeSlider as b, Slider as x } from "../components/inputs/slider.js";
+import { TagInput as te } from "../components/inputs/tag-input.js";
+import { Alert as ne } from "../components/feedback/alert.js";
+import { PageState as re } from "../components/feedback/page-state.js";
+import { DescriptionList as S } from "../components/display/description-list.js";
+import { List as C } from "../components/display/list.js";
+import { Progress as w } from "../components/display/progress.js";
+import { ProgressCircle as T } from "../components/display/progress-circle.js";
+import { StatusDot as E } from "../components/display/status-dot.js";
+import { StatusLegend as D } from "../components/display/status-legend.js";
+import { Timeline as O } from "../components/display/timeline.js";
+import { UserCard as k } from "../components/display/user-card.js";
+import { StatCard as A } from "../components/layout/stat-card.js";
+import { CommandPalette as j } from "../components/command/command-palette.js";
+import { Calendar as M } from "../components/calendar/calendar.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 { ResourceDetailPage as R } from "../components/patterns/resource-detail-page.js";
+import { ResourcePage as z, ResourcePageSection as B } 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 { ArchiveIcon as V, BellIcon as H, ChevronRightIcon as ie, DownloadIcon as U, FilterIcon as W, LayoutDashboardIcon as G, MoreHorizontalIcon as K, SearchIcon as q, UploadCloudIcon as J } 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, {
+function ae(e, t, n) {
+	return e.kind === "inputs" ? /* @__PURE__ */ X(oe, {
 		slug: e.slug,
 		state: t,
 		setState: n
-	}) : e.kind === "form" ? /* @__PURE__ */ X(de, {
+	}) : e.kind === "form" ? /* @__PURE__ */ X(se, {
 		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, {
+	}) : e.kind === "overlay" ? /* @__PURE__ */ X(ce, { slug: e.slug }) : e.kind === "navigation" ? /* @__PURE__ */ X(le, { slug: e.slug }) : e.kind === "feedback" ? /* @__PURE__ */ X(ue, { slug: e.slug }) : e.kind === "display" ? /* @__PURE__ */ X(de, { slug: e.slug }) : e.kind === "actions" ? /* @__PURE__ */ X(fe, {
 		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;
+	}) : e.kind === "layout" ? /* @__PURE__ */ X(pe, { slug: e.slug }) : e.kind === "data-table" ? /* @__PURE__ */ X($, { slug: e.slug }) : e.kind === "calendar" ? /* @__PURE__ */ X(me, {}) : e.kind === "upload" ? /* @__PURE__ */ X(he, { slug: e.slug }) : e.kind === "wizard" ? /* @__PURE__ */ X(ge, { slug: e.slug }) : e.kind === "patterns" ? /* @__PURE__ */ X(_e, { slug: e.slug }) : null;
 }
 function Q({ tone: e, children: t }) {
-	return /* @__PURE__ */ X(s, {
+	return /* @__PURE__ */ X(a, {
 		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,
+function oe({ slug: e, state: t, setState: n }) {
+	let a = t.textValue, o = (e) => n({ textValue: e });
+	return e === "search-input" ? /* @__PURE__ */ X(i, {
+		type: "search",
+		value: a,
+		onValueChange: o,
 		resultCount: 12,
 		shortcut: "Ctrl K",
 		placeholder: "Search customers..."
-	}) : e === "password-input" ? /* @__PURE__ */ X(i, {
+	}) : e === "password-input" ? /* @__PURE__ */ X(r, {
 		value: "secret-token",
-		onValueChange: c,
+		onValueChange: o,
 		placeholder: "Password"
-	}) : e === "clearable-input" ? /* @__PURE__ */ X(r, {
-		value: s,
-		onValueChange: c,
-		placeholder: "Clearable input"
-	}) : e === "slider" ? /* @__PURE__ */ X(ie, {
+	}) : e === "clearable-input" ? /* @__PURE__ */ X(i, {
+		value: a,
+		onValueChange: o,
+		placeholder: "Clearable input",
+		clearable: !0
+	}) : e === "slider" ? /* @__PURE__ */ X(x, {
 		label: "Density",
 		description: "Tune content density.",
 		defaultValue: 64,
 		showValue: !0
-	}) : e === "range-slider" ? /* @__PURE__ */ X(re, {
+	}) : e === "range-slider" ? /* @__PURE__ */ X(b, {
 		label: "Revenue range",
 		description: "Filter between two values.",
 		defaultValue: [20, 80],
 		showValue: !0
-	}) : e === "rating" ? /* @__PURE__ */ X(ne, {
+	}) : e === "rating" ? /* @__PURE__ */ X(y, {
 		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, {
+	}) : e === "otp-input" ? /* @__PURE__ */ X(v, {
+		value: a.replace(/\D/g, "").slice(0, 6),
+		onValueChange: o
+	}) : e === "color-input" ? /* @__PURE__ */ X(_, {
 		defaultValue: "#22c55e",
 		label: "Accent color",
 		description: "Theme token preview."
-	}) : e === "tag-input" ? /* @__PURE__ */ X(ae, {
+	}) : e === "tag-input" ? /* @__PURE__ */ X(te, {
 		defaultValue: [
 			"dashboard",
 			"beta",
 			"ops"
 		],
 		placeholder: "Add label"
-	}) : /* @__PURE__ */ X(o, {
-		value: s,
+	}) : /* @__PURE__ */ X(i, {
+		value: a,
 		onChange: (e) => n({ textValue: e.currentTarget.value }),
 		placeholder: "Unified input"
 	});
 }
-function de({ state: e, setState: t }) {
+function se({ state: e, setState: t }) {
 	return /* @__PURE__ */ Z("div", {
 		className: "grid gap-4 md:grid-cols-2",
 		children: [/* @__PURE__ */ Z("label", {
@@ -127,7 +125,7 @@ function de({ state: e, setState: t }) {
 					className: "text-sm font-medium text-[color:var(--aui-page-foreground)]",
 					children: "Email address"
 				}),
-				/* @__PURE__ */ X(o, {
+				/* @__PURE__ */ X(i, {
 					value: e.textValue,
 					onChange: (e) => t({ textValue: e.currentTarget.value })
 				}),
@@ -143,7 +141,8 @@ function de({ state: e, setState: t }) {
 					className: "text-sm font-medium text-[color:var(--aui-page-foreground)]",
 					children: "Status"
 				}),
-				/* @__PURE__ */ X(a, {
+				/* @__PURE__ */ X(i, {
+					type: "search",
 					value: "Active customers",
 					resultCount: 7,
 					readOnly: !0
@@ -156,24 +155,24 @@ function de({ state: e, setState: t }) {
 		})]
 	});
 }
-function fe({ slug: t }) {
+function ce({ 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, {
+		children: /* @__PURE__ */ Z(h, {
 			align: "end",
 			children: [
-				/* @__PURE__ */ X(v, {
+				/* @__PURE__ */ X(m, {
 					variant: "ghost",
 					children: "Cancel"
 				}),
-				/* @__PURE__ */ X(v, {
+				/* @__PURE__ */ X(m, {
 					variant: "outline",
 					children: "Save draft"
 				}),
-				/* @__PURE__ */ X(v, { children: "Publish" })
+				/* @__PURE__ */ X(m, { children: "Publish" })
 			]
 		})
-	}) : t === "alert-dialog" ? /* @__PURE__ */ X(_, {
+	}) : t === "alert-dialog" ? /* @__PURE__ */ X(p, {
 		open: !1,
 		title: "Archive invoice?",
 		description: "This keeps the invoice readable but removes it from active queues.",
@@ -181,7 +180,7 @@ function fe({ slug: t }) {
 			variant: "destructive",
 			children: "Open alert"
 		})
-	}) : t === "drawer" ? /* @__PURE__ */ X(b, {
+	}) : t === "drawer" ? /* @__PURE__ */ X(g, {
 		open: !1,
 		trigger: /* @__PURE__ */ X(e, {
 			variant: "outline",
@@ -189,7 +188,7 @@ function fe({ slug: t }) {
 		}),
 		title: "Customer details",
 		description: "Side panel for fast inspection.",
-		children: /* @__PURE__ */ X(C, { items: [{
+		children: /* @__PURE__ */ X(S, { items: [{
 			key: "plan",
 			label: "Plan",
 			value: "Scale"
@@ -213,12 +212,12 @@ function fe({ slug: t }) {
 		]
 	});
 }
-function pe({ slug: e }) {
-	return e === "pagination" ? /* @__PURE__ */ X(p, {
+function le({ slug: e }) {
+	return e === "pagination" ? /* @__PURE__ */ X(u, {
 		page: 3,
 		pageCount: 9,
 		onPageChange: () => void 0
-	}) : e === "anchor-nav" ? /* @__PURE__ */ X(u, {
+	}) : e === "anchor-nav" ? /* @__PURE__ */ X(ee, {
 		orientation: "horizontal",
 		title: "Sections",
 		items: [
@@ -239,7 +238,7 @@ function pe({ slug: e }) {
 				href: "#api"
 			}
 		]
-	}) : e === "page-tabs" ? /* @__PURE__ */ X(f, {
+	}) : e === "page-tabs" ? /* @__PURE__ */ X(l, {
 		value: "overview",
 		variant: "pills",
 		items: [
@@ -257,7 +256,7 @@ function pe({ slug: e }) {
 				badge: "3"
 			}
 		]
-	}) : e === "stepper-tabs" ? /* @__PURE__ */ X(m, {
+	}) : e === "stepper-tabs" ? /* @__PURE__ */ X(d, {
 		value: "billing",
 		items: [
 			{
@@ -277,7 +276,7 @@ function pe({ slug: e }) {
 				description: "Confirm release"
 			}
 		]
-	}) : /* @__PURE__ */ X(d, {
+	}) : /* @__PURE__ */ X(c, {
 		value: "overview",
 		items: [
 			{
@@ -295,8 +294,8 @@ function pe({ slug: e }) {
 		]
 	});
 }
-function $({ slug: t }) {
-	return t === "alert" ? /* @__PURE__ */ X(x, {
+function ue({ slug: t }) {
+	return t === "alert" ? /* @__PURE__ */ X(ne, {
 		tone: "warning",
 		title: "Review needed",
 		description: "Billing rules changed and one approval is pending.",
@@ -304,7 +303,7 @@ function $({ slug: t }) {
 			size: "sm",
 			children: "Open"
 		})
-	}) : t === "page-state" ? /* @__PURE__ */ X(S, {
+	}) : t === "page-state" ? /* @__PURE__ */ X(re, {
 		title: "Workspace connected",
 		description: "The route is ready to accept live data and team actions.",
 		tone: "success",
@@ -334,8 +333,8 @@ function $({ slug: t }) {
 		]
 	});
 }
-function me({ slug: t }) {
-	return t === "description-list" ? /* @__PURE__ */ X(C, {
+function de({ slug: t }) {
+	return t === "description-list" ? /* @__PURE__ */ X(S, {
 		title: "Invoice details",
 		description: "Structured facts with responsive columns.",
 		items: [
@@ -363,16 +362,16 @@ function me({ slug: t }) {
 				value: "Finance team"
 			}
 		]
-	}) : t === "progress" ? /* @__PURE__ */ X(E, {
+	}) : t === "progress" ? /* @__PURE__ */ X(w, {
 		label: "Migration progress",
 		description: "Production rollout",
 		value: 68,
 		tone: "success",
 		showValue: !0
-	}) : t === "progress-circle" ? /* @__PURE__ */ X(D, {
+	}) : t === "progress-circle" ? /* @__PURE__ */ X(T, {
 		value: 72,
 		label: "Profile completed"
-	}) : t === "timeline" ? /* @__PURE__ */ X(A, {
+	}) : t === "timeline" ? /* @__PURE__ */ X(O, {
 		items: [
 			{
 				key: "created",
@@ -398,7 +397,7 @@ function me({ slug: t }) {
 		],
 		pending: !0,
 		pendingLabel: "Paid"
-	}) : t === "metric-card" || t === "stat-card" ? /* @__PURE__ */ X(R, {
+	}) : t === "metric-card" || t === "stat-card" ? /* @__PURE__ */ X(A, {
 		title: "Revenue",
 		value: "$84.2k",
 		description: "Compared with last month",
@@ -406,20 +405,20 @@ function me({ slug: t }) {
 			value: "+12.4%",
 			tone: "success"
 		},
-		icon: /* @__PURE__ */ X(K, {})
+		icon: /* @__PURE__ */ X(G, {})
 	}) : t === "status-dot" ? /* @__PURE__ */ Z("div", {
 		className: "grid gap-3",
 		children: [
-			/* @__PURE__ */ X(O, {
+			/* @__PURE__ */ X(E, {
 				tone: "success",
 				pulse: !0,
 				label: "API healthy"
 			}),
-			/* @__PURE__ */ X(O, {
+			/* @__PURE__ */ X(E, {
 				tone: "warning",
 				label: "Sync delayed"
 			}),
-			/* @__PURE__ */ X(O, {
+			/* @__PURE__ */ X(E, {
 				tone: "danger",
 				label: "Webhook failed"
 			})
@@ -427,48 +426,20 @@ function me({ slug: t }) {
 	}) : t === "delta-badge" ? /* @__PURE__ */ Z("div", {
 		className: "flex flex-wrap gap-2",
 		children: [
-			/* @__PURE__ */ X(s, {
+			/* @__PURE__ */ X(a, {
 				variant: "secondary",
 				children: "+12.4%"
 			}),
-			/* @__PURE__ */ X(s, {
+			/* @__PURE__ */ X(a, {
 				variant: "outline",
 				children: "-3.1%"
 			}),
-			/* @__PURE__ */ X(s, {
+			/* @__PURE__ */ X(a, {
 				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: [
+	}) : t === "notification-center" ? /* @__PURE__ */ X(C, { items: [
 		{
 			key: "1",
 			title: "Build completed",
@@ -487,20 +458,7 @@ function me({ slug: t }) {
 			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: [
+	] }) : t === "data-list" ? /* @__PURE__ */ X(C, { items: [
 		{
 			key: "1",
 			title: "Enterprise plan",
@@ -519,7 +477,7 @@ function me({ slug: t }) {
 			description: "Lightweight team setup",
 			extra: "$49"
 		}
-	] }) : t === "status-legend" ? /* @__PURE__ */ X(k, {
+	] }) : t === "status-legend" ? /* @__PURE__ */ X(D, {
 		title: "Delivery states",
 		description: "Explain what each state means and how often it appears.",
 		orientation: "grid",
@@ -546,7 +504,7 @@ function me({ slug: t }) {
 				count: 1
 			}
 		]
-	}) : t === "trend-card" || t === "comparison-card" ? /* @__PURE__ */ X(R, {
+	}) : t === "trend-card" || t === "comparison-card" ? /* @__PURE__ */ X(A, {
 		title: t === "trend-card" ? "Weekly revenue" : "Current vs previous",
 		value: "$84.2k",
 		description: "Compared with last month",
@@ -554,8 +512,8 @@ function me({ slug: t }) {
 			value: "+12.4%",
 			tone: "success"
 		},
-		icon: /* @__PURE__ */ X(K, {})
-	}) : /* @__PURE__ */ X(j, {
+		icon: /* @__PURE__ */ X(G, {})
+	}) : /* @__PURE__ */ X(k, {
 		name: "Azamat Jurayev",
 		description: "Product designer and maintainer",
 		meta: "Admin workspace",
@@ -565,19 +523,31 @@ function me({ slug: t }) {
 		})
 	});
 }
-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 }),
+function fe({ slug: r, state: a, setState: s }) {
+	return r === "filter-bar" ? /* @__PURE__ */ X(f, {
+		search: /* @__PURE__ */ X(i, {
+			type: "search",
+			value: a.textValue,
+			onValueChange: (e) => s({ textValue: e }),
 			placeholder: "Search invoices..."
 		}),
-		activeCount: 2,
-		onReset: () => o({ textValue: "" }),
+		onReset: () => s({ textValue: "" }),
+		chips: [{
+			key: "status",
+			label: "Status",
+			value: "Active",
+			tone: "success"
+		}, {
+			key: "owner",
+			label: "Owner",
+			value: "Azamat",
+			tone: "default"
+		}],
+		onRemoveChip: () => void 0,
 		filters: /* @__PURE__ */ Z(e, {
 			variant: "outline",
 			size: "sm",
-			children: [/* @__PURE__ */ X(G, { "data-icon": "inline-start" }), "Status"]
+			children: [/* @__PURE__ */ X(W, { "data-icon": "inline-start" }), "Status"]
 		}),
 		actions: /* @__PURE__ */ X(e, {
 			size: "sm",
@@ -587,11 +557,11 @@ function he({ slug: r, state: i, setState: o }) {
 		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", {
+			children: [/* @__PURE__ */ X(q, { 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, {
+		}), /* @__PURE__ */ X(j, {
 			open: !1,
 			onOpenChange: () => void 0,
 			groups: [{
@@ -600,11 +570,11 @@ function he({ slug: r, state: i, setState: o }) {
 				items: [{
 					id: "docs",
 					label: "Open docs",
-					icon: /* @__PURE__ */ X(J, { className: "size-4" })
+					icon: /* @__PURE__ */ X(q, { className: "size-4" })
 				}, {
 					id: "components",
 					label: "Browse components",
-					icon: /* @__PURE__ */ X(K, { className: "size-4" })
+					icon: /* @__PURE__ */ X(G, { className: "size-4" })
 				}]
 			}]
 		})]
@@ -621,7 +591,7 @@ function he({ slug: r, state: i, setState: o }) {
 			key: "month",
 			label: "Month"
 		}
-	] }) : r === "quick-action-grid" ? /* @__PURE__ */ X(c, {
+	] }) : r === "quick-action-grid" ? /* @__PURE__ */ X(o, {
 		columns: 3,
 		items: [
 			{
@@ -643,9 +613,9 @@ function he({ slug: r, state: i, setState: o }) {
 				badge: "S"
 			}
 		]
-	}) : r === "filter-chips" || r === "data-table-saved-filters" ? /* @__PURE__ */ Z("div", {
+	}) : r === "data-table-saved-filters" ? /* @__PURE__ */ Z("div", {
 		className: "grid gap-3",
-		children: [/* @__PURE__ */ X(h, {
+		children: [/* @__PURE__ */ X(f, {
 			chips: [
 				{
 					key: "status",
@@ -666,9 +636,9 @@ function he({ slug: r, state: i, setState: o }) {
 					tone: "info"
 				}
 			],
-			onRemove: () => void 0,
-			onClear: () => void 0
-		}), r === "data-table-saved-filters" ? /* @__PURE__ */ X(n, {
+			onRemoveChip: () => void 0,
+			onReset: () => void 0
+		}), /* @__PURE__ */ X(n, {
 			attached: !1,
 			items: [
 				{
@@ -685,7 +655,7 @@ function he({ slug: r, state: i, setState: o }) {
 					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", {
@@ -700,17 +670,17 @@ function he({ slug: r, state: i, setState: o }) {
 				{
 					key: "open",
 					label: "Open",
-					icon: /* @__PURE__ */ X(W, { className: "size-4" })
+					icon: /* @__PURE__ */ X(ie, { className: "size-4" })
 				},
 				{
 					key: "download",
 					label: "Download",
-					icon: /* @__PURE__ */ X(se, { className: "size-4" })
+					icon: /* @__PURE__ */ X(U, { className: "size-4" })
 				},
 				{
 					key: "archive",
 					label: "Archive",
-					icon: /* @__PURE__ */ X(H, { className: "size-4" }),
+					icon: /* @__PURE__ */ X(V, { className: "size-4" }),
 					destructive: !0
 				}
 			],
@@ -718,19 +688,19 @@ function he({ slug: r, state: i, setState: o }) {
 				variant: "outline",
 				size: "icon-sm",
 				"aria-label": "Open actions",
-				children: /* @__PURE__ */ X(q, {})
+				children: /* @__PURE__ */ X(K, {})
 			})
 		})]
 	});
 }
-function ge({ slug: t }) {
+function pe({ 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", {
+		left: /* @__PURE__ */ Z(Y, { children: [/* @__PURE__ */ X(G, { className: "size-4" }), /* @__PURE__ */ X("span", {
 			className: "font-medium",
 			children: "Dashboard"
 		})] }),
-		center: /* @__PURE__ */ X(s, {
+		center: /* @__PURE__ */ X(a, {
 			variant: "secondary",
 			children: "Preview"
 		}),
@@ -738,13 +708,13 @@ function ge({ slug: t }) {
 			variant: "ghost",
 			size: "icon-sm",
 			"aria-label": "Notifications",
-			children: /* @__PURE__ */ X(U, {})
+			children: /* @__PURE__ */ X(H, {})
 		}), /* @__PURE__ */ X(e, {
 			size: "sm",
 			children: "Deploy"
 		})] }),
 		className: "rounded-xl border border-[color:var(--aui-divider)]"
-	}) : t === "section-header" ? /* @__PURE__ */ X(l, {
+	}) : t === "section-header" ? /* @__PURE__ */ X(s, {
 		eyebrow: "Components",
 		title: "Production-ready surfaces",
 		description: "SectionHeader keeps copy, metadata and actions aligned.",
@@ -752,7 +722,7 @@ function ge({ slug: t }) {
 			size: "sm",
 			children: "Add component"
 		})
-	}) : /* @__PURE__ */ X(R, {
+	}) : /* @__PURE__ */ X(A, {
 		title: "Revenue",
 		value: "$84.2k",
 		description: "Compared with last month",
@@ -763,13 +733,14 @@ function ge({ slug: t }) {
 		helperText: "StatCard keeps KPI, helper text and trend in one compact tile."
 	});
 }
-function _e({ slug: t }) {
+function $({ 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, {
+				children: [/* @__PURE__ */ X(i, {
+					type: "search",
 					value: "",
 					placeholder: "Search rows...",
 					className: "max-w-xs",
@@ -779,7 +750,7 @@ function _e({ slug: t }) {
 					children: [/* @__PURE__ */ Z(e, {
 						variant: "outline",
 						size: "sm",
-						children: [/* @__PURE__ */ X(G, { "data-icon": "inline-start" }), "Filters"]
+						children: [/* @__PURE__ */ X(W, { "data-icon": "inline-start" }), "Filters"]
 					}), /* @__PURE__ */ X(e, {
 						size: "sm",
 						children: "Create"
@@ -822,7 +793,7 @@ function _e({ slug: t }) {
 						variant: "ghost",
 						size: "icon-sm",
 						"aria-label": "Row actions",
-						children: /* @__PURE__ */ X(q, {})
+						children: /* @__PURE__ */ X(K, {})
 					}) })
 				]
 			}, t)),
@@ -838,7 +809,7 @@ function _e({ slug: t }) {
 					"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, {
+				}[t] ?? "DataTable part", " preview"] }), /* @__PURE__ */ X(u, {
 					page: 1,
 					pageCount: 4,
 					onPageChange: () => void 0,
@@ -848,14 +819,14 @@ function _e({ slug: t }) {
 		]
 	});
 }
-function ve() {
-	return /* @__PURE__ */ X(oe, {
+function me() {
+	return /* @__PURE__ */ X(M, {
 		value: "2026-06-18",
 		defaultMonth: "2026-06-01",
 		onValueChange: () => void 0
 	});
 }
-function ye({ slug: e }) {
+function he({ slug: e }) {
 	return e === "file-dropzone" ? /* @__PURE__ */ X(P, {
 		label: "Drop contract files",
 		description: "PDF, PNG or CSV up to 10MB."
@@ -868,7 +839,7 @@ function ye({ slug: e }) {
 		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)]" })
+			children: /* @__PURE__ */ X(J, { 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.",
@@ -876,7 +847,7 @@ function ye({ slug: e }) {
 		})]
 	});
 }
-function be({ slug: e }) {
+function ge({ slug: e }) {
 	let t = [
 		{
 			id: "profile",
@@ -917,17 +888,17 @@ function be({ slug: e }) {
 		})
 	});
 }
-function xe({ slug: t }) {
-	return t === "resource-detail-page" ? /* @__PURE__ */ X(z, {
+function _e({ slug: t }) {
+	return t === "resource-detail-page" ? /* @__PURE__ */ X(R, {
 		title: "Customer profile",
 		description: "ResourceDetailPage organizes detail screens.",
 		actions: /* @__PURE__ */ X(e, {
 			size: "sm",
 			children: "Edit"
 		}),
-		children: /* @__PURE__ */ X(V, {
+		children: /* @__PURE__ */ X(B, {
 			title: "Account",
-			children: /* @__PURE__ */ X(C, { items: [{
+			children: /* @__PURE__ */ X(S, { items: [{
 				key: "plan",
 				label: "Plan",
 				value: "Scale"
@@ -937,7 +908,7 @@ function xe({ slug: t }) {
 				value: "Design team"
 			}] })
 		})
-	}) : /* @__PURE__ */ X(B, {
+	}) : /* @__PURE__ */ X(z, {
 		title: "Customers",
 		description: "ResourcePage combines header, stats, filters and sections.",
 		actions: /* @__PURE__ */ X(e, {
@@ -946,14 +917,14 @@ function xe({ slug: t }) {
 		}),
 		stats: /* @__PURE__ */ Z("div", {
 			className: "grid gap-3 sm:grid-cols-2",
-			children: [/* @__PURE__ */ X(R, {
+			children: [/* @__PURE__ */ X(A, {
 				title: "Active",
 				value: "2,418",
 				trend: {
 					value: "+8%",
 					tone: "success"
 				}
-			}), /* @__PURE__ */ X(R, {
+			}), /* @__PURE__ */ X(A, {
 				title: "Health",
 				value: "94%",
 				trend: {
@@ -962,17 +933,18 @@ function xe({ slug: t }) {
 				}
 			})]
 		}),
-		filters: /* @__PURE__ */ X(g, {
-			search: /* @__PURE__ */ X(a, {
+		filters: /* @__PURE__ */ X(f, {
+			search: /* @__PURE__ */ X(i, {
+				type: "search",
 				value: "",
 				placeholder: "Search...",
 				readOnly: !0
 			}),
 			activeCount: 1
 		}),
-		children: /* @__PURE__ */ X(V, {
+		children: /* @__PURE__ */ X(B, {
 			title: "Recent activity",
-			children: /* @__PURE__ */ X(A, { items: [{
+			children: /* @__PURE__ */ X(O, { items: [{
 				key: "a",
 				title: "Customer added",
 				description: "Acme workspace",
@@ -987,4 +959,4 @@ function xe({ slug: t }) {
 	});
 }
 //#endregion
-export { le as renderShowcasePreview };
+export { ae as renderShowcasePreview };