tembro 3.0.0 → 3.1.1

package/dist/src/showcase/premium/kanban-board/showcase.js

@@ -0,0 +1,91 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { KanbanBoard as t } from "../../../components/display/kanban.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/kanban-board/showcase.tsx
+var a = [
+	{
+		key: "todo",
+		title: "To do",
+		description: "Incoming tasks",
+		cards: [{
+			key: "a",
+			title: "Audit inputs",
+			description: "Collect edge cases",
+			meta: "high"
+		}, {
+			key: "b",
+			title: "Review docs",
+			description: "Ensure API completeness",
+			meta: "medium"
+		}]
+	},
+	{
+		key: "done",
+		title: "Done",
+		description: "Completed work",
+		cards: []
+	},
+	{
+		key: "inProgress",
+		title: "In progress",
+		description: "Current sprint",
+		cards: [{
+			key: "c",
+			title: "Add demos",
+			description: "Finish missing routes",
+			meta: "urgent"
+		}]
+	}
+];
+function o() {
+	let [o, s] = n.useState(a), [c, l] = n.useState(void 0);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex gap-2",
+				children: /* @__PURE__ */ r(e, {
+					size: "sm",
+					onClick: () => s((e) => [...e, {
+						key: `new-${Date.now()}`,
+						title: "New",
+						cards: []
+					}]),
+					children: "Add lane"
+				})
+			}),
+			/* @__PURE__ */ r(t, {
+				columns: o,
+				onColumnsChange: s,
+				onCardClick: (e) => l(String(e.key)),
+				renderCard: (e, t, { handle: n }) => /* @__PURE__ */ i("div", {
+					className: "rounded-lg border bg-card p-3",
+					children: [
+						/* @__PURE__ */ i("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ r("div", {
+								className: "font-medium text-sm",
+								children: e.title
+							}), n]
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "mt-1 text-xs text-muted-foreground",
+							children: e.description
+						}),
+						e.meta && /* @__PURE__ */ r("div", {
+							className: "mt-2 text-xs text-foreground/80",
+							children: e.meta
+						})
+					]
+				})
+			}),
+			c && /* @__PURE__ */ i("div", {
+				className: "rounded-md border border-dashed p-3 text-sm text-muted-foreground",
+				children: ["Selected card: ", c]
+			})
+		]
+	});
+}
+//#endregion
+export { o as KanbanBoardShowcase };

package/dist/src/showcase/premium/kbd/index.cjs

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

package/dist/src/showcase/premium/kbd/index.js

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

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

@@ -0,0 +1,9 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Kbd } from "tembro"
+
+export function Example() {
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open command search.
+    </div>
+  )
+}`,htmlCode:`<kbd data-slot="kbd">Ctrl</kbd>`,cliCommand:`npx tembro add kbd`,highlights:[`Shortcut tokens`,`Size variants`,`Inline hints`,`Command palette labels`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Command palette`,description:`Show shortcuts inline without turning them into bulky badges.`},{title:`Toolbar hints`,description:`Useful in dense product actions where key combos speed up frequent tasks.`},{title:`Inline docs`,description:`Clarify keyboard-driven paths near the action itself.`}],capabilityNotes:[`Use Kbd for short shortcut tokens only.`,`Keep key labels consistent with platform guidance when possible.`,`Avoid using Kbd as a general-purpose badge replacement.`,`Inline command hints should stay secondary to the main action label.`]};exports.kbdMock=e;

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

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/kbd/mock.ts
+var e = {
+	code: "import { Kbd } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open command search.\n    </div>\n  )\n}",
+	htmlCode: "<kbd data-slot=\"kbd\">Ctrl</kbd>",
+	cliCommand: "npx tembro add kbd",
+	highlights: [
+		"Shortcut tokens",
+		"Size variants",
+		"Inline hints",
+		"Command palette labels"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"crm-dashboard",
+		"settings-form"
+	],
+	scenarios: [
+		{
+			title: "Command palette",
+			description: "Show shortcuts inline without turning them into bulky badges."
+		},
+		{
+			title: "Toolbar hints",
+			description: "Useful in dense product actions where key combos speed up frequent tasks."
+		},
+		{
+			title: "Inline docs",
+			description: "Clarify keyboard-driven paths near the action itself."
+		}
+	],
+	capabilityNotes: [
+		"Use Kbd for short shortcut tokens only.",
+		"Keep key labels consistent with platform guidance when possible.",
+		"Avoid using Kbd as a general-purpose badge replacement.",
+		"Inline command hints should stay secondary to the main action label."
+	]
+};
+//#endregion
+export { e as kbdMock };

package/dist/src/showcase/premium/kbd/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");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=[`default`,`outline`,`ghost`];function c(){let[e,c]=i.useState(`default`);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:`Keyboard hints`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Kbd should make shortcuts readable at a glance`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep shortcut tokens compact and subordinate to the action they describe.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Inline token`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Variants`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Command hint`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{className:`${o} space-y-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Command pattern`}),(0,a.jsxs)(`p`,{className:`aui-text-strong text-sm`,children:[`Press `,(0,a.jsx)(r.Kbd,{variant:e,children:`Ctrl`}),` + `,(0,a.jsx)(r.Kbd,{variant:e,children:`K`}),` to open global search.`]}),(0,a.jsxs)(`p`,{className:`aui-text-strong text-sm`,children:[`Press `,(0,a.jsx)(r.Kbd,{variant:e,children:`G`}),` then `,(0,a.jsx)(r.Kbd,{variant:e,children:`C`}),` to jump to components.`]})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current variant`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:e})]})]})]}),(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:[`Active variant: `,e]})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:s.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>c(n),children:n},n))})]})})]})}exports.KbdShowcase=c;

package/dist/src/showcase/premium/kbd/showcase.js

@@ -0,0 +1,134 @@
+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 * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/kbd/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
+	"default",
+	"outline",
+	"ghost"
+];
+function c() {
+	let [c, l] = r.useState("default");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ a("section", {
+			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+				children: [/* @__PURE__ */ a("div", {
+					className: "max-w-xl",
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+							children: "Keyboard hints"
+						}),
+						/* @__PURE__ */ i("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Kbd should make shortcuts readable at a glance"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+							children: "Keep shortcut tokens compact and subordinate to the action they describe."
+						})
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Inline token"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Variants"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Command hint"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-6 grid gap-4 xl:grid-cols-[1fr_1fr]",
+				children: [/* @__PURE__ */ a("div", {
+					className: `${o} space-y-4`,
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Command pattern"
+						}),
+						/* @__PURE__ */ a("p", {
+							className: "aui-text-strong text-sm",
+							children: [
+								"Press ",
+								/* @__PURE__ */ i(n, {
+									variant: c,
+									children: "Ctrl"
+								}),
+								" + ",
+								/* @__PURE__ */ i(n, {
+									variant: c,
+									children: "K"
+								}),
+								" to open global search."
+							]
+						}),
+						/* @__PURE__ */ a("p", {
+							className: "aui-text-strong text-sm",
+							children: [
+								"Press ",
+								/* @__PURE__ */ i(n, {
+									variant: c,
+									children: "G"
+								}),
+								" then ",
+								/* @__PURE__ */ i(n, {
+									variant: c,
+									children: "C"
+								}),
+								" to jump to components."
+							]
+						})
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Current variant"
+					}), /* @__PURE__ */ i("p", {
+						className: "mt-3 text-lg font-semibold aui-text-strong",
+						children: c
+					})]
+				})]
+			})]
+		}), /* @__PURE__ */ i("section", {
+			className: o,
+			children: /* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Live state"
+				}), /* @__PURE__ */ a("h4", {
+					className: "mt-2 text-lg font-semibold aui-text-strong",
+					children: ["Active variant: ", c]
+				})] }), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap gap-2",
+					children: s.map((t) => /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "sm",
+						variant: c === t ? "default" : "secondary",
+						onClick: () => l(t),
+						children: t
+					}, t))
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { c as KbdShowcase };

package/dist/{showcase/premium/tour → src/showcase/premium/list}/index.cjs

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

package/dist/src/showcase/premium/list/index.js

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

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

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Avatar, Badge, List } from "tembro"
+
+export function Example() {
+  return (
+    <List
+      items={[
+        {
+          key: "invoice",
+          title: "Invoice review",
+          description: "Pending finance approval",
+          avatar: <Avatar name="Finance" size="sm" />,
+          extra: <Badge variant="outline">Pending</Badge>,
+        },
+      ]}
+    />
+  )
+}`,cliCommand:`npx tembro add list`,highlights:[`Compact title/description rows with optional avatar and extra slot`,`Clickable row pattern without building a table`,`Useful for inboxes, activity queues, and settings menus`],scenarios:[{title:`Queue`,description:`Show work items in a compact operational stack.`},{title:`Settings list`,description:`Present navigable options without a heavy sidebar.`},{title:`Recent activity`,description:`Render quick summaries with status and person context.`}]};exports.listMock=e;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/list/mock.ts
+var e = {
+	code: "import { Avatar, Badge, List } from \"tembro\"\n\nexport function Example() {\n  return (\n    <List\n      items={[\n        {\n          key: \"invoice\",\n          title: \"Invoice review\",\n          description: \"Pending finance approval\",\n          avatar: <Avatar name=\"Finance\" size=\"sm\" />,\n          extra: <Badge variant=\"outline\">Pending</Badge>,\n        },\n      ]}\n    />\n  )\n}",
+	cliCommand: "npx tembro add list",
+	highlights: [
+		"Compact title/description rows with optional avatar and extra slot",
+		"Clickable row pattern without building a table",
+		"Useful for inboxes, activity queues, and settings menus"
+	],
+	scenarios: [
+		{
+			title: "Queue",
+			description: "Show work items in a compact operational stack."
+		},
+		{
+			title: "Settings list",
+			description: "Present navigable options without a heavy sidebar."
+		},
+		{
+			title: "Recent activity",
+			description: "Render quick summaries with status and person context."
+		}
+	]
+};
+//#endregion
+export { e as listMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/avatar.cjs"),n=require("../../../components/display/list.cjs");let r=require("react/jsx-runtime");var i=`border-t border-[color:var(--aui-divider)] py-6`,a=[{key:`invoice`,title:`Invoice #4821 review`,description:`Finance approval is still waiting on updated tax evidence.`,avatar:(0,r.jsx)(t.Avatar,{name:`Finance Team`,size:`sm`,shape:`rounded`}),extra:(0,r.jsx)(e.Badge,{variant:`outline`,children:`Pending`})},{key:`deploy`,title:`Release publish window`,description:`Documentation and component demo checks passed for the next deploy.`,avatar:(0,r.jsx)(t.Avatar,{name:`Release Ops`,size:`sm`}),extra:(0,r.jsx)(e.Badge,{variant:`secondary`,children:`Ready`})},{key:`design`,title:`Design audit feedback`,description:`Spacing and token inconsistencies were reduced across the public catalog.`,avatar:(0,r.jsx)(t.Avatar,{name:`Design`,size:`sm`}),extra:(0,r.jsx)(e.Badge,{variant:`outline`,children:`3 notes`})}];function o(){return(0,r.jsxs)(`div`,{className:`space-y-0`,children:[(0,r.jsxs)(`section`,{className:`pb-6`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,r.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`List is for compact operational rows`}),(0,r.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it when a full table would be too heavy, but a simple stack of cards would waste space.`})]}),(0,r.jsx)(`section`,{className:i,children:(0,r.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Operational queue`}),(0,r.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The exported List keeps title, context and status aligned without forcing table columns.`}),(0,r.jsx)(n.List,{className:`mt-5`,items:a})]}),(0,r.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,r.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,r.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,r.jsx)(`p`,{children:`Use List when content is read top-to-bottom and each row can tolerate flexible height.`}),(0,r.jsx)(`p`,{children:`If sorting, bulk actions, or stable columns become important, move up to DataTable.`}),(0,r.jsx)(`p`,{children:"The `extra` slot should stay compact so the title remains the strongest visual anchor."})]})]})]})})]})}exports.ListShowcase=o;

package/dist/src/showcase/premium/list/showcase.js

@@ -0,0 +1,103 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { Avatar as t } from "../../../components/display/avatar.js";
+import { List as n } from "../../../components/display/list.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/list/showcase.tsx
+var a = "border-t border-[color:var(--aui-divider)] py-6", o = [
+	{
+		key: "invoice",
+		title: "Invoice #4821 review",
+		description: "Finance approval is still waiting on updated tax evidence.",
+		avatar: /* @__PURE__ */ r(t, {
+			name: "Finance Team",
+			size: "sm",
+			shape: "rounded"
+		}),
+		extra: /* @__PURE__ */ r(e, {
+			variant: "outline",
+			children: "Pending"
+		})
+	},
+	{
+		key: "deploy",
+		title: "Release publish window",
+		description: "Documentation and component demo checks passed for the next deploy.",
+		avatar: /* @__PURE__ */ r(t, {
+			name: "Release Ops",
+			size: "sm"
+		}),
+		extra: /* @__PURE__ */ r(e, {
+			variant: "secondary",
+			children: "Ready"
+		})
+	},
+	{
+		key: "design",
+		title: "Design audit feedback",
+		description: "Spacing and token inconsistencies were reduced across the public catalog.",
+		avatar: /* @__PURE__ */ r(t, {
+			name: "Design",
+			size: "sm"
+		}),
+		extra: /* @__PURE__ */ r(e, {
+			variant: "outline",
+			children: "3 notes"
+		})
+	}
+];
+function s() {
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-0",
+		children: [/* @__PURE__ */ i("section", {
+			className: "pb-6",
+			children: [
+				/* @__PURE__ */ r("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Installed display primitive"
+				}),
+				/* @__PURE__ */ r("h3", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: "List is for compact operational rows"
+				}),
+				/* @__PURE__ */ r("p", {
+					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+					children: "Use it when a full table would be too heavy, but a simple stack of cards would waste space."
+				})
+			]
+		}), /* @__PURE__ */ r("section", {
+			className: a,
+			children: /* @__PURE__ */ i("div", {
+				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+				children: [/* @__PURE__ */ i("div", { children: [
+					/* @__PURE__ */ r("p", {
+						className: "text-lg font-semibold aui-text-strong",
+						children: "Operational queue"
+					}),
+					/* @__PURE__ */ r("p", {
+						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+						children: "The exported List keeps title, context and status aligned without forcing table columns."
+					}),
+					/* @__PURE__ */ r(n, {
+						className: "mt-5",
+						items: o
+					})
+				] }), /* @__PURE__ */ i("div", {
+					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-semibold aui-text-strong",
+						children: "Guidance"
+					}), /* @__PURE__ */ i("div", {
+						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+						children: [
+							/* @__PURE__ */ r("p", { children: "Use List when content is read top-to-bottom and each row can tolerate flexible height." }),
+							/* @__PURE__ */ r("p", { children: "If sorting, bulk actions, or stable columns become important, move up to DataTable." }),
+							/* @__PURE__ */ r("p", { children: "The `extra` slot should stay compact so the title remains the strongest visual anchor." })
+						]
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as ListShowcase };

package/dist/src/showcase/premium/loading-state/index.cjs

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

package/dist/src/showcase/premium/loading-state/index.js

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

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

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { LoadingState } from "tembro"
+
+export function Example() {
+  return <LoadingState label="Loading metrics" description="Preparing dashboard widgets and chart data." />
+}`,highlights:[`Simple loading copy`,`Section-level placeholder`,`Can be combined with skeletons`,`Suitable for overlay and inline usage`],scenarios:[{title:`Data fetch`,description:`Show while loading table or card-level content.`},{title:`Background sync`,description:`Display while async actions are in progress.`},{title:`Upload wait`,description:`Use between step transitions in wizards.`}],capabilityNotes:[`Keep descriptions specific to what users are waiting for.`,`Use one source of truth for loading copy across sections.`,`Prefer replacing entire section with loading state over mixing partial stale data.`]};exports.loadingStateMock=e;

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/loading-state/mock.ts
+var e = {
+	code: "import { LoadingState } from \"tembro\"\n\nexport function Example() {\n  return <LoadingState label=\"Loading metrics\" description=\"Preparing dashboard widgets and chart data.\" />\n}",
+	highlights: [
+		"Simple loading copy",
+		"Section-level placeholder",
+		"Can be combined with skeletons",
+		"Suitable for overlay and inline usage"
+	],
+	scenarios: [
+		{
+			title: "Data fetch",
+			description: "Show while loading table or card-level content."
+		},
+		{
+			title: "Background sync",
+			description: "Display while async actions are in progress."
+		},
+		{
+			title: "Upload wait",
+			description: "Use between step transitions in wizards."
+		}
+	],
+	capabilityNotes: [
+		"Keep descriptions specific to what users are waiting for.",
+		"Use one source of truth for loading copy across sections.",
+		"Prefer replacing entire section with loading state over mixing partial stale data."
+	]
+};
+//#endregion
+export { e as loadingStateMock };

package/dist/src/showcase/premium/loading-state/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/feedback/loading-state.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[`Loading metrics`,`Loading table`,`Loading details`,`Loading export`],s=[`Preparing dashboard widgets and chart data.`,`Fetching list rows with filters applied.`,`Waiting for content details from the API.`,`Generating a local export file.`];function c({mode:e}){let[c,l]=i.useState(0),[u,d]=i.useState(e===`playground`);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:`Pending work`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Loading state should explain what is happening`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Scoped loading`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Clear label`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(e=>!e),children:u?`Hide secondary`:`Show secondary`}),o.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e))]}):null,(0,a.jsx)(r.LoadingState,{label:o[c],description:s[c]}),u?(0,a.jsx)(r.LoadingState,{variant:`progress`,progress:68,label:`${o[c]} (progress)`,description:`This is a second loading area inside the same page.`}):null]})}exports.LoadingStateShowcase=c;

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

@@ -0,0 +1,85 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { LoadingState as n } from "../../../components/feedback/loading-state.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/loading-state/showcase.tsx
+var o = [
+	"Loading metrics",
+	"Loading table",
+	"Loading details",
+	"Loading export"
+], s = [
+	"Preparing dashboard widgets and chart data.",
+	"Fetching list rows with filters applied.",
+	"Waiting for content details from the API.",
+	"Generating a local export file."
+];
+function c({ mode: c }) {
+	let [l, u] = r.useState(0), [d, f] = r.useState(c === "playground");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ a("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Pending work"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Loading state should explain what is happening"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Scoped loading"
+						}), /* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Clear label"
+						})]
+					})]
+				})
+			}),
+			c === "playground" ? /* @__PURE__ */ a("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => f((e) => !e),
+					children: d ? "Hide secondary" : "Show secondary"
+				}), o.map((t, n) => /* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: l === n ? "default" : "outline",
+					onClick: () => u(n),
+					children: t
+				}, t))]
+			}) : null,
+			/* @__PURE__ */ i(n, {
+				label: o[l],
+				description: s[l]
+			}),
+			d ? /* @__PURE__ */ i(n, {
+				variant: "progress",
+				progress: 68,
+				label: `${o[l]} (progress)`,
+				description: "This is a second loading area inside the same page."
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as LoadingStateShowcase };

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

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

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

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

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

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Input } from "tembro"
+
+export function Example() {
+  const [value, setValue] = useState("AA-123")
+
+  return (
+    <Input
+      kind="masked"
+      value={value}
+      onValueChange={(nextValue) => setValue(nextValue)}
+      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
+      placeholder="AA-123"
+    />
+  )
+}
+`,htmlCode:`<label for="masked">Referral code</label><input id="masked" type="text" value="AA-123" placeholder="AA-123" />`,cliCommand:`npx tembro add input`,highlights:[`Mask callback runs on each edit`,`Uppercase and slicing are explicit formatting assumptions`,`Raw value assumptions should be mirrored in validation and submit payloads`,`Use a deterministic placeholder that matches the mask contract`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`auth-sign-in`],scenarios:[{title:`Referral codes`,description:`Use fixed pattern for short identifiers while typing.`},{title:`License keys`,description:`Apply grouping with a strict uppercase format and controlled length.`},{title:`Display normalization`,description:`Normalize display while preserving form-level expectations.`},{title:`Validation gate`,description:`Reject submission when value shape does not match mask contract.`}],capabilityNotes:[`Document whether callback receives raw text or already masked text.`,`If you need raw payload, sanitize before submit and keep canonical storage layer separate.`,`Use one mask function source for both form and API submission paths.`,`Treat partially typed values as invalid until user completion conditions are met.`]};exports.maskedInputMock=e;