tembro 3.0.0 → 3.1.1

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

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

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;

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

@@ -0,0 +1,132 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { ConfirmDialog as n } from "../../../components/overlay/confirm-dialog.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/confirm-dialog/showcase.tsx
+var o = "border-t border-[color:var(--aui-divider)] py-6";
+function s({ mode: s }) {
+	let [c, l] = r.useState(!1), [u, d] = r.useState(!1), [f, p] = r.useState(!1);
+	async function m() {
+		p(!0), await new Promise((e) => setTimeout(e, 700)), p(!1), l(!1);
+	}
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end 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: "Confirm dialog"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Use it only for explicit checkpoints"
+							}),
+							/* @__PURE__ */ i("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."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "State"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: f ? "Busy" : "Idle"
+								})]
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Risk"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "High"
+								})]
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Route"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: s === "playground" ? "Interactive" : "Docs"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-3",
+					children: [
+						/* @__PURE__ */ i(e, {
+							onClick: () => l(!0),
+							children: "Open destructive confirm"
+						}),
+						/* @__PURE__ */ i(e, {
+							variant: "outline",
+							onClick: () => d(!0),
+							children: "Open save confirm"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							children: f ? "Waiting for confirm" : "Ready"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ i("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) => /* @__PURE__ */ i("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))
+				})
+			}),
+			/* @__PURE__ */ i(n, {
+				open: c,
+				onOpenChange: l,
+				title: "Delete resource?",
+				description: "You are about to remove a production resource. This action is irreversible.",
+				confirmText: "Delete",
+				confirmVariant: "destructive",
+				isLoading: f,
+				onCancel: () => l(!1),
+				onConfirm: m
+			}),
+			/* @__PURE__ */ i(n, {
+				open: u,
+				onOpenChange: d,
+				title: "Save profile changes",
+				description: "Keep existing values if this is a draft state.",
+				confirmText: "Save changes",
+				onCancel: () => d(!1),
+				onConfirm: () => d(!1)
+			})
+		]
+	});
+}
+//#endregion
+export { s as ConfirmDialogShowcase };

package/dist/src/showcase/premium/copy-button/index.cjs

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

package/dist/src/showcase/premium/copy-button/index.js

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

package/dist/src/showcase/premium/copy-button/mock.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CopyButton } from "tembro"
+
+export function Example() {
+  return (
+    <CopyButton
+      value="sk_live_demo_123"
+      copyLabel="Copy token"
+      copiedLabel="Copied"
+      variant="outline"
+      size="sm"
+    />
+  )
+}`,cliCommand:`npx tembro add copy-button`,highlights:[`Built-in copied feedback state`,`Works with the exported Button API surface`,`Useful for tokens, links, invite codes, and IDs`],scenarios:[{title:`Token copy`,description:`Copy secret-like values without opening a secondary modal.`},{title:`Share link`,description:`Inline copy action beside invite or embed links.`},{title:`Row action`,description:`Small copy affordance inside a dense operational table.`}]};exports.copyButtonMock=e;