tembro 3.0.0 → 3.1.5

package/dist/src/showcase/premium/app-sidebar/showcase.js

@@ -0,0 +1,288 @@
+import { cn as e } from "../../../lib/utils.js";
+import { Button as t } from "../../../components/ui/button/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { Sidebar as r } from "../../../components/layout/app-sidebar.js";
+import * as i from "react";
+import { BarChart3Icon as a, CreditCardIcon as o, FolderIcon as s, HomeIcon as c, LifeBuoyIcon as l, SettingsIcon as u, UsersIcon as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/showcase/premium/app-sidebar/showcase.tsx
+var m = [
+	{
+		key: "overview",
+		label: "Overview",
+		href: "/overview",
+		icon: /* @__PURE__ */ f(c, { className: "size-4" }),
+		sectionLabel: "Core"
+	},
+	{
+		key: "projects",
+		label: "Projects",
+		icon: /* @__PURE__ */ f(s, { className: "size-4" }),
+		badge: "8",
+		defaultExpanded: !0,
+		items: [{
+			key: "active-projects",
+			label: "Active projects",
+			href: "/components/app-sidebar?view=active"
+		}, {
+			key: "archived-projects",
+			label: "Archived",
+			href: "/components/app-sidebar?view=archived",
+			badge: "3"
+		}]
+	},
+	{
+		key: "reports",
+		label: "Reports",
+		href: "/reports",
+		icon: /* @__PURE__ */ f(a, { className: "size-4" }),
+		sectionLabel: "Insights"
+	},
+	{
+		key: "billing",
+		label: "Billing",
+		href: "/billing",
+		icon: /* @__PURE__ */ f(o, { className: "size-4" }),
+		badge: "2"
+	},
+	{
+		key: "settings",
+		label: "Settings",
+		href: "/settings",
+		icon: /* @__PURE__ */ f(u, { className: "size-4" }),
+		disabled: !0
+	}
+], h = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function g({ mode: a }) {
+	let [o, s] = i.useState("overview"), [c, u] = i.useState(a === "playground"), [g, _] = i.useState("desktop"), [v, y] = i.useState(!0), [b, x] = i.useState("md"), [S, C] = i.useState("bar"), [w, T] = i.useState(0), E = i.useMemo(() => m.map((e) => ({
+		...e,
+		active: e.key === o,
+		onSelect: () => s(e.key)
+	})), [o]), D = m.find((e) => e.key === o), O = g === "mobile";
+	return /* @__PURE__ */ p("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ f("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ p("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ p("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ f("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Navigation shell"
+							}),
+							/* @__PURE__ */ f("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Sidebar should feel install-ready on its own"
+							}),
+							/* @__PURE__ */ f("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior."
+							})
+						]
+					}), /* @__PURE__ */ p("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ f(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Header slot"
+							}),
+							/* @__PURE__ */ f(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Badges"
+							}),
+							/* @__PURE__ */ f(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Mobile drawer"
+							})
+						]
+					})]
+				})
+			}),
+			a === "playground" ? /* @__PURE__ */ p("div", {
+				className: "flex flex-wrap gap-3",
+				children: [
+					/* @__PURE__ */ f(t, {
+						size: "sm",
+						variant: c ? "outline" : "default",
+						onClick: () => u((e) => !e),
+						children: c ? "Expand sidebar" : "Collapse sidebar"
+					}),
+					/* @__PURE__ */ f(t, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => s("reports"),
+						children: "Jump to reports"
+					}),
+					/* @__PURE__ */ f(t, {
+						size: "sm",
+						variant: O ? "default" : "outline",
+						onClick: () => _("mobile"),
+						children: "Mobile drawer"
+					}),
+					/* @__PURE__ */ f(t, {
+						size: "sm",
+						variant: O ? "outline" : "default",
+						onClick: () => _("desktop"),
+						children: "Desktop rail"
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ p("div", {
+				className: "grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ f("section", {
+					className: e(h, O && "mx-auto w-full max-w-[420px]"),
+					children: /* @__PURE__ */ f(r, {
+						collapsed: c,
+						items: E,
+						showSectionLabels: v,
+						itemSize: b,
+						activeIndicator: S,
+						renderLink: ({ item: e, href: t = "/components/app-sidebar", ...n }) => /* @__PURE__ */ f("a", {
+							...n,
+							href: t
+						}),
+						secondaryActions: [{
+							key: "support",
+							label: "Support",
+							icon: /* @__PURE__ */ f(l, { className: "size-4" }),
+							onSelect: () => s("reports")
+						}],
+						railItems: [{
+							key: "members",
+							label: "Members",
+							icon: /* @__PURE__ */ f(d, { className: "size-4" }),
+							onSelect: () => s("projects")
+						}],
+						footerAccount: {
+							label: "Azamat Workspace",
+							description: w ? `Account opened ${w}x` : "Starter plan",
+							avatar: "AW",
+							onSelect: () => T((e) => e + 1)
+						},
+						responsive: !0,
+						mobileBreakpoint: O ? 1e4 : 0,
+						mobileTitle: "Workspace navigation",
+						mobileDescription: "Open routes, check badges, and move between sections from one compact drawer.",
+						mobileToggleLabel: "Open workspace menu",
+						header: /* @__PURE__ */ f("div", {
+							className: "px-3 py-2 text-sm font-semibold",
+							children: "Azamat Workspace"
+						}),
+						footer: /* @__PURE__ */ f("div", {
+							className: "aui-text-muted px-3 py-2 text-xs",
+							children: "Starter plan • 3 editors"
+						}),
+						footerClassName: "bg-[color:var(--aui-page-bg-alt)]/55",
+						className: "min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
+					})
+				}), /* @__PURE__ */ p("section", {
+					className: h,
+					children: [
+						/* @__PURE__ */ f("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Current route"
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: D?.label ?? "Overview"
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+							children: "Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it."
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "mt-6 grid gap-3 sm:grid-cols-3",
+							children: [
+								/* @__PURE__ */ p("div", {
+									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+									children: [/* @__PURE__ */ f("p", {
+										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
+										children: "Shell"
+									}), /* @__PURE__ */ f("p", {
+										className: "mt-2 text-lg font-semibold aui-text-strong",
+										children: O ? "Mobile drawer" : c ? "Collapsed" : "Expanded"
+									})]
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+									children: [/* @__PURE__ */ f("p", {
+										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
+										children: "Visible items"
+									}), /* @__PURE__ */ f("p", {
+										className: "mt-2 text-lg font-semibold aui-text-strong",
+										children: E.length
+									})]
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+									children: [/* @__PURE__ */ f("p", {
+										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
+										children: "Disabled"
+									}), /* @__PURE__ */ f("p", {
+										className: "mt-2 text-lg font-semibold aui-text-strong",
+										children: "1 route"
+									})]
+								})
+							]
+						}),
+						a === "playground" ? /* @__PURE__ */ p("div", {
+							className: "mt-4 flex flex-wrap gap-2",
+							children: [
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: v ? "default" : "outline",
+									onClick: () => y((e) => !e),
+									children: v ? "Hide section labels" : "Show section labels"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: b === "sm" ? "default" : "outline",
+									onClick: () => x("sm"),
+									children: "Compact"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: b === "md" ? "default" : "outline",
+									onClick: () => x("md"),
+									children: "Default"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: b === "lg" ? "default" : "outline",
+									onClick: () => x("lg"),
+									children: "Comfortable"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: S === "bar" ? "default" : "outline",
+									onClick: () => C("bar"),
+									children: "Bar active"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: S === "pill" ? "default" : "outline",
+									onClick: () => C("pill"),
+									children: "Pill active"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: S === "none" ? "default" : "outline",
+									onClick: () => C("none"),
+									children: "Minimal active"
+								})
+							]
+						}) : null
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { g as AppSidebarShowcase };

package/dist/src/showcase/premium/async-multi-select/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.AsyncMultiSelectShowcase=e.AsyncMultiSelectShowcase,exports.asyncMultiSelectMock=t.asyncMultiSelectMock;

package/dist/src/showcase/premium/async-multi-select/index.js

@@ -0,0 +1,3 @@
+import { AsyncMultiSelectShowcase as e } from "./showcase.js";
+import { asyncMultiSelectMock as t } from "./mock.js";
+export { e as AsyncMultiSelectShowcase, t as asyncMultiSelectMock };

package/dist/src/showcase/premium/async-multi-select/mock.cjs

@@ -0,0 +1,41 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { AsyncSelect } from "tembro"
+
+const projectOptions = [
+  { value: "analytics", label: "Analytics", description: "Dashboards and reports" },
+  { value: "billing", label: "Billing", description: "Invoices and subscriptions" },
+  { value: "support", label: "Support", description: "Customer tickets" },
+  { value: "security", label: "Security", description: "Permissions and audit" },
+  { value: "search", label: "Search", description: "Discovery and recommendations" },
+  { value: "archive", label: "Archive", description: "Legacy read-only project", disabled: true },
+]
+
+const loadProjectOptions = async (search: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 300))
+  const query = search.trim().toLowerCase()
+  if (!query) return projectOptions
+  return projectOptions.filter((option) => String(option.label ?? "").toLowerCase().includes(query))
+}
+
+export function Example() {
+  const [selected, setSelected] = useState<string[]>(["analytics"])
+
+  return (
+    <div className="space-y-3">
+      <AsyncSelect
+        isMulti
+        value={selected}
+        onValueChange={(values) => setSelected(values)}
+        loadOptions={loadProjectOptions}
+        loadSelectedOptions={async (values) => projectOptions.filter((item) => values.includes(item.value))}
+        maxSelected={3}
+        closeOnSelect={false}
+        showSelectAll
+        clearable
+      />
+      <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">
+        Modules: <strong>{selected.length}</strong> selected
+      </div>
+    </div>
+  )
+}`,htmlCode:`<button data-slot="async-multiselect-trigger">Choose modules</button>`,cliCommand:`npx tembro add async-select`,highlights:[`Multi-value remote tags`,`maxSelected guard`,`select-all action`,`canonical isMulti flow`],relatedBlockSlugs:[`users-table`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Project scope`,description:`Attach multiple modules to one workspace or permission set.`},{title:`Max selected`,description:`Limit selections to keep downstream payloads predictable.`},{title:`Keyboard remove`,description:`Support tag cleanup for power users in dense inputs.`},{title:`Async updates`,description:`Keep tags synced with changing remote data.`}],capabilityNotes:["Prefer `AsyncSelect isMulti` for sparse multi-select forms where dataset changes over time.","Show clear limits with `maxSelected` and help text from validation.","`onValueChange` returns both ids and resolved options when custom payloads are needed.",`Disable close-on-select when users are likely to make batch picks.`]};exports.asyncMultiSelectMock=e;

package/dist/src/showcase/premium/async-multi-select/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/async-multi-select/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { AsyncSelect } from \"tembro\"\n\nconst projectOptions = [\n  { value: \"analytics\", label: \"Analytics\", description: \"Dashboards and reports\" },\n  { value: \"billing\", label: \"Billing\", description: \"Invoices and subscriptions\" },\n  { value: \"support\", label: \"Support\", description: \"Customer tickets\" },\n  { value: \"security\", label: \"Security\", description: \"Permissions and audit\" },\n  { value: \"search\", label: \"Search\", description: \"Discovery and recommendations\" },\n  { value: \"archive\", label: \"Archive\", description: \"Legacy read-only project\", disabled: true },\n]\n\nconst loadProjectOptions = async (search: string) => {\n  await new Promise((resolve) => setTimeout(resolve, 300))\n  const query = search.trim().toLowerCase()\n  if (!query) return projectOptions\n  return projectOptions.filter((option) => String(option.label ?? \"\").toLowerCase().includes(query))\n}\n\nexport function Example() {\n  const [selected, setSelected] = useState<string[]>([\"analytics\"])\n\n  return (\n    <div className=\"space-y-3\">\n      <AsyncSelect\n        isMulti\n        value={selected}\n        onValueChange={(values) => setSelected(values)}\n        loadOptions={loadProjectOptions}\n        loadSelectedOptions={async (values) => projectOptions.filter((item) => values.includes(item.value))}\n        maxSelected={3}\n        closeOnSelect={false}\n        showSelectAll\n        clearable\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        Modules: <strong>{selected.length}</strong> selected\n      </div>\n    </div>\n  )\n}",
+	htmlCode: "<button data-slot=\"async-multiselect-trigger\">Choose modules</button>",
+	cliCommand: "npx tembro add async-select",
+	highlights: [
+		"Multi-value remote tags",
+		"maxSelected guard",
+		"select-all action",
+		"canonical isMulti flow"
+	],
+	relatedBlockSlugs: [
+		"users-table",
+		"crm-dashboard",
+		"settings-form"
+	],
+	scenarios: [
+		{
+			title: "Project scope",
+			description: "Attach multiple modules to one workspace or permission set."
+		},
+		{
+			title: "Max selected",
+			description: "Limit selections to keep downstream payloads predictable."
+		},
+		{
+			title: "Keyboard remove",
+			description: "Support tag cleanup for power users in dense inputs."
+		},
+		{
+			title: "Async updates",
+			description: "Keep tags synced with changing remote data."
+		}
+	],
+	capabilityNotes: [
+		"Prefer `AsyncSelect isMulti` for sparse multi-select forms where dataset changes over time.",
+		"Show clear limits with `maxSelected` and help text from validation.",
+		"`onValueChange` returns both ids and resolved options when custom payloads are needed.",
+		"Disable close-on-select when users are likely to make batch picks."
+	]
+};
+//#endregion
+export { e as asyncMultiSelectMock };

package/dist/src/showcase/premium/async-multi-select/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/async-select.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=[{value:`inbox`,label:`Inbox`},{value:`analytics`,label:`Analytics`},{value:`billing`,label:`Billing`},{value:`support`,label:`Support`}],i=async e=>(await new Promise(e=>setTimeout(e,240)),e?r.filter(t=>String(t.label??``).toLowerCase().includes(e.toLowerCase())):r);function a(){let[r,a]=(0,t.useState)([`analytics`]);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Use AsyncSelect with isMulti for remote multi-value flows`}),(0,n.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Keep the Select family centered on one remote surface. This route documents the multi-value mode, but new code should stay on AsyncSelect.`})]}),(0,n.jsx)(e.AsyncSelect,{isMulti:!0,value:r,onValueChange:e=>a(e),loadOptions:i,maxSelected:3,showSelectAll:!0}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Selected count: `,r.length]})]})}exports.AsyncMultiSelectShowcase=a;

package/dist/src/showcase/premium/async-multi-select/showcase.js

@@ -0,0 +1,54 @@
+import { AsyncSelect as e } from "../../../components/inputs/async-select.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/async-multi-select/showcase.tsx
+var i = [
+	{
+		value: "inbox",
+		label: "Inbox"
+	},
+	{
+		value: "analytics",
+		label: "Analytics"
+	},
+	{
+		value: "billing",
+		label: "Billing"
+	},
+	{
+		value: "support",
+		label: "Support"
+	}
+], a = async (e) => (await new Promise((e) => setTimeout(e, 240)), e ? i.filter((t) => String(t.label ?? "").toLowerCase().includes(e.toLowerCase())) : i);
+function o() {
+	let [i, o] = t(["analytics"]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+				children: [/* @__PURE__ */ n("p", {
+					className: "text-sm font-medium aui-text-strong",
+					children: "Use AsyncSelect with isMulti for remote multi-value flows"
+				}), /* @__PURE__ */ n("p", {
+					className: "mt-2 text-sm leading-6 aui-text-muted",
+					children: "Keep the Select family centered on one remote surface. This route documents the multi-value mode, but new code should stay on AsyncSelect."
+				})]
+			}),
+			/* @__PURE__ */ n(e, {
+				isMulti: !0,
+				value: i,
+				onValueChange: (e) => o(e),
+				loadOptions: a,
+				maxSelected: 3,
+				showSelectAll: !0
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-muted text-sm",
+				children: ["Selected count: ", i.length]
+			})
+		]
+	});
+}
+//#endregion
+export { o as AsyncMultiSelectShowcase };

package/dist/src/showcase/premium/async-select/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.AsyncSelectShowcase=e.AsyncSelectShowcase,exports.asyncSelectMock=t.asyncSelectMock;

package/dist/src/showcase/premium/async-select/index.js

@@ -0,0 +1,3 @@
+import { AsyncSelectShowcase as e } from "./showcase.js";
+import { asyncSelectMock as t } from "./mock.js";
+export { e as AsyncSelectShowcase, t as asyncSelectMock };

package/dist/src/showcase/premium/async-select/mock.cjs

@@ -0,0 +1,55 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { AsyncSelect, type AsyncSelectOption } from "tembro"
+
+const seedOptions: AsyncSelectOption[] = [
+  { value: "acme", label: "ACME", description: "Core product line" },
+  { value: "nova", label: "Nova", description: "Enterprise clients" },
+  { value: "spark", label: "Spark", description: "Growth workspace" },
+  { value: "atlas", label: "Atlas", description: "Billing team" },
+  { value: "zen", label: "Zen", description: "Ops and support" },
+  { value: "legacy", label: "Legacy", description: "Deprecated workspace", disabled: true },
+]
+
+const loadWorkspaces = async (search: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 420))
+  const query = search.trim().toLowerCase()
+  if (query === "error") {
+    throw new Error("Unable to fetch options for the current query.")
+  }
+
+  if (query.length < 2) return []
+  return seedOptions.filter((option) => String(option.label ?? "").toLowerCase().includes(query))
+}
+
+export function Example() {
+  const [value, setValue] = useState("")
+  const [label, setLabel] = useState("Select workspace")
+
+  return (
+    <div className="space-y-3">
+      <AsyncSelect
+        value={value}
+        onValueChange={(nextValue, option) => {
+          setValue(nextValue ?? "")
+          setLabel(option?.label ? String(option.label) : "Select workspace")
+        }}
+        loadOptions={loadWorkspaces}
+        loadSelectedOption={async (selectedValue) => {
+          await new Promise((resolve) => setTimeout(resolve, 40))
+          return seedOptions.find((option) => option.value === selectedValue) ?? null
+        }}
+        clearable
+        debounceMs={250}
+        minSearchLength={2}
+        defaultOptions={seedOptions}
+      />
+      <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">
+        Selected: <strong>{value || "none"}</strong> — {label}
+      </div>
+      <p className="text-sm aui-text-muted">
+        Set search to <code>error</code> to preview empty/error handling paths.
+      </p>
+      <p className="text-sm aui-text-muted">Disabled items are rendered non-selectable in the list.</p>
+    </div>
+  )
+}`,htmlCode:`<button data-slot="async-select-trigger">Choose workspace</button>`,cliCommand:`npx tembro add async-select`,highlights:[`Asynchronous loadOptions and loading state support`,`Debounced search requests`,`Empty/min-search behavior`,`Error state handling in query flow`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`users-table`],scenarios:[{title:`Remote lookup`,description:`Search in remote datasets and keep selected value in state.`},{title:`Loading state`,description:`Let users understand network delay with pending feedback.`},{title:`Error fallback`,description:`Surface and recoverable errors when option loading fails.`},{title:`Minimum query`,description:"Avoid noisy requests with `minSearchLength`."}],capabilityNotes:["Prefer `AsyncSelect` for datasets that change often, have many rows, or need server filtering.","Use `loadSelectedOption` when navigating back to preselected rows from an ID-only payload.",`Keep selected value controlled so parent forms can validate and persist immediately.`,"Avoid embedding heavy logic in `loadOptions`; return normalized value objects with stable labels."]};exports.asyncSelectMock=e;

package/dist/src/showcase/premium/async-select/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/async-select/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { AsyncSelect, type AsyncSelectOption } from \"tembro\"\n\nconst seedOptions: AsyncSelectOption[] = [\n  { value: \"acme\", label: \"ACME\", description: \"Core product line\" },\n  { value: \"nova\", label: \"Nova\", description: \"Enterprise clients\" },\n  { value: \"spark\", label: \"Spark\", description: \"Growth workspace\" },\n  { value: \"atlas\", label: \"Atlas\", description: \"Billing team\" },\n  { value: \"zen\", label: \"Zen\", description: \"Ops and support\" },\n  { value: \"legacy\", label: \"Legacy\", description: \"Deprecated workspace\", disabled: true },\n]\n\nconst loadWorkspaces = async (search: string) => {\n  await new Promise((resolve) => setTimeout(resolve, 420))\n  const query = search.trim().toLowerCase()\n  if (query === \"error\") {\n    throw new Error(\"Unable to fetch options for the current query.\")\n  }\n\n  if (query.length < 2) return []\n  return seedOptions.filter((option) => String(option.label ?? \"\").toLowerCase().includes(query))\n}\n\nexport function Example() {\n  const [value, setValue] = useState(\"\")\n  const [label, setLabel] = useState(\"Select workspace\")\n\n  return (\n    <div className=\"space-y-3\">\n      <AsyncSelect\n        value={value}\n        onValueChange={(nextValue, option) => {\n          setValue(nextValue ?? \"\")\n          setLabel(option?.label ? String(option.label) : \"Select workspace\")\n        }}\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={async (selectedValue) => {\n          await new Promise((resolve) => setTimeout(resolve, 40))\n          return seedOptions.find((option) => option.value === selectedValue) ?? null\n        }}\n        clearable\n        debounceMs={250}\n        minSearchLength={2}\n        defaultOptions={seedOptions}\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        Selected: <strong>{value || \"none\"}</strong> — {label}\n      </div>\n      <p className=\"text-sm aui-text-muted\">\n        Set search to <code>error</code> to preview empty/error handling paths.\n      </p>\n      <p className=\"text-sm aui-text-muted\">Disabled items are rendered non-selectable in the list.</p>\n    </div>\n  )\n}",
+	htmlCode: "<button data-slot=\"async-select-trigger\">Choose workspace</button>",
+	cliCommand: "npx tembro add async-select",
+	highlights: [
+		"Asynchronous loadOptions and loading state support",
+		"Debounced search requests",
+		"Empty/min-search behavior",
+		"Error state handling in query flow"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"crm-dashboard",
+		"users-table"
+	],
+	scenarios: [
+		{
+			title: "Remote lookup",
+			description: "Search in remote datasets and keep selected value in state."
+		},
+		{
+			title: "Loading state",
+			description: "Let users understand network delay with pending feedback."
+		},
+		{
+			title: "Error fallback",
+			description: "Surface and recoverable errors when option loading fails."
+		},
+		{
+			title: "Minimum query",
+			description: "Avoid noisy requests with `minSearchLength`."
+		}
+	],
+	capabilityNotes: [
+		"Prefer `AsyncSelect` for datasets that change often, have many rows, or need server filtering.",
+		"Use `loadSelectedOption` when navigating back to preselected rows from an ID-only payload.",
+		"Keep selected value controlled so parent forms can validate and persist immediately.",
+		"Avoid embedding heavy logic in `loadOptions`; return normalized value objects with stable labels."
+	]
+};
+//#endregion
+export { e as asyncSelectMock };

package/dist/src/showcase/premium/async-select/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/inputs/async-select.cjs"),n=require("../../component-route-data.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=n.routeWorkspaceOptions,o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=async e=>{await new Promise(e=>setTimeout(e,260));let t=e.trim().toLowerCase();return t?a.filter(e=>String(e.label??``).toLowerCase().includes(t)):a};function c(){let[c,l]=(0,r.useState)(``),[u,d]=(0,r.useState)([`north`,`west`]),f=n.routeWorkspaceOptions.find(e=>e.value===c),p=n.routeWorkspaceOptions.filter(e=>u.includes(String(e.value)));return(0,i.jsx)(`div`,{className:`space-y-5`,children:(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Remote selection`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AsyncSelect is the remote member of the Select family`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Async`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Search`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Clearable`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign service region`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.AsyncSelect,{value:c,onValueChange:e=>l(e??``),loadOptions:s,defaultOptions:a,minSearchLength:1,clearable:!0,showSelectedDescription:!0,debounceMs:220,labels:{placeholder:`Choose service region`,searchPlaceholder:`Search regions...`}})}),(0,i.jsxs)(`div`,{className:`mt-5`,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Multi select uses the same component`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.AsyncSelect,{isMulti:!0,value:u,onValueChange:e=>d(e),loadOptions:s,defaultOptions:a,minSearchLength:1,clearable:!0,showSelectAll:!0,maxSelected:3,maxVisibleTags:2,showSelectedDescription:!0,debounceMs:220,labels:{multiPlaceholder:`Choose team coverage`,searchPlaceholder:`Search team regions...`,selectedCount:e=>`${e} regions selected`,hiddenSelected:e=>`+${e} more`}})})]}),(0,i.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Type to query`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Minimum search length keeps remote requests intentional.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Clear safely`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Clear action is isolated from the trigger surface.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Hydrate selection`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Selected value can be restored from ID-first edit state.`})]})]})]}),(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected result`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:f?.label||`No region selected`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model.`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Value`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:c||`none`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Team`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:f?n.routeWorkspaceOptions.find(e=>e.value===f.value)?.team:`No team`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Multi mode`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:p.length?p.map(e=>e.label).join(`, `):`No teams selected`})]})]})]})]})]})})}exports.AsyncSelectShowcase=c;