tembro 3.0.0 → 3.1.1

package/dist/src/showcase/premium/code-block/mock.js

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/code-block/mock.ts
+var e = {
+	code: "import { CodeBlock } from \"tembro\"\n\nconst snippet = `npx tembro add button select`\n\nexport function Example() {\n  return <CodeBlock title=\"CLI\" language=\"bash\" code={snippet} />\n}",
+	cliCommand: "npx tembro add code-block",
+	highlights: [
+		"Header with title, language and built-in copy action",
+		"Supports long wrapped snippets or horizontal scroll",
+		"Useful for CLI, config and docs snippets"
+	],
+	scenarios: [
+		{
+			title: "CLI docs",
+			description: "Show install or add commands with fast copy action."
+		},
+		{
+			title: "Config snippet",
+			description: "Render small code samples without building a syntax highlighter."
+		},
+		{
+			title: "Response sample",
+			description: "Present payload examples in compact technical docs."
+		}
+	]
+};
+//#endregion
+export { e as codeBlockMock };

package/dist/src/showcase/premium/code-block/showcase.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/code-block.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`,i=`npx tembro init
+npx tembro add button input data-table`,a=`:root {
+  --aui-card-radius: 18px;
+  --aui-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
+}`;function o(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`CodeBlock keeps docs snippets clean and copyable`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it for short technical snippets where product docs need clean framing, title, language label and inline copy.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(t.CodeBlock,{title:`Install`,language:`bash`,code:i}),(0,n.jsx)(t.CodeBlock,{title:`Token override`,language:`css`,code:a,wrap:!0})]}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Use when`}),(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Docs`})]}),(0,n.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,n.jsx)(`p`,{children:`Prefer CodeBlock when the snippet itself is the content. Do not wrap every small inline token in a code panel.`}),(0,n.jsx)(`p`,{children:`For long articles or syntax-highlighting needs, you may still layer a richer renderer around the same route.`})]})]})]})})]})}exports.CodeBlockShowcase=o;

package/dist/src/showcase/premium/code-block/showcase.js

@@ -0,0 +1,62 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { CodeBlock as t } from "../../../components/display/code-block.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/code-block/showcase.tsx
+var i = "border-t border-[color:var(--aui-divider)] py-6", a = "npx tembro init\nnpx tembro add button input data-table", o = ":root {\n  --aui-card-radius: 18px;\n  --aui-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);\n}";
+function s() {
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-0",
+		children: [/* @__PURE__ */ r("section", {
+			className: "pb-6",
+			children: [
+				/* @__PURE__ */ n("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Installed display primitive"
+				}),
+				/* @__PURE__ */ n("h3", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: "CodeBlock keeps docs snippets clean and copyable"
+				}),
+				/* @__PURE__ */ n("p", {
+					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+					children: "Use it for short technical snippets where product docs need clean framing, title, language label and inline copy."
+				})
+			]
+		}), /* @__PURE__ */ n("section", {
+			className: i,
+			children: /* @__PURE__ */ r("div", {
+				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+				children: [/* @__PURE__ */ r("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ n(t, {
+						title: "Install",
+						language: "bash",
+						code: a
+					}), /* @__PURE__ */ n(t, {
+						title: "Token override",
+						language: "css",
+						code: o,
+						wrap: !0
+					})]
+				}), /* @__PURE__ */ r("div", {
+					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+					children: [/* @__PURE__ */ r("div", {
+						className: "flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ n("p", {
+							className: "text-sm font-semibold aui-text-strong",
+							children: "Use when"
+						}), /* @__PURE__ */ n(e, {
+							variant: "secondary",
+							children: "Docs"
+						})]
+					}), /* @__PURE__ */ r("div", {
+						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+						children: [/* @__PURE__ */ n("p", { children: "Prefer CodeBlock when the snippet itself is the content. Do not wrap every small inline token in a code panel." }), /* @__PURE__ */ n("p", { children: "For long articles or syntax-highlighting needs, you may still layer a richer renderer around the same route." })]
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as CodeBlockShowcase };

package/dist/src/showcase/premium/collapse/index.cjs

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

package/dist/src/showcase/premium/collapse/index.js

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

package/dist/src/showcase/premium/collapse/mock.cjs

@@ -0,0 +1,20 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CollapseGroup } from "tembro"
+
+const sections = [
+  {
+    key: "permissions",
+    title: "Permissions",
+    description: "Who can publish and archive components.",
+    content: "Owners can publish. Editors can update docs. Viewers can inspect previews only.",
+  },
+  {
+    key: "release",
+    title: "Release notes",
+    description: "What changed in this version.",
+    content: "Added Tooltip, Combobox and Collapse public docs surfaces.",
+  },
+]
+
+export function Example() {
+  return <CollapseGroup items={sections} type="single" defaultValue="permissions" />
+}`,htmlCode:`<details data-slot="collapse"><summary>Open details</summary></details>`,cliCommand:`npx tembro add collapse`,highlights:[`Progressive disclosure`,`Single or multiple open items`,`Dense settings layout`,`Controlled group state`],relatedBlockSlugs:[`settings-form`,`dashboard-starter`,`crm-dashboard`],scenarios:[{title:`FAQ and settings`,description:`Reveal more detail without turning the page into a long wall of text.`},{title:`Release notes`,description:`Show secondary information only when the user asks for it.`},{title:`Admin sections`,description:`Useful in compact pages where every line of space matters.`}],capabilityNotes:[`Use Collapse when the default page should stay compact but details must remain nearby.`,'For one-open-at-a-time behavior, prefer `CollapseGroup` with `type="single"`.',`Do not hide critical validation or destructive warnings inside collapsed content.`,`Keep titles scannable so users know what each section reveals before opening it.`]};exports.collapseMock=e;

package/dist/src/showcase/premium/collapse/mock.js

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/collapse/mock.ts
+var e = {
+	code: "import { CollapseGroup } from \"tembro\"\n\nconst sections = [\n  {\n    key: \"permissions\",\n    title: \"Permissions\",\n    description: \"Who can publish and archive components.\",\n    content: \"Owners can publish. Editors can update docs. Viewers can inspect previews only.\",\n  },\n  {\n    key: \"release\",\n    title: \"Release notes\",\n    description: \"What changed in this version.\",\n    content: \"Added Tooltip, Combobox and Collapse public docs surfaces.\",\n  },\n]\n\nexport function Example() {\n  return <CollapseGroup items={sections} type=\"single\" defaultValue=\"permissions\" />\n}",
+	htmlCode: "<details data-slot=\"collapse\"><summary>Open details</summary></details>",
+	cliCommand: "npx tembro add collapse",
+	highlights: [
+		"Progressive disclosure",
+		"Single or multiple open items",
+		"Dense settings layout",
+		"Controlled group state"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"dashboard-starter",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "FAQ and settings",
+			description: "Reveal more detail without turning the page into a long wall of text."
+		},
+		{
+			title: "Release notes",
+			description: "Show secondary information only when the user asks for it."
+		},
+		{
+			title: "Admin sections",
+			description: "Useful in compact pages where every line of space matters."
+		}
+	],
+	capabilityNotes: [
+		"Use Collapse when the default page should stay compact but details must remain nearby.",
+		"For one-open-at-a-time behavior, prefer `CollapseGroup` with `type=\"single\"`.",
+		"Do not hide critical validation or destructive warnings inside collapsed content.",
+		"Keep titles scannable so users know what each section reveals before opening it."
+	]
+};
+//#endregion
+export { e as collapseMock };

package/dist/src/showcase/premium/collapse/showcase.cjs

@@ -0,0 +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/ui/collapse/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=[{key:`permissions`,title:`Permissions`,badge:(0,a.jsx)(n.Badge,{variant:`secondary`,children:`Core`}),description:`Who can publish, archive, and rename library surfaces.`,content:`Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape.`},{key:`release`,title:`Release notes`,description:`What changed in the current package cycle.`,meta:`July`,content:`This release opened more public docs coverage for interactive form and overlay surfaces.`},{key:`handoff`,title:`Handoff checklist`,description:`What must be checked before a public release.`,disabled:!0,disabledReason:`Unlock after release branch is cut.`,content:`Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity.`}];function c(){let[e,c]=i.useState(!1),[l,u]=i.useState(`permissions`),d=Array.isArray(l)?l.join(`, `)||`none`:l||`none`;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:`Progressive disclosure`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Collapse should reduce page noise first`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep the default surface compact, then reveal secondary information only when the user chooses to inspect it.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single item`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Grouped items`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled state`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Single disclosure`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsxs)(r.Collapse,{open:e,onOpenChange:c,children:[(0,a.jsx)(r.CollapseTrigger,{children:`Publish access rules`}),(0,a.jsx)(r.CollapseContent,{children:`Owners can publish releases. Editors can update docs content. Reviewers can inspect previews without changing package state.`})]})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Grouped disclosure`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.CollapseGroup,{items:s.map(e=>({...e})),type:`single`,value:l,onValueChange:u})})]})]})]}),(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:[`Single item: `,e?`open`:`closed`,` | Group: `,d]}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use quick actions to verify controlled open state without relying only on the disclosure click target.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c(!0),children:`Open single`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c(!1),children:`Close single`}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>u(`release`),children:`Open release`})]})]})})]})}exports.CollapseShowcase=c;

package/dist/src/showcase/premium/collapse/showcase.js

@@ -0,0 +1,161 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Collapse as n, CollapseContent as r, CollapseGroup as i, CollapseTrigger as a } from "../../../components/ui/collapse/index.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/showcase/premium/collapse/showcase.tsx
+var l = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", u = [
+	{
+		key: "permissions",
+		title: "Permissions",
+		badge: /* @__PURE__ */ s(t, {
+			variant: "secondary",
+			children: "Core"
+		}),
+		description: "Who can publish, archive, and rename library surfaces.",
+		content: "Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape."
+	},
+	{
+		key: "release",
+		title: "Release notes",
+		description: "What changed in the current package cycle.",
+		meta: "July",
+		content: "This release opened more public docs coverage for interactive form and overlay surfaces."
+	},
+	{
+		key: "handoff",
+		title: "Handoff checklist",
+		description: "What must be checked before a public release.",
+		disabled: !0,
+		disabledReason: "Unlock after release branch is cut.",
+		content: "Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity."
+	}
+];
+function d() {
+	let [d, f] = o.useState(!1), [p, m] = o.useState("permissions"), h = Array.isArray(p) ? p.join(", ") || "none" : p || "none";
+	return /* @__PURE__ */ c("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ c("section", {
+			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+				children: [/* @__PURE__ */ c("div", {
+					className: "max-w-xl",
+					children: [
+						/* @__PURE__ */ s("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+							children: "Progressive disclosure"
+						}),
+						/* @__PURE__ */ s("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Collapse should reduce page noise first"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+							children: "Keep the default surface compact, then reveal secondary information only when the user chooses to inspect it."
+						})
+					]
+				}), /* @__PURE__ */ c("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ s(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Single item"
+						}),
+						/* @__PURE__ */ s(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Grouped items"
+						}),
+						/* @__PURE__ */ s(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Controlled state"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ c("div", {
+				className: "mt-6 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]",
+				children: [/* @__PURE__ */ c("div", {
+					className: l,
+					children: [/* @__PURE__ */ s("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Single disclosure"
+					}), /* @__PURE__ */ s("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ c(n, {
+							open: d,
+							onOpenChange: f,
+							children: [/* @__PURE__ */ s(a, { children: "Publish access rules" }), /* @__PURE__ */ s(r, { children: "Owners can publish releases. Editors can update docs content. Reviewers can inspect previews without changing package state." })]
+						})
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: l,
+					children: [/* @__PURE__ */ s("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Grouped disclosure"
+					}), /* @__PURE__ */ s("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ s(i, {
+							items: u.map((e) => ({ ...e })),
+							type: "single",
+							value: p,
+							onValueChange: m
+						})
+					})]
+				})]
+			})]
+		}), /* @__PURE__ */ s("section", {
+			className: l,
+			children: /* @__PURE__ */ c("div", {
+				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ c("div", { children: [
+					/* @__PURE__ */ s("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Live state"
+					}),
+					/* @__PURE__ */ c("h4", {
+						className: "mt-2 text-lg font-semibold aui-text-strong",
+						children: [
+							"Single item: ",
+							d ? "open" : "closed",
+							" | Group: ",
+							h
+						]
+					}),
+					/* @__PURE__ */ s("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Use quick actions to verify controlled open state without relying only on the disclosure click target."
+					})
+				] }), /* @__PURE__ */ c("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ s(e, {
+							type: "button",
+							size: "sm",
+							onClick: () => f(!0),
+							children: "Open single"
+						}),
+						/* @__PURE__ */ s(e, {
+							type: "button",
+							size: "sm",
+							variant: "secondary",
+							onClick: () => f(!1),
+							children: "Close single"
+						}),
+						/* @__PURE__ */ s(e, {
+							type: "button",
+							size: "sm",
+							variant: "outline",
+							onClick: () => m("release"),
+							children: "Open release"
+						})
+					]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { d as CollapseShowcase };

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

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

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

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

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

@@ -0,0 +1,29 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Button, Select } from "tembro"
+
+const teammateOptions = [
+  { value: "azamat", label: "Azamat", description: "Design system owner" },
+  { value: "nodira", label: "Nodira", description: "Operations lead" },
+  { value: "sardor", label: "Sardor", description: "Frontend engineer" },
+]
+
+export function Example() {
+  const [value, setValue] = useState("azamat")
+
+  return (
+    <div className="space-y-3">
+      <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>
+      </div>
+      <Button variant="outline" onClick={() => setValue("nodira")}>Pick Nodira</Button>
+    </div>
+  )
+}`,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/src/showcase/premium/combobox/mock.js

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/combobox/mock.ts
+var e = {
+	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 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."
+	]
+};
+//#endregion
+export { e as comboboxMock };

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

@@ -0,0 +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/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/src/showcase/premium/combobox/showcase.js

@@ -0,0 +1,157 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.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
+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: c, setState: l }) {
+	let u = s.some((e) => e.value === c.selectValue) ? c.selectValue : "azamat", d = s.find((e) => e.value === u) ?? s[0], [f, p] = r.useState("");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ a("section", {
+			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+				children: [/* @__PURE__ */ a("div", {
+					className: "max-w-xl",
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+							children: "Search selection"
+						}),
+						/* @__PURE__ */ i("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Combobox is the keyboard-first local member"
+						}),
+						/* @__PURE__ */ i("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."
+						})
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Searchable"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Controlled"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Local options"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]",
+				children: [/* @__PURE__ */ a("div", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Assign component owner"
+					}), /* @__PURE__ */ i("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ i(n, {
+							value: u,
+							options: s.map((e) => ({ ...e })),
+							onValueChange: (e) => l({ selectValue: e ?? "azamat" }),
+							placeholder: "Choose teammate",
+							searchPlaceholder: "Search teammate...",
+							searchable: !0,
+							clearable: !0,
+							showSelectedDescription: !0,
+							onSearchChange: p
+						})
+					})]
+				}), /* @__PURE__ */ a("div", {
+					className: o,
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Selection summary"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 text-lg font-semibold aui-text-strong",
+							children: d.label
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-2 text-sm leading-6 aui-text-muted",
+							children: d.description
+						}),
+						/* @__PURE__ */ i("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."
+						})
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ i("section", {
+			className: o,
+			children: /* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ a("div", { children: [
+					/* @__PURE__ */ i("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Live state"
+					}),
+					/* @__PURE__ */ a("h4", {
+						className: "mt-2 text-lg font-semibold aui-text-strong",
+						children: ["Current owner: ", d.label]
+					}),
+					/* @__PURE__ */ i("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."
+					}),
+					/* @__PURE__ */ a("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: ["Search query: ", f || "empty"]
+					})
+				] }), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ i(e, {
+						type: "button",
+						size: "sm",
+						onClick: () => l({ selectValue: "nodira" }),
+						children: "Pick Nodira"
+					}), /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "sm",
+						variant: "secondary",
+						onClick: () => l({ selectValue: "azamat" }),
+						children: "Reset"
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { c as ComboboxShowcase };

package/dist/src/showcase/premium/command-bar/index.cjs

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

package/dist/src/showcase/premium/command-bar/index.js

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

package/dist/src/showcase/premium/command-bar/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CommandBar, Kbd, Button } from "tembro"
+
+export function Example() {
+  return (
+    <CommandBar>
+      <Kbd>G</Kbd>
+      <Button size="sm" variant="ghost">Go to dashboard</Button>
+      <Button size="sm">Publish</Button>
+    </CommandBar>
+  )
+}`,cliCommand:`npx tembro add command-bar`,highlights:[`Floating action rail for global shortcuts or workflow actions`,`Top or bottom positioning`,`Useful when a few persistent actions should stay reachable`],scenarios:[{title:`Global actions`,description:`Keep a small set of route-level actions always reachable.`},{title:`Keyboard hints`,description:`Pair actions with shortcuts inside the same persistent rail.`},{title:`Review flow`,description:`Float approve, reject, and comment actions over long content.`}]};exports.commandBarMock=e;

package/dist/src/showcase/premium/command-bar/mock.js

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/command-bar/mock.ts
+var e = {
+	code: "import { CommandBar, Kbd, Button } from \"tembro\"\n\nexport function Example() {\n  return (\n    <CommandBar>\n      <Kbd>G</Kbd>\n      <Button size=\"sm\" variant=\"ghost\">Go to dashboard</Button>\n      <Button size=\"sm\">Publish</Button>\n    </CommandBar>\n  )\n}",
+	cliCommand: "npx tembro add command-bar",
+	highlights: [
+		"Floating action rail for global shortcuts or workflow actions",
+		"Top or bottom positioning",
+		"Useful when a few persistent actions should stay reachable"
+	],
+	scenarios: [
+		{
+			title: "Global actions",
+			description: "Keep a small set of route-level actions always reachable."
+		},
+		{
+			title: "Keyboard hints",
+			description: "Pair actions with shortcuts inside the same persistent rail."
+		},
+		{
+			title: "Review flow",
+			description: "Float approve, reject, and comment actions over long content."
+		}
+	]
+};
+//#endregion
+export { e as commandBarMock };

package/dist/src/showcase/premium/command-bar/showcase.cjs

@@ -0,0 +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/kbd/index.cjs"),r=require("../../../components/navigation/command-bar.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c(){let[e,c]=i.useState(`bottom`),[l,u]=i.useState(!0);return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed navigation helper`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`CommandBar keeps a few high-value actions nearby`}),(0,o.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`This is not a replacement for every footer or toolbar. Use it when persistent floating actions improve a long reading or review flow.`})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`rounded-[28px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:l?`secondary`:`outline`,onClick:()=>u(e=>!e),children:l?`Hide bar`:`Show bar`}),(0,o.jsx)(t.Button,{size:`sm`,variant:e===`bottom`?`secondary`:`outline`,onClick:()=>c(`bottom`),children:`Bottom`}),(0,o.jsx)(t.Button,{size:`sm`,variant:e===`top`?`secondary`:`outline`,onClick:()=>c(`top`),children:`Top`})]}),(0,o.jsxs)(`div`,{className:`relative mt-5 min-h-[320px] overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:[(0,o.jsxs)(`div`,{className:`max-w-2xl`,children:[(0,o.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Quarterly release review`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Long content benefits from a small floating action rail when the user must repeatedly approve, reject, or comment without scrolling back to a fixed footer.`}),(0,o.jsxs)(`div`,{className:`mt-6 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,o.jsx)(`p`,{children:`Keep the action set intentionally small. More than three or four actions usually means the bar should become a real toolbar instead.`}),(0,o.jsx)(`p`,{children:`Pair shortcut hints with actions only when the shortcuts are actually supported by the product.`}),(0,o.jsx)(`p`,{children:`The bar should help reading-heavy workflows, not distract from them.`})]})]}),(0,o.jsxs)(r.CommandBar,{open:l,position:e,grouped:!0,label:`Review flow`,className:`max-w-[calc(100%-2rem)]`,children:[(0,o.jsx)(n.Kbd,{children:`G`}),(0,o.jsxs)(t.Button,{size:`sm`,variant:`ghost`,children:[(0,o.jsx)(a.MessageSquareIcon,{className:`mr-2 size-4`}),`Comment`]}),(0,o.jsxs)(t.Button,{size:`sm`,variant:`outline`,children:[(0,o.jsx)(a.XIcon,{className:`mr-2 size-4`}),`Reject`]}),(0,o.jsxs)(t.Button,{size:`sm`,children:[(0,o.jsx)(a.CheckIcon,{className:`mr-2 size-4`}),`Approve`]})]})]})]})})]})}exports.CommandBarShowcase=c;