tembro 3.1.17 → 4.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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