tembro 1.0.0

package/dist/showcase/families/inputs/showcase.js

@@ -0,0 +1,404 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Textarea as t } from "../../../components/ui/textarea/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { AsyncMultiSelect as r, AsyncSelect as i } from "../../../components/inputs/async-select.js";
+import { SimpleSelect as a } from "../../../components/inputs/simple-select.js";
+import { defaultWorkspaceGroups as o, densityOptions as s, environmentOptions as c, workspaceOptions as l } from "./data.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/showcase/families/inputs/showcase.tsx
+function p({ state: p, setState: m }) {
+	let [h, g] = u.useState("default"), [_, v] = u.useState("acme-dashboard"), [y, b] = u.useState(l[0]), [x, S] = u.useState(["crm-workspace", "store-command"]), [C, w] = u.useState([l[1], l[2]]), [T, E] = u.useState("production"), D = u.useCallback(async (e) => {
+		if (await new Promise((e) => window.setTimeout(e, 320)), h === "error") throw Error("Failed to load");
+		let t = e.trim().toLowerCase(), n = l.filter((e) => [
+			e.label,
+			e.description,
+			e.data.team,
+			e.data.status
+		].join(" ").toLowerCase().includes(t));
+		return t ? [{
+			label: "Search results",
+			options: n
+		}] : o;
+	}, [h]), O = u.useCallback(async (e) => (await new Promise((e) => window.setTimeout(e, 120)), l.find((t) => t.value === e) ?? null), []), k = u.useCallback(async (e) => (await new Promise((e) => window.setTimeout(e, 120)), l.filter((t) => e.includes(t.value))), []), A = y ?? l.find((e) => e.value === _) ?? null;
+	return /* @__PURE__ */ f("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ d("div", {
+			className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+			children: /* @__PURE__ */ f("div", {
+				className: "flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between",
+				children: [/* @__PURE__ */ f("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ d(n, {
+								variant: "outline",
+								children: "AsyncSelect"
+							}),
+							/* @__PURE__ */ d(n, {
+								variant: "outline",
+								children: "AsyncMultiSelect"
+							}),
+							/* @__PURE__ */ d(n, {
+								variant: "outline",
+								children: "SimpleSelect"
+							}),
+							/* @__PURE__ */ d(n, {
+								variant: "outline",
+								children: h === "strict" ? "Min search 2" : h === "error" ? "Error mode" : "Default mode"
+							})
+						]
+					}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+						className: "aui-text-strong text-sm font-medium",
+						children: "Select family coverage"
+					}), /* @__PURE__ */ d("p", {
+						className: "aui-text-muted mt-1 text-sm leading-6",
+						children: "Static select, async search, hydrated edit mode, create flow, multiselect limits, clear actions and selection summaries all stay visible here."
+					})] })]
+				}), /* @__PURE__ */ f("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ d(e, {
+							variant: h === "default" ? "default" : "outline",
+							size: "sm",
+							onClick: () => g("default"),
+							children: "Default"
+						}),
+						/* @__PURE__ */ d(e, {
+							variant: h === "strict" ? "default" : "outline",
+							size: "sm",
+							onClick: () => g("strict"),
+							children: "Strict"
+						}),
+						/* @__PURE__ */ d(e, {
+							variant: h === "error" ? "default" : "outline",
+							size: "sm",
+							onClick: () => g("error"),
+							children: "Error"
+						}),
+						/* @__PURE__ */ d(e, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => {
+								g("default"), v("acme-dashboard"), b(l[0]), S(["crm-workspace", "store-command"]), w([l[1], l[2]]), E("production");
+							},
+							children: "Reset"
+						})
+					]
+				})]
+			})
+		}), /* @__PURE__ */ f("div", {
+			className: "grid gap-4 xl:grid-cols-[1.12fr_0.88fr]",
+			children: [/* @__PURE__ */ f("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ f("div", {
+						className: "grid gap-4 xl:grid-cols-2",
+						children: [/* @__PURE__ */ f("div", {
+							className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+							children: [
+								/* @__PURE__ */ d("p", {
+									className: "aui-text-strong text-sm font-medium",
+									children: "Simple select"
+								}),
+								/* @__PURE__ */ d("p", {
+									className: "aui-text-muted mt-1 text-sm leading-6",
+									children: "Static option set with search and clear action for lightweight forms."
+								}),
+								/* @__PURE__ */ d("div", {
+									className: "mt-4",
+									children: /* @__PURE__ */ d(a, {
+										value: T,
+										onValueChange: (e) => {
+											E(e), m({ notes: `${e ?? "No environment"} selected for deploy routing.` });
+										},
+										options: c,
+										placeholder: "Choose environment",
+										searchable: !0,
+										clearable: !0
+									})
+								})
+							]
+						}), /* @__PURE__ */ f("div", {
+							className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+							children: [
+								/* @__PURE__ */ d("p", {
+									className: "aui-text-strong text-sm font-medium",
+									children: "Single async select"
+								}),
+								/* @__PURE__ */ d("p", {
+									className: "aui-text-muted mt-1 text-sm leading-6",
+									children: "Hydrate selected value, search grouped results and create custom workspace."
+								}),
+								/* @__PURE__ */ d("div", {
+									className: "mt-4",
+									children: /* @__PURE__ */ d(i, {
+										value: _,
+										selectedOption: y,
+										onValueChange: (e, t) => {
+											v(e), b(t ?? null), m({ notes: `${t?.label ?? "Selection cleared"} connected to downstream workspace flow.` });
+										},
+										loadOptions: D,
+										loadSelectedOption: O,
+										defaultOptions: o,
+										minSearchLength: h === "strict" ? 2 : 0,
+										cacheOptions: !0,
+										clearable: !0,
+										labels: {
+											placeholder: "Select workspace",
+											searchPlaceholder: "Search workspaces...",
+											loading: "Loading workspaces...",
+											error: "Could not load workspaces",
+											empty: "No workspace found",
+											minSearchLength: (e) => `Type at least ${e} characters`
+										},
+										renderValue: (e) => /* @__PURE__ */ f("span", {
+											className: "inline-flex min-w-0 flex-col text-left",
+											children: [/* @__PURE__ */ d("span", {
+												className: "truncate",
+												children: e.label
+											}), /* @__PURE__ */ d("span", {
+												className: "aui-text-muted truncate text-xs",
+												children: e.data.team
+											})]
+										}),
+										renderOption: (e, t) => /* @__PURE__ */ f("span", {
+											className: "flex min-w-0 items-start justify-between gap-3",
+											children: [/* @__PURE__ */ f("span", {
+												className: "min-w-0",
+												children: [/* @__PURE__ */ d("span", {
+													className: "block truncate font-medium",
+													children: e.label
+												}), /* @__PURE__ */ d("span", {
+													className: "aui-text-muted block truncate text-xs",
+													children: e.description
+												})]
+											}), /* @__PURE__ */ d("span", {
+												className: t.selected ? "rounded-full aui-surface-strong px-2 py-0.5 text-[11px]" : "rounded-full bg-[color:var(--aui-page-bg-alt)] px-2 py-0.5 text-[11px] aui-text-strong",
+												children: e.data.status
+											})]
+										}),
+										onCreateOption: (e) => ({
+											value: e.trim().toLowerCase().replace(/\s+/g, "-"),
+											label: e.trim(),
+											description: "Created from the current route",
+											data: {
+												team: "Custom",
+												status: "Draft"
+											}
+										}),
+										createOptionLabel: (e) => `Create workspace "${e}"`
+									})
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+						children: [/* @__PURE__ */ f("div", {
+							className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between",
+							children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+								className: "aui-text-strong text-sm font-medium",
+								children: "Async multi select"
+							}), /* @__PURE__ */ d("p", {
+								className: "aui-text-muted mt-1 text-sm leading-6",
+								children: "Select all visible options, cap selection count and keep tag removal independent from trigger open state."
+							})] }), /* @__PURE__ */ f("div", {
+								className: "flex flex-wrap gap-2",
+								children: [
+									/* @__PURE__ */ f(n, {
+										variant: "outline",
+										children: [x.length, " linked"]
+									}),
+									/* @__PURE__ */ d(n, {
+										variant: "outline",
+										children: "Max 3"
+									}),
+									/* @__PURE__ */ d(n, {
+										variant: "outline",
+										children: "Select visible"
+									})
+								]
+							})]
+						}), /* @__PURE__ */ d("div", {
+							className: "mt-4",
+							children: /* @__PURE__ */ d(r, {
+								value: x,
+								selectedOptions: C,
+								onValueChange: (e, t) => {
+									S(e), w(t), m({ notes: `${t.length} linked modules attached to the workspace form.` });
+								},
+								loadOptions: D,
+								loadSelectedOptions: k,
+								defaultOptions: o,
+								minSearchLength: h === "strict" ? 2 : 0,
+								maxSelected: 3,
+								showSelectAll: !0,
+								clearable: !0,
+								labels: {
+									placeholder: "Attach modules",
+									searchPlaceholder: "Search modules...",
+									loading: "Loading modules...",
+									error: "Could not load modules",
+									empty: "No module found",
+									clearAll: "Clear all",
+									selectAll: "Select visible",
+									selectedCount: (e) => `${e} selected`,
+									maxSelected: (e) => `Maximum ${e} modules`,
+									minSearchLength: (e) => `Type at least ${e} characters`
+								},
+								renderOption: (e) => /* @__PURE__ */ f("span", {
+									className: "flex min-w-0 items-start justify-between gap-3",
+									children: [/* @__PURE__ */ f("span", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ d("span", {
+											className: "block truncate font-medium",
+											children: e.label
+										}), /* @__PURE__ */ d("span", {
+											className: "aui-text-muted block truncate text-xs",
+											children: e.data.team
+										})]
+									}), /* @__PURE__ */ d("span", {
+										className: "aui-text-muted text-[11px]",
+										children: e.data.status
+									})]
+								})
+							})
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "grid gap-4 md:grid-cols-3",
+						children: [
+							{
+								title: "Row-safe clear",
+								body: "Clear icons and tag remove actions stay isolated from the parent trigger or row click surface."
+							},
+							{
+								title: "Hydrated edit mode",
+								body: "Selected values can be restored from remote data without forcing the full option list to preload."
+							},
+							{
+								title: "Large option sets",
+								body: "Use async search when a plain select would overload the route or the user needs remote filtering."
+							}
+						].map((e) => /* @__PURE__ */ f("div", {
+							className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+							children: [/* @__PURE__ */ d("p", {
+								className: "aui-text-strong text-sm font-medium",
+								children: e.title
+							}), /* @__PURE__ */ d("p", {
+								className: "aui-text-subtle mt-2 text-sm leading-6",
+								children: e.body
+							})]
+						}, e.title))
+					})
+				]
+			}), /* @__PURE__ */ f("div", {
+				className: "space-y-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+				children: [
+					/* @__PURE__ */ d(t, {
+						value: p.notes,
+						onChange: (e) => m({ notes: e.target.value }),
+						className: "min-h-24"
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "grid gap-3 md:grid-cols-2 xl:grid-cols-1",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4",
+								children: [
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-muted text-sm",
+										children: "Mode"
+									}),
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-strong mt-2 text-lg font-semibold",
+										children: h
+									}),
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-strong mt-2 text-sm",
+										children: h === "error" ? "Forces renderError state." : h === "strict" ? "Requires min search before loading." : "Immediate async search with grouped defaults."
+									})
+								]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4",
+								children: [
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-muted text-sm",
+										children: "Selected workspace"
+									}),
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-strong mt-2 text-lg font-semibold",
+										children: A?.label ?? "Nothing selected"
+									}),
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-subtle mt-2 text-sm",
+										children: A?.description ?? "Choose a workspace to hydrate its shell."
+									})
+								]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4",
+								children: [
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-muted text-sm",
+										children: "Linked modules"
+									}),
+									/* @__PURE__ */ f("p", {
+										className: "aui-text-strong mt-2 text-lg font-semibold",
+										children: [x.length, " attached"]
+									}),
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-subtle mt-2 text-sm",
+										children: "Tags, clear all and select visible stay synchronized with controlled value state."
+									})
+								]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4",
+								children: [
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-muted text-sm",
+										children: "Environment"
+									}),
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-strong mt-2 text-lg font-semibold",
+										children: c.find((e) => e.value === T)?.label ?? "Not selected"
+									}),
+									/* @__PURE__ */ d("p", {
+										className: "aui-text-subtle mt-2 text-sm",
+										children: "SimpleSelect covers the static branch of the same select family."
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							"grouped",
+							"hydration",
+							"create-option",
+							"multi-select",
+							"clearable",
+							"searchable"
+						].map((e) => /* @__PURE__ */ d(n, {
+							variant: "outline",
+							children: e
+						}, e))
+					}),
+					/* @__PURE__ */ d(a, {
+						value: p.density,
+						onValueChange: (e) => m({ density: e ?? "comfortable" }),
+						options: s,
+						placeholder: "Preview density"
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { p as InputsFamilyShowcase };

package/dist/showcase/families/layout/index.cjs

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

package/dist/showcase/families/layout/index.d.ts

@@ -0,0 +1,2 @@
+export { LayoutFamilyShowcase } from "./showcase";
+export { layoutFamilyMock } from "./mock";

package/dist/showcase/families/layout/index.js

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

package/dist/showcase/families/layout/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { AppShell, AppHeader, AppSidebar, PageHeader, StatCard } from "tembro"
+
+export function Example() {
+  return <AppShell />
+}`,highlights:[`App shell composition`,`Sidebar navigation`,`Page headers`,`Dashboard stat surfaces`],scenarios:[{title:`Admin workspace`,description:`Combine shell, sidebar and stat cards into a dense admin product.`},{title:`Analytics overview`,description:`Use cards and page headers to structure KPI-heavy screens.`},{title:`Nested navigation`,description:`Keep route context visible with breadcrumbs and section headers.`}],metrics:[{label:`Exports`,value:`8`},{label:`Layouts`,value:`3`},{label:`Status`,value:`Stable`}]};exports.layoutFamilyMock=e;

package/dist/showcase/families/layout/mock.d.ts

@@ -0,0 +1,2 @@
+import type { FamilyDemoMock } from "../types";
+export declare const layoutFamilyMock: FamilyDemoMock;

package/dist/showcase/families/layout/mock.js

@@ -0,0 +1,40 @@
+//#region src/showcase/families/layout/mock.ts
+var e = {
+	code: "import { AppShell, AppHeader, AppSidebar, PageHeader, StatCard } from \"tembro\"\n\nexport function Example() {\n  return <AppShell />\n}",
+	highlights: [
+		"App shell composition",
+		"Sidebar navigation",
+		"Page headers",
+		"Dashboard stat surfaces"
+	],
+	scenarios: [
+		{
+			title: "Admin workspace",
+			description: "Combine shell, sidebar and stat cards into a dense admin product."
+		},
+		{
+			title: "Analytics overview",
+			description: "Use cards and page headers to structure KPI-heavy screens."
+		},
+		{
+			title: "Nested navigation",
+			description: "Keep route context visible with breadcrumbs and section headers."
+		}
+	],
+	metrics: [
+		{
+			label: "Exports",
+			value: "8"
+		},
+		{
+			label: "Layouts",
+			value: "3"
+		},
+		{
+			label: "Status",
+			value: "Stable"
+		}
+	]
+};
+//#endregion
+export { e as layoutFamilyMock };

package/dist/showcase/families/layout/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/input/index.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react/jsx-runtime");function i({state:i,setState:a}){return(0,r.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.24fr_1fr]`,children:[(0,r.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4`,children:[`Overview`,`Analytics`,`Customers`,`Orders`,`Settings`].map((e,t)=>(0,r.jsx)(`div`,{className:`mb-2 rounded-xl px-3 py-2.5 text-sm ${t===0?`aui-surface-strong`:`bg-[color:var(--aui-surface)] aui-text-muted`}`,children:e},e))}),(0,r.jsxs)(`div`,{className:`space-y-4`,children:[(0,r.jsxs)(`div`,{className:`flex flex-col gap-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 md:flex-row md:items-center md:justify-between`,children:[(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`p`,{className:`text-2xl font-semibold tracking-tight`,children:`Revenue overview`}),(0,r.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Structured layout with reusable surface hierarchy.`})]}),(0,r.jsxs)(`div`,{className:`flex gap-3`,children:[(0,r.jsx)(t.Input,{value:i.search,onChange:e=>a({search:e.target.value}),placeholder:`Search workspace...`,className:`w-48`}),(0,r.jsx)(e.Button,{children:`New report`})]})]}),(0,r.jsx)(`div`,{className:`grid gap-4 md:grid-cols-3`,children:[[`Revenue`,`$24,780`],[`Active users`,`18,390`],[`Conversion`,`6.3%`]].map(([e,t])=>(0,r.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,r.jsx)(`p`,{className:`aui-text-muted text-sm`,children:e}),(0,r.jsx)(`p`,{className:`mt-2 text-3xl font-semibold tracking-tight`,children:t}),(0,r.jsx)(n.Badge,{className:`mt-3 rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-50`,children:`Live`})]},e))}),(0,r.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-[1fr_0.38fr]`,children:[(0,r.jsx)(`div`,{className:`h-48 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[linear-gradient(180deg,rgba(59,130,246,0.12),transparent),radial-gradient(circle_at_bottom_left,rgba(34,197,94,0.18),transparent_40%)]`}),(0,r.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,r.jsx)(`p`,{className:`font-medium`,children:`Recent updates`}),(0,r.jsxs)(`div`,{className:`aui-text-muted mt-4 space-y-3 text-sm`,children:[(0,r.jsx)(`div`,{children:`Dashboard tokens synced`}),(0,r.jsx)(`div`,{children:`Sidebar nav refreshed`}),(0,r.jsx)(`div`,{children:`Header metrics updated`})]})]})]})]})]})}exports.LayoutFamilyShowcase=i;

package/dist/showcase/families/layout/showcase.d.ts

@@ -0,0 +1,2 @@
+import type { FamilyDemoProps } from "../types";
+export declare function LayoutFamilyShowcase({ state, setState }: FamilyDemoProps): import("react").JSX.Element;

package/dist/showcase/families/layout/showcase.js

@@ -0,0 +1,88 @@
+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 { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/families/layout/showcase.tsx
+function a({ state: a, setState: o }) {
+	return /* @__PURE__ */ i("div", {
+		className: "grid gap-4 xl:grid-cols-[0.24fr_1fr]",
+		children: [/* @__PURE__ */ r("div", {
+			className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4",
+			children: [
+				"Overview",
+				"Analytics",
+				"Customers",
+				"Orders",
+				"Settings"
+			].map((e, t) => /* @__PURE__ */ r("div", {
+				className: `mb-2 rounded-xl px-3 py-2.5 text-sm ${t === 0 ? "aui-surface-strong" : "bg-[color:var(--aui-surface)] aui-text-muted"}`,
+				children: e
+			}, e))
+		}), /* @__PURE__ */ i("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 md:flex-row md:items-center md:justify-between",
+					children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("p", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: "Revenue overview"
+					}), /* @__PURE__ */ r("p", {
+						className: "aui-text-muted text-sm",
+						children: "Structured layout with reusable surface hierarchy."
+					})] }), /* @__PURE__ */ i("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ r(t, {
+							value: a.search,
+							onChange: (e) => o({ search: e.target.value }),
+							placeholder: "Search workspace...",
+							className: "w-48"
+						}), /* @__PURE__ */ r(e, { children: "New report" })]
+					})]
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "grid gap-4 md:grid-cols-3",
+					children: [
+						["Revenue", "$24,780"],
+						["Active users", "18,390"],
+						["Conversion", "6.3%"]
+					].map(([e, t]) => /* @__PURE__ */ i("div", {
+						className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "aui-text-muted text-sm",
+								children: e
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-2 text-3xl font-semibold tracking-tight",
+								children: t
+							}),
+							/* @__PURE__ */ r(n, {
+								className: "mt-3 rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-50",
+								children: "Live"
+							})
+						]
+					}, e))
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "grid gap-4 md:grid-cols-[1fr_0.38fr]",
+					children: [/* @__PURE__ */ r("div", { className: "h-48 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[linear-gradient(180deg,rgba(59,130,246,0.12),transparent),radial-gradient(circle_at_bottom_left,rgba(34,197,94,0.18),transparent_40%)]" }), /* @__PURE__ */ i("div", {
+						className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+						children: [/* @__PURE__ */ r("p", {
+							className: "font-medium",
+							children: "Recent updates"
+						}), /* @__PURE__ */ i("div", {
+							className: "aui-text-muted mt-4 space-y-3 text-sm",
+							children: [
+								/* @__PURE__ */ r("div", { children: "Dashboard tokens synced" }),
+								/* @__PURE__ */ r("div", { children: "Sidebar nav refreshed" }),
+								/* @__PURE__ */ r("div", { children: "Header metrics updated" })
+							]
+						})]
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { a as LayoutFamilyShowcase };

package/dist/showcase/families/navigation/index.cjs

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

package/dist/showcase/families/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationFamilyShowcase } from "./showcase";
+export { navigationFamilyMock } from "./mock";

package/dist/showcase/families/navigation/index.js

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

package/dist/showcase/families/navigation/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Pagination, PageTabs, StepperTabs } from "tembro"
+
+export function Example() {
+  return <Pagination />
+}`,highlights:[`Pagination controls`,`Page tabs`,`Stepper tabs`,`Route-aware segmentation`],scenarios:[{title:`Paged reports`,description:`Move through dense result sets with explicit page state.`},{title:`Section tabs`,description:`Segment detail pages into clear content groups.`},{title:`Stepper flow`,description:`Represent ordered multi-stage progress in navigation.`}],metrics:[{label:`Exports`,value:`3`},{label:`Navigation modes`,value:`3`},{label:`Status`,value:`Stable`}]};exports.navigationFamilyMock=e;

package/dist/showcase/families/navigation/mock.d.ts

@@ -0,0 +1,2 @@
+import type { FamilyDemoMock } from "../types";
+export declare const navigationFamilyMock: FamilyDemoMock;

package/dist/showcase/families/navigation/mock.js

@@ -0,0 +1,40 @@
+//#region src/showcase/families/navigation/mock.ts
+var e = {
+	code: "import { Pagination, PageTabs, StepperTabs } from \"tembro\"\n\nexport function Example() {\n  return <Pagination />\n}",
+	highlights: [
+		"Pagination controls",
+		"Page tabs",
+		"Stepper tabs",
+		"Route-aware segmentation"
+	],
+	scenarios: [
+		{
+			title: "Paged reports",
+			description: "Move through dense result sets with explicit page state."
+		},
+		{
+			title: "Section tabs",
+			description: "Segment detail pages into clear content groups."
+		},
+		{
+			title: "Stepper flow",
+			description: "Represent ordered multi-stage progress in navigation."
+		}
+	],
+	metrics: [
+		{
+			label: "Exports",
+			value: "3"
+		},
+		{
+			label: "Navigation modes",
+			value: "3"
+		},
+		{
+			label: "Status",
+			value: "Stable"
+		}
+	]
+};
+//#endregion
+export { e as navigationFamilyMock };

package/dist/showcase/families/navigation/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs");let t=require("react/jsx-runtime");function n({state:n,setState:r}){return(0,t.jsxs)(`div`,{className:`space-y-4`,children:[(0,t.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:[`Overview`,`Analytics`,`Reports`].map((e,n)=>(0,t.jsx)(`button`,{className:`rounded-2xl border px-5 py-3 text-sm ${n===0?`aui-surface-strong border-[color:var(--aui-surface-strong)]`:`aui-text-muted border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`}`,children:e},e))}),(0,t.jsxs)(`div`,{className:`flex items-center justify-between rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-4 py-3`,children:[(0,t.jsx)(e.Button,{variant:`outline`,size:`sm`,onClick:()=>r({step:Math.max(1,n.step-1)}),children:`Prev`}),(0,t.jsx)(`div`,{className:`flex gap-2`,children:[1,2,3,8].map(e=>(0,t.jsx)(`button`,{onClick:()=>r({step:e===8?4:e}),className:`rounded-xl border px-4 py-2 text-sm ${n.step===(e===8?4:e)?`aui-surface-strong border-[color:var(--aui-surface-strong)]`:`aui-text-muted border-[color:var(--aui-surface-border)]`}`,children:e},e))}),(0,t.jsx)(e.Button,{size:`sm`,onClick:()=>r({step:Math.min(4,n.step+1)}),children:`Next`})]})]})}exports.NavigationFamilyShowcase=n;

package/dist/showcase/families/navigation/showcase.d.ts

@@ -0,0 +1,2 @@
+import type { FamilyDemoProps } from "../types";
+export declare function NavigationFamilyShowcase({ state, setState }: FamilyDemoProps): import("react").JSX.Element;