tembro 2.1.13 → 3.1.1

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

@@ -0,0 +1,116 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Switch as t } from "../../../components/ui/switch/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { switchDemoRows as r } from "./data.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/switch/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function s({ state: s, setState: c }) {
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ a("section", {
+			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+				children: [/* @__PURE__ */ a("div", {
+					className: "max-w-xl",
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+							children: "Preferences"
+						}),
+						/* @__PURE__ */ i("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Switches should feel like settings"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+							children: "This pattern is for single on/off preferences. The preview should read like a settings page, not a stack of anonymous toggles."
+						})
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ i(n, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Controlled"
+						}),
+						/* @__PURE__ */ i(n, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Settings"
+						}),
+						/* @__PURE__ */ i(n, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Single preference"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ i("div", {
+				className: "mt-6 grid gap-3",
+				children: r.map((e, n) => /* @__PURE__ */ i("div", {
+					className: o,
+					children: /* @__PURE__ */ i(t, {
+						label: e.title,
+						description: e.description,
+						checked: n === 0 ? s.switchOn : e.defaultChecked,
+						onCheckedChange: n === 0 ? (e) => c({ switchOn: e }) : void 0,
+						defaultChecked: n > 0 ? e.defaultChecked : void 0,
+						size: n === 0 ? "lg" : "md",
+						labelPlacement: "start",
+						className: "w-full justify-between"
+					})
+				}, e.title))
+			})]
+		}), /* @__PURE__ */ a("section", {
+			className: o,
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ a("div", { children: [
+					/* @__PURE__ */ i("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Live state"
+					}),
+					/* @__PURE__ */ a("h4", {
+						className: "mt-2 text-lg font-semibold aui-text-strong",
+						children: ["Dark mode sync is ", s.switchOn ? "on" : "off"]
+					}),
+					/* @__PURE__ */ i("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Switches should show immediate preference feedback without requiring a save button."
+					})
+				] }), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ i(e, {
+						type: "button",
+						size: "sm",
+						onClick: () => c({ switchOn: !0 }),
+						children: "Turn on"
+					}), /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "sm",
+						variant: "secondary",
+						onClick: () => c({ switchOn: !1 }),
+						children: "Turn off"
+					})]
+				})]
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-5 grid gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ i(t, {
+					label: "Sync in progress",
+					description: "Loading disables the control until the request finishes.",
+					loading: !0,
+					defaultChecked: !0
+				}), /* @__PURE__ */ i(t, {
+					label: "Invalid setting",
+					description: "Error state keeps the same field layout.",
+					invalid: !0
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { s as SwitchShowcase };

package/dist/src/showcase/premium/switch/types.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});

package/dist/src/showcase/premium/table/data.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{id:`tbl-001`,name:`Acme Dashboard`,status:`Live`,revenue:`$24,780`,owner:`Azamat`,device:`Desktop`},{id:`tbl-002`,name:`CRM Workspace`,status:`Review`,revenue:`$12,420`,owner:`Nodira`,device:`Tablet`},{id:`tbl-003`,name:`Store Command`,status:`Draft`,revenue:`$8,190`,owner:`Sardor`,device:`Mobile`},{id:`tbl-004`,name:`Finance Dock`,status:`Live`,revenue:`$31,040`,owner:`Malika`,device:`Desktop`}],t=[{label:`Desktop layout`,value:`6 columns`,note:`Dense reporting view with aligned numbers.`},{label:`Tablet strategy`,value:`2 priority cuts`,note:`Secondary columns can collapse below the primary row.`},{label:`Mobile fallback`,value:`Stacked cells`,note:`Key labels remain visible when width is constrained.`}];exports.tableDemoRows=e,exports.tableDemoStats=t;

package/dist/src/showcase/premium/table/data.js

@@ -0,0 +1,53 @@
+//#region src/showcase/premium/table/data.ts
+var e = [
+	{
+		id: "tbl-001",
+		name: "Acme Dashboard",
+		status: "Live",
+		revenue: "$24,780",
+		owner: "Azamat",
+		device: "Desktop"
+	},
+	{
+		id: "tbl-002",
+		name: "CRM Workspace",
+		status: "Review",
+		revenue: "$12,420",
+		owner: "Nodira",
+		device: "Tablet"
+	},
+	{
+		id: "tbl-003",
+		name: "Store Command",
+		status: "Draft",
+		revenue: "$8,190",
+		owner: "Sardor",
+		device: "Mobile"
+	},
+	{
+		id: "tbl-004",
+		name: "Finance Dock",
+		status: "Live",
+		revenue: "$31,040",
+		owner: "Malika",
+		device: "Desktop"
+	}
+], t = [
+	{
+		label: "Desktop layout",
+		value: "6 columns",
+		note: "Dense reporting view with aligned numbers."
+	},
+	{
+		label: "Tablet strategy",
+		value: "2 priority cuts",
+		note: "Secondary columns can collapse below the primary row."
+	},
+	{
+		label: "Mobile fallback",
+		value: "Stacked cells",
+		note: "Key labels remain visible when width is constrained."
+	}
+];
+//#endregion
+export { e as tableDemoRows, t as tableDemoStats };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./data.cjs"),t=require("./showcase.cjs"),n=require("./mock.cjs");exports.TableShowcase=t.TableShowcase,exports.tableDemoRows=e.tableDemoRows,exports.tableDemoStats=e.tableDemoStats,exports.tableMock=n.tableMock;

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

@@ -0,0 +1,4 @@
+import { tableDemoRows as e, tableDemoStats as t } from "./data.js";
+import { TableShowcase as n } from "./showcase.js";
+import { tableMock as r } from "./mock.js";
+export { n as TableShowcase, e as tableDemoRows, t as tableDemoStats, r as tableMock };

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "tembro"
+
+export function Example() {
+  return (
+    <Table>
+      <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>
+      <TableBody><TableRow><TableCell>Azamat UI</TableCell></TableRow></TableBody>
+    </Table>
+  )
+}`,htmlCode:`<table data-slot="table">
+  <thead><tr><th>Name</th><th>Status</th><th>Revenue</th></tr></thead>
+  <tbody><tr><td>Acme Dashboard</td><td>Live</td><td>$24,780</td></tr></tbody>
+</table>`,cliCommand:`npx tembro add table`,highlights:[`Header rows`,`Body rows`,`Hover states`,`Compact reporting`],relatedBlockSlugs:[`users-table`,`invoices-page`,`dashboard-starter`],scenarios:[{title:`User lists`,description:`Render compact admin tables with readable structure.`},{title:`Invoice reports`,description:`Present transactional rows with aligned totals.`},{title:`Revenue summaries`,description:`Use table layouts in dashboards and exports.`},{title:`Mobile stacking strategy`,description:`Document how rows and columns should degrade in narrow layouts.`}],capabilityNotes:[`Provides semantic table structure with header, row and cell helpers.`,`Targets reporting, finance and admin list use cases.`,`Needs explicit responsive guidance for tablet and mobile layouts.`,`Should document hover, dense row and aligned numeric column usage.`]};exports.tableMock=e;

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

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/table/mock.ts
+var e = {
+	code: "import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Table>\n      <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>\n      <TableBody><TableRow><TableCell>Azamat UI</TableCell></TableRow></TableBody>\n    </Table>\n  )\n}",
+	htmlCode: "<table data-slot=\"table\">\n  <thead><tr><th>Name</th><th>Status</th><th>Revenue</th></tr></thead>\n  <tbody><tr><td>Acme Dashboard</td><td>Live</td><td>$24,780</td></tr></tbody>\n</table>",
+	cliCommand: "npx tembro add table",
+	highlights: [
+		"Header rows",
+		"Body rows",
+		"Hover states",
+		"Compact reporting"
+	],
+	relatedBlockSlugs: [
+		"users-table",
+		"invoices-page",
+		"dashboard-starter"
+	],
+	scenarios: [
+		{
+			title: "User lists",
+			description: "Render compact admin tables with readable structure."
+		},
+		{
+			title: "Invoice reports",
+			description: "Present transactional rows with aligned totals."
+		},
+		{
+			title: "Revenue summaries",
+			description: "Use table layouts in dashboards and exports."
+		},
+		{
+			title: "Mobile stacking strategy",
+			description: "Document how rows and columns should degrade in narrow layouts."
+		}
+	],
+	capabilityNotes: [
+		"Provides semantic table structure with header, row and cell helpers.",
+		"Targets reporting, finance and admin list use cases.",
+		"Needs explicit responsive guidance for tablet and mobile layouts.",
+		"Should document hover, dense row and aligned numeric column usage."
+	]
+};
+//#endregion
+export { e as tableMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/table/index.cjs"),i=require("./data.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s({mode:e}){let[s,c]=a.useState([i.tableDemoRows[0]?.id??``]),[l,u]=a.useState(i.tableDemoRows[0]?.id??``);function d(e){c(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])}let f=i.tableDemoRows.find(e=>e.id===l)??i.tableDemoRows[0];return(0,o.jsxs)(`div`,{className:`space-y-5`,children:[e===`playground`?(0,o.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:i.tableDemoStats.map(e=>(0,o.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,o.jsx)(`p`,{className:`aui-text-muted text-sm`,children:e.label}),(0,o.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:e.value}),(0,o.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm leading-6`,children:e.note})]},e.label))}):null,(0,o.jsxs)(`div`,{className:`rounded-[24px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,o.jsxs)(`div`,{className:`mb-4 flex flex-wrap items-center justify-between gap-3`,children:[(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsxs)(n.Badge,{variant:`outline`,children:[s.length,` selected`]}),(0,o.jsx)(n.Badge,{variant:`outline`,children:`Row click enabled`}),(0,o.jsx)(n.Badge,{variant:`outline`,children:`Mobile cards ready`})]}),e===`playground`?(0,o.jsxs)(`div`,{className:`flex gap-2`,children:[(0,o.jsx)(t.Button,{variant:`outline`,size:`sm`,onClick:()=>c(i.tableDemoRows.slice(0,2).map(e=>e.id)),children:`Select top 2`}),(0,o.jsx)(t.Button,{variant:`outline`,size:`sm`,onClick:()=>c([]),children:`Clear`})]}):null]}),(0,o.jsx)(`div`,{className:`hidden overflow-x-auto md:block`,children:(0,o.jsxs)(r.Table,{children:[(0,o.jsx)(r.TableHeader,{children:(0,o.jsxs)(r.TableRow,{children:[(0,o.jsx)(r.TableHead,{className:`w-14`,children:`Pick`}),(0,o.jsx)(r.TableHead,{children:`Project`}),(0,o.jsx)(r.TableHead,{children:`Status`}),(0,o.jsx)(r.TableHead,{children:`Owner`}),(0,o.jsx)(r.TableHead,{children:`Device`}),(0,o.jsx)(r.TableHead,{className:`text-right`,children:`Revenue`})]})}),(0,o.jsx)(r.TableBody,{children:i.tableDemoRows.map(e=>{let t=s.includes(e.id);return(0,o.jsxs)(r.TableRow,{className:l===e.id?`bg-[color:var(--aui-surface-muted)]`:void 0,onClick:()=>u(e.id),children:[(0,o.jsx)(r.TableCell,{children:(0,o.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),d(e.id)},className:t?`rounded-lg aui-surface-strong px-2.5 py-1 text-xs`:`aui-text-strong rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-xs`,children:t?`On`:`Off`})}),(0,o.jsx)(r.TableCell,{className:`font-medium`,children:e.name}),(0,o.jsx)(r.TableCell,{children:(0,o.jsx)(n.Badge,{variant:e.status===`Live`?`default`:e.status===`Review`?`secondary`:`outline`,children:e.status})}),(0,o.jsx)(r.TableCell,{children:e.owner}),(0,o.jsx)(r.TableCell,{children:e.device}),(0,o.jsx)(r.TableCell,{className:`text-right`,children:e.revenue})]},e.id)})})]})}),(0,o.jsx)(`div`,{className:`grid gap-3 md:hidden`,children:i.tableDemoRows.map(e=>{let t=s.includes(e.id),r=l===e.id;return(0,o.jsxs)(`button`,{type:`button`,onClick:()=>u(e.id),className:r?`rounded-[20px] aui-surface-strong border-[color:var(--aui-surface-strong)] p-4 text-left`:`rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4 text-left`,children:[(0,o.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`font-medium`,children:e.name}),(0,o.jsxs)(`p`,{className:r?`mt-1 text-sm text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_72%,transparent)]`:`aui-text-muted mt-1 text-sm`,children:[e.owner,` • `,e.device]})]}),(0,o.jsx)(n.Badge,{variant:r?`secondary`:e.status===`Live`?`default`:e.status===`Review`?`secondary`:`outline`,children:e.status})]}),(0,o.jsxs)(`div`,{className:`mt-4 flex items-center justify-between`,children:[(0,o.jsx)(`span`,{className:r?`text-sm text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_72%,transparent)]`:`aui-text-muted text-sm`,children:`Revenue`}),(0,o.jsx)(`span`,{className:`font-semibold`,children:e.revenue})]}),(0,o.jsx)(`div`,{className:`mt-4`,children:(0,o.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),d(e.id)},className:t?`aui-text-strong rounded-xl bg-[color:var(--aui-surface)] px-3 py-2 text-sm`:r?`rounded-xl border border-[color:var(--aui-surface-border)] px-3 py-2 text-sm text-[color:var(--aui-surface-strong-foreground)]`:`aui-text-subtle rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm`,children:t?`Selected`:`Select row`})})]},e.id)})})]}),(0,o.jsxs)(`div`,{className:`rounded-[24px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,o.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:`Active row details`}),(0,o.jsxs)(`div`,{className:`mt-3 grid gap-3 md:grid-cols-4`,children:[(0,o.jsxs)(`div`,{className:`rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.2em]`,children:`Project`}),(0,o.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:f?.name})]}),(0,o.jsxs)(`div`,{className:`rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.2em]`,children:`Owner`}),(0,o.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:f?.owner})]}),(0,o.jsxs)(`div`,{className:`rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.2em]`,children:`Device`}),(0,o.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:f?.device})]}),(0,o.jsxs)(`div`,{className:`rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.2em]`,children:`Revenue`}),(0,o.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:f?.revenue})]})]})]})]})}exports.TableShowcase=s;

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

@@ -0,0 +1,228 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Table as n, TableBody as r, TableCell as i, TableHead as a, TableHeader as o, TableRow as s } from "../../../components/ui/table/index.js";
+import { tableDemoRows as c, tableDemoStats as l } from "./data.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/showcase/premium/table/showcase.tsx
+function p({ mode: p }) {
+	let [m, h] = u.useState([c[0]?.id ?? ""]), [g, _] = u.useState(c[0]?.id ?? "");
+	function v(e) {
+		h((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}
+	let y = c.find((e) => e.id === g) ?? c[0];
+	return /* @__PURE__ */ f("div", {
+		className: "space-y-5",
+		children: [
+			p === "playground" ? /* @__PURE__ */ d("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: l.map((e) => /* @__PURE__ */ f("div", {
+					className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+					children: [
+						/* @__PURE__ */ d("p", {
+							className: "aui-text-muted text-sm",
+							children: e.label
+						}),
+						/* @__PURE__ */ d("p", {
+							className: "aui-text-strong mt-2 text-lg font-semibold",
+							children: e.value
+						}),
+						/* @__PURE__ */ d("p", {
+							className: "aui-text-subtle mt-2 text-sm leading-6",
+							children: e.note
+						})
+					]
+				}, e.label))
+			}) : null,
+			/* @__PURE__ */ f("div", {
+				className: "rounded-[24px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
+				children: [
+					/* @__PURE__ */ f("div", {
+						className: "mb-4 flex flex-wrap items-center justify-between gap-3",
+						children: [/* @__PURE__ */ f("div", {
+							className: "flex flex-wrap gap-2",
+							children: [
+								/* @__PURE__ */ f(t, {
+									variant: "outline",
+									children: [m.length, " selected"]
+								}),
+								/* @__PURE__ */ d(t, {
+									variant: "outline",
+									children: "Row click enabled"
+								}),
+								/* @__PURE__ */ d(t, {
+									variant: "outline",
+									children: "Mobile cards ready"
+								})
+							]
+						}), p === "playground" ? /* @__PURE__ */ f("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ d(e, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => h(c.slice(0, 2).map((e) => e.id)),
+								children: "Select top 2"
+							}), /* @__PURE__ */ d(e, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => h([]),
+								children: "Clear"
+							})]
+						}) : null]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "hidden overflow-x-auto md:block",
+						children: /* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(o, { children: /* @__PURE__ */ f(s, { children: [
+							/* @__PURE__ */ d(a, {
+								className: "w-14",
+								children: "Pick"
+							}),
+							/* @__PURE__ */ d(a, { children: "Project" }),
+							/* @__PURE__ */ d(a, { children: "Status" }),
+							/* @__PURE__ */ d(a, { children: "Owner" }),
+							/* @__PURE__ */ d(a, { children: "Device" }),
+							/* @__PURE__ */ d(a, {
+								className: "text-right",
+								children: "Revenue"
+							})
+						] }) }), /* @__PURE__ */ d(r, { children: c.map((e) => {
+							let n = m.includes(e.id);
+							return /* @__PURE__ */ f(s, {
+								className: g === e.id ? "bg-[color:var(--aui-surface-muted)]" : void 0,
+								onClick: () => _(e.id),
+								children: [
+									/* @__PURE__ */ d(i, { children: /* @__PURE__ */ d("button", {
+										type: "button",
+										onClick: (t) => {
+											t.stopPropagation(), v(e.id);
+										},
+										className: n ? "rounded-lg aui-surface-strong px-2.5 py-1 text-xs" : "aui-text-strong rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-xs",
+										children: n ? "On" : "Off"
+									}) }),
+									/* @__PURE__ */ d(i, {
+										className: "font-medium",
+										children: e.name
+									}),
+									/* @__PURE__ */ d(i, { children: /* @__PURE__ */ d(t, {
+										variant: e.status === "Live" ? "default" : e.status === "Review" ? "secondary" : "outline",
+										children: e.status
+									}) }),
+									/* @__PURE__ */ d(i, { children: e.owner }),
+									/* @__PURE__ */ d(i, { children: e.device }),
+									/* @__PURE__ */ d(i, {
+										className: "text-right",
+										children: e.revenue
+									})
+								]
+							}, e.id);
+						}) })] })
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "grid gap-3 md:hidden",
+						children: c.map((e) => {
+							let n = m.includes(e.id), r = g === e.id;
+							return /* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => _(e.id),
+								className: r ? "rounded-[20px] aui-surface-strong border-[color:var(--aui-surface-strong)] p-4 text-left" : "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4 text-left",
+								children: [
+									/* @__PURE__ */ f("div", {
+										className: "flex items-start justify-between gap-3",
+										children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+											className: "font-medium",
+											children: e.name
+										}), /* @__PURE__ */ f("p", {
+											className: r ? "mt-1 text-sm text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_72%,transparent)]" : "aui-text-muted mt-1 text-sm",
+											children: [
+												e.owner,
+												" • ",
+												e.device
+											]
+										})] }), /* @__PURE__ */ d(t, {
+											variant: r ? "secondary" : e.status === "Live" ? "default" : e.status === "Review" ? "secondary" : "outline",
+											children: e.status
+										})]
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "mt-4 flex items-center justify-between",
+										children: [/* @__PURE__ */ d("span", {
+											className: r ? "text-sm text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_72%,transparent)]" : "aui-text-muted text-sm",
+											children: "Revenue"
+										}), /* @__PURE__ */ d("span", {
+											className: "font-semibold",
+											children: e.revenue
+										})]
+									}),
+									/* @__PURE__ */ d("div", {
+										className: "mt-4",
+										children: /* @__PURE__ */ d("button", {
+											type: "button",
+											onClick: (t) => {
+												t.stopPropagation(), v(e.id);
+											},
+											className: n ? "aui-text-strong rounded-xl bg-[color:var(--aui-surface)] px-3 py-2 text-sm" : r ? "rounded-xl border border-[color:var(--aui-surface-border)] px-3 py-2 text-sm text-[color:var(--aui-surface-strong-foreground)]" : "aui-text-subtle rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm",
+											children: n ? "Selected" : "Select row"
+										})
+									})
+								]
+							}, e.id);
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "rounded-[24px] 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: "Active row details"
+				}), /* @__PURE__ */ f("div", {
+					className: "mt-3 grid gap-3 md:grid-cols-4",
+					children: [
+						/* @__PURE__ */ f("div", {
+							className: "rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+							children: [/* @__PURE__ */ d("p", {
+								className: "aui-text-muted text-xs uppercase tracking-[0.2em]",
+								children: "Project"
+							}), /* @__PURE__ */ d("p", {
+								className: "aui-text-strong mt-2 text-sm font-medium",
+								children: y?.name
+							})]
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+							children: [/* @__PURE__ */ d("p", {
+								className: "aui-text-muted text-xs uppercase tracking-[0.2em]",
+								children: "Owner"
+							}), /* @__PURE__ */ d("p", {
+								className: "aui-text-strong mt-2 text-sm font-medium",
+								children: y?.owner
+							})]
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+							children: [/* @__PURE__ */ d("p", {
+								className: "aui-text-muted text-xs uppercase tracking-[0.2em]",
+								children: "Device"
+							}), /* @__PURE__ */ d("p", {
+								className: "aui-text-strong mt-2 text-sm font-medium",
+								children: y?.device
+							})]
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+							children: [/* @__PURE__ */ d("p", {
+								className: "aui-text-muted text-xs uppercase tracking-[0.2em]",
+								children: "Revenue"
+							}), /* @__PURE__ */ d("p", {
+								className: "aui-text-strong mt-2 text-sm font-medium",
+								children: y?.revenue
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { p as TableShowcase };

package/dist/src/showcase/premium/table/types.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});

package/dist/src/showcase/premium/tabs/data.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{value:`overview`,label:`Overview`,content:`Overview panel with KPIs and summary cards.`},{value:`activity`,label:`Activity`,content:`Activity timeline with notifications and recent edits.`},{value:`settings`,label:`Settings`,content:`Settings controls and preferences for the current workspace.`}];exports.tabsDemoPanels=e;

package/dist/src/showcase/premium/tabs/data.js

@@ -0,0 +1,20 @@
+//#region src/showcase/premium/tabs/data.ts
+var e = [
+	{
+		value: "overview",
+		label: "Overview",
+		content: "Overview panel with KPIs and summary cards."
+	},
+	{
+		value: "activity",
+		label: "Activity",
+		content: "Activity timeline with notifications and recent edits."
+	},
+	{
+		value: "settings",
+		label: "Settings",
+		content: "Settings controls and preferences for the current workspace."
+	}
+];
+//#endregion
+export { e as tabsDemoPanels };

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

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

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

@@ -0,0 +1,4 @@
+import { tabsDemoPanels as e } from "./data.js";
+import { TabsShowcase as t } from "./showcase.js";
+import { tabsMock as n } from "./mock.js";
+export { t as TabsShowcase, e as tabsDemoPanels, n as tabsMock };

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

@@ -0,0 +1,22 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "tembro"
+
+export function Example() {
+  const [value, setValue] = useState("overview")
+
+  return (
+    <Tabs value={value} onValueChange={setValue} defaultValue="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">Overview panel with KPIs.</TabsContent>
+      <TabsContent value="activity">Activity timeline and history.</TabsContent>
+      <TabsContent value="settings">Settings controls and workspace preferences.</TabsContent>
+    </Tabs>
+  )
+}
+
+// Use Tabs for local content sections.
+// For route transitions, prefer router-based tabs to persist deep links.`,cliCommand:`npx tembro add tabs`,highlights:[`Segmented navigation`,`Panel switching`,`Controlled value`,`Settings sections`,`Keyboard interaction`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Sectioned detail page`,description:`Swap content panels without navigating away.`},{title:`Settings layout`,description:`Split preferences into clear topical groups.`},{title:`Reporting pages`,description:`Use tabs for overview, activity and settings views.`},{title:`Template detail route`,description:`Keep multiple previews in one route with explicit sections.`}],capabilityNotes:[`Supports segmented triggers and controlled content panels.`,`Fits settings, reporting and detail-page information architecture.`,`Show default selected state and content swaps clearly.`,`Use with local content sections; use route tabs when deep-linking is required.`]};exports.tabsMock=e;

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

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/tabs/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"overview\")\n\n  return (\n    <Tabs value={value} onValueChange={setValue} defaultValue=\"overview\">\n      <TabsList>\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n        <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"overview\">Overview panel with KPIs.</TabsContent>\n      <TabsContent value=\"activity\">Activity timeline and history.</TabsContent>\n      <TabsContent value=\"settings\">Settings controls and workspace preferences.</TabsContent>\n    </Tabs>\n  )\n}\n\n// Use Tabs for local content sections.\n// For route transitions, prefer router-based tabs to persist deep links.",
+	cliCommand: "npx tembro add tabs",
+	highlights: [
+		"Segmented navigation",
+		"Panel switching",
+		"Controlled value",
+		"Settings sections",
+		"Keyboard interaction"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"crm-dashboard",
+		"settings-form"
+	],
+	scenarios: [
+		{
+			title: "Sectioned detail page",
+			description: "Swap content panels without navigating away."
+		},
+		{
+			title: "Settings layout",
+			description: "Split preferences into clear topical groups."
+		},
+		{
+			title: "Reporting pages",
+			description: "Use tabs for overview, activity and settings views."
+		},
+		{
+			title: "Template detail route",
+			description: "Keep multiple previews in one route with explicit sections."
+		}
+	],
+	capabilityNotes: [
+		"Supports segmented triggers and controlled content panels.",
+		"Fits settings, reporting and detail-page information architecture.",
+		"Show default selected state and content swaps clearly.",
+		"Use with local content sections; use route tabs when deep-linking is required."
+	]
+};
+//#endregion
+export { e as tabsMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/tabs/index.cjs"),n=require("./data.cjs");let r=require("lucide-react"),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({state:o,setState:s}){let c=n.tabsDemoPanels.find(e=>e.value===o.activeTab);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`View switching`}),(0,i.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Tabs should read like page sections`}),(0,i.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`Overview, activity and settings stay separated without turning the screen into a navigation maze.`})]}),(0,i.jsxs)(`section`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Current tab`}),(0,i.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:c?.label}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`The selected view should feel like a real section change, not a tiny state toggle.`})]}),(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Sections`}),(0,i.jsxs)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:[n.tabsDemoPanels.length,` surfaces`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use a small number of high-signal tabs so the layout stays readable.`})]}),(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Pattern`}),(0,i.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:`Page sections`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Tabs work best when each panel owns a distinct slice of the workflow.`})]})]}),(0,i.jsx)(`div`,{className:a,children:(0,i.jsxs)(t.Tabs,{value:o.activeTab,onValueChange:e=>s({activeTab:e}),children:[(0,i.jsx)(t.TabsList,{overflow:`scroll`,children:n.tabsDemoPanels.map(e=>(0,i.jsx)(t.TabsTrigger,{value:e.value,children:e.label},e.value))}),n.tabsDemoPanels.map(e=>(0,i.jsx)(t.TabsContent,{value:e.value,className:`aui-text-muted mt-4 border-t border-[color:var(--aui-divider)] pt-4 text-sm leading-6`,children:e.content},e.value))]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Variants and overflow`}),(0,i.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The same primitive covers underline navigation, compact density, icon labels, and long mobile tab rows.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-4`,children:[(0,i.jsx)(t.Tabs,{defaultValue:`activity`,children:(0,i.jsxs)(t.TabsList,{variant:`underline`,overflow:`scroll`,children:[(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`activity`,children:[(0,i.jsx)(r.ActivityIcon,{}),`Activity`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`files`,children:[(0,i.jsx)(r.FileTextIcon,{}),`Files`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`members`,children:[(0,i.jsx)(r.UsersIcon,{}),`Members`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`security`,children:[(0,i.jsx)(r.ShieldIcon,{}),`Security`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`settings`,children:[(0,i.jsx)(r.SettingsIcon,{}),`Settings`]})]})}),(0,i.jsx)(t.Tabs,{defaultValue:`compact`,children:(0,i.jsxs)(t.TabsList,{variant:`compact`,overflow:`wrap`,children:[(0,i.jsx)(t.TabsTrigger,{variant:`compact`,value:`compact`,children:`Compact`}),(0,i.jsxs)(t.TabsTrigger,{variant:`compact`,value:`alerts`,children:[(0,i.jsx)(r.BellIcon,{}),`Alerts`]}),(0,i.jsx)(t.TabsTrigger,{variant:`compact`,value:`audit`,children:`Audit`})]})}),(0,i.jsxs)(t.Tabs,{defaultValue:`vertical`,orientation:`vertical`,className:`grid gap-3 sm:grid-cols-[180px_1fr]`,children:[(0,i.jsxs)(t.TabsList,{variant:`pills`,overflow:`wrap`,className:`grid`,children:[(0,i.jsx)(t.TabsTrigger,{variant:`pills`,value:`vertical`,children:`Vertical`}),(0,i.jsx)(t.TabsTrigger,{variant:`pills`,value:`pills`,children:`Pills`}),(0,i.jsx)(t.TabsTrigger,{variant:`pills`,value:`overflow`,children:`Overflow`})]}),(0,i.jsx)(t.TabsContent,{value:`vertical`,className:`mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted`,children:`Vertical tabs keep local settings readable when each panel has a larger form.`}),(0,i.jsx)(t.TabsContent,{value:`pills`,className:`mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted`,children:`Pill tabs carry a stronger selected state for dense dashboards.`}),(0,i.jsx)(t.TabsContent,{value:`overflow`,className:`mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted`,children:`Scroll overflow keeps long labels accessible on small screens.`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Active tab: `,c?.label]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Change tabs above or jump directly to a common product section.`})]}),(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:n.tabsDemoPanels.map(t=>(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:o.activeTab===t.value?`default`:`secondary`,onClick:()=>s({activeTab:t.value}),children:t.label},t.value))})]})})]})}exports.TabsShowcase=o;