tembro 3.1.1 → 3.1.6

package/dist/src/showcase/premium/modal-shell/showcase.js

@@ -1,148 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Input as t } from "../../../components/ui/input/index.js";
-import { Badge as n } from "../../../components/ui/badge/index.js";
-import { ModalShell as r } from "../../../components/overlay/modal-shell.js";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/showcase/premium/modal-shell/showcase.tsx
-var s = "border-t border-[color:var(--aui-divider)] py-6";
-function c({ mode: c }) {
-	let [l, u] = i.useState(!1), [d, f] = i.useState(!1);
-	return /* @__PURE__ */ o("div", {
-		className: "space-y-0",
-		children: [
-			/* @__PURE__ */ a("section", {
-				className: "pb-6",
-				children: /* @__PURE__ */ o("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-end 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: "Modal shell"
-							}),
-							/* @__PURE__ */ a("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Frame the modal, not the business logic"
-							}),
-							/* @__PURE__ */ a("p", {
-								className: "mt-3 text-sm leading-6 aui-text-muted",
-								children: "Use `ModalShell` when the route owns data and actions but needs one reusable modal frame."
-							})
-						]
-					}), /* @__PURE__ */ o("div", {
-						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
-						children: [
-							/* @__PURE__ */ o("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ a("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Modes"
-								}), /* @__PURE__ */ a("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: "2"
-								})]
-							}),
-							/* @__PURE__ */ o("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ a("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Use for"
-								}), /* @__PURE__ */ a("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: "Short forms"
-								})]
-							}),
-							/* @__PURE__ */ o("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ a("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Route"
-								}), /* @__PURE__ */ a("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: c === "playground" ? "Interactive" : "Docs"
-								})]
-							})
-						]
-					})]
-				})
-			}),
-			/* @__PURE__ */ a("section", {
-				className: s,
-				children: /* @__PURE__ */ o("div", {
-					className: "flex flex-wrap gap-3",
-					children: [
-						/* @__PURE__ */ a(e, {
-							onClick: () => u(!0),
-							children: "Create workspace"
-						}),
-						/* @__PURE__ */ a(e, {
-							variant: "outline",
-							onClick: () => f(!0),
-							children: "Open info modal"
-						}),
-						/* @__PURE__ */ a(n, {
-							variant: "outline",
-							children: "Controlled shell"
-						})
-					]
-				})
-			}),
-			/* @__PURE__ */ a("section", {
-				className: s,
-				children: /* @__PURE__ */ a("div", {
-					className: "border-y border-[color:var(--aui-divider)]",
-					children: [
-						"Keep mutations and side effects outside the shell component.",
-						"Use small, single-purpose content inside the modal body.",
-						"If the screen owns multiple steps, use a bigger route pattern instead."
-					].map((e) => /* @__PURE__ */ a("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__ */ a(r, {
-				open: l,
-				onOpenChange: u,
-				title: "Create workspace",
-				description: "Keep this action scoped, controlled, and recoverable.",
-				size: "md",
-				footer: /* @__PURE__ */ o("div", {
-					className: "flex w-full justify-end gap-2",
-					children: [/* @__PURE__ */ a(e, {
-						variant: "outline",
-						onClick: () => u(!1),
-						children: "Cancel"
-					}), /* @__PURE__ */ a(e, {
-						onClick: () => u(!1),
-						children: "Create"
-					})]
-				}),
-				children: /* @__PURE__ */ o("label", {
-					className: "space-y-2 text-sm aui-text-strong",
-					children: [/* @__PURE__ */ a("span", { children: "Workspace name" }), /* @__PURE__ */ a(t, { defaultValue: "Acme workspace" })]
-				})
-			}),
-			/* @__PURE__ */ a(r, {
-				open: d,
-				onOpenChange: f,
-				title: "Read-only details",
-				description: "Good for status, policy notes, and compact confirmation text.",
-				size: "sm",
-				footer: /* @__PURE__ */ a(e, {
-					className: "w-full",
-					onClick: () => f(!1),
-					children: "Done"
-				}),
-				children: /* @__PURE__ */ a("p", {
-					className: "text-sm aui-text-muted",
-					children: "Use a shell modal for small, single-purpose interactions with clear scope."
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { c as ModalShellShowcase };

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

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

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

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

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

@@ -1,28 +0,0 @@
-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<number | null>(2990.5)
-  const [raw, setRaw] = useState("$2,990.50")
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="money"
-        value={value}
-        onValueChange={(nextValue, rawValue) => {
-          setValue(nextValue)
-          setRaw(rawValue)
-        }}
-        prefix="$"
-        inputMode="decimal"
-        step={0.5}
-      />
-      <p className="text-sm aui-text-subtle">
-        Numeric value: <strong>{value === null ? "invalid" : value}</strong>
-      </p>
-      <p className="text-sm aui-text-muted">Raw input: {raw}</p>
-      <p className="text-sm aui-text-muted">Use inputMode to match expected currency input source.</p>
-    </div>
-  )
-}`,htmlCode:`<label for="money">Budget</label><div>$<input id="money" inputmode="decimal" type="text" /></div>`,cliCommand:`npx tembro add input`,highlights:[`Currency prefix/suffix`,`Numeric payload`,`Invalid text handling`,`Custom keyboard mode`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Pricing`,description:`Capture billing amounts with stable parsing and formatting behavior.`},{title:`Raw display vs parsed value`,description:`Keep display string separate from numeric payload.`},{title:`Invalid input`,description:`Handle temporary invalid values while editing before form submit.`},{title:`Negative guard`,description:`Prevent or allow negatives based on financial rules.`}],capabilityNotes:["Use `onValueChange` for canonical numeric value and raw typed value.","Pair `MoneyInput` with schema validation to reject negative or extreme values.",`Use prefix/suffix that matches locale and accounting conventions.`,`In multi-currency systems, normalize and convert right after parsing.`]};exports.moneyInputMock=e;

package/dist/src/showcase/premium/money-input/mock.js

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/money-input/mock.ts
-var e = {
-	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(2990.5)\n  const [raw, setRaw] = useState(\"$2,990.50\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Input\n        kind=\"money\"\n        value={value}\n        onValueChange={(nextValue, rawValue) => {\n          setValue(nextValue)\n          setRaw(rawValue)\n        }}\n        prefix=\"$\"\n        inputMode=\"decimal\"\n        step={0.5}\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Numeric value: <strong>{value === null ? \"invalid\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw input: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">Use inputMode to match expected currency input source.</p>\n    </div>\n  )\n}",
-	htmlCode: "<label for=\"money\">Budget</label><div>$<input id=\"money\" inputmode=\"decimal\" type=\"text\" /></div>",
-	cliCommand: "npx tembro add input",
-	highlights: [
-		"Currency prefix/suffix",
-		"Numeric payload",
-		"Invalid text handling",
-		"Custom keyboard mode"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"users-table",
-		"crm-dashboard"
-	],
-	scenarios: [
-		{
-			title: "Pricing",
-			description: "Capture billing amounts with stable parsing and formatting behavior."
-		},
-		{
-			title: "Raw display vs parsed value",
-			description: "Keep display string separate from numeric payload."
-		},
-		{
-			title: "Invalid input",
-			description: "Handle temporary invalid values while editing before form submit."
-		},
-		{
-			title: "Negative guard",
-			description: "Prevent or allow negatives based on financial rules."
-		}
-	],
-	capabilityNotes: [
-		"Use `onValueChange` for canonical numeric value and raw typed value.",
-		"Pair `MoneyInput` with schema validation to reject negative or extreme values.",
-		"Use prefix/suffix that matches locale and accounting conventions.",
-		"In multi-currency systems, normalize and convert right after parsing."
-	]
-};
-//#endregion
-export { e as moneyInputMock };

package/dist/src/showcase/premium/money-input/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(125.75);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.Input,{kind:`money`,value:r,onValueChange:e=>i(e),prefix:`$`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Parsed amount: `,r===null?`invalid`:`$${r.toFixed(2)}`]})]})}exports.MoneyInputShowcase=r;

package/dist/src/showcase/premium/money-input/showcase.js

@@ -1,21 +0,0 @@
-import { Input as e } from "../../../components/ui/input/index.js";
-import { useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/premium/money-input/showcase.tsx
-function i() {
-	let [i, a] = t(125.75);
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-3",
-		children: [/* @__PURE__ */ n(e, {
-			kind: "money",
-			value: i,
-			onValueChange: (e) => a(e),
-			prefix: "$"
-		}), /* @__PURE__ */ r("p", {
-			className: "aui-text-subtle text-sm",
-			children: ["Parsed amount: ", i === null ? "invalid" : `$${i.toFixed(2)}`]
-		})]
-	});
-}
-//#endregion
-export { i as MoneyInputShowcase };

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

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

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

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

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

@@ -1,32 +0,0 @@
-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<number | null>(14)
-  const [raw, setRaw] = useState("14")
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="number"
-        value={value}
-        onNumberChange={(nextValue) => {
-          setValue(nextValue)
-          setRaw(String(nextValue ?? ""))
-        }}
-        onChange={(event) => setRaw(event.target.value)}
-        min={0}
-        max={100}
-        step={5}
-        allowEmpty
-      />
-      <p className="text-sm aui-text-subtle">
-        Parsed numeric: <strong>{value === null ? "unset" : value}</strong>
-      </p>
-      <p className="text-sm aui-text-muted">Raw text: {raw}</p>
-      <p className="text-sm aui-text-muted">
-        Try entering invalid chars to see how parse and clamp rules apply.
-      </p>
-    </div>
-  )
-}`,htmlCode:`<label for="example-number">Amount</label><input id="example-number" inputmode="decimal" type="text" />`,cliCommand:`npx tembro add input`,highlights:[`Numeric parsing`,`Min/max constraints`,`Decimal steps`,`allowEmpty fallback`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Budget field`,description:`Keep values inside business bounds while editing quickly.`},{title:`Invalid input`,description:`Use parser path to avoid NaN leaks into form data.`},{title:`Stepper steps`,description:`Use step values that match your business precision.`},{title:`Uncontrolled mode`,description:`Use defaultValue and HTML value when rapid typing is enough.`}],capabilityNotes:[`The component supports controlled numeric state and keeps string display behavior under user editing.`,"Use `min`/`max` with `clamp` semantics when downstream systems expect bounded values.","`allowEmpty` helps avoid forced 0 when field is cleared temporarily.",`Prefer controlled usage in forms that need instant validation and submit-time serialization.`]};exports.numberInputMock=e;

package/dist/src/showcase/premium/number-input/mock.js

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/number-input/mock.ts
-var e = {
-	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(14)\n  const [raw, setRaw] = useState(\"14\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Input\n        kind=\"number\"\n        value={value}\n        onNumberChange={(nextValue) => {\n          setValue(nextValue)\n          setRaw(String(nextValue ?? \"\"))\n        }}\n        onChange={(event) => setRaw(event.target.value)}\n        min={0}\n        max={100}\n        step={5}\n        allowEmpty\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Parsed numeric: <strong>{value === null ? \"unset\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw text: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">\n        Try entering invalid chars to see how parse and clamp rules apply.\n      </p>\n    </div>\n  )\n}",
-	htmlCode: "<label for=\"example-number\">Amount</label><input id=\"example-number\" inputmode=\"decimal\" type=\"text\" />",
-	cliCommand: "npx tembro add input",
-	highlights: [
-		"Numeric parsing",
-		"Min/max constraints",
-		"Decimal steps",
-		"allowEmpty fallback"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"users-table",
-		"crm-dashboard"
-	],
-	scenarios: [
-		{
-			title: "Budget field",
-			description: "Keep values inside business bounds while editing quickly."
-		},
-		{
-			title: "Invalid input",
-			description: "Use parser path to avoid NaN leaks into form data."
-		},
-		{
-			title: "Stepper steps",
-			description: "Use step values that match your business precision."
-		},
-		{
-			title: "Uncontrolled mode",
-			description: "Use defaultValue and HTML value when rapid typing is enough."
-		}
-	],
-	capabilityNotes: [
-		"The component supports controlled numeric state and keeps string display behavior under user editing.",
-		"Use `min`/`max` with `clamp` semantics when downstream systems expect bounded values.",
-		"`allowEmpty` helps avoid forced 0 when field is cleared temporarily.",
-		"Prefer controlled usage in forms that need instant validation and submit-time serialization."
-	]
-};
-//#endregion
-export { e as numberInputMock };

package/dist/src/showcase/premium/number-input/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(12);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.Input,{kind:`number`,value:r,onNumberChange:i,min:0,max:30,step:1}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Current value: `,r??`unset`]})]})}exports.NumberInputShowcase=r;

package/dist/src/showcase/premium/number-input/showcase.js

@@ -1,23 +0,0 @@
-import { Input as e } from "../../../components/ui/input/index.js";
-import { useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/premium/number-input/showcase.tsx
-function i() {
-	let [i, a] = t(12);
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-3",
-		children: [/* @__PURE__ */ n(e, {
-			kind: "number",
-			value: i,
-			onNumberChange: a,
-			min: 0,
-			max: 30,
-			step: 1
-		}), /* @__PURE__ */ r("p", {
-			className: "aui-text-subtle text-sm",
-			children: ["Current value: ", i ?? "unset"]
-		})]
-	});
-}
-//#endregion
-export { i as NumberInputShowcase };

package/dist/src/showcase/premium/page-container/index.cjs

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

package/dist/src/showcase/premium/page-container/index.js

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

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

@@ -1,9 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { PageContainer } from "tembro"
-
-export function Example() {
-  return (
-    <PageContainer size="lg">
-      <div className="rounded-md border p-4">Page content stays constrained here.</div>
-    </PageContainer>
-  )
-}`,highlights:[`Consistent max-width wrapper`,`Size presets`,`Useful for dashboard and content pages`,`Simple integration with layout components`],scenarios:[{title:`Global page shell`,description:`Use as the default wrapper inside AppShell main slot.`},{title:`Long-form content`,description:`Use smaller sizes for forms and full width for tables.`},{title:`Readable spacing`,description:`Pair with responsive spacing utilities from surrounding layouts.`}],capabilityNotes:["Prefer `lg` or `xl` for heavy forms and tables.","Use `full` when content needs entire width, such as charts.",`Wrap page-level cards in a single PageContainer to keep rhythm uniform.`]};exports.pageContainerMock=e;

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

@@ -1,31 +0,0 @@
-//#region src/showcase/premium/page-container/mock.ts
-var e = {
-	code: "import { PageContainer } from \"tembro\"\n\nexport function Example() {\n  return (\n    <PageContainer size=\"lg\">\n      <div className=\"rounded-md border p-4\">Page content stays constrained here.</div>\n    </PageContainer>\n  )\n}",
-	highlights: [
-		"Consistent max-width wrapper",
-		"Size presets",
-		"Useful for dashboard and content pages",
-		"Simple integration with layout components"
-	],
-	scenarios: [
-		{
-			title: "Global page shell",
-			description: "Use as the default wrapper inside AppShell main slot."
-		},
-		{
-			title: "Long-form content",
-			description: "Use smaller sizes for forms and full width for tables."
-		},
-		{
-			title: "Readable spacing",
-			description: "Pair with responsive spacing utilities from surrounding layouts."
-		}
-	],
-	capabilityNotes: [
-		"Prefer `lg` or `xl` for heavy forms and tables.",
-		"Use `full` when content needs entire width, such as charts.",
-		"Wrap page-level cards in a single PageContainer to keep rhythm uniform."
-	]
-};
-//#endregion
-export { e as pageContainerMock };

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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/layout/page-container.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[`default`,`sm`,`md`,`lg`,`xl`,`full`],o=`rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`;function s({mode:e}){let[s,c]=r.useState(`lg`);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Content width`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Page container should stabilize layout width`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This wrapper is not decorative. It keeps headings, forms, tables, and body copy aligned so every route does not invent its own max-width.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Width scale`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Content rhythm`})]})]})}),e===`playground`?(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:a.map(e=>(0,i.jsx)(`button`,{className:`rounded-full px-4 py-2 text-sm ${s===e?`bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]`:`border border-[color:var(--aui-divider)] aui-text-muted`}`,onClick:()=>c(e),children:e},e))}):null,(0,i.jsxs)(n.PageContainer,{size:s,className:o,children:[(0,i.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Active size: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:s})]}),(0,i.jsx)(`p`,{className:`aui-text-muted mt-2 text-sm`,children:`Use this wrapper to keep internal sections aligned across pages and avoid route-by-route width drift.`})]})]})}exports.PageContainerShowcase=s;

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

@@ -1,79 +0,0 @@
-import { Badge as e } from "../../../components/ui/badge/index.js";
-import { PageContainer as t } from "../../../components/layout/page-container.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/page-container/showcase.tsx
-var a = [
-	"default",
-	"sm",
-	"md",
-	"lg",
-	"xl",
-	"full"
-], o = "rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4";
-function s({ mode: s }) {
-	let [c, l] = n.useState("lg");
-	return /* @__PURE__ */ i("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ r("section", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ i("div", {
-						className: "max-w-xl",
-						children: [
-							/* @__PURE__ */ r("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-								children: "Content width"
-							}),
-							/* @__PURE__ */ r("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Page container should stabilize layout width"
-							}),
-							/* @__PURE__ */ r("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "This wrapper is not decorative. It keeps headings, forms, tables, and body copy aligned so every route does not invent its own max-width."
-							})
-						]
-					}), /* @__PURE__ */ i("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ r(e, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Width scale"
-						}), /* @__PURE__ */ r(e, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Content rhythm"
-						})]
-					})]
-				})
-			}),
-			s === "playground" ? /* @__PURE__ */ r("div", {
-				className: "flex flex-wrap gap-2",
-				children: a.map((e) => /* @__PURE__ */ r("button", {
-					className: `rounded-full px-4 py-2 text-sm ${c === e ? "bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]" : "border border-[color:var(--aui-divider)] aui-text-muted"}`,
-					onClick: () => l(e),
-					children: e
-				}, e))
-			}) : null,
-			/* @__PURE__ */ i(t, {
-				size: c,
-				className: o,
-				children: [/* @__PURE__ */ i("p", {
-					className: "aui-text-muted text-sm",
-					children: ["Active size: ", /* @__PURE__ */ r("span", {
-						className: "font-medium aui-text-strong",
-						children: c
-					})]
-				}), /* @__PURE__ */ r("p", {
-					className: "aui-text-muted mt-2 text-sm",
-					children: "Use this wrapper to keep internal sections aligned across pages and avoid route-by-route width drift."
-				})]
-			})
-		]
-	});
-}
-//#endregion
-export { s as PageContainerShowcase };

package/dist/src/showcase/premium/page-header/index.cjs

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

package/dist/src/showcase/premium/page-header/index.js

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

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

@@ -1,14 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Breadcrumbs, PageHeader } from "tembro"
-
-export function Example() {
-  return (
-    <PageHeader
-      eyebrow="Overview"
-      title="Project settings"
-      description="Use PageHeader to group title, description and actions at the top of a screen."
-      breadcrumbs={<Breadcrumbs items={[{ key: "home", label: "Home", href: "/" }, { key: "settings", label: "Settings", current: true }]} />}
-      actions={<button>Save</button>}
-      sticky
-    />
-  )
-}`,highlights:[`Top-of-page composition`,`Optional breadcrumbs region`,`Action and meta regions`,`Sticky page heading mode`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Admin pages`,description:`Keep title, description and action buttons together before body content.`},{title:`List views`,description:`Pair breadcrumbs with actions to indicate current scope.`},{title:`Sticky header`,description:`Enable sticky mode for long content pages where users need persistent context.`}],capabilityNotes:["Use `eyebrow` for a compact pre-heading that communicates area or environment.",`Place route breadcrumbs in one place and avoid duplicating path state elsewhere.`,"Use `meta` for small KPI chips, tags or helper context."]};exports.pageHeaderMock=e;

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

@@ -1,36 +0,0 @@
-//#region src/showcase/premium/page-header/mock.ts
-var e = {
-	code: "import { Breadcrumbs, PageHeader } from \"tembro\"\n\nexport function Example() {\n  return (\n    <PageHeader\n      eyebrow=\"Overview\"\n      title=\"Project settings\"\n      description=\"Use PageHeader to group title, description and actions at the top of a screen.\"\n      breadcrumbs={<Breadcrumbs items={[{ key: \"home\", label: \"Home\", href: \"/\" }, { key: \"settings\", label: \"Settings\", current: true }]} />}\n      actions={<button>Save</button>}\n      sticky\n    />\n  )\n}",
-	highlights: [
-		"Top-of-page composition",
-		"Optional breadcrumbs region",
-		"Action and meta regions",
-		"Sticky page heading mode"
-	],
-	relatedBlockSlugs: [
-		"dashboard-starter",
-		"crm-dashboard",
-		"users-table"
-	],
-	scenarios: [
-		{
-			title: "Admin pages",
-			description: "Keep title, description and action buttons together before body content."
-		},
-		{
-			title: "List views",
-			description: "Pair breadcrumbs with actions to indicate current scope."
-		},
-		{
-			title: "Sticky header",
-			description: "Enable sticky mode for long content pages where users need persistent context."
-		}
-	],
-	capabilityNotes: [
-		"Use `eyebrow` for a compact pre-heading that communicates area or environment.",
-		"Place route breadcrumbs in one place and avoid duplicating path state elsewhere.",
-		"Use `meta` for small KPI chips, tags or helper context."
-	]
-};
-//#endregion
-export { e as pageHeaderMock };

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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/layout/breadcrumbs.cjs"),i=require("../../../components/layout/page-header.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=[{key:`home`,label:`Home`,href:`/`},{key:`products`,label:`Products`,href:`/products`},{key:`active`,label:`Workspace`,current:!0}];function c({mode:e}){let[c,l]=a.useState(e===`playground`);return(0,o.jsxs)(`div`,{className:`space-y-5`,children:[(0,o.jsx)(`div`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4 sm:p-5`,children:(0,o.jsx)(i.PageHeader,{eyebrow:`Workspace`,title:`Team settings`,description:`Configure profile, billing and preferences from this page-level surface.`,breadcrumbs:(0,o.jsx)(r.Breadcrumbs,{items:s}),actions:(0,o.jsx)(t.Button,{size:`sm`,children:`Save`}),meta:(0,o.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Breadcrumbs`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Action`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Sticky option`})]}),sticky:c})}),e===`playground`?(0,o.jsx)(`button`,{className:`rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted`,onClick:()=>l(e=>!e),children:c?`Disable sticky`:`Enable sticky`}):null]})}exports.PageHeaderShowcase=c;