tembro 3.1.1 → 3.1.6

package/dist/src/showcase/premium/page-state/mock.cjs

@@ -1,12 +1,15 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, PageState } from "tembro"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, InlineState, PageState } from "tembro"
 
 export function Example() {
   return (
-    <PageState
-      tone="error"
-      title="Connection failed"
-      description="We could not sync workspace usage. Retry after restoring the API token."
-      action={<Button variant="outline">Retry sync</Button>}
-    />
+    <>
+      <PageState
+        tone="error"
+        title="Connection failed"
+        description="We could not sync workspace usage. Retry after restoring the API token."
+        action={<Button variant="outline">Retry sync</Button>}
+      />
+      <InlineState tone="empty" title="No comments" onRetry={() => refetch()} />
+    </>
   )
-}`,highlights:[`Full-page status surface`,`Built for empty, loading, success, info, and error flows`,`Single decisive CTA`,`Works as route-level fallback or section state`],scenarios:[{title:`No data yet`,description:`Guide the first useful action when a route has no content.`},{title:`Load failed`,description:`Keep retry and explanation visible without dropping the user into confusion.`},{title:`Completed workflow`,description:`Confirm a decisive outcome after setup or publish flows.`}],capabilityNotes:[`Use page-state for route-level outcomes, not inline warnings.`,`Keep one primary next step visible.`,`Choose tone by outcome, not by brand color preference.`]};exports.pageStateMock=e;
+}`,highlights:[`Full-page and compact inline surfaces`,`Empty, loading, success, info, and error flows`,`Retry and custom action support`,`Accessible status and alert roles`],scenarios:[{title:`No data yet`,description:`Guide the first useful action when a route has no content.`},{title:`Load failed`,description:`Keep retry and explanation visible without dropping the user into confusion.`},{title:`Completed workflow`,description:`Confirm a decisive outcome after setup or publish flows.`}],capabilityNotes:[`Use page-state for route-level outcomes, not inline warnings.`,`Keep one primary next step visible.`,`Choose tone by outcome, not by brand color preference.`]};exports.pageStateMock=e;

package/dist/src/showcase/premium/page-state/mock.js

@@ -1,11 +1,11 @@
 //#region src/showcase/premium/page-state/mock.ts
 var e = {
-	code: "import { Button, PageState } from \"tembro\"\n\nexport function Example() {\n  return (\n    <PageState\n      tone=\"error\"\n      title=\"Connection failed\"\n      description=\"We could not sync workspace usage. Retry after restoring the API token.\"\n      action={<Button variant=\"outline\">Retry sync</Button>}\n    />\n  )\n}",
+	code: "import { Button, InlineState, PageState } from \"tembro\"\n\nexport function Example() {\n  return (\n    <>\n      <PageState\n        tone=\"error\"\n        title=\"Connection failed\"\n        description=\"We could not sync workspace usage. Retry after restoring the API token.\"\n        action={<Button variant=\"outline\">Retry sync</Button>}\n      />\n      <InlineState tone=\"empty\" title=\"No comments\" onRetry={() => refetch()} />\n    </>\n  )\n}",
 	highlights: [
-		"Full-page status surface",
-		"Built for empty, loading, success, info, and error flows",
-		"Single decisive CTA",
-		"Works as route-level fallback or section state"
+		"Full-page and compact inline surfaces",
+		"Empty, loading, success, info, and error flows",
+		"Retry and custom action support",
+		"Accessible status and alert roles"
 	],
 	scenarios: [
 		{

package/dist/src/showcase/premium/page-state/showcase.cjs

@@ -1 +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/feedback/page-state.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=[`empty`,`loading`,`error`,`success`,`info`];function c({mode:e}){let[c,l]=i.useState(2),u=s[c]??`error`;return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Route feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PageState should explain the route outcome immediately`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`When the page is empty, blocked, loading, or complete, the user should understand what happened and what to do next in one glance.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Route-level`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Outcome first`})]})]})}),(0,a.jsx)(r.PageState,{tone:u,title:u===`empty`?`No invoices found`:u===`loading`?`Preparing workspace`:u===`error`?`Connection failed`:u===`success`?`Workspace connected`:`Sync started`,description:u===`empty`?`Create the first invoice to unlock exports, reminders, and payment tracking.`:u===`loading`?`We are syncing permissions and bringing the latest workspace data into this route.`:u===`error`?`We could not sync workspace usage. Retry after restoring the API token.`:u===`success`?`The workspace is ready and the team can continue with the next operational step.`:`Background sync is running. You can keep working while updates are processed.`,action:u===`loading`?void 0:(0,a.jsx)(t.Button,{variant:u===`error`?`outline`:`default`,children:u===`empty`?`Create invoice`:u===`error`?`Retry sync`:u===`success`?`Open dashboard`:`View progress`}),extra:u===`error`?(0,a.jsx)(t.Button,{variant:`ghost`,children:`Open logs`}):void 0}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:s.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e))})}):null]})}exports.PageStateShowcase=c;
+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/feedback/page-state.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=[`empty`,`loading`,`error`,`success`,`info`];function c({mode:e}){let[c,l]=i.useState(2),[u,d]=i.useState(`No action triggered yet`),[f,p]=i.useState(0),m=s[c]??`error`;return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Route feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PageState should explain the route outcome immediately`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`When the page is empty, blocked, loading, or complete, the user should understand what happened and what to do next in one glance.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Route-level`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Outcome first`})]})]})}),(0,a.jsx)(r.PageState,{tone:m,title:m===`empty`?`No invoices found`:m===`loading`?`Preparing workspace`:m===`error`?`Connection failed`:m===`success`?`Workspace connected`:`Sync started`,description:m===`empty`?`Create the first invoice to unlock exports, reminders, and payment tracking.`:m===`loading`?`We are syncing permissions and bringing the latest workspace data into this route.`:m===`error`?`We could not sync workspace usage. Retry after restoring the API token.`:m===`success`?`The workspace is ready and the team can continue with the next operational step.`:`Background sync is running. You can keep working while updates are processed.`,action:m===`loading`?void 0:(0,a.jsx)(t.Button,{variant:m===`error`?`outline`:`default`,onClick:()=>d(`${m} action completed`),children:m===`empty`?`Create invoice`:m===`error`?`Retry sync`:m===`success`?`Open dashboard`:`View progress`}),extra:m===`error`?(0,a.jsx)(t.Button,{variant:`ghost`,onClick:()=>d(`Logs opened`),children:`Open logs`}):void 0}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-2`,children:[(0,a.jsx)(r.InlineState,{tone:`error`,title:`Widget unavailable`,description:`Compact retry state. Attempts: ${f}`,retryLabel:`Retry widget`,onRetry:()=>p(e=>e+1)}),(0,a.jsx)(r.InlineState,{tone:`success`,title:`Changes published`,description:`Use the compact surface inside a section without replacing the whole route.`,action:(0,a.jsx)(t.Button,{size:`sm`,onClick:()=>d(`Published changes opened`),children:`View changes`})})]}),(0,a.jsx)(`p`,{"aria-live":`polite`,className:`mt-4 text-sm aui-text-muted`,children:u})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:s.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e))})}):null]})}exports.PageStateShowcase=c;

package/dist/src/showcase/premium/page-state/showcase.js

@@ -1,48 +1,48 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
-import { PageState as n } from "../../../components/feedback/page-state.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { InlineState as n, PageState as r } from "../../../components/feedback/page-state.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/showcase/premium/page-state/showcase.tsx
-var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
+var s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", c = [
 	"empty",
 	"loading",
 	"error",
 	"success",
 	"info"
 ];
-function c({ mode: c }) {
-	let [l, u] = r.useState(2), d = s[l] ?? "error";
-	return /* @__PURE__ */ a("div", {
+function l({ mode: l }) {
+	let [u, d] = i.useState(2), [f, p] = i.useState("No action triggered yet"), [m, h] = i.useState(0), g = c[u] ?? "error";
+	return /* @__PURE__ */ o("div", {
 		className: "space-y-5",
 		children: [
-			/* @__PURE__ */ i("section", {
+			/* @__PURE__ */ a("section", {
 				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ o("div", {
 					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ a("div", {
+					children: [/* @__PURE__ */ o("div", {
 						className: "max-w-xl",
 						children: [
-							/* @__PURE__ */ i("p", {
+							/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 								children: "Route feedback"
 							}),
-							/* @__PURE__ */ i("h3", {
+							/* @__PURE__ */ a("h3", {
 								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 								children: "PageState should explain the route outcome immediately"
 							}),
-							/* @__PURE__ */ i("p", {
+							/* @__PURE__ */ a("p", {
 								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
 								children: "When the page is empty, blocked, loading, or complete, the user should understand what happened and what to do next in one glance."
 							})
 						]
-					}), /* @__PURE__ */ a("div", {
+					}), /* @__PURE__ */ o("div", {
 						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(t, {
+						children: [/* @__PURE__ */ a(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Route-level"
-						}), /* @__PURE__ */ i(t, {
+						}), /* @__PURE__ */ a(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Outcome first"
@@ -50,27 +50,55 @@ function c({ mode: c }) {
 					})]
 				})
 			}),
-			/* @__PURE__ */ i(n, {
-				tone: d,
-				title: d === "empty" ? "No invoices found" : d === "loading" ? "Preparing workspace" : d === "error" ? "Connection failed" : d === "success" ? "Workspace connected" : "Sync started",
-				description: d === "empty" ? "Create the first invoice to unlock exports, reminders, and payment tracking." : d === "loading" ? "We are syncing permissions and bringing the latest workspace data into this route." : d === "error" ? "We could not sync workspace usage. Retry after restoring the API token." : d === "success" ? "The workspace is ready and the team can continue with the next operational step." : "Background sync is running. You can keep working while updates are processed.",
-				action: d === "loading" ? void 0 : /* @__PURE__ */ i(e, {
-					variant: d === "error" ? "outline" : "default",
-					children: d === "empty" ? "Create invoice" : d === "error" ? "Retry sync" : d === "success" ? "Open dashboard" : "View progress"
+			/* @__PURE__ */ a(r, {
+				tone: g,
+				title: g === "empty" ? "No invoices found" : g === "loading" ? "Preparing workspace" : g === "error" ? "Connection failed" : g === "success" ? "Workspace connected" : "Sync started",
+				description: g === "empty" ? "Create the first invoice to unlock exports, reminders, and payment tracking." : g === "loading" ? "We are syncing permissions and bringing the latest workspace data into this route." : g === "error" ? "We could not sync workspace usage. Retry after restoring the API token." : g === "success" ? "The workspace is ready and the team can continue with the next operational step." : "Background sync is running. You can keep working while updates are processed.",
+				action: g === "loading" ? void 0 : /* @__PURE__ */ a(e, {
+					variant: g === "error" ? "outline" : "default",
+					onClick: () => p(`${g} action completed`),
+					children: g === "empty" ? "Create invoice" : g === "error" ? "Retry sync" : g === "success" ? "Open dashboard" : "View progress"
 				}),
-				extra: d === "error" ? /* @__PURE__ */ i(e, {
+				extra: g === "error" ? /* @__PURE__ */ a(e, {
 					variant: "ghost",
+					onClick: () => p("Logs opened"),
 					children: "Open logs"
 				}) : void 0
 			}),
-			c === "playground" ? /* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ i("div", {
+			/* @__PURE__ */ o("section", {
+				className: s,
+				children: [/* @__PURE__ */ o("div", {
+					className: "grid gap-4 lg:grid-cols-2",
+					children: [/* @__PURE__ */ a(n, {
+						tone: "error",
+						title: "Widget unavailable",
+						description: `Compact retry state. Attempts: ${m}`,
+						retryLabel: "Retry widget",
+						onRetry: () => h((e) => e + 1)
+					}), /* @__PURE__ */ a(n, {
+						tone: "success",
+						title: "Changes published",
+						description: "Use the compact surface inside a section without replacing the whole route.",
+						action: /* @__PURE__ */ a(e, {
+							size: "sm",
+							onClick: () => p("Published changes opened"),
+							children: "View changes"
+						})
+					})]
+				}), /* @__PURE__ */ a("p", {
+					"aria-live": "polite",
+					className: "mt-4 text-sm aui-text-muted",
+					children: f
+				})]
+			}),
+			l === "playground" ? /* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ a("div", {
 					className: "flex flex-wrap gap-2",
-					children: s.map((t, n) => /* @__PURE__ */ i(e, {
+					children: c.map((t, n) => /* @__PURE__ */ a(e, {
 						size: "sm",
-						variant: l === n ? "default" : "outline",
-						onClick: () => u(n),
+						variant: u === n ? "default" : "outline",
+						onClick: () => d(n),
 						children: t
 					}, t))
 				})
@@ -79,4 +107,4 @@ function c({ mode: c }) {
 	});
 }
 //#endregion
-export { c as PageStateShowcase };
+export { l as PageStateShowcase };

package/dist/src/showcase/premium/{accordion → qr-code}/index.cjs

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

package/dist/src/showcase/premium/qr-code/index.js

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

package/dist/src/showcase/premium/qr-code/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { QRCode } from "tembro"
+
+export function Example() {
+  return <QRCode value="https://example.com/invoices/INV-2048" errorCorrectionLevel="H" size={180} />
+}`,cliCommand:`npx tembro add qr-code`,highlights:[`Real standards-compliant QR encoding`,`SVG output with configurable error correction and colors`],scenarios:[{title:`Payment links`,description:`Encode checkout or invoice URLs into scan-ready symbols.`},{title:`Device pairing`,description:`Share connection payloads with stronger error correction.`}]};exports.qrCodeMock=e;

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

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/qr-code/mock.ts
+var e = {
+	code: "import { QRCode } from \"tembro\"\n\nexport function Example() {\n  return <QRCode value=\"https://example.com/invoices/INV-2048\" errorCorrectionLevel=\"H\" size={180} />\n}",
+	cliCommand: "npx tembro add qr-code",
+	highlights: ["Real standards-compliant QR encoding", "SVG output with configurable error correction and colors"],
+	scenarios: [{
+		title: "Payment links",
+		description: "Encode checkout or invoice URLs into scan-ready symbols."
+	}, {
+		title: "Device pairing",
+		description: "Share connection payloads with stronger error correction."
+	}]
+};
+//#endregion
+export { e as qrCodeMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/display/qr-code.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(`https://tembro.dev/components/qr-code`);return(0,r.jsxs)(`div`,{className:`mx-auto grid max-w-sm justify-items-center gap-4`,children:[(0,r.jsx)(t.QRCode,{value:e,size:184,errorCorrectionLevel:`H`}),(0,r.jsx)(`input`,{"aria-label":`QR code value`,value:e,className:`h-10 w-full rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring`,onChange:e=>i(e.target.value)})]})}exports.QRCodeShowcase=i;

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

@@ -0,0 +1,22 @@
+import { QRCode as e } from "../../../components/display/qr-code.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/qr-code/showcase.tsx
+function i() {
+	let [i, a] = t.useState("https://tembro.dev/components/qr-code");
+	return /* @__PURE__ */ r("div", {
+		className: "mx-auto grid max-w-sm justify-items-center gap-4",
+		children: [/* @__PURE__ */ n(e, {
+			value: i,
+			size: 184,
+			errorCorrectionLevel: "H"
+		}), /* @__PURE__ */ n("input", {
+			"aria-label": "QR code value",
+			value: i,
+			className: "h-10 w-full rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+			onChange: (e) => a(e.target.value)
+		})]
+	});
+}
+//#endregion
+export { i as QRCodeShowcase };

package/dist/src/showcase/premium/rich-text-editor/index.cjs

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

package/dist/src/showcase/premium/rich-text-editor/index.js

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

package/dist/src/showcase/premium/rich-text-editor/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { RichTextEditor } from "tembro"
+
+export function Example() {
+  return <RichTextEditor defaultValue="<p>Write the release notes...</p>" onValueChange={console.log} />
+}`,cliCommand:`npx tembro add rich-text-editor`,highlights:[`TipTap and ProseMirror editing engine`,`HTML/text output with formatting, history, lists, quotes, and links`],scenarios:[{title:`Knowledge base`,description:`Author structured support and documentation content.`},{title:`Product updates`,description:`Create formatted release notes with controlled persistence.`}]};exports.richTextEditorMock=e;

package/dist/src/showcase/premium/rich-text-editor/mock.js

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/rich-text-editor/mock.ts
+var e = {
+	code: "import { RichTextEditor } from \"tembro\"\n\nexport function Example() {\n  return <RichTextEditor defaultValue=\"<p>Write the release notes...</p>\" onValueChange={console.log} />\n}",
+	cliCommand: "npx tembro add rich-text-editor",
+	highlights: ["TipTap and ProseMirror editing engine", "HTML/text output with formatting, history, lists, quotes, and links"],
+	scenarios: [{
+		title: "Knowledge base",
+		description: "Author structured support and documentation content."
+	}, {
+		title: "Product updates",
+		description: "Create formatted release notes with controlled persistence."
+	}]
+};
+//#endregion
+export { e as richTextEditorMock };

package/dist/src/showcase/premium/rich-text-editor/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/rich-text-editor.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(`<h2>Release notes</h2><p>Describe what changed for customers.</p>`);return(0,r.jsxs)(`div`,{className:`grid gap-3`,children:[(0,r.jsx)(t.RichTextEditor,{value:e,onValueChange:i,onLinkRequest:()=>`https://tembro.dev`}),(0,r.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[e.length,` HTML characters`]})]})}exports.RichTextEditorShowcase=i;

package/dist/src/showcase/premium/rich-text-editor/showcase.js

@@ -0,0 +1,20 @@
+import { RichTextEditor as e } from "../../../components/modern/rich-text-editor.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/rich-text-editor/showcase.tsx
+function i() {
+	let [i, a] = t.useState("<h2>Release notes</h2><p>Describe what changed for customers.</p>");
+	return /* @__PURE__ */ r("div", {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ n(e, {
+			value: i,
+			onValueChange: a,
+			onLinkRequest: () => "https://tembro.dev"
+		}), /* @__PURE__ */ r("p", {
+			className: "text-xs text-muted-foreground",
+			children: [i.length, " HTML characters"]
+		})]
+	});
+}
+//#endregion
+export { i as RichTextEditorShowcase };

package/dist/src/showcase/premium/{descriptions → signature-pad}/index.cjs

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

package/dist/src/showcase/premium/signature-pad/index.js

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

package/dist/src/showcase/premium/signature-pad/mock.cjs

@@ -0,0 +1,10 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { SignaturePad } from "tembro"
+
+export function Example() {
+  return (
+    <SignaturePad
+      onValueChange={(strokes) => console.log(strokes)}
+      onStrokeEnd={(stroke) => console.log(stroke)}
+    />
+  )
+}`,cliCommand:`npx tembro add signature-pad`,highlights:[`Controlled normalized stroke data`,`Undo, clear, pointer capture, and PNG export API`],scenarios:[{title:`Approval flow`,description:`Capture a signature without coupling form state to canvas pixels.`},{title:`Delivery proof`,description:`Store normalized strokes or export the rendered signature as PNG.`}]};exports.signaturePadMock=e;

package/dist/src/showcase/premium/signature-pad/mock.js

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/signature-pad/mock.ts
+var e = {
+	code: "import { SignaturePad } from \"tembro\"\n\nexport function Example() {\n  return (\n    <SignaturePad\n      onValueChange={(strokes) => console.log(strokes)}\n      onStrokeEnd={(stroke) => console.log(stroke)}\n    />\n  )\n}",
+	cliCommand: "npx tembro add signature-pad",
+	highlights: ["Controlled normalized stroke data", "Undo, clear, pointer capture, and PNG export API"],
+	scenarios: [{
+		title: "Approval flow",
+		description: "Capture a signature without coupling form state to canvas pixels."
+	}, {
+		title: "Delivery proof",
+		description: "Store normalized strokes or export the rendered signature as PNG."
+	}]
+};
+//#endregion
+export { e as signaturePadMock };

package/dist/src/showcase/premium/signature-pad/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/signature-pad.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState([]);return(0,r.jsxs)(`div`,{className:`mx-auto grid w-full max-w-xl gap-3`,children:[(0,r.jsx)(t.SignaturePad,{value:e,onValueChange:i}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[e.length,` stroke`,e.length===1?``:`s`,` captured`]})]})}exports.SignaturePadShowcase=i;

package/dist/src/showcase/premium/signature-pad/showcase.js

@@ -0,0 +1,24 @@
+import { SignaturePad as e } from "../../../components/inputs/signature-pad.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/signature-pad/showcase.tsx
+function i() {
+	let [i, a] = t.useState([]);
+	return /* @__PURE__ */ r("div", {
+		className: "mx-auto grid w-full max-w-xl gap-3",
+		children: [/* @__PURE__ */ n(e, {
+			value: i,
+			onValueChange: a
+		}), /* @__PURE__ */ r("p", {
+			className: "text-sm text-muted-foreground",
+			children: [
+				i.length,
+				" stroke",
+				i.length === 1 ? "" : "s",
+				" captured"
+			]
+		})]
+	});
+}
+//#endregion
+export { i as SignaturePadShowcase };

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`
 export function Example() {
   return (
     <StatisticGrid columns={3}>
-      <StatisticCard label="Revenue" value="$24.8k" change="+12.4%" trend="up" />
+      <StatisticCard label="Revenue" prefix="$" value="24.8k" change="+12.4%" trend="up" />
       <StatisticCard label="Errors" value="14" change="-3.1%" trend="down" />
-      <StatisticCard label="Conversion" value="6.3%" description="vs last 30 days" />
+      <StatisticCard label="Conversion" value="6.3" suffix="%" loading={false} description="vs last 30 days" />
     </StatisticGrid>
   )
 }`,cliCommand:`npx tembro add statistic`,highlights:[`Single statistic, statistic card and grid exports work together`,`Trend badge, loading state and description support`,`Useful for dashboard headers and KPI summaries`],scenarios:[{title:`KPI row`,description:`Summarize top metrics across a dashboard.`},{title:`Module summary`,description:`Give a feature area one compact numeric header.`},{title:`Loading metric`,description:`Reserve metric space while upstream data resolves.`}]};exports.statisticMock=e;

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/statistic/mock.ts
 var e = {
-	code: "import { Statistic, StatisticCard, StatisticGrid } from \"tembro\"\n\nexport function Example() {\n  return (\n    <StatisticGrid columns={3}>\n      <StatisticCard label=\"Revenue\" value=\"$24.8k\" change=\"+12.4%\" trend=\"up\" />\n      <StatisticCard label=\"Errors\" value=\"14\" change=\"-3.1%\" trend=\"down\" />\n      <StatisticCard label=\"Conversion\" value=\"6.3%\" description=\"vs last 30 days\" />\n    </StatisticGrid>\n  )\n}",
+	code: "import { Statistic, StatisticCard, StatisticGrid } from \"tembro\"\n\nexport function Example() {\n  return (\n    <StatisticGrid columns={3}>\n      <StatisticCard label=\"Revenue\" prefix=\"$\" value=\"24.8k\" change=\"+12.4%\" trend=\"up\" />\n      <StatisticCard label=\"Errors\" value=\"14\" change=\"-3.1%\" trend=\"down\" />\n      <StatisticCard label=\"Conversion\" value=\"6.3\" suffix=\"%\" loading={false} description=\"vs last 30 days\" />\n    </StatisticGrid>\n  )\n}",
 	cliCommand: "npx tembro add statistic",
 	highlights: [
 		"Single statistic, statistic card and grid exports work together",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/statistic.cjs"),n=require("../../../components/display/trend-card.cjs"),r=require("../../../components/charts/progress-ring.cjs");let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsxs)(`section`,{className:`pb-6`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Statistic is the KPI surface, not a generic card clone`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use the base statistic when the number matters most. Promote to StatisticCard or StatisticGrid when several metrics need shared structure.`})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(t.StatisticGrid,{columns:3,children:[(0,i.jsx)(t.StatisticCard,{label:`Revenue`,value:`$24.8k`,change:`+12.4%`,trend:`up`,description:`vs last 30 days`}),(0,i.jsx)(t.StatisticCard,{label:`Errors`,value:`14`,change:`-3.1%`,trend:`down`,description:`production incidents`}),(0,i.jsx)(t.StatisticCard,{label:`Adoption`,value:`86%`,description:`workspace activation rate`,action:(0,i.jsx)(e.Badge,{variant:`secondary`,children:`Live`})})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,i.jsx)(t.Statistic,{label:`Publish latency`,value:`1.8s`,suffix:`avg`,change:`-0.4s`,trend:`down`,description:`from the previous release window`})}),(0,i.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,i.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,i.jsx)(`p`,{children:`Keep labels short and units clear. Users should understand the value before reading the description.`}),(0,i.jsx)(`p`,{children:`Trend color should reinforce meaning, not carry the whole message alone.`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_240px]`,children:[(0,i.jsx)(n.TrendCard,{title:`Release velocity`,value:`24`,change:`+3`,trend:`up`,description:`completed this sprint`,sparkline:[8,10,9,14,18,19,24]}),(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:(0,i.jsx)(r.ProgressRing,{value:76,label:`76%`,description:`coverage`,tone:`success`})})]})})]})}exports.StatisticShowcase=o;
+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/display/statistic.cjs"),i=require("../../../components/charts/progress-circle.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c(){let[e,c]=a.useState(!1),[l,u]=a.useState(3);return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Statistic is the KPI surface, not a generic card clone`}),(0,o.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use the base statistic when the number matters most. Promote to StatisticCard or StatisticGrid when several metrics need shared structure.`})]}),(0,o.jsxs)(`section`,{className:s,children:[(0,o.jsxs)(`div`,{className:`mb-4 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:e?`default`:`outline`,onClick:()=>c(e=>!e),children:e?`Resolve data`:`Show loading`}),[1,2,3,4].map(e=>(0,o.jsxs)(t.Button,{size:`sm`,variant:l===e?`default`:`outline`,onClick:()=>u(e),children:[e,` column`,e>1?`s`:``]},e))]}),(0,o.jsxs)(r.StatisticGrid,{columns:l,children:[(0,o.jsx)(r.StatisticCard,{loading:e,label:`Revenue`,prefix:`$`,value:`24.8k`,change:`+12.4%`,trend:`up`,description:`vs last 30 days`}),(0,o.jsx)(r.StatisticCard,{loading:e,label:`Errors`,value:`14`,change:`-3.1%`,trend:`down`,description:`production incidents`}),(0,o.jsx)(r.StatisticCard,{loading:e,label:`Adoption`,value:`86`,suffix:`%`,change:`No change`,trend:`neutral`,description:`workspace activation rate`,action:(0,o.jsx)(n.Badge,{variant:`secondary`,children:`Live`})})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,o.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,o.jsx)(r.Statistic,{label:`Publish latency`,value:`1.8s`,suffix:`avg`,change:`-0.4s`,trend:`down`,description:`from the previous release window`})}),(0,o.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,o.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,o.jsx)(`p`,{children:`Keep labels short and units clear. Users should understand the value before reading the description.`}),(0,o.jsx)(`p`,{children:`Trend color should reinforce meaning, not carry the whole message alone.`})]})]})]})}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_240px]`,children:[(0,o.jsx)(r.StatisticCard,{label:`Release velocity`,value:`24`,change:`+3`,trend:`up`,description:`completed this sprint`}),(0,o.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:(0,o.jsx)(i.ProgressCircle,{value:76,label:`76%`,description:`coverage`,tone:`success`})})]})})]})}exports.StatisticShowcase=c;