tembro 3.1.16 → 4.0.0

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

@@ -1,43 +0,0 @@
-//#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>Tembro</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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/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

@@ -1,228 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-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

@@ -1,20 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,43 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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;

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

@@ -1,256 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Tabs as t, TabsContent as n, TabsList as r, TabsTrigger as i } from "../../../components/ui/tabs/index.js";
-import { tabsDemoPanels as a } from "./data.js";
-import { ActivityIcon as o, BellIcon as s, FileTextIcon as c, SettingsIcon as l, ShieldIcon as u, UsersIcon as d } from "lucide-react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/showcase/premium/tabs/showcase.tsx
-var m = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function h({ state: h, setState: g }) {
-	let _ = a.find((e) => e.value === h.activeTab);
-	return /* @__PURE__ */ p("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ p("section", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: [
-					/* @__PURE__ */ f("p", {
-						className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-						children: "View switching"
-					}),
-					/* @__PURE__ */ f("h3", {
-						className: "aui-text-strong mt-3 text-2xl font-semibold tracking-tight",
-						children: "Tabs should read like page sections"
-					}),
-					/* @__PURE__ */ f("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."
-					})
-				]
-			}),
-			/* @__PURE__ */ p("section", {
-				className: "grid gap-3 md:grid-cols-3",
-				children: [
-					/* @__PURE__ */ p("div", {
-						className: m,
-						children: [
-							/* @__PURE__ */ f("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-								children: "Current tab"
-							}),
-							/* @__PURE__ */ f("p", {
-								className: "mt-3 text-lg font-semibold aui-text-strong",
-								children: _?.label
-							}),
-							/* @__PURE__ */ f("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."
-							})
-						]
-					}),
-					/* @__PURE__ */ p("div", {
-						className: m,
-						children: [
-							/* @__PURE__ */ f("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-								children: "Sections"
-							}),
-							/* @__PURE__ */ p("p", {
-								className: "mt-3 text-lg font-semibold aui-text-strong",
-								children: [a.length, " surfaces"]
-							}),
-							/* @__PURE__ */ f("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."
-							})
-						]
-					}),
-					/* @__PURE__ */ p("div", {
-						className: m,
-						children: [
-							/* @__PURE__ */ f("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-								children: "Pattern"
-							}),
-							/* @__PURE__ */ f("p", {
-								className: "mt-3 text-lg font-semibold aui-text-strong",
-								children: "Page sections"
-							}),
-							/* @__PURE__ */ f("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."
-							})
-						]
-					})
-				]
-			}),
-			/* @__PURE__ */ f("div", {
-				className: m,
-				children: /* @__PURE__ */ p(t, {
-					value: h.activeTab,
-					onValueChange: (e) => g({ activeTab: e }),
-					children: [/* @__PURE__ */ f(r, {
-						overflow: "scroll",
-						children: a.map((e) => /* @__PURE__ */ f(i, {
-							value: e.value,
-							children: e.label
-						}, e.value))
-					}), a.map((e) => /* @__PURE__ */ f(n, {
-						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))]
-				})
-			}),
-			/* @__PURE__ */ f("section", {
-				className: m,
-				children: /* @__PURE__ */ p("div", {
-					className: "grid gap-6 xl:grid-cols-[0.9fr_1.1fr]",
-					children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
-						className: "text-lg font-semibold aui-text-strong",
-						children: "Variants and overflow"
-					}), /* @__PURE__ */ f("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."
-					})] }), /* @__PURE__ */ p("div", {
-						className: "grid gap-4",
-						children: [
-							/* @__PURE__ */ f(t, {
-								defaultValue: "activity",
-								children: /* @__PURE__ */ p(r, {
-									variant: "underline",
-									overflow: "scroll",
-									children: [
-										/* @__PURE__ */ p(i, {
-											variant: "underline",
-											value: "activity",
-											children: [/* @__PURE__ */ f(o, {}), "Activity"]
-										}),
-										/* @__PURE__ */ p(i, {
-											variant: "underline",
-											value: "files",
-											children: [/* @__PURE__ */ f(c, {}), "Files"]
-										}),
-										/* @__PURE__ */ p(i, {
-											variant: "underline",
-											value: "members",
-											children: [/* @__PURE__ */ f(d, {}), "Members"]
-										}),
-										/* @__PURE__ */ p(i, {
-											variant: "underline",
-											value: "security",
-											children: [/* @__PURE__ */ f(u, {}), "Security"]
-										}),
-										/* @__PURE__ */ p(i, {
-											variant: "underline",
-											value: "settings",
-											children: [/* @__PURE__ */ f(l, {}), "Settings"]
-										})
-									]
-								})
-							}),
-							/* @__PURE__ */ f(t, {
-								defaultValue: "compact",
-								children: /* @__PURE__ */ p(r, {
-									variant: "compact",
-									overflow: "wrap",
-									children: [
-										/* @__PURE__ */ f(i, {
-											variant: "compact",
-											value: "compact",
-											children: "Compact"
-										}),
-										/* @__PURE__ */ p(i, {
-											variant: "compact",
-											value: "alerts",
-											children: [/* @__PURE__ */ f(s, {}), "Alerts"]
-										}),
-										/* @__PURE__ */ f(i, {
-											variant: "compact",
-											value: "audit",
-											children: "Audit"
-										})
-									]
-								})
-							}),
-							/* @__PURE__ */ p(t, {
-								defaultValue: "vertical",
-								orientation: "vertical",
-								className: "grid gap-3 sm:grid-cols-[180px_1fr]",
-								children: [
-									/* @__PURE__ */ p(r, {
-										variant: "pills",
-										overflow: "wrap",
-										className: "grid",
-										children: [
-											/* @__PURE__ */ f(i, {
-												variant: "pills",
-												value: "vertical",
-												children: "Vertical"
-											}),
-											/* @__PURE__ */ f(i, {
-												variant: "pills",
-												value: "pills",
-												children: "Pills"
-											}),
-											/* @__PURE__ */ f(i, {
-												variant: "pills",
-												value: "overflow",
-												children: "Overflow"
-											})
-										]
-									}),
-									/* @__PURE__ */ f(n, {
-										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."
-									}),
-									/* @__PURE__ */ f(n, {
-										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."
-									}),
-									/* @__PURE__ */ f(n, {
-										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."
-									})
-								]
-							})
-						]
-					})]
-				})
-			}),
-			/* @__PURE__ */ f("section", {
-				className: m,
-				children: /* @__PURE__ */ p("div", {
-					className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
-					children: [/* @__PURE__ */ p("div", { children: [
-						/* @__PURE__ */ f("p", {
-							className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-							children: "Live state"
-						}),
-						/* @__PURE__ */ p("h4", {
-							className: "mt-2 text-lg font-semibold aui-text-strong",
-							children: ["Active tab: ", _?.label]
-						}),
-						/* @__PURE__ */ f("p", {
-							className: "mt-2 text-sm leading-6 aui-text-muted",
-							children: "Change tabs above or jump directly to a common product section."
-						})
-					] }), /* @__PURE__ */ f("div", {
-						className: "flex flex-wrap gap-2",
-						children: a.map((t) => /* @__PURE__ */ f(e, {
-							type: "button",
-							size: "sm",
-							variant: h.activeTab === t.value ? "default" : "secondary",
-							onClick: () => g({ activeTab: t.value }),
-							children: t.label
-						}, t.value))
-					})]
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { h as TabsShowcase };