tembro 3.0.0 → 3.1.5

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/color-picker/index.cjs

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

package/dist/src/showcase/premium/color-picker/index.js

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

package/dist/src/showcase/premium/color-picker/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ColorPicker } from "tembro"
+
+export function Example() {
+  return (
+    <ColorPicker
+      label="Brand color"
+      defaultValue="#2563ebcc"
+      showAlpha
+    />
+  )
+}`,cliCommand:`npx tembro add color-picker`,highlights:[`Controlled HEX and alpha value`,`Keyboard-editable input and accessible swatches`],scenarios:[{title:`Brand settings`,description:`Choose and validate theme colors with reusable presets.`},{title:`Design tools`,description:`Edit opaque or alpha-aware colors through one value contract.`}]};exports.colorPickerMock=e;

package/dist/src/showcase/premium/color-picker/mock.js

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/color-picker/mock.ts
+var e = {
+	code: "import { ColorPicker } from \"tembro\"\n\nexport function Example() {\n  return (\n    <ColorPicker\n      label=\"Brand color\"\n      defaultValue=\"#2563ebcc\"\n      showAlpha\n    />\n  )\n}",
+	cliCommand: "npx tembro add color-picker",
+	highlights: ["Controlled HEX and alpha value", "Keyboard-editable input and accessible swatches"],
+	scenarios: [{
+		title: "Brand settings",
+		description: "Choose and validate theme colors with reusable presets."
+	}, {
+		title: "Design tools",
+		description: "Edit opaque or alpha-aware colors through one value contract."
+	}]
+};
+//#endregion
+export { e as colorPickerMock };

package/dist/src/showcase/premium/color-picker/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/color-picker.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(`#2563ebcc`);return(0,r.jsxs)(`div`,{className:`mx-auto grid w-full max-w-sm gap-3`,children:[(0,r.jsx)(t.ColorPicker,{label:`Brand color`,value:e,onValueChange:i,showAlpha:!0}),(0,r.jsx)(`code`,{className:`text-sm text-muted-foreground`,children:e})]})}exports.ColorPickerShowcase=i;

package/dist/src/showcase/premium/color-picker/showcase.js

@@ -0,0 +1,21 @@
+import { ColorPicker as e } from "../../../components/inputs/color-picker.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/color-picker/showcase.tsx
+function i() {
+	let [i, a] = t.useState("#2563ebcc");
+	return /* @__PURE__ */ r("div", {
+		className: "mx-auto grid w-full max-w-sm gap-3",
+		children: [/* @__PURE__ */ n(e, {
+			label: "Brand color",
+			value: i,
+			onValueChange: a,
+			showAlpha: !0
+		}), /* @__PURE__ */ n("code", {
+			className: "text-sm text-muted-foreground",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { i as ColorPickerShowcase };

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

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

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

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

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

@@ -0,0 +1,24 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { CommandPalette, Kbd } from "tembro"
+
+export function Example() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <CommandPalette
+      open={open}
+      onOpenChange={setOpen}
+      placeholder="Search routes and actions..."
+      groups={[
+        {
+          id: "routes",
+          label: "Routes",
+          items: [
+            { id: "overview", label: "Open overview", shortcut: <Kbd>G O</Kbd> },
+            { id: "billing", label: "Open billing", shortcut: <Kbd>G B</Kbd> },
+          ],
+        },
+      ]}
+    />
+  )
+}`,highlights:[`Grouped commands`,`Recent items`,`Async load support`,`Keyboard-first global navigation surface`],scenarios:[{title:`Route jump`,description:`Move between product areas without reaching for sidebar navigation.`},{title:`Quick action`,description:`Trigger create, invite, export, or sync flows from one searchable surface.`},{title:`Large workspace`,description:`Merge static routes and async results into one command layer.`}],capabilityNotes:[`Keep labels verb-led and searchable.`,`Use async groups for remote entities such as customers or projects.`,`Recent commands help repeated admin workflows feel much faster.`]};exports.commandPaletteMock=e;

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/command-palette/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { CommandPalette, Kbd } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <CommandPalette\n      open={open}\n      onOpenChange={setOpen}\n      placeholder=\"Search routes and actions...\"\n      groups={[\n        {\n          id: \"routes\",\n          label: \"Routes\",\n          items: [\n            { id: \"overview\", label: \"Open overview\", shortcut: <Kbd>G O</Kbd> },\n            { id: \"billing\", label: \"Open billing\", shortcut: <Kbd>G B</Kbd> },\n          ],\n        },\n      ]}\n    />\n  )\n}",
+	highlights: [
+		"Grouped commands",
+		"Recent items",
+		"Async load support",
+		"Keyboard-first global navigation surface"
+	],
+	scenarios: [
+		{
+			title: "Route jump",
+			description: "Move between product areas without reaching for sidebar navigation."
+		},
+		{
+			title: "Quick action",
+			description: "Trigger create, invite, export, or sync flows from one searchable surface."
+		},
+		{
+			title: "Large workspace",
+			description: "Merge static routes and async results into one command layer."
+		}
+	],
+	capabilityNotes: [
+		"Keep labels verb-led and searchable.",
+		"Use async groups for remote entities such as customers or projects.",
+		"Recent commands help repeated admin workflows feel much faster."
+	]
+};
+//#endregion
+export { e as commandPaletteMock };

package/dist/src/showcase/premium/command-palette/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/kbd/index.cjs"),i=require("../../../components/command/command-palette.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function c(e){return new Promise(t=>window.setTimeout(t,e))}function l({mode:e}){let[l,u]=a.useState(!1),[d,f]=a.useState(`Nothing selected yet`),p=a.useMemo(()=>[{id:`routes`,label:`Routes`,items:[{id:`overview`,label:`Open overview`,description:`Jump to the workspace summary route.`,shortcut:(0,o.jsx)(r.Kbd,{children:`G O`}),onSelect:async()=>{await c(220),f(`Opened overview route`)}},{id:`billing`,label:`Open billing`,description:`Inspect invoices, methods, and workspace usage.`,shortcut:(0,o.jsx)(r.Kbd,{children:`G B`}),onSelect:async()=>{await c(220),f(`Opened billing route`)}}]},{id:`actions`,label:`Actions`,items:[{id:`invite`,label:`Invite teammate`,description:`Start workspace access flow.`,shortcut:(0,o.jsx)(r.Kbd,{children:`⌘I`}),onSelect:async()=>{await c(220),f(`Invite flow started`)}},{id:`export`,label:`Export report`,description:`Download usage summary as CSV.`,shortcut:(0,o.jsx)(r.Kbd,{children:`⌘E`}),onSelect:async()=>{await c(220),f(`Export requested`)}}]},{id:`workspace`,label:`Workspace search`,loadingLabel:`Searching workspace...`,emptyLabel:`No matching workspace entities.`,loadItems:async e=>{await c(260);let t=[{id:`acme`,label:`Acme Growth`,description:`Customer workspace`,value:`acme growth customer workspace`},{id:`north`,label:`Northwind Ops`,description:`Operations team`,value:`northwind ops operations team`},{id:`invoice`,label:`Invoice 2048`,description:`Billing entity`,value:`invoice 2048 billing entity`}],n=e.trim().toLowerCase();return n?t.filter(e=>String(e.value??e.label).toLowerCase().includes(n)):t}}],[]);return(0,o.jsxs)(`div`,{className:`space-y-5`,children:[(0,o.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Global actions`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Command palette should collapse navigation and actions into one fast surface`}),(0,o.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Good command UX combines routes, actions, and async workspace search without looking like a giant modal form.`})]}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Recent-aware`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Async search`})]})]})}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Try the live surface`}),(0,o.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the palette, trigger route jumps, or type to load workspace entities.`})]}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{onClick:()=>u(!0),children:`Open palette`}),(0,o.jsxs)(n.Badge,{variant:`outline`,className:`rounded-full`,children:[(0,o.jsx)(r.Kbd,{children:`Ctrl`}),` + `,(0,o.jsx)(r.Kbd,{children:`K`})]})]})]})}),(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,o.jsxs)(`section`,{className:s,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last action`}),(0,o.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:d}),(0,o.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Command results should feel immediate and operational.`})]}),(0,o.jsxs)(`section`,{className:s,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Design rule`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep command labels short, searchable, and verb-first. Async groups should behave like results, not like a second UI inside the modal.`})]})]}),(0,o.jsx)(i.CommandPalette,{open:l,onOpenChange:u,placeholder:`Search routes and actions...`,groups:p,recent:!0}),e===`playground`?(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>u(!0),children:`Reopen palette`}),(0,o.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>f(`Nothing selected yet`),children:`Reset output`})]})}):null]})}exports.CommandPaletteShowcase=l;

package/dist/src/showcase/premium/command-palette/showcase.js

@@ -0,0 +1,208 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Kbd as n } from "../../../components/ui/kbd/index.js";
+import { CommandPalette as r } from "../../../components/command/command-palette.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/command-palette/showcase.tsx
+var s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function c(e) {
+	return new Promise((t) => window.setTimeout(t, e));
+}
+function l({ mode: l }) {
+	let [u, d] = i.useState(!1), [f, p] = i.useState("Nothing selected yet"), m = i.useMemo(() => [
+		{
+			id: "routes",
+			label: "Routes",
+			items: [{
+				id: "overview",
+				label: "Open overview",
+				description: "Jump to the workspace summary route.",
+				shortcut: /* @__PURE__ */ a(n, { children: "G O" }),
+				onSelect: async () => {
+					await c(220), p("Opened overview route");
+				}
+			}, {
+				id: "billing",
+				label: "Open billing",
+				description: "Inspect invoices, methods, and workspace usage.",
+				shortcut: /* @__PURE__ */ a(n, { children: "G B" }),
+				onSelect: async () => {
+					await c(220), p("Opened billing route");
+				}
+			}]
+		},
+		{
+			id: "actions",
+			label: "Actions",
+			items: [{
+				id: "invite",
+				label: "Invite teammate",
+				description: "Start workspace access flow.",
+				shortcut: /* @__PURE__ */ a(n, { children: "⌘I" }),
+				onSelect: async () => {
+					await c(220), p("Invite flow started");
+				}
+			}, {
+				id: "export",
+				label: "Export report",
+				description: "Download usage summary as CSV.",
+				shortcut: /* @__PURE__ */ a(n, { children: "⌘E" }),
+				onSelect: async () => {
+					await c(220), p("Export requested");
+				}
+			}]
+		},
+		{
+			id: "workspace",
+			label: "Workspace search",
+			loadingLabel: "Searching workspace...",
+			emptyLabel: "No matching workspace entities.",
+			loadItems: async (e) => {
+				await c(260);
+				let t = [
+					{
+						id: "acme",
+						label: "Acme Growth",
+						description: "Customer workspace",
+						value: "acme growth customer workspace"
+					},
+					{
+						id: "north",
+						label: "Northwind Ops",
+						description: "Operations team",
+						value: "northwind ops operations team"
+					},
+					{
+						id: "invoice",
+						label: "Invoice 2048",
+						description: "Billing entity",
+						value: "invoice 2048 billing entity"
+					}
+				], n = e.trim().toLowerCase();
+				return n ? t.filter((e) => String(e.value ?? e.label).toLowerCase().includes(n)) : t;
+			}
+		}
+	], []);
+	return /* @__PURE__ */ o("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__ */ o("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ o("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ a("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Global actions"
+							}),
+							/* @__PURE__ */ a("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Command palette should collapse navigation and actions into one fast surface"
+							}),
+							/* @__PURE__ */ a("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Good command UX combines routes, actions, and async workspace search without looking like a giant modal form."
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Recent-aware"
+						}), /* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Async search"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ o("div", {
+					className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+					children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Try the live surface"
+					}), /* @__PURE__ */ a("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Open the palette, trigger route jumps, or type to load workspace entities."
+					})] }), /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ a(e, {
+							onClick: () => d(!0),
+							children: "Open palette"
+						}), /* @__PURE__ */ o(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: [
+								/* @__PURE__ */ a(n, { children: "Ctrl" }),
+								" + ",
+								/* @__PURE__ */ a(n, { children: "K" })
+							]
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ o("section", {
+					className: s,
+					children: [
+						/* @__PURE__ */ a("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Last action"
+						}),
+						/* @__PURE__ */ a("p", {
+							className: "mt-3 text-base font-medium aui-text-strong",
+							children: f
+						}),
+						/* @__PURE__ */ a("p", {
+							className: "mt-2 text-sm leading-6 aui-text-muted",
+							children: "Command results should feel immediate and operational."
+						})
+					]
+				}), /* @__PURE__ */ o("section", {
+					className: s,
+					children: [/* @__PURE__ */ a("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Design rule"
+					}), /* @__PURE__ */ a("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Keep command labels short, searchable, and verb-first. Async groups should behave like results, not like a second UI inside the modal."
+					})]
+				})]
+			}),
+			/* @__PURE__ */ a(r, {
+				open: u,
+				onOpenChange: d,
+				placeholder: "Search routes and actions...",
+				groups: m,
+				recent: !0
+			}),
+			l === "playground" ? /* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ o("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => d(!0),
+						children: "Reopen palette"
+					}), /* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => p("Nothing selected yet"),
+						children: "Reset output"
+					})]
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as CommandPaletteShowcase };

package/dist/src/showcase/premium/confirm-dialog/index.cjs

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

package/dist/src/showcase/premium/confirm-dialog/index.js

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

package/dist/src/showcase/premium/confirm-dialog/mock.cjs

@@ -0,0 +1,33 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Button, ConfirmDialog } from "tembro"
+
+export function Example() {
+  const [open, setOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+
+  async function handleConfirm() {
+    setBusy(true)
+    await new Promise((resolve) => setTimeout(resolve, 900))
+    setBusy(false)
+    setOpen(false)
+  }
+
+  return (
+    <div className="space-y-3">
+      <Button onClick={() => setOpen(true)} variant="destructive">
+        Delete project
+      </Button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Delete project?"
+        description="This action cannot be undone. Team members will lose access immediately."
+        confirmText="Delete forever"
+        confirmVariant="destructive"
+        isLoading={busy}
+        onCancel={() => setOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </div>
+  )
+}`,htmlCode:`<button data-slot="confirm-trigger">Delete project</button>`,cliCommand:`npx tembro add confirm-dialog`,highlights:[`Controlled confirm flow`,`Destructive tone and explicit labels`,`Async confirm loading state`,`Cancel-first safety behavior`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`dashboard-starter`],scenarios:[{title:`Destructive confirm`,description:`Use explicit confirm wording for irreversible actions.`},{title:`Async confirmation`,description:`Keep action button loading while server side mutation is running.`},{title:`Safe cancel`,description:`Allow immediate escape via cancel or outside interactions if supported.`},{title:`Context-rich dialog`,description:`Always include title and short description that explain impact.`}],capabilityNotes:[`Use ConfirmDialog where user intent is high-risk and needs explicit language.`,"Keep confirm labels noun-first (`Delete workspace`) to reduce ambiguity.","Tie `isLoading` to async mutation state and close only on success.",`Avoid reusing default labels for destructive flows.`]};exports.confirmDialogMock=e;

package/dist/src/showcase/premium/confirm-dialog/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/confirm-dialog/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Button, ConfirmDialog } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = useState(false)\n  const [busy, setBusy] = useState(false)\n\n  async function handleConfirm() {\n    setBusy(true)\n    await new Promise((resolve) => setTimeout(resolve, 900))\n    setBusy(false)\n    setOpen(false)\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <Button onClick={() => setOpen(true)} variant=\"destructive\">\n        Delete project\n      </Button>\n      <ConfirmDialog\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Delete project?\"\n        description=\"This action cannot be undone. Team members will lose access immediately.\"\n        confirmText=\"Delete forever\"\n        confirmVariant=\"destructive\"\n        isLoading={busy}\n        onCancel={() => setOpen(false)}\n        onConfirm={handleConfirm}\n      />\n    </div>\n  )\n}",
+	htmlCode: "<button data-slot=\"confirm-trigger\">Delete project</button>",
+	cliCommand: "npx tembro add confirm-dialog",
+	highlights: [
+		"Controlled confirm flow",
+		"Destructive tone and explicit labels",
+		"Async confirm loading state",
+		"Cancel-first safety behavior"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"crm-dashboard",
+		"dashboard-starter"
+	],
+	scenarios: [
+		{
+			title: "Destructive confirm",
+			description: "Use explicit confirm wording for irreversible actions."
+		},
+		{
+			title: "Async confirmation",
+			description: "Keep action button loading while server side mutation is running."
+		},
+		{
+			title: "Safe cancel",
+			description: "Allow immediate escape via cancel or outside interactions if supported."
+		},
+		{
+			title: "Context-rich dialog",
+			description: "Always include title and short description that explain impact."
+		}
+	],
+	capabilityNotes: [
+		"Use ConfirmDialog where user intent is high-risk and needs explicit language.",
+		"Keep confirm labels noun-first (`Delete workspace`) to reduce ambiguity.",
+		"Tie `isLoading` to async mutation state and close only on success.",
+		"Avoid reusing default labels for destructive flows."
+	]
+};
+//#endregion
+export { e as confirmDialogMock };

package/dist/src/showcase/premium/confirm-dialog/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/overlay/confirm-dialog.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s({mode:e}){let[s,c]=i.useState(!1),[l,u]=i.useState(!1),[d,f]=i.useState(!1);async function p(){f(!0),await new Promise(e=>setTimeout(e,700)),f(!1),c(!1)}return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsx)(`section`,{className:`pb-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Confirm dialog`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Use it only for explicit checkpoints`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Deletion, archive, publish, or save confirmation should require one clear yes or no.`})]}),(0,a.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:d?`Busy`:`Idle`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Risk`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`High`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Route`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e===`playground`?`Interactive`:`Docs`})]})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,a.jsx)(t.Button,{onClick:()=>c(!0),children:`Open destructive confirm`}),(0,a.jsx)(t.Button,{variant:`outline`,onClick:()=>u(!0),children:`Open save confirm`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:d?`Waiting for confirm`:`Ready`})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Keep the action label outcome-specific.`,`Do not use confirm dialog for long forms or multi-step review.`,`Mutation state should stay controlled from the page.`].map(e=>(0,a.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))})}),(0,a.jsx)(r.ConfirmDialog,{open:s,onOpenChange:c,title:`Delete resource?`,description:`You are about to remove a production resource. This action is irreversible.`,confirmText:`Delete`,confirmVariant:`destructive`,isLoading:d,onCancel:()=>c(!1),onConfirm:p}),(0,a.jsx)(r.ConfirmDialog,{open:l,onOpenChange:u,title:`Save profile changes`,description:`Keep existing values if this is a draft state.`,confirmText:`Save changes`,onCancel:()=>u(!1),onConfirm:()=>u(!1)})]})}exports.ConfirmDialogShowcase=s;