tembro 3.1.16 → 4.0.0

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

@@ -1,288 +0,0 @@
-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, section labels, active indicators 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

@@ -1 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,43 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,43 +0,0 @@
-//#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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/inputs/async-select.cjs"),r=require("../../component-route-data.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=r.routeWorkspaceOptions,s=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,c=async e=>{await new Promise(e=>setTimeout(e,260));let t=e.trim().toLowerCase();if(t===`error`)throw Error(`Unable to load regions`);return t?o.filter(e=>String(e.label??``).toLowerCase().includes(t)):o},l=async e=>(await new Promise(e=>setTimeout(e,120)),o.find(t=>t.value===e)??null),u=async e=>(await new Promise(e=>setTimeout(e,120)),o.filter(t=>e.includes(String(t.value)))),d=async e=>(await new Promise(e=>setTimeout(e,180)),{value:e.trim().toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``)||`custom-region`,label:e.trim(),description:`Created from the current search query`});function f(){let[f,p]=(0,i.useState)(``),[m,h]=(0,i.useState)([`north`,`west`]),g=r.routeWorkspaceOptions.find(e=>e.value===f),_=r.routeWorkspaceOptions.filter(e=>m.includes(String(e.value)));return(0,a.jsx)(`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:`Remote selection`}),(0,a.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,a.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,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Async`}),(0,a.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Search`}),(0,a.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Clearable`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,a.jsxs)(`div`,{className:s,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign service region`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(n.AsyncSelect,{value:f,onValueChange:e=>p(e??``),loadOptions:c,loadSelectedOption:l,defaultOptions:o,minSearchLength:1,clearable:!0,showSelectedDescription:!0,debounceMs:220,onCreateOption:d,createOptionLabel:e=>`Create region "${e.trim()}"`,labels:{placeholder:`Choose service region`,searchPlaceholder:`Search regions...`,error:`Could not load regions. Try another query.`}})}),(0,a.jsxs)(`div`,{className:`mt-5`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Multi select uses the same component`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(n.AsyncSelect,{isMulti:!0,value:m,onValueChange:e=>h(e),loadOptions:c,loadSelectedOptions:u,defaultOptions:o,minSearchLength:1,clearable:!0,showSelectAll:!0,maxSelected:3,maxVisibleTags:2,showSelectedDescription:!0,debounceMs:220,onCreateOption:d,createOptionLabel:e=>`Create team "${e.trim()}"`,labels:{multiPlaceholder:`Choose team coverage`,searchPlaceholder:`Search team regions...`,error:`Could not load teams. Try another query.`,selectedCount:e=>`${e} regions selected`,hiddenSelected:e=>`+${e} more`,maxSelected:e=>`Maximum ${e} regions`}})})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,a.jsx)(e.Button,{size:`sm`,variant:`secondary`,onClick:()=>p(`south`),children:`Hydrate South`}),(0,a.jsx)(e.Button,{size:`sm`,variant:`secondary`,onClick:()=>h([`north`,`west`,`central`]),children:`Fill max selected`}),(0,a.jsx)(e.Button,{size:`sm`,variant:`outline`,onClick:()=>{p(``),h([])},children:`Clear all`})]}),(0,a.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,a.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,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Type to query`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Minimum search length keeps remote requests intentional. Type error to test failure state.`})]}),(0,a.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,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Clear safely`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Clear action is isolated from the trigger surface.`})]}),(0,a.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,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Create and hydrate`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Create missing options and restore selected labels from ID-first edit state.`})]})]})]}),(0,a.jsxs)(`div`,{className:s,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected result`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:g?.label||`No region selected`}),(0,a.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,a.jsxs)(`div`,{className:`mt-4 space-y-3`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Value`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:f||`none`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Team`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:g?r.routeWorkspaceOptions.find(e=>e.value===g.value)?.team:`No team`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Multi mode`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:_.length?_.map(e=>e.label).join(`, `):`No teams selected`})]})]})]})]})]})})}exports.AsyncSelectShowcase=f;