tembro 3.0.0 → 3.1.1

package/dist/showcase/premium/otp-input/mock.js

@@ -1,31 +1 @@
-//#region src/showcase/premium/otp-input/mock.ts
-var e = {
-	code: "import * as React from \"react\"\nimport { OtpInput } from \"tembro\"\n\nexport function Example() {\n  const [code, setCode] = React.useState(\"\")\n\n  return (\n    <OtpInput\n      value={code}\n      onValueChange={setCode}\n      length={6}\n    />\n  )\n}",
-	highlights: [
-		"Fixed-length code entry",
-		"Auto-advance focus",
-		"Paste handling",
-		"Good for 2FA and verification flows"
-	],
-	scenarios: [
-		{
-			title: "Login verification",
-			description: "Capture a 2FA code without forcing users through one input character at a time manually."
-		},
-		{
-			title: "Sensitive action confirm",
-			description: "Verify a short access code before dangerous changes."
-		},
-		{
-			title: "Invite acceptance",
-			description: "Handle compact confirmation codes in onboarding flows."
-		}
-	],
-	capabilityNotes: [
-		"OTP is for short fixed codes, not general PIN builders with complex rules.",
-		"Paste support matters because users often copy codes from mail or authenticator apps.",
-		"Keep the surrounding copy minimal and precise."
-	]
-};
-//#endregion
-export { e as otpInputMock };
+export * from "../../../src/showcase/premium/otp-input/mock.js"

package/dist/showcase/premium/otp-input/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/inputs/otp-input.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(``);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:`Verification input`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`OtpInput should make fixed-code entry feel automatic`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Users should not wrestle with focus or manual cell management. Paste and auto-advance behavior are the main value here.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Auto advance`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Paste aware`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.OtpInput,{value:o,onValueChange:s,length:6})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current code`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o||`No code entered`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Bir martalik tasdiqlash kodlari uchun ishlating. Odatda 4-6 belgili verification yoki 2FA oqimlarida eng foydali.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Clipboarddan 6 xonali kod paste qilib ham tekshirib ko‘ring.`})}):null]})}exports.OtpInputShowcase=o;
+module.exports = require("../../../src/showcase/premium/otp-input/showcase.cjs")

package/dist/showcase/premium/otp-input/showcase.js

@@ -1,87 +1 @@
-import { Badge as e } from "../../../components/ui/badge/index.js";
-import { OtpInput as t } from "../../../components/inputs/otp-input.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/otp-input/showcase.tsx
-var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function o({ mode: o }) {
-	let [s, c] = n.useState("");
-	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: "Verification input"
-							}),
-							/* @__PURE__ */ r("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "OtpInput should make fixed-code entry feel automatic"
-							}),
-							/* @__PURE__ */ r("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "Users should not wrestle with focus or manual cell management. Paste and auto-advance behavior are the main value here."
-							})
-						]
-					}), /* @__PURE__ */ i("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ r(e, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Auto advance"
-						}), /* @__PURE__ */ r(e, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Paste aware"
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ r(t, {
-					value: s,
-					onValueChange: c,
-					length: 6
-				})
-			}),
-			/* @__PURE__ */ i("div", {
-				className: "grid gap-4 xl:grid-cols-2",
-				children: [/* @__PURE__ */ i("section", {
-					className: a,
-					children: [/* @__PURE__ */ r("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Current code"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-3 text-base font-medium aui-text-strong",
-						children: s || "No code entered"
-					})]
-				}), /* @__PURE__ */ i("section", {
-					className: a,
-					children: [/* @__PURE__ */ r("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Usage note"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-3 text-sm leading-6 aui-text-muted",
-						children: "Bir martalik tasdiqlash kodlari uchun ishlating. Odatda 4-6 belgili verification yoki 2FA oqimlarida eng foydali."
-					})]
-				})]
-			}),
-			o === "playground" ? /* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ r("p", {
-					className: "text-sm aui-text-muted",
-					children: "Clipboarddan 6 xonali kod paste qilib ham tekshirib ko‘ring."
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { o as OtpInputShowcase };
+export * from "../../../src/showcase/premium/otp-input/showcase.js"

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

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

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

@@ -1,3 +1 @@
-import { PageContainerShowcase as e } from "./showcase.js";
-import { pageContainerMock as t } from "./mock.js";
-export { e as PageContainerShowcase, t as pageContainerMock };
+export * from "../../../src/showcase/premium/page-container/index.js"

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

@@ -1,9 +1 @@
-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;
+module.exports = require("../../../src/showcase/premium/page-container/mock.cjs")

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

@@ -1,31 +1 @@
-//#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 };
+export * from "../../../src/showcase/premium/page-container/mock.js"

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

@@ -1 +1 @@
-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;
+module.exports = require("../../../src/showcase/premium/page-container/showcase.cjs")

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

@@ -1,79 +1 @@
-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 };
+export * from "../../../src/showcase/premium/page-container/showcase.js"

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

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

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

@@ -1,3 +1 @@
-import { PageHeaderShowcase as e } from "./showcase.js";
-import { pageHeaderMock as t } from "./mock.js";
-export { e as PageHeaderShowcase, t as pageHeaderMock };
+export * from "../../../src/showcase/premium/page-header/index.js"

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

@@ -1,14 +1 @@
-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;
+module.exports = require("../../../src/showcase/premium/page-header/mock.cjs")

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

@@ -1,36 +1 @@
-//#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 };
+export * from "../../../src/showcase/premium/page-header/mock.js"

package/dist/showcase/premium/page-header/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/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;
+module.exports = require("../../../src/showcase/premium/page-header/showcase.cjs")

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

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

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.PageStateShowcase=e.PageStateShowcase,exports.pageStateMock=t.pageStateMock;
+module.exports = require("../../../src/showcase/premium/page-state/index.cjs")

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

@@ -1,3 +1 @@
-import { PageStateShowcase as e } from "./showcase.js";
-import { pageStateMock as t } from "./mock.js";
-export { e as PageStateShowcase, t as pageStateMock };
+export * from "../../../src/showcase/premium/page-state/index.js"

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

@@ -1,12 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, 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>}
-    />
-  )
-}`,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;
+module.exports = require("../../../src/showcase/premium/page-state/mock.cjs")

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

@@ -1,31 +1 @@
-//#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}",
-	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."
-	]
-};
-//#endregion
-export { e as pageStateMock };
+export * from "../../../src/showcase/premium/page-state/mock.js"

package/dist/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;
+module.exports = require("../../../src/showcase/premium/page-state/showcase.cjs")

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

@@ -1,82 +1 @@
-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";
-//#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 = [
-	"empty",
-	"loading",
-	"error",
-	"success",
-	"info"
-];
-function c({ mode: c }) {
-	let [l, u] = r.useState(2), d = s[l] ?? "error";
-	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: "Route feedback"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "PageState should explain the route outcome immediately"
-							}),
-							/* @__PURE__ */ i("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", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Route-level"
-						}), /* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Outcome first"
-						})]
-					})]
-				})
-			}),
-			/* @__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"
-				}),
-				extra: d === "error" ? /* @__PURE__ */ i(e, {
-					variant: "ghost",
-					children: "Open logs"
-				}) : void 0
-			}),
-			c === "playground" ? /* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ i("div", {
-					className: "flex flex-wrap gap-2",
-					children: s.map((t, n) => /* @__PURE__ */ i(e, {
-						size: "sm",
-						variant: l === n ? "default" : "outline",
-						onClick: () => u(n),
-						children: t
-					}, t))
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { c as PageStateShowcase };
+export * from "../../../src/showcase/premium/page-state/showcase.js"

package/dist/showcase/premium/page-tabs/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.PageTabsShowcase=e.PageTabsShowcase,exports.pageTabsMock=t.pageTabsMock;
+module.exports = require("../../../src/showcase/premium/page-tabs/index.cjs")

package/dist/showcase/premium/page-tabs/index.js

@@ -1,3 +1 @@
-import { PageTabsShowcase as e } from "./showcase.js";
-import { pageTabsMock as t } from "./mock.js";
-export { e as PageTabsShowcase, t as pageTabsMock };
+export * from "../../../src/showcase/premium/page-tabs/index.js"

package/dist/showcase/premium/page-tabs/mock.cjs

@@ -1,18 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { PageTabs } from "tembro"
-
-export function Example() {
-  const [tab, setTab] = React.useState("overview")
-
-  return (
-    <PageTabs
-      value={tab}
-      onValueChange={(next) => setTab(next)}
-      items={[
-        { value: "overview", label: "Overview" },
-        { value: "billing", label: "Billing", badge: 2 },
-        { value: "activity", label: "Activity" },
-      ]}
-    />
-  )
-}`,highlights:[`Underline, pills, and cards variants`,`Route-sized section switching`,`Optional tab badges`,`Good semantic fit for page-level navigation`],scenarios:[{title:`Workspace sections`,description:`Switch between overview, billing, and activity at the route surface level.`},{title:`Settings pages`,description:`Organize major groups without building separate side navigation.`},{title:`Detail hubs`,description:`Keep related top-level sections visible across a broad content surface.`}],capabilityNotes:[`Use page-tabs for route-sized or section-sized navigation, not tiny inline toggles.`,`Choose pills/cards only when the visual context supports a stronger container.`,`If the options are just view toggles, button-group may be more appropriate.`]};exports.pageTabsMock=e;
+module.exports = require("../../../src/showcase/premium/page-tabs/mock.cjs")