tembro 2.1.8 → 2.1.10

package/dist/showcase/fallback.js

@@ -5,54 +5,52 @@ 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 } from "../components/ui/card/index.js";
 import { Badge as s } from "../components/ui/badge/index.js";
-import { Accordion as ee } from "../components/ui/accordion/index.js";
-import { Skeleton as c, SkeletonCard as l, SkeletonText as u } from "../components/ui/skeleton/index.js";
-import { Divider as d } from "../components/ui/divider/index.js";
-import { SegmentedControl as f } from "../components/ui/segmented-control/index.js";
-import { Spinner as p } from "../components/ui/spinner/index.js";
-import { QuickActionGrid as m } from "../components/actions/quick-action-grid.js";
+import { Accordion as c } from "../components/ui/accordion/index.js";
+import { Skeleton as l, SkeletonCard as u, SkeletonText as d } from "../components/ui/skeleton/index.js";
+import { Divider as f } from "../components/ui/divider/index.js";
+import { SegmentedControl as p } from "../components/ui/segmented-control/index.js";
+import { Spinner as m } from "../components/ui/spinner/index.js";
+import { QuickActionGrid as ee } from "../components/actions/quick-action-grid.js";
 import { Section as te } from "../components/layout/section.js";
 import { StickyFooterBar as ne } from "../components/layout/sticky-footer-bar.js";
 import { PageTabs as re } from "../components/navigation/page-tabs.js";
 import { StepperTabs as ie } from "../components/navigation/stepper-tabs.js";
 import { FilterBar as ae } from "../components/filters/filter-bar.js";
 import { SavedFilterSelect as oe } from "../components/filters/saved-filter-select.js";
-import { ColorInput as se } from "../components/inputs/color-input.js";
-import { OtpInput as ce } from "../components/inputs/otp-input.js";
-import { QuantityStepper as le } from "../components/inputs/quantity-stepper.js";
-import { Rating as ue } from "../components/inputs/rating.js";
-import { RangeSlider as de, Slider as fe } from "../components/inputs/slider.js";
-import { TagInput as h } from "../components/inputs/tag-input.js";
-import { JsonInput as g } from "../components/inputs/json-input.js";
-import { TimePicker as _, TimeRangePicker as v } from "../components/inputs/time-picker.js";
-import { Alert as y } from "../components/feedback/alert.js";
-import { PageState as b } from "../components/feedback/page-state.js";
-import { Avatar as x, AvatarGroup as S } from "../components/display/avatar.js";
-import { Descriptions as C } from "../components/display/descriptions.js";
-import { KanbanBoard as w } from "../components/display/kanban.js";
-import { CodeBlock as T } from "../components/display/code-block.js";
-import { DataState as E } from "../components/display/data-state.js";
-import { List as D } from "../components/display/list.js";
-import { PropertyGrid as O } from "../components/display/property-grid.js";
-import { Statistic as k, StatisticCard as A, StatisticGrid as j } from "../components/display/statistic.js";
-import { StatusLegend as M } from "../components/display/status-legend.js";
-import { TreeView as N } from "../components/display/tree-view.js";
-import { StatCard as P } from "../components/layout/stat-card.js";
-import { Carousel as F, CarouselItem as I } from "../components/display/carousel.js";
-import { QRCode as L } from "../components/display/qr-code.js";
-import { Tag as R, TagGroup as z } from "../components/display/tag.js";
-import { Heading as B, Mark as V, Text as H } from "../components/display/typography.js";
-import { CalendarScheduler as pe } from "../components/modern/calendar-scheduler.js";
-import { DualListPicker as me } from "../components/modern/dual-list-picker.js";
-import { Menubar as he, MenubarContent as ge, MenubarItem as U, MenubarMenu as W, MenubarTrigger as G } from "../components/modern/menubar.js";
-import { NavigationMenu as _e, NavigationMenuItem as K, NavigationMenuLink as q, NavigationMenuList as ve } from "../components/modern/navigation-menu.js";
-import { ResizableHandle as ye, ResizablePanel as J, ResizablePanelGroup as be } from "../components/modern/resizable-panel.js";
-import { RichTextEditor as xe } from "../components/modern/rich-text-editor.js";
-import { Tour as Se } from "../components/modern/tour.js";
-import { Fragment as Ce, jsx as Y, jsxs as X } from "react/jsx-runtime";
+import { OtpInput as se } from "../components/inputs/otp-input.js";
+import { Rating as ce } from "../components/inputs/rating.js";
+import { RangeSlider as le, Slider as ue } from "../components/inputs/slider.js";
+import { TagInput as de } from "../components/inputs/tag-input.js";
+import { JsonInput as h } from "../components/inputs/json-input.js";
+import { TimePicker as g, TimeRangePicker as _ } from "../components/inputs/time-picker.js";
+import { Alert as v } from "../components/feedback/alert.js";
+import { PageState as y } from "../components/feedback/page-state.js";
+import { Avatar as b, AvatarGroup as x } from "../components/display/avatar.js";
+import { Descriptions as S } from "../components/display/descriptions.js";
+import { KanbanBoard as C } from "../components/display/kanban.js";
+import { CodeBlock as w } from "../components/display/code-block.js";
+import { DataState as T } from "../components/display/data-state.js";
+import { List as E } from "../components/display/list.js";
+import { PropertyGrid as D } from "../components/display/property-grid.js";
+import { Statistic as O, StatisticCard as k, StatisticGrid as A } from "../components/display/statistic.js";
+import { StatusLegend as j } from "../components/display/status-legend.js";
+import { TreeView as M } from "../components/display/tree-view.js";
+import { StatCard as N } from "../components/layout/stat-card.js";
+import { Carousel as P, CarouselItem as F } from "../components/display/carousel.js";
+import { QRCode as I } from "../components/display/qr-code.js";
+import { Tag as L, TagGroup as R } from "../components/display/tag.js";
+import { Heading as fe, Mark as z, Text as B } from "../components/display/typography.js";
+import { CalendarScheduler as V } from "../components/modern/calendar-scheduler.js";
+import { DualListPicker as pe } from "../components/modern/dual-list-picker.js";
+import { Menubar as me, MenubarContent as he, MenubarItem as H, MenubarMenu as U, MenubarTrigger as W } from "../components/modern/menubar.js";
+import { NavigationMenu as ge, NavigationMenuItem as G, NavigationMenuLink as K, NavigationMenuList as _e } from "../components/modern/navigation-menu.js";
+import { ResizableHandle as ve, ResizablePanel as q, ResizablePanelGroup as ye } from "../components/modern/resizable-panel.js";
+import { RichTextEditor as be } from "../components/modern/rich-text-editor.js";
+import { Tour as xe } from "../components/modern/tour.js";
+import { Fragment as J, 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 = we(e.slug);
+	let r = Se(e.slug);
 	return {
 		Showcase: (n) => /* @__PURE__ */ Y(Q, {
 			...n,
@@ -71,7 +69,7 @@ function Z({ item: e, groupLabel: t, importSnippet: n }) {
 		}
 	};
 }
-function we(e) {
+function Se(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 }) {
@@ -133,8 +131,8 @@ function Q({ item: e, groupLabel: t, state: n, setState: r, mode: i }) {
 		]
 	});
 }
-function $(Z, we, Q, $, Te) {
-	return Z.slug === "accordion" ? /* @__PURE__ */ Y(ee, {
+function $(Z, Se, Q, $, Ce) {
+	return Z.slug === "accordion" ? /* @__PURE__ */ Y(c, {
 		type: "single",
 		defaultValue: "api",
 		items: [{
@@ -151,12 +149,12 @@ function $(Z, we, Q, $, Te) {
 	}) : Z.slug === "avatar" ? /* @__PURE__ */ X("div", {
 		className: "flex flex-wrap items-center gap-4",
 		children: [
-			/* @__PURE__ */ Y(x, { name: "Azamat UI" }),
-			/* @__PURE__ */ Y(x, {
+			/* @__PURE__ */ Y(b, { name: "Azamat UI" }),
+			/* @__PURE__ */ Y(b, {
 				fallback: "AJ",
 				shape: "rounded"
 			}),
-			/* @__PURE__ */ Y(S, { items: [
+			/* @__PURE__ */ Y(x, { items: [
 				{
 					key: "1",
 					name: "Azamat"
@@ -175,7 +173,7 @@ function $(Z, we, Q, $, Te) {
 				}
 			] })
 		]
-	}) : Z.slug === "calendar-scheduler" ? /* @__PURE__ */ Y(pe, { events: [
+	}) : Z.slug === "calendar-scheduler" ? /* @__PURE__ */ Y(V, { events: [
 		{
 			id: "1",
 			title: "Design review",
@@ -197,9 +195,9 @@ function $(Z, we, Q, $, Te) {
 			time: "09:30",
 			tone: "success"
 		}
-	] }) : Z.slug === "carousel" ? /* @__PURE__ */ X(F, {
+	] }) : Z.slug === "carousel" ? /* @__PURE__ */ X(P, {
 		index: 0,
-		children: [/* @__PURE__ */ Y(I, { children: /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+		children: [/* @__PURE__ */ Y(F, { children: /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
 			className: "p-5",
 			children: [/* @__PURE__ */ Y("p", {
 				className: "text-lg font-semibold",
@@ -208,7 +206,7 @@ function $(Z, we, Q, $, Te) {
 				className: "mt-2 text-sm text-muted-foreground",
 				children: "Compact KPI slide for weekly review."
 			})]
-		}) }) }), /* @__PURE__ */ Y(I, { children: /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
+		}) }) }), /* @__PURE__ */ Y(F, { children: /* @__PURE__ */ Y(a, { children: /* @__PURE__ */ X(o, {
 			className: "p-5",
 			children: [/* @__PURE__ */ Y("p", {
 				className: "text-lg font-semibold",
@@ -218,7 +216,7 @@ function $(Z, we, Q, $, Te) {
 				children: "Second slide with account risk summary."
 			})]
 		}) }) })]
-	}) : Z.slug === "code-block" ? /* @__PURE__ */ Y(T, {
+	}) : Z.slug === "code-block" ? /* @__PURE__ */ Y(w, {
 		title: "Install",
 		language: "bash",
 		code: "npx tembro init --template next\nnpx tembro add button"
@@ -229,7 +227,7 @@ function $(Z, we, Q, $, Te) {
 		label: "CLI command",
 		description: "Quick source-copy command",
 		value: "npx tembro add input"
-	}) : Z.slug === "data-state" ? /* @__PURE__ */ Y(E, {
+	}) : Z.slug === "data-state" ? /* @__PURE__ */ Y(T, {
 		status: "empty",
 		title: "No matching rows",
 		description: "Try another filter or import the first record.",
@@ -237,7 +235,7 @@ function $(Z, we, Q, $, Te) {
 			size: "sm",
 			children: "Import CSV"
 		})
-	}) : Z.slug === "descriptions" ? /* @__PURE__ */ Y(C, {
+	}) : Z.slug === "descriptions" ? /* @__PURE__ */ Y(S, {
 		title: "Workspace details",
 		columns: 3,
 		items: [
@@ -264,13 +262,13 @@ function $(Z, we, Q, $, Te) {
 				className: "text-sm font-medium",
 				children: "Section above"
 			}),
-			/* @__PURE__ */ Y(d, { label: "Summary" }),
+			/* @__PURE__ */ Y(f, { label: "Summary" }),
 			/* @__PURE__ */ Y("div", {
 				className: "text-sm text-muted-foreground",
 				children: "Section below"
 			})
 		]
-	}) : Z.slug === "dual-list-picker" ? /* @__PURE__ */ Y(me, {
+	}) : Z.slug === "dual-list-picker" ? /* @__PURE__ */ Y(pe, {
 		picked: ["billing", "support"],
 		items: [
 			{
@@ -290,7 +288,7 @@ function $(Z, we, Q, $, Te) {
 				label: "Security"
 			}
 		]
-	}) : Z.slug === "segmented-control" ? /* @__PURE__ */ Y(f, {
+	}) : Z.slug === "segmented-control" ? /* @__PURE__ */ Y(p, {
 		options: [
 			{
 				value: "overview",
@@ -309,41 +307,41 @@ function $(Z, we, Q, $, Te) {
 	}) : Z.slug === "spinner" ? /* @__PURE__ */ X("div", {
 		className: "flex items-center gap-5",
 		children: [
-			/* @__PURE__ */ Y(p, { size: "xs" }),
-			/* @__PURE__ */ Y(p, { size: "sm" }),
-			/* @__PURE__ */ Y(p, { size: "md" }),
-			/* @__PURE__ */ Y(p, { size: "lg" })
+			/* @__PURE__ */ Y(m, { size: "xs" }),
+			/* @__PURE__ */ Y(m, { size: "sm" }),
+			/* @__PURE__ */ Y(m, { size: "md" }),
+			/* @__PURE__ */ Y(m, { size: "lg" })
 		]
 	}) : Z.slug === "skeleton" ? /* @__PURE__ */ X("div", {
 		className: "grid gap-3",
 		children: [
-			/* @__PURE__ */ Y(c, { className: "h-10 w-full" }),
-			/* @__PURE__ */ Y(u, { rows: 3 }),
-			/* @__PURE__ */ Y(l, { avatar: !0 })
+			/* @__PURE__ */ Y(l, { className: "h-10 w-full" }),
+			/* @__PURE__ */ Y(d, { rows: 3 }),
+			/* @__PURE__ */ Y(u, { avatar: !0 })
 		]
-	}) : Z.slug === "slider" ? /* @__PURE__ */ Y(fe, {
+	}) : Z.slug === "slider" ? /* @__PURE__ */ Y(ue, {
 		label: "Spacing scale",
 		description: "Adjust dashboard density.",
 		defaultValue: 64,
 		showValue: !0
-	}) : Z.slug === "statistic" ? /* @__PURE__ */ X(j, {
+	}) : Z.slug === "statistic" ? /* @__PURE__ */ X(A, {
 		columns: 3,
 		children: [
-			/* @__PURE__ */ Y(A, {
+			/* @__PURE__ */ Y(k, {
 				label: "ARR",
 				value: "$84.2k",
 				change: "+12.4%",
 				trend: "up",
 				description: "vs previous month"
 			}),
-			/* @__PURE__ */ Y(k, {
+			/* @__PURE__ */ Y(O, {
 				label: "MRR",
 				value: "$7.0k",
 				change: "+3.1%",
 				trend: "up",
 				description: "Live subscriptions"
 			}),
-			/* @__PURE__ */ Y(k, {
+			/* @__PURE__ */ Y(O, {
 				label: "Churn",
 				value: "1.9%",
 				change: "-0.4%",
@@ -361,7 +359,7 @@ function $(Z, we, Q, $, Te) {
 				className: "text-sm font-medium",
 				children: "2 unsaved changes"
 			}),
-			end: /* @__PURE__ */ X(Ce, { children: [/* @__PURE__ */ Y(e, {
+			end: /* @__PURE__ */ X(J, { children: [/* @__PURE__ */ Y(e, {
 				size: "sm",
 				variant: "outline",
 				children: "Discard"
@@ -370,30 +368,30 @@ function $(Z, we, Q, $, Te) {
 				children: "Save"
 			})] })
 		})]
-	}) : Z.slug === "tag" ? /* @__PURE__ */ X(z, { children: [
-		/* @__PURE__ */ Y(R, { children: "Default" }),
-		/* @__PURE__ */ Y(R, {
+	}) : Z.slug === "tag" ? /* @__PURE__ */ X(R, { children: [
+		/* @__PURE__ */ Y(L, { children: "Default" }),
+		/* @__PURE__ */ Y(L, {
 			tone: "success",
 			children: "Live"
 		}),
-		/* @__PURE__ */ Y(R, {
+		/* @__PURE__ */ Y(L, {
 			tone: "warning",
 			children: "Review"
 		}),
-		/* @__PURE__ */ Y(R, {
+		/* @__PURE__ */ Y(L, {
 			tone: "danger",
 			children: "Blocked"
 		})
 	] }) : Z.slug === "time-picker" ? /* @__PURE__ */ X("div", {
 		className: "grid gap-3",
-		children: [/* @__PURE__ */ Y(_, {
+		children: [/* @__PURE__ */ Y(g, {
 			label: "Start time",
 			defaultValue: "09:30"
-		}), /* @__PURE__ */ Y(v, {
+		}), /* @__PURE__ */ Y(_, {
 			from: "09:30",
 			to: "17:30"
 		})]
-	}) : Z.slug === "tour" ? /* @__PURE__ */ Y(Se, {
+	}) : Z.slug === "tour" ? /* @__PURE__ */ Y(xe, {
 		index: 1,
 		steps: [
 			{
@@ -409,7 +407,7 @@ function $(Z, we, Q, $, Te) {
 				description: "Open docs, API and preview together."
 			}
 		]
-	}) : Z.slug === "tree-view" ? /* @__PURE__ */ Y(N, {
+	}) : Z.slug === "tree-view" ? /* @__PURE__ */ Y(M, {
 		defaultExpandedKeys: ["components", "inputs"],
 		selectedKey: "button",
 		items: [{
@@ -430,41 +428,41 @@ function $(Z, we, Q, $, Te) {
 	}) : Z.slug === "typography" ? /* @__PURE__ */ X("div", {
 		className: "grid gap-3",
 		children: [
-			/* @__PURE__ */ Y(B, {
+			/* @__PURE__ */ Y(fe, {
 				level: 2,
 				children: "Dashboard typography"
 			}),
-			/* @__PURE__ */ Y(H, { children: "Readable defaults for product copy and operational labels." }),
+			/* @__PURE__ */ Y(B, { 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(H, {
+			/* @__PURE__ */ X(B, {
 				muted: !0,
 				size: "sm",
 				children: [
 					"Use ",
-					/* @__PURE__ */ Y(V, { children: "Mark" }),
+					/* @__PURE__ */ Y(z, { children: "Mark" }),
 					" only for emphasis that matters."
 				]
 			})
 		]
-	}) : Z.slug === "range-slider" ? /* @__PURE__ */ Y(de, {
+	}) : Z.slug === "range-slider" ? /* @__PURE__ */ Y(le, {
 		label: "Revenue band",
 		description: "Filter a metric window.",
 		defaultValue: [20, 80],
 		showValue: !0
-	}) : Z.slug === "rating" ? /* @__PURE__ */ Y(ue, {
+	}) : Z.slug === "rating" ? /* @__PURE__ */ Y(ce, {
 		defaultValue: 4,
 		labels: { clear: "Reset" }
-	}) : Z.slug === "otp-input" ? /* @__PURE__ */ Y(ce, {
+	}) : Z.slug === "otp-input" ? /* @__PURE__ */ Y(se, {
 		value: Q.textValue.replace(/\D/g, "").slice(0, 6),
 		onValueChange: (e) => $({ textValue: e })
-	}) : Z.slug === "color-input" ? /* @__PURE__ */ Y(se, {
+	}) : Z.slug === "color-input" ? /* @__PURE__ */ Y(i, {
+		type: "color",
 		defaultValue: "#22c55e",
-		label: "Accent color",
-		description: "Theme token preview."
-	}) : Z.slug === "tag-input" ? /* @__PURE__ */ Y(h, {
+		"aria-label": "Accent color"
+	}) : Z.slug === "tag-input" ? /* @__PURE__ */ Y(de, {
 		defaultValue: [
 			"dashboard",
 			"beta",
@@ -484,7 +482,7 @@ function $(Z, we, Q, $, Te) {
 			key: "month",
 			label: "Month"
 		}
-	] }) : Z.slug === "quick-action-grid" || Z.slug === "command-bar" ? /* @__PURE__ */ Y(m, {
+	] }) : Z.slug === "quick-action-grid" || Z.slug === "command-bar" ? /* @__PURE__ */ Y(ee, {
 		columns: Z.slug === "command-bar" ? 4 : 3,
 		compact: Z.slug === "command-bar",
 		items: [
@@ -588,7 +586,7 @@ function $(Z, we, Q, $, Te) {
 				description: "Confirm release"
 			}
 		]
-	}) : Z.slug === "alert" ? /* @__PURE__ */ Y(y, {
+	}) : Z.slug === "alert" ? /* @__PURE__ */ Y(v, {
 		tone: "warning",
 		title: "Review needed",
 		description: "Billing rules changed and one approval is pending.",
@@ -596,7 +594,7 @@ function $(Z, we, Q, $, Te) {
 			size: "sm",
 			children: "Open"
 		})
-	}) : Z.slug === "page-state" ? /* @__PURE__ */ Y(b, {
+	}) : Z.slug === "page-state" ? /* @__PURE__ */ Y(y, {
 		title: "Workspace connected",
 		description: "The route is ready to accept live data and team actions.",
 		tone: "success",
@@ -604,7 +602,7 @@ function $(Z, we, Q, $, Te) {
 			size: "sm",
 			children: "Continue"
 		})
-	}) : Z.slug === "data-list" || Z.slug === "list" ? /* @__PURE__ */ Y(D, { items: [
+	}) : Z.slug === "data-list" || Z.slug === "list" ? /* @__PURE__ */ Y(E, { items: [
 		{
 			key: "1",
 			title: "Enterprise plan",
@@ -623,7 +621,7 @@ function $(Z, we, Q, $, Te) {
 			description: "Lightweight team setup",
 			extra: "$49"
 		}
-	] }) : Z.slug === "status-legend" ? /* @__PURE__ */ Y(M, {
+	] }) : Z.slug === "status-legend" ? /* @__PURE__ */ Y(j, {
 		title: "Delivery states",
 		items: [
 			{
@@ -648,7 +646,7 @@ function $(Z, we, Q, $, Te) {
 				count: 1
 			}
 		]
-	}) : Z.slug === "trend-card" || Z.slug === "comparison-card" ? /* @__PURE__ */ Y(P, {
+	}) : Z.slug === "trend-card" || Z.slug === "comparison-card" ? /* @__PURE__ */ Y(N, {
 		title: Z.slug === "trend-card" ? "Weekly revenue" : "Current vs previous",
 		value: "$84.2k",
 		description: "Compared with last month",
@@ -672,7 +670,7 @@ function $(Z, we, Q, $, Te) {
 				children: "Risk"
 			})
 		]
-	}) : Z.slug === "notification-center" ? /* @__PURE__ */ Y(D, { items: [
+	}) : Z.slug === "notification-center" ? /* @__PURE__ */ Y(E, { items: [
 		{
 			key: "1",
 			title: "Build completed",
@@ -700,11 +698,11 @@ function $(Z, we, Q, $, Te) {
 			size: "sm",
 			children: "Save label"
 		})]
-	}) : Z.slug === "json-input" ? /* @__PURE__ */ Y(g, {
+	}) : Z.slug === "json-input" ? /* @__PURE__ */ Y(h, {
 		value: "{\n  \"workspace\": \"azamat-ui\",\n  \"theme\": \"dashboard\"\n}",
 		onValueChange: () => void 0,
 		rows: 7
-	}) : Z.slug === "kanban" ? /* @__PURE__ */ Y(w, { columns: [
+	}) : Z.slug === "kanban" ? /* @__PURE__ */ Y(C, { columns: [
 		{
 			key: "todo",
 			title: "Todo",
@@ -732,24 +730,24 @@ function $(Z, we, Q, $, Te) {
 				description: "Release package and sync docs."
 			}]
 		}
-	] }) : Z.slug === "menubar" ? /* @__PURE__ */ X(he, { children: [
-		/* @__PURE__ */ X(W, { children: [/* @__PURE__ */ Y(G, { children: "File" }), /* @__PURE__ */ X(ge, {
+	] }) : Z.slug === "menubar" ? /* @__PURE__ */ X(me, { children: [
+		/* @__PURE__ */ X(U, { children: [/* @__PURE__ */ Y(W, { children: "File" }), /* @__PURE__ */ X(he, {
 			className: "relative mt-2",
-			children: [/* @__PURE__ */ Y(U, { children: "New page" }), /* @__PURE__ */ Y(U, { children: "Duplicate" })]
+			children: [/* @__PURE__ */ Y(H, { children: "New page" }), /* @__PURE__ */ Y(H, { children: "Duplicate" })]
 		})] }),
-		/* @__PURE__ */ Y(W, { children: /* @__PURE__ */ Y(G, { children: "Edit" }) }),
-		/* @__PURE__ */ Y(W, { children: /* @__PURE__ */ Y(G, { children: "View" }) })
-	] }) : Z.slug === "navigation-menu" ? /* @__PURE__ */ Y(_e, { children: /* @__PURE__ */ X(ve, { children: [
-		/* @__PURE__ */ Y(K, { children: /* @__PURE__ */ Y(q, {
+		/* @__PURE__ */ Y(U, { children: /* @__PURE__ */ Y(W, { children: "Edit" }) }),
+		/* @__PURE__ */ Y(U, { children: /* @__PURE__ */ Y(W, { children: "View" }) })
+	] }) : Z.slug === "navigation-menu" ? /* @__PURE__ */ Y(ge, { children: /* @__PURE__ */ X(_e, { children: [
+		/* @__PURE__ */ Y(G, { children: /* @__PURE__ */ Y(K, {
 			href: "#",
 			active: !0,
 			children: "Overview"
 		}) }),
-		/* @__PURE__ */ Y(K, { children: /* @__PURE__ */ Y(q, {
+		/* @__PURE__ */ Y(G, { children: /* @__PURE__ */ Y(K, {
 			href: "#",
 			children: "Components"
 		}) }),
-		/* @__PURE__ */ Y(K, { children: /* @__PURE__ */ Y(q, {
+		/* @__PURE__ */ Y(G, { children: /* @__PURE__ */ Y(K, {
 			href: "#",
 			children: "Docs"
 		}) })
@@ -787,7 +785,7 @@ function $(Z, we, Q, $, Te) {
 				})]
 			}) })
 		]
-	}) : Z.slug === "property-grid" ? /* @__PURE__ */ Y(O, {
+	}) : Z.slug === "property-grid" ? /* @__PURE__ */ Y(D, {
 		columns: 3,
 		items: [
 			{
@@ -809,15 +807,18 @@ function $(Z, we, Q, $, Te) {
 				description: "Editable local files"
 			}
 		]
-	}) : Z.slug === "qr-code" ? /* @__PURE__ */ Y(L, {
+	}) : Z.slug === "qr-code" ? /* @__PURE__ */ Y(I, {
 		value: "https://azamat-ui.vercel.app",
 		alt: "Azamat UI"
-	}) : Z.slug === "quantity-stepper" ? /* @__PURE__ */ Y(le, {
-		defaultValue: 3,
+	}) : Z.slug === "quantity-stepper" ? /* @__PURE__ */ Y(i, {
+		kind: "quantity",
+		value: 3,
 		min: 1,
-		max: 10
-	}) : Z.slug === "resizable-panel" ? /* @__PURE__ */ X(be, { children: [
-		/* @__PURE__ */ X(J, {
+		max: 10,
+		showControls: !0,
+		"aria-label": "Quantity"
+	}) : Z.slug === "resizable-panel" ? /* @__PURE__ */ X(ye, { children: [
+		/* @__PURE__ */ X(q, {
 			defaultSize: "45%",
 			children: [/* @__PURE__ */ Y("p", {
 				className: "text-sm font-medium",
@@ -827,8 +828,8 @@ function $(Z, we, Q, $, Te) {
 				children: "Resize this surface in product screens with long content."
 			})]
 		}),
-		/* @__PURE__ */ Y(ye, {}),
-		/* @__PURE__ */ X(J, {
+		/* @__PURE__ */ Y(ve, {}),
+		/* @__PURE__ */ X(q, {
 			defaultSize: "55%",
 			children: [/* @__PURE__ */ Y("p", {
 				className: "text-sm font-medium",
@@ -838,7 +839,7 @@ function $(Z, we, Q, $, Te) {
 				children: "Use for side-by-side data and editing tools."
 			})]
 		})
-	] }) : Z.slug === "rich-text-editor" ? /* @__PURE__ */ Y(xe, {
+	] }) : Z.slug === "rich-text-editor" ? /* @__PURE__ */ Y(be, {
 		value: "<p><strong>Release note</strong> with product details.</p>",
 		onValueChange: () => void 0
 	}) : Z.slug === "saved-filter-select" ? /* @__PURE__ */ Y(oe, {
@@ -928,7 +929,7 @@ function $(Z, we, Q, $, Te) {
 				children: "Display surfaces should prioritize readable values, compact metadata, and clear scanning order."
 			})] }), /* @__PURE__ */ Y(s, {
 				variant: "outline",
-				children: Te
+				children: Ce
 			})]
 		}), /* @__PURE__ */ Y("div", {
 			className: "grid gap-3 md:grid-cols-3",

package/dist/showcase/premium/combobox/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Button, Combobox } from "@/index"
+import { Button, Select } from "tembro"
 
 const teammateOptions = [
   { value: "azamat", label: "Azamat", description: "Design system owner" },
@@ -12,12 +12,13 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <Combobox
+      <Select
         value={value}
         onValueChange={(nextValue) => setValue(nextValue ?? "azamat")}
         options={teammateOptions}
         placeholder="Assign owner"
         searchPlaceholder="Search teammate..."
+        searchable
       />
       <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
         Current owner: <strong>{value}</strong>
@@ -25,4 +26,4 @@ export function Example() {
       <Button variant="outline" onClick={() => setValue("nodira")}>Pick Nodira</Button>
     </div>
   )
-}`,htmlCode:`<button data-slot="combobox-trigger">Open combobox</button>`,cliCommand:`npx tembro add combobox`,highlights:[`Search-led selection`,`Controlled value`,`Description rows`,`Fast reassignment flow`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Owner assignment`,description:`Use combobox when the list is local but still benefits from search.`},{title:`Dense admin forms`,description:`Keep reassignment fast without opening a full modal.`},{title:`Command-like search`,description:`Useful when discoverability matters more than plain select semantics.`}],capabilityNotes:[`Use Combobox when users need type-to-find behavior on a local option set.`,`Keep option labels and descriptions short to avoid noisy dropdown rows.`,`Prefer controlled value in admin workflows so state stays explicit.`,`If options come from the server, move to AsyncSelect instead of overloading Combobox.`]};exports.comboboxMock=e;
+}`,htmlCode:`<button data-slot="combobox-trigger">Open combobox</button>`,cliCommand:`npx tembro add select`,highlights:[`Search-led selection`,`Controlled value`,`Description rows`,`Fast reassignment flow`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Owner assignment`,description:`Use combobox when the list is local but still benefits from search.`},{title:`Dense admin forms`,description:`Keep reassignment fast without opening a full modal.`},{title:`Command-like search`,description:`Useful when discoverability matters more than plain select semantics.`}],capabilityNotes:[`Use Combobox when users need type-to-find behavior on a local option set.`,`Keep option labels and descriptions short to avoid noisy dropdown rows.`,`Prefer controlled value in admin workflows so state stays explicit.`,`If options come from the server, move to AsyncSelect instead of overloading Combobox.`]};exports.comboboxMock=e;

package/dist/showcase/premium/combobox/mock.js

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/combobox/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { Button, Combobox } from \"@/index\"\n\nconst teammateOptions = [\n  { value: \"azamat\", label: \"Azamat\", description: \"Design system owner\" },\n  { value: \"nodira\", label: \"Nodira\", description: \"Operations lead\" },\n  { value: \"sardor\", label: \"Sardor\", description: \"Frontend engineer\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"azamat\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Combobox\n        value={value}\n        onValueChange={(nextValue) => setValue(nextValue ?? \"azamat\")}\n        options={teammateOptions}\n        placeholder=\"Assign owner\"\n        searchPlaceholder=\"Search teammate...\"\n      />\n      <div className=\"rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted\">\n        Current owner: <strong>{value}</strong>\n      </div>\n      <Button variant=\"outline\" onClick={() => setValue(\"nodira\")}>Pick Nodira</Button>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Button, Select } from \"tembro\"\n\nconst teammateOptions = [\n  { value: \"azamat\", label: \"Azamat\", description: \"Design system owner\" },\n  { value: \"nodira\", label: \"Nodira\", description: \"Operations lead\" },\n  { value: \"sardor\", label: \"Sardor\", description: \"Frontend engineer\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"azamat\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Select\n        value={value}\n        onValueChange={(nextValue) => setValue(nextValue ?? \"azamat\")}\n        options={teammateOptions}\n        placeholder=\"Assign owner\"\n        searchPlaceholder=\"Search teammate...\"\n        searchable\n      />\n      <div className=\"rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted\">\n        Current owner: <strong>{value}</strong>\n      </div>\n      <Button variant=\"outline\" onClick={() => setValue(\"nodira\")}>Pick Nodira</Button>\n    </div>\n  )\n}",
 	htmlCode: "<button data-slot=\"combobox-trigger\">Open combobox</button>",
-	cliCommand: "npx tembro add combobox",
+	cliCommand: "npx tembro add select",
 	highlights: [
 		"Search-led selection",
 		"Controlled value",

package/dist/showcase/premium/combobox/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/inputs/combobox.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[{value:`azamat`,label:`Azamat`,description:`Design system owner`},{value:`nodira`,label:`Nodira`,description:`Operations lead`},{value:`sardor`,label:`Sardor`,description:`Frontend engineer`},{value:`kamola`,label:`Kamola`,description:`Product manager`}];function c({state:e,setState:c}){let l=s.some(t=>t.value===e.selectValue)?e.selectValue:`azamat`,u=s.find(e=>e.value===l)??s[0],[d,f]=i.useState(``);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Search selection`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Combobox is the keyboard-first local member`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it when users know part of the option name and need to jump directly through local filtering instead of scanning a longer static Select list.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Searchable`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Local options`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign component owner`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.Combobox,{value:l,options:s.map(e=>({...e})),onValueChange:e=>c({selectValue:e??`azamat`}),placeholder:`Choose teammate`,searchPlaceholder:`Search teammate...`,clearable:!0,allowDeselect:!0,showSelectedDescription:!0,onSearchChange:f})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:u.label}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:u.description}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep Combobox for local search-heavy reassignment flows. If options are remote, move back to the Select family and choose AsyncSelect instead.`})]})]})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,a.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Current owner: `,u.label]}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use quick actions below to verify that the value stays controlled outside the dropdown itself.`}),(0,a.jsxs)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:[`Search query: `,d||`empty`]})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:`nodira`}),children:`Pick Nodira`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:`azamat`}),children:`Reset`})]})]})})]})}exports.ComboboxShowcase=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/select/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[{value:`azamat`,label:`Azamat`,description:`Design system owner`},{value:`nodira`,label:`Nodira`,description:`Operations lead`},{value:`sardor`,label:`Sardor`,description:`Frontend engineer`},{value:`kamola`,label:`Kamola`,description:`Product manager`}];function c({state:e,setState:c}){let l=s.some(t=>t.value===e.selectValue)?e.selectValue:`azamat`,u=s.find(e=>e.value===l)??s[0],[d,f]=i.useState(``);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Search selection`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Combobox is the keyboard-first local member`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it when users know part of the option name and need to jump directly through local filtering instead of scanning a longer static Select list.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Searchable`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Local options`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign component owner`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.Select,{value:l,options:s.map(e=>({...e})),onValueChange:e=>c({selectValue:e??`azamat`}),placeholder:`Choose teammate`,searchPlaceholder:`Search teammate...`,searchable:!0,clearable:!0,showSelectedDescription:!0,onSearchChange:f})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:u.label}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:u.description}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep Combobox for local search-heavy reassignment flows. If options are remote, move back to the Select family and choose AsyncSelect instead.`})]})]})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,a.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Current owner: `,u.label]}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use quick actions below to verify that the value stays controlled outside the dropdown itself.`}),(0,a.jsxs)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:[`Search query: `,d||`empty`]})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:`nodira`}),children:`Pick Nodira`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:`azamat`}),children:`Reset`})]})]})})]})}exports.ComboboxShowcase=c;

package/dist/showcase/premium/combobox/showcase.js

@@ -1,6 +1,6 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
-import { Combobox as n } from "../../../components/inputs/combobox.js";
+import { Select as n } from "../../../components/ui/select/index.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/showcase/premium/combobox/showcase.tsx
@@ -85,8 +85,8 @@ function c({ state: c, setState: l }) {
 							onValueChange: (e) => l({ selectValue: e ?? "azamat" }),
 							placeholder: "Choose teammate",
 							searchPlaceholder: "Search teammate...",
+							searchable: !0,
 							clearable: !0,
-							allowDeselect: !0,
 							showSelectedDescription: !0,
 							onSearchChange: p
 						})