tembro 2.1.13 → 3.1.1

package/dist/src/showcase/premium/right-click-menu/showcase.js

@@ -0,0 +1,142 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { RightClickMenu as n } from "../../../components/ui/right-click-menu/index.js";
+import * as r from "react";
+import { ArchiveIcon as i, CopyIcon as a, PencilIcon as o, Trash2Icon as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/showcase/premium/right-click-menu/showcase.tsx
+var u = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function d() {
+	let [d, f] = r.useState("Rename");
+	return /* @__PURE__ */ l("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ l("section", {
+			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+			children: [/* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+				children: [/* @__PURE__ */ l("div", {
+					className: "max-w-xl",
+					children: [
+						/* @__PURE__ */ c("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+							children: "Context actions"
+						}),
+						/* @__PURE__ */ c("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Right click menu should hide secondary actions until they are needed"
+						}),
+						/* @__PURE__ */ c("p", {
+							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+							children: "Use it for workspace-style surfaces where always-visible row actions would create too much noise."
+						})
+					]
+				}), /* @__PURE__ */ l("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ c(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Secondary actions"
+						}),
+						/* @__PURE__ */ c(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Pointer workflow"
+						}),
+						/* @__PURE__ */ c(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Compact menu"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ l("div", {
+				className: "mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]",
+				children: [/* @__PURE__ */ l("div", {
+					className: u,
+					children: [/* @__PURE__ */ c("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Interactive surface"
+					}), /* @__PURE__ */ c("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ c(n, {
+							items: [
+								{
+									label: "Rename",
+									icon: /* @__PURE__ */ c(o, {}),
+									shortcut: "R",
+									onSelect: () => f("Rename")
+								},
+								{
+									label: "Duplicate",
+									icon: /* @__PURE__ */ c(a, {}),
+									shortcut: "D",
+									onSelect: () => f("Duplicate")
+								},
+								{
+									label: "Archive",
+									icon: /* @__PURE__ */ c(i, {}),
+									onSelect: () => f("Archive")
+								},
+								{
+									label: "Remove",
+									icon: /* @__PURE__ */ c(s, {}),
+									variant: "destructive",
+									onSelect: () => f("Remove")
+								}
+							],
+							children: /* @__PURE__ */ c("div", {
+								className: "rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted",
+								tabIndex: 0,
+								children: "Right click, use Shift+F10, or press the context-menu key in this area"
+							})
+						})
+					})]
+				}), /* @__PURE__ */ l("div", {
+					className: u,
+					children: [
+						/* @__PURE__ */ c("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Last action"
+						}),
+						/* @__PURE__ */ c("p", {
+							className: "mt-3 text-lg font-semibold aui-text-strong",
+							children: d
+						}),
+						/* @__PURE__ */ c("p", {
+							className: "mt-2 text-sm leading-6 aui-text-muted",
+							children: "Keep a visible fallback action path for keyboard and touch users."
+						})
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ c("section", {
+			className: u,
+			children: /* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Live state"
+				}), /* @__PURE__ */ l("h4", {
+					className: "mt-2 text-lg font-semibold aui-text-strong",
+					children: ["Selected action: ", d]
+				})] }), /* @__PURE__ */ c("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						"Rename",
+						"Duplicate",
+						"Archive"
+					].map((t) => /* @__PURE__ */ c(e, {
+						type: "button",
+						size: "sm",
+						variant: d === t ? "default" : "secondary",
+						onClick: () => f(t),
+						children: t
+					}, t))
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { d as RightClickMenuShowcase };

package/dist/src/showcase/premium/saved-filter-select/index.cjs

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

package/dist/src/showcase/premium/saved-filter-select/index.js

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

package/dist/src/showcase/premium/saved-filter-select/mock.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { SavedFilterSelect } from "tembro"
+
+const filters = [
+  { value: "billing", label: "Billing", description: "Invoices and payment status" },
+  { value: "ops", label: "Operations", description: "Queues and workload" },
+  { value: "owners", label: "Owner: Azamat", description: "Assigned records only" },
+]
+
+export function Example() {
+  const [value, setValue] = useState("billing")
+
+  return (
+    <SavedFilterSelect
+      value={value}
+      onValueChange={setValue}
+      filters={filters}
+      onSave={() => undefined}
+      onDelete={() => undefined}
+    />
+  )
+}`,cliCommand:`npx tembro add saved-filter-select`,highlights:[`Named view switching`,`Nested delete action behavior`,`Toolbar-friendly control`,`Controlled active view API`],scenarios:[{title:`Saved table states`,description:`Restore common operational filter sets quickly.`},{title:`Named views`,description:`Expose billing, ops or owner-specific modes in one control.`},{title:`Managed delete`,description:`Keep delete and apply interactions separated inside the same list row.`}],capabilityNotes:[`Use SavedFilterSelect where operators revisit the same filter combinations repeatedly.`,`Keep the active view controlled so tables and filters stay synchronized.`,`Nested delete actions are isolated from parent selection to avoid accidental view switching.`]};exports.savedFilterSelectMock=e;

package/dist/src/showcase/premium/saved-filter-select/mock.js

@@ -0,0 +1,32 @@
+//#region src/showcase/premium/saved-filter-select/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { SavedFilterSelect } from \"tembro\"\n\nconst filters = [\n  { value: \"billing\", label: \"Billing\", description: \"Invoices and payment status\" },\n  { value: \"ops\", label: \"Operations\", description: \"Queues and workload\" },\n  { value: \"owners\", label: \"Owner: Azamat\", description: \"Assigned records only\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"billing\")\n\n  return (\n    <SavedFilterSelect\n      value={value}\n      onValueChange={setValue}\n      filters={filters}\n      onSave={() => undefined}\n      onDelete={() => undefined}\n    />\n  )\n}",
+	cliCommand: "npx tembro add saved-filter-select",
+	highlights: [
+		"Named view switching",
+		"Nested delete action behavior",
+		"Toolbar-friendly control",
+		"Controlled active view API"
+	],
+	scenarios: [
+		{
+			title: "Saved table states",
+			description: "Restore common operational filter sets quickly."
+		},
+		{
+			title: "Named views",
+			description: "Expose billing, ops or owner-specific modes in one control."
+		},
+		{
+			title: "Managed delete",
+			description: "Keep delete and apply interactions separated inside the same list row."
+		}
+	],
+	capabilityNotes: [
+		"Use SavedFilterSelect where operators revisit the same filter combinations repeatedly.",
+		"Keep the active view controlled so tables and filters stay synchronized.",
+		"Nested delete actions are isolated from parent selection to avoid accidental view switching."
+	]
+};
+//#endregion
+export { e as savedFilterSelectMock };

package/dist/src/showcase/premium/saved-filter-select/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/filters/saved-filter-select.cjs"),r=require("../../component-route-data.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o(){let[e,o]=i.useState(`billing`);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Badge,{variant:`outline`,children:`Saved views`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Delete action`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Toolbar-ready`})]}),(0,a.jsx)(`p`,{className:`mt-3 text-sm font-medium aui-text-strong`,children:`SavedFilterSelect is the named-view control`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use it when operators need to restore common table states quickly instead of rebuilding every filter combination manually.`})]}),(0,a.jsx)(n.SavedFilterSelect,{value:e,onValueChange:o,filters:r.routeSavedViews,onSave:()=>void 0,onDelete:()=>void 0}),(0,a.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Active view`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:r.routeSavedViews.find(t=>t.value===e)?.label??`No saved view`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Interaction model`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Delete actions stay isolated from the parent list item selection.`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Use case`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Operational tables, finance queues and admin list views.`})]})]})]})}exports.SavedFilterSelectShowcase=o;

package/dist/src/showcase/premium/saved-filter-select/showcase.js

@@ -0,0 +1,88 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { SavedFilterSelect as t } from "../../../components/filters/saved-filter-select.js";
+import { routeSavedViews as n } from "../../component-route-data.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/saved-filter-select/showcase.tsx
+function o() {
+	let [o, s] = r.useState("billing");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+				children: [
+					/* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ i(e, {
+								variant: "outline",
+								children: "Saved views"
+							}),
+							/* @__PURE__ */ i(e, {
+								variant: "outline",
+								children: "Delete action"
+							}),
+							/* @__PURE__ */ i(e, {
+								variant: "outline",
+								children: "Toolbar-ready"
+							})
+						]
+					}),
+					/* @__PURE__ */ i("p", {
+						className: "mt-3 text-sm font-medium aui-text-strong",
+						children: "SavedFilterSelect is the named-view control"
+					}),
+					/* @__PURE__ */ i("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Use it when operators need to restore common table states quickly instead of rebuilding every filter combination manually."
+					})
+				]
+			}),
+			/* @__PURE__ */ i(t, {
+				value: o,
+				onValueChange: s,
+				filters: n,
+				onSave: () => void 0,
+				onDelete: () => void 0
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ a("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ i("p", {
+							className: "font-medium aui-text-strong",
+							children: "Active view"
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-2 aui-text-muted",
+							children: n.find((e) => e.value === o)?.label ?? "No saved view"
+						})]
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ i("p", {
+							className: "font-medium aui-text-strong",
+							children: "Interaction model"
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Delete actions stay isolated from the parent list item selection."
+						})]
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ i("p", {
+							className: "font-medium aui-text-strong",
+							children: "Use case"
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Operational tables, finance queues and admin list views."
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { o as SavedFilterSelectShowcase };

package/dist/src/showcase/premium/scroll-box/index.cjs

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

package/dist/src/showcase/premium/scroll-box/index.js

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

package/dist/src/showcase/premium/scroll-box/mock.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ScrollBox } from "tembro"
+
+const items = ["Queue item 1", "Queue item 2", "Queue item 3", "Queue item 4", "Queue item 5"]
+
+export function Example() {
+  return (
+    <ScrollBox maxHeight={220} className="rounded-2xl border border-border bg-card p-3">
+      <div className="grid gap-2">
+        {items.map((item) => <div key={item} className="rounded-xl border border-border/70 px-3 py-2">{item}</div>)}
+      </div>
+    </ScrollBox>
+  )
+}`,htmlCode:`<div data-slot="scroll-box"></div>`,cliCommand:`npx tembro add scroll-box`,highlights:[`Bounded scroll`,`Axis control`,`Dense lists`,`Panel content`],relatedBlockSlugs:[`users-table`,`crm-dashboard`,`dashboard-starter`],scenarios:[{title:`Queue panel`,description:`Keep long lists inside a bounded surface instead of stretching the page.`},{title:`Side panel`,description:`Useful when a drawer or sidebar must scroll independently.`},{title:`Dense admin lists`,description:`Preserve surrounding layout while still exposing all records.`}],capabilityNotes:[`Use ScrollBox when only one region should scroll, not the whole page.`,`Set a clear height boundary so users understand why the area scrolls.`,`Avoid nesting many independent scroll regions unless necessary.`,`Keep internal spacing readable; scroll should not become visual punishment.`]};exports.scrollBoxMock=e;

package/dist/src/showcase/premium/scroll-box/mock.js

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/scroll-box/mock.ts
+var e = {
+	code: "import { ScrollBox } from \"tembro\"\n\nconst items = [\"Queue item 1\", \"Queue item 2\", \"Queue item 3\", \"Queue item 4\", \"Queue item 5\"]\n\nexport function Example() {\n  return (\n    <ScrollBox maxHeight={220} className=\"rounded-2xl border border-border bg-card p-3\">\n      <div className=\"grid gap-2\">\n        {items.map((item) => <div key={item} className=\"rounded-xl border border-border/70 px-3 py-2\">{item}</div>)}\n      </div>\n    </ScrollBox>\n  )\n}",
+	htmlCode: "<div data-slot=\"scroll-box\"></div>",
+	cliCommand: "npx tembro add scroll-box",
+	highlights: [
+		"Bounded scroll",
+		"Axis control",
+		"Dense lists",
+		"Panel content"
+	],
+	relatedBlockSlugs: [
+		"users-table",
+		"crm-dashboard",
+		"dashboard-starter"
+	],
+	scenarios: [
+		{
+			title: "Queue panel",
+			description: "Keep long lists inside a bounded surface instead of stretching the page."
+		},
+		{
+			title: "Side panel",
+			description: "Useful when a drawer or sidebar must scroll independently."
+		},
+		{
+			title: "Dense admin lists",
+			description: "Preserve surrounding layout while still exposing all records."
+		}
+	],
+	capabilityNotes: [
+		"Use ScrollBox when only one region should scroll, not the whole page.",
+		"Set a clear height boundary so users understand why the area scrolls.",
+		"Avoid nesting many independent scroll regions unless necessary.",
+		"Keep internal spacing readable; scroll should not become visual punishment."
+	]
+};
+//#endregion
+export { e as scrollBoxMock };

package/dist/src/showcase/premium/scroll-box/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/scroll-box/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=Array.from({length:12},(e,t)=>({id:`queue-${t+1}`,title:`Queue item ${t+1}`,text:t%2==0?`Waiting for review and release notes approval.`:`Needs design check before public docs sync.`}));function c(){let[e,c]=i.useState(220);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:`Bounded scroll`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Scroll box should contain density without breaking page rhythm`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it when one region must scroll independently while the rest of the page stays stable.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Independent region`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Height bound`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Dense lists`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1fr_0.9fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Review queue`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.ScrollBox,{maxHeight:e,className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-3`,children:(0,a.jsx)(`div`,{className:`grid gap-2`,children:s.map(e=>(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-3 py-3`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:e.title}),(0,a.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.text})]},e.id))})})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current max height`}),(0,a.jsxs)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:[e,`px`]})]})]})]}),(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:[`Scroll height: `,e,`px`]})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[160,220,320].map(n=>(0,a.jsxs)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>c(n),children:[n,`px`]},n))})]})})]})}exports.ScrollBoxShowcase=c;

package/dist/src/showcase/premium/scroll-box/showcase.js

@@ -0,0 +1,127 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { ScrollBox as n } from "../../../components/ui/scroll-box/index.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/scroll-box/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = Array.from({ length: 12 }, (e, t) => ({
+	id: `queue-${t + 1}`,
+	title: `Queue item ${t + 1}`,
+	text: t % 2 == 0 ? "Waiting for review and release notes approval." : "Needs design check before public docs sync."
+}));
+function c() {
+	let [c, l] = r.useState(220);
+	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: "Bounded scroll"
+						}),
+						/* @__PURE__ */ i("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Scroll box should contain density without breaking page rhythm"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+							children: "Use it when one region must scroll independently while the rest of the page stays stable."
+						})
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Independent region"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Height bound"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Dense lists"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-6 grid gap-4 xl:grid-cols-[1fr_0.9fr]",
+				children: [/* @__PURE__ */ a("div", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Review queue"
+					}), /* @__PURE__ */ i("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ i(n, {
+							maxHeight: c,
+							className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-3",
+							children: /* @__PURE__ */ i("div", {
+								className: "grid gap-2",
+								children: s.map((e) => /* @__PURE__ */ a("div", {
+									className: "rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-3 py-3",
+									children: [/* @__PURE__ */ i("p", {
+										className: "font-medium aui-text-strong",
+										children: e.title
+									}), /* @__PURE__ */ i("p", {
+										className: "mt-1 text-sm aui-text-muted",
+										children: e.text
+									})]
+								}, e.id))
+							})
+						})
+					})]
+				}), /* @__PURE__ */ a("div", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Current max height"
+					}), /* @__PURE__ */ a("p", {
+						className: "mt-3 text-lg font-semibold aui-text-strong",
+						children: [c, "px"]
+					})]
+				})]
+			})]
+		}), /* @__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: [
+						"Scroll height: ",
+						c,
+						"px"
+					]
+				})] }), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						160,
+						220,
+						320
+					].map((t) => /* @__PURE__ */ a(e, {
+						type: "button",
+						size: "sm",
+						variant: c === t ? "default" : "secondary",
+						onClick: () => l(t),
+						children: [t, "px"]
+					}, t))
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { c as ScrollBoxShowcase };

package/dist/src/showcase/premium/search-input/index.cjs

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

package/dist/src/showcase/premium/search-input/index.js

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

package/dist/src/showcase/premium/search-input/mock.cjs

@@ -0,0 +1,18 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { Input, Kbd } from "tembro"
+
+export function Example() {
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Input
+      kind="search"
+      value={value}
+      onValueChange={setValue}
+      placeholder="Search customers, invoices, or routes..."
+      resultCount={18}
+      shortcut={<Kbd>Ctrl+K</Kbd>}
+      debounceMs={250}
+    />
+  )
+}`,highlights:[`Search icon, result count, and shortcut support`,`Debounced value callback`,`Clear action inheritance`,`Good fit for toolbars and command launchers`],scenarios:[{title:`Data table search`,description:`Filter customers, invoices, or events without leaving the current view.`},{title:`Global search bar`,description:`Pair result count and shortcut hint in a compact top-level surface.`},{title:`Settings search`,description:`Reduce long preferences pages into one searchable control.`}],capabilityNotes:[`Keep search placeholder specific to the entities users can actually find.`,`Use debounced callbacks for remote or expensive filtering.`,`Only show result count when the number helps the user decide the next step.`]};exports.searchInputMock=e;

package/dist/src/showcase/premium/search-input/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/search-input/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { Input, Kbd } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Input\n      kind=\"search\"\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Search customers, invoices, or routes...\"\n      resultCount={18}\n      shortcut={<Kbd>Ctrl+K</Kbd>}\n      debounceMs={250}\n    />\n  )\n}",
+	highlights: [
+		"Search icon, result count, and shortcut support",
+		"Debounced value callback",
+		"Clear action inheritance",
+		"Good fit for toolbars and command launchers"
+	],
+	scenarios: [
+		{
+			title: "Data table search",
+			description: "Filter customers, invoices, or events without leaving the current view."
+		},
+		{
+			title: "Global search bar",
+			description: "Pair result count and shortcut hint in a compact top-level surface."
+		},
+		{
+			title: "Settings search",
+			description: "Reduce long preferences pages into one searchable control."
+		}
+	],
+	capabilityNotes: [
+		"Keep search placeholder specific to the entities users can actually find.",
+		"Use debounced callbacks for remote or expensive filtering.",
+		"Only show result count when the number helps the user decide the next step."
+	]
+};
+//#endregion
+export { e as searchInputMock };

package/dist/src/showcase/premium/search-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/input/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/kbd/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=[`Acme Growth workspace`,`Invoice 2048 approval`,`Northwind billing route`,`Customer retention dashboard`,`Workspace member access`,`Export usage report`];function c({mode:e}){let[c,l]=i.useState(``),[u,d]=i.useState(``),f=i.useMemo(()=>{let e=u.trim().toLowerCase();return e?s.filter(t=>t.toLowerCase().includes(e)):s},[u]);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`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 control`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`SearchInput should shorten finding, not add interface noise`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`A good search field exposes intent clearly: what can be searched, how many matches remain, and whether the query is still being processed.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Debounced`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Shortcut aware`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.Input,{kind:`search`,value:c,onValueChange:l,onDebouncedValueChange:d,placeholder:`Search customers, invoices, or routes...`,resultCount:f.length,shortcut:(0,a.jsx)(r.Kbd,{children:`Ctrl+K`}),debounceMs:250})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Resolved query`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:u||`No active query`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`The debounced value represents what should usually drive remote or expensive filters.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Preview results`}),(0,a.jsx)(`div`,{className:`mt-4 space-y-2 text-sm`,children:f.map(e=>(0,a.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] px-3 py-2 aui-text-muted`,children:e},e))})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"Try searching for `invoice`, `workspace`, or `billing`."})}):null]})}exports.SearchInputShowcase=c;