tembro 1.0.0

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

@@ -0,0 +1,127 @@
+//#region src/showcase/premium/data-table/data.ts
+var e = [
+	"Acme Inc.",
+	"Larana",
+	"ShipFast",
+	"Toolpad",
+	"Pixels UI",
+	"Northstar"
+], t = [
+	"Azamat",
+	"Malika",
+	"Sardor",
+	"Nodira",
+	"Asadbek",
+	"Kamola"
+], n = [
+	"Direct",
+	"Partner",
+	"Direct",
+	"Marketplace",
+	"Marketplace",
+	"Direct"
+], r = [
+	"Paid",
+	"Review",
+	"Draft",
+	"Paid",
+	"Overdue",
+	"Paid"
+], i = [
+	"$2,400",
+	"$1,280",
+	"$980",
+	"$4,120",
+	"$860",
+	"$3,620"
+], a = [
+	2400,
+	1280,
+	980,
+	4120,
+	860,
+	3620
+], o = [
+	"2h ago",
+	"4h ago",
+	"Today",
+	"1d ago",
+	"1d ago",
+	"2d ago"
+], s = [
+	48,
+	16,
+	8,
+	63,
+	4,
+	28
+], c = [
+	12,
+	5,
+	3,
+	18,
+	2,
+	9
+], l = [
+	"up",
+	"steady",
+	"down",
+	"up",
+	"down",
+	"up"
+], u = e.map((e, u) => ({
+	invoice: `INV-00${u + 1}`,
+	order: `#448${u + 2}`,
+	customer: e,
+	owner: t[u],
+	channel: n[u],
+	status: r[u],
+	stock: s[u],
+	items: c[u],
+	amount: i[u],
+	amountValue: a[u],
+	trend: l[u],
+	updatedAt: o[u]
+}));
+function d(e) {
+	let t = Math.max(1, Math.min(120, Math.floor(e)));
+	return Array.from({ length: t }, (e, t) => {
+		let n = u[t % u.length], r = Math.floor(t / u.length), i = String(t + 1).padStart(3, "0"), a = 4482 + t, o = n.amountValue + r * 175, s = new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0
+		}).format(o);
+		return {
+			...n,
+			invoice: `INV-${i}`,
+			order: `#${a}`,
+			amount: s,
+			amountValue: o,
+			stock: n.stock + r * 2,
+			items: n.items + (t % 3 == 0 ? r : 0),
+			updatedAt: r === 0 ? n.updatedAt : `${r + 1}d ago`
+		};
+	});
+}
+var f = ["Export CSV", "Sync"].map((e) => ({
+	label: e,
+	variant: e === "Export CSV" ? "default" : "outline"
+})), p = [
+	{
+		value: "all",
+		label: "All invoices",
+		description: "All rows."
+	},
+	{
+		value: "finance",
+		label: "Finance review",
+		description: "Paid + review."
+	},
+	{
+		value: "at-risk",
+		label: "At risk",
+		description: "Draft + overdue."
+	}
+];
+//#endregion
+export { d as buildDataTableDemoRows, p as dataTableDemoPresets, u as dataTableDemoRows, f as dataTableToolbarActions };

package/dist/showcase/premium/data-table/index.cjs

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

package/dist/showcase/premium/data-table/index.d.ts

@@ -0,0 +1,4 @@
+export { DataTableShowcase } from "./showcase";
+export { dataTableMock } from "./mock";
+export { dataTableDemoRows, dataTableToolbarActions } from "./data";
+export type { DataTableDemoRow, DataTableDemoToolbarAction } from "./types";

package/dist/showcase/premium/data-table/index.js

@@ -0,0 +1,4 @@
+import { DataTableShowcase as e } from "./showcase.js";
+import { dataTableMock as t } from "./mock.js";
+import { dataTableDemoRows as n, dataTableToolbarActions as r } from "./data.js";
+export { e as DataTableShowcase, n as dataTableDemoRows, t as dataTableMock, r as dataTableToolbarActions };

package/dist/showcase/premium/data-table/mock.cjs

@@ -0,0 +1,24 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import {
+  DataTable,
+  DataTableBulkActions,
+  DataTableColumnVisibilityMenu,
+  DataTableSortableHeader,
+  createDataTableActionsColumn,
+  createDataTableSelectColumn,
+} from "tembro"
+
+export function Example() {
+  return (
+    <DataTable
+      columns={columns}
+      data={rows}
+      enableRowSelection
+      density="comfortable"
+      striped
+      bordered
+      stickyHeader
+      rowActions={(row) => getActions(row.original)}
+      bulkActions={bulkActions}
+    />
+  )
+}`,highlights:[`Toolbar actions`,`Bulk actions`,`Row click`,`Visibility menu`,`Density`,`Preset-driven views`,`Mobile strategy`,`Pagination`],scenarios:[{title:`Finance operations`,description:`Filter, sort and paginate transactional rows with export-ready actions.`},{title:`Mobile fallback`,description:`Collapse rows into cards while preserving click and selection behaviors.`},{title:`Preset views`,description:`Switch between all rows, finance-only and at-risk tables without rebuilding columns.`},{title:`Bulk handling`,description:`Run row group actions with selection state and clear behavior.`}]};exports.dataTableMock=e;

package/dist/showcase/premium/data-table/mock.d.ts

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

package/dist/showcase/premium/data-table/mock.js

@@ -0,0 +1,34 @@
+//#region src/showcase/premium/data-table/mock.ts
+var e = {
+	code: "import {\n  DataTable,\n  DataTableBulkActions,\n  DataTableColumnVisibilityMenu,\n  DataTableSortableHeader,\n  createDataTableActionsColumn,\n  createDataTableSelectColumn,\n} from \"tembro\"\n\nexport function Example() {\n  return (\n    <DataTable\n      columns={columns}\n      data={rows}\n      enableRowSelection\n      density=\"comfortable\"\n      striped\n      bordered\n      stickyHeader\n      rowActions={(row) => getActions(row.original)}\n      bulkActions={bulkActions}\n    />\n  )\n}",
+	highlights: [
+		"Toolbar actions",
+		"Bulk actions",
+		"Row click",
+		"Visibility menu",
+		"Density",
+		"Preset-driven views",
+		"Mobile strategy",
+		"Pagination"
+	],
+	scenarios: [
+		{
+			title: "Finance operations",
+			description: "Filter, sort and paginate transactional rows with export-ready actions."
+		},
+		{
+			title: "Mobile fallback",
+			description: "Collapse rows into cards while preserving click and selection behaviors."
+		},
+		{
+			title: "Preset views",
+			description: "Switch between all rows, finance-only and at-risk tables without rebuilding columns."
+		},
+		{
+			title: "Bulk handling",
+			description: "Run row group actions with selection state and clear behavior."
+		}
+	]
+};
+//#endregion
+export { e as dataTableMock };

package/dist/showcase/premium/data-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/inputs/search-input.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-bulk-actions.cjs"),o=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),s=require("../../../components/data-table/data-table.cjs"),c=require("../../../components/data-table/data-table-select-column.cjs"),l=require("../../../components/data-table/data-table-sortable-header.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=[{invoice:`INV-4821`,customer:`Acme Studio`,owner:`Azamat`,amount:`$12,420`,status:`Paid`,updatedAt:`2m ago`},{invoice:`INV-4822`,customer:`Northwind`,owner:`Madina`,amount:`$8,120`,status:`Review`,updatedAt:`10m ago`},{invoice:`INV-4823`,customer:`Globex`,owner:`Jasur`,amount:`$4,880`,status:`Draft`,updatedAt:`22m ago`}];function p(){let[e,p]=u.useState(``),[m,h]=u.useState(0),g=f.filter(t=>{let n=e.trim().toLowerCase();return n?`${t.invoice} ${t.customer} ${t.owner} ${t.amount}`.toLowerCase().includes(n):!0}),_=u.useMemo(()=>[c.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,d.jsx)(l.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,d.jsx)(l.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,d.jsx)(r.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,d.jsx)(l.DataTableSortableHeader,{column:e,children:`Amount`})},{accessorKey:`updatedAt`,header:`Updated`},i.createDataTableActionsColumn({getActions:()=>[{key:`open`,label:`Open detail`,onSelect:()=>void 0},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>void 0}]})],[]);return(0,d.jsxs)(`div`,{className:`space-y-5`,children:[(0,d.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Operational table`}),(0,d.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Search, selection and actions in one table`})]}),(0,d.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,d.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,d.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Rows`}),(0,d.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:g.length})]}),(0,d.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,d.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Selected`}),(0,d.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:m})]}),(0,d.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,d.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,d.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Live`})]})]})]}),(0,d.jsx)(s.DataTable,{columns:_,data:g,getRowId:e=>e.invoice,enableRowSelection:!0,toolbarProps:t=>({title:`Invoices`,description:`Compact premium preview of the real DataTable surface.`,search:(0,d.jsx)(n.SearchInput,{value:e,onValueChange:p,placeholder:`Search invoice, customer...`}),actions:(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(o.DataTableColumnVisibilityMenu,{table:t}),(0,d.jsx)(a.DataTableBulkActions,{rows:g.slice(0,m),actions:[{key:`export`,label:`Export selected`,onSelect:()=>void 0}],onClearSelection:()=>h(0)})]})}),onRowSelectionChange:e=>{let t=typeof e==`function`?e({}):e;h(Object.values(t).filter(Boolean).length)},onRowClick:()=>void 0,renderMobileCard:e=>(0,d.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,d.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`p`,{className:`text-base font-semibold aui-text-strong`,children:e.original.invoice}),(0,d.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.original.customer})]}),(0,d.jsx)(r.Badge,{variant:`outline`,children:e.original.status})]})}),pagination:{pageIndex:0,pageSize:5,rowCount:g.length,pageCount:1,pageSizeOptions:[5],onPageChange:()=>void 0,onPageSizeChange:()=>void 0}}),(0,d.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,d.jsx)(t.Button,{size:`sm`,children:`Export`}),(0,d.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Refresh`})]})]})}exports.DataTableShowcase=p;

package/dist/showcase/premium/data-table/showcase.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function DataTableShowcase(): React.JSX.Element;

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

@@ -0,0 +1,208 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { SearchInput as t } from "../../../components/inputs/search-input.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { createDataTableActionsColumn as r } from "../../../components/data-table/data-table-actions-column.js";
+import { DataTableBulkActions as i } from "../../../components/data-table/data-table-bulk-actions.js";
+import { DataTableColumnVisibilityMenu as a } from "../../../components/data-table/data-table-column-visibility-menu.js";
+import { DataTable as o } from "../../../components/data-table/data-table.js";
+import { createDataTableSelectColumn as s } from "../../../components/data-table/data-table-select-column.js";
+import { DataTableSortableHeader as c } from "../../../components/data-table/data-table-sortable-header.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/showcase/premium/data-table/showcase.tsx
+var f = [
+	{
+		invoice: "INV-4821",
+		customer: "Acme Studio",
+		owner: "Azamat",
+		amount: "$12,420",
+		status: "Paid",
+		updatedAt: "2m ago"
+	},
+	{
+		invoice: "INV-4822",
+		customer: "Northwind",
+		owner: "Madina",
+		amount: "$8,120",
+		status: "Review",
+		updatedAt: "10m ago"
+	},
+	{
+		invoice: "INV-4823",
+		customer: "Globex",
+		owner: "Jasur",
+		amount: "$4,880",
+		status: "Draft",
+		updatedAt: "22m ago"
+	}
+];
+function p() {
+	let [p, m] = l.useState(""), [h, g] = l.useState(0), _ = f.filter((e) => {
+		let t = p.trim().toLowerCase();
+		return t ? `${e.invoice} ${e.customer} ${e.owner} ${e.amount}`.toLowerCase().includes(t) : !0;
+	}), v = l.useMemo(() => [
+		s(),
+		{
+			accessorKey: "invoice",
+			header: ({ column: e }) => /* @__PURE__ */ u(c, {
+				column: e,
+				children: "Invoice"
+			})
+		},
+		{
+			accessorKey: "customer",
+			header: ({ column: e }) => /* @__PURE__ */ u(c, {
+				column: e,
+				children: "Customer"
+			})
+		},
+		{
+			accessorKey: "status",
+			header: "Status",
+			cell: ({ row: e }) => /* @__PURE__ */ u(n, {
+				variant: e.original.status === "Paid" ? "secondary" : e.original.status === "Review" ? "outline" : "destructive",
+				children: e.original.status
+			})
+		},
+		{
+			accessorKey: "amount",
+			header: ({ column: e }) => /* @__PURE__ */ u(c, {
+				column: e,
+				children: "Amount"
+			})
+		},
+		{
+			accessorKey: "updatedAt",
+			header: "Updated"
+		},
+		r({ getActions: () => [{
+			key: "open",
+			label: "Open detail",
+			onSelect: () => void 0
+		}, {
+			key: "archive",
+			label: "Archive",
+			destructive: !0,
+			onSelect: () => void 0
+		}] })
+	], []);
+	return /* @__PURE__ */ d("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between",
+				children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Operational table"
+				}), /* @__PURE__ */ u("h3", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: "Search, selection and actions in one table"
+				})] }), /* @__PURE__ */ d("div", {
+					className: "grid gap-3 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+							children: [/* @__PURE__ */ u("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+								children: "Rows"
+							}), /* @__PURE__ */ u("p", {
+								className: "mt-2 text-lg font-semibold aui-text-strong",
+								children: _.length
+							})]
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+							children: [/* @__PURE__ */ u("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+								children: "Selected"
+							}), /* @__PURE__ */ u("p", {
+								className: "mt-2 text-lg font-semibold aui-text-strong",
+								children: h
+							})]
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+							children: [/* @__PURE__ */ u("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+								children: "State"
+							}), /* @__PURE__ */ u("p", {
+								className: "mt-2 text-lg font-semibold aui-text-strong",
+								children: "Live"
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ u(o, {
+				columns: v,
+				data: _,
+				getRowId: (e) => e.invoice,
+				enableRowSelection: !0,
+				toolbarProps: (e) => ({
+					title: "Invoices",
+					description: "Compact premium preview of the real DataTable surface.",
+					search: /* @__PURE__ */ u(t, {
+						value: p,
+						onValueChange: m,
+						placeholder: "Search invoice, customer..."
+					}),
+					actions: /* @__PURE__ */ d("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ u(a, { table: e }), /* @__PURE__ */ u(i, {
+							rows: _.slice(0, h),
+							actions: [{
+								key: "export",
+								label: "Export selected",
+								onSelect: () => void 0
+							}],
+							onClearSelection: () => g(0)
+						})]
+					})
+				}),
+				onRowSelectionChange: (e) => {
+					let t = typeof e == "function" ? e({}) : e;
+					g(Object.values(t).filter(Boolean).length);
+				},
+				onRowClick: () => void 0,
+				renderMobileCard: (e) => /* @__PURE__ */ u("div", {
+					className: "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+					children: /* @__PURE__ */ d("div", {
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+							className: "text-base font-semibold aui-text-strong",
+							children: e.original.invoice
+						}), /* @__PURE__ */ u("p", {
+							className: "mt-1 text-sm aui-text-muted",
+							children: e.original.customer
+						})] }), /* @__PURE__ */ u(n, {
+							variant: "outline",
+							children: e.original.status
+						})]
+					})
+				}),
+				pagination: {
+					pageIndex: 0,
+					pageSize: 5,
+					rowCount: _.length,
+					pageCount: 1,
+					pageSizeOptions: [5],
+					onPageChange: () => void 0,
+					onPageSizeChange: () => void 0
+				}
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "flex flex-wrap gap-3",
+				children: [/* @__PURE__ */ u(e, {
+					size: "sm",
+					children: "Export"
+				}), /* @__PURE__ */ u(e, {
+					size: "sm",
+					variant: "outline",
+					children: "Refresh"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { p as DataTableShowcase };

package/dist/showcase/premium/data-table/types.cjs

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

package/dist/showcase/premium/data-table/types.d.ts

@@ -0,0 +1,23 @@
+export type DataTableDemoRow = {
+    invoice: string;
+    order: string;
+    customer: string;
+    owner: string;
+    channel: string;
+    status: "Paid" | "Review" | "Draft" | "Overdue";
+    stock: number;
+    items: number;
+    amount: string;
+    amountValue: number;
+    trend: "up" | "down" | "steady";
+    updatedAt: string;
+};
+export type DataTableDemoToolbarAction = {
+    label: string;
+    variant: "default" | "outline";
+};
+export type DataTableDemoPreset = {
+    value: "all" | "finance" | "at-risk";
+    label: string;
+    description: string;
+};

package/dist/showcase/premium/data-table-parts/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.DataTablePartShowcase=e.DataTablePartShowcase,exports.dataTableActionsColumnMock=t.dataTableActionsColumnMock,exports.dataTablePaginationMock=t.dataTablePaginationMock,exports.dataTableRowActionsMock=t.dataTableRowActionsMock,exports.dataTableSavedFiltersMock=t.dataTableSavedFiltersMock,exports.dataTableSelectColumnMock=t.dataTableSelectColumnMock,exports.dataTableToolbarMock=t.dataTableToolbarMock;

package/dist/showcase/premium/data-table-parts/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTablePartShowcase } from "./showcase";
+export { dataTableActionsColumnMock, dataTablePaginationMock, dataTableRowActionsMock, dataTableSavedFiltersMock, dataTableSelectColumnMock, dataTableToolbarMock, } from "./mock";

package/dist/showcase/premium/data-table-parts/index.js

@@ -0,0 +1,3 @@
+import { DataTablePartShowcase as e } from "./showcase.js";
+import { dataTableActionsColumnMock as t, dataTablePaginationMock as n, dataTableRowActionsMock as r, dataTableSavedFiltersMock as i, dataTableSelectColumnMock as a, dataTableToolbarMock as o } from "./mock.js";
+export { e as DataTablePartShowcase, t as dataTableActionsColumnMock, n as dataTablePaginationMock, r as dataTableRowActionsMock, i as dataTableSavedFiltersMock, a as dataTableSelectColumnMock, o as dataTableToolbarMock };

package/dist/showcase/premium/data-table-parts/mock.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e,t,n){return{code:`import { ${t} } from "tembro"\n\nexport function Example() {\n  return <${t} />\n}`,cliCommand:`npx tembro add ${e}`,highlights:[`${t} preview inside a real DataTable shell`,`Interaction-focused route`,`Selection and row behavior proof`],scenarios:[{title:`Route-level preview`,description:n},{title:`Production context`,description:`See the helper in the same shell where it is typically used.`},{title:`Behavior proof`,description:`Verify how selection, toolbar and actions interact together.`}],capabilityNotes:[`These routes are intentionally shown inside a real DataTable context instead of isolated fake markup.`,`Use them to understand interaction boundaries before wiring the helper into a product surface.`]}}var t=e(`data-table-pagination`,`DataTablePagination`,`Preview pagination behavior with the real DataTable shell.`),n=e(`data-table-toolbar`,`DataTableToolbar`,`Preview search, visibility and table actions inside a live toolbar context.`),r=e(`data-table-row-actions`,`DataTableRowActions`,`Preview row-specific actions without breaking row click and selection.`),i=e(`data-table-actions-column`,`createDataTableActionsColumn`,`Preview how the reusable actions column helper behaves in a real grid.`),a=e(`data-table-select-column`,`createDataTableSelectColumn`,`Preview row selection behavior and bulk state separation.`),o=e(`data-table-saved-filters`,`DataTableSavedFilters`,`Preview saved table views and named filter state restoration.`);exports.dataTableActionsColumnMock=i,exports.dataTablePaginationMock=t,exports.dataTableRowActionsMock=r,exports.dataTableSavedFiltersMock=o,exports.dataTableSelectColumnMock=a,exports.dataTableToolbarMock=n;

package/dist/showcase/premium/data-table-parts/mock.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentDemoMock } from "../types";
+export declare const dataTablePaginationMock: ComponentDemoMock;
+export declare const dataTableToolbarMock: ComponentDemoMock;
+export declare const dataTableRowActionsMock: ComponentDemoMock;
+export declare const dataTableActionsColumnMock: ComponentDemoMock;
+export declare const dataTableSelectColumnMock: ComponentDemoMock;
+export declare const dataTableSavedFiltersMock: ComponentDemoMock;

package/dist/showcase/premium/data-table-parts/mock.js

@@ -0,0 +1,30 @@
+//#region src/showcase/premium/data-table-parts/mock.ts
+function e(e, t, n) {
+	return {
+		code: `import { ${t} } from "tembro"\n\nexport function Example() {\n  return <${t} />\n}`,
+		cliCommand: `npx tembro add ${e}`,
+		highlights: [
+			`${t} preview inside a real DataTable shell`,
+			"Interaction-focused route",
+			"Selection and row behavior proof"
+		],
+		scenarios: [
+			{
+				title: "Route-level preview",
+				description: n
+			},
+			{
+				title: "Production context",
+				description: "See the helper in the same shell where it is typically used."
+			},
+			{
+				title: "Behavior proof",
+				description: "Verify how selection, toolbar and actions interact together."
+			}
+		],
+		capabilityNotes: ["These routes are intentionally shown inside a real DataTable context instead of isolated fake markup.", "Use them to understand interaction boundaries before wiring the helper into a product surface."]
+	};
+}
+var t = e("data-table-pagination", "DataTablePagination", "Preview pagination behavior with the real DataTable shell."), n = e("data-table-toolbar", "DataTableToolbar", "Preview search, visibility and table actions inside a live toolbar context."), r = e("data-table-row-actions", "DataTableRowActions", "Preview row-specific actions without breaking row click and selection."), i = e("data-table-actions-column", "createDataTableActionsColumn", "Preview how the reusable actions column helper behaves in a real grid."), a = e("data-table-select-column", "createDataTableSelectColumn", "Preview row selection behavior and bulk state separation."), o = e("data-table-saved-filters", "DataTableSavedFilters", "Preview saved table views and named filter state restoration.");
+//#endregion
+export { i as dataTableActionsColumnMock, t as dataTablePaginationMock, r as dataTableRowActionsMock, o as dataTableSavedFiltersMock, a as dataTableSelectColumnMock, n as dataTableToolbarMock };

package/dist/showcase/premium/data-table-parts/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/inputs/search-input.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-bulk-actions.cjs"),o=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),s=require("../../../components/data-table/data-table.cjs"),c=require("../../../components/data-table/data-table-select-column.cjs"),l=require("../../../components/data-table/data-table-sortable-header.cjs"),u=require("../../../components/data-table/data-table-view-presets.cjs"),d=require("../../../components/data-table/data-table-saved-filters.cjs"),f=require("../../families/data-table/data.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=f.buildDataTableDemoRows(6);function g(e){return[c.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,m.jsx)(l.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,m.jsx)(l.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,m.jsx)(r.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,m.jsx)(l.DataTableSortableHeader,{column:e,children:`Amount`})},i.createDataTableActionsColumn({getActions:(t,n)=>[{key:`open`,label:`Open detail`,onSelect:()=>e(`${n.invoice} opened from row action`)},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>e(`${n.invoice} sent to archive`)}]})]}function _({slug:e}){let[i,c]=p.useState(``),[l,_]=p.useState(`all`),[v,y]=p.useState({}),[b,x]=p.useState({}),[S,C]=p.useState(`Ready`),[w,T]=p.useState(0),E=p.useMemo(()=>{let e=i.trim().toLowerCase(),t=h;return l===`finance`&&(t=t.filter(e=>e.status===`Paid`||e.status===`Review`)),l===`at-risk`&&(t=t.filter(e=>e.status===`Draft`||e.status===`Overdue`)),e?t.filter(t=>[t.invoice,t.customer,t.owner,t.channel,t.amount].join(` `).toLowerCase().includes(e)):t},[i,l]),D=p.useMemo(()=>E.filter((e,t)=>v[t]),[E,v]),O=p.useMemo(()=>g(C),[]),k={"data-table-pagination":`Pagination route`,"data-table-toolbar":`Toolbar route`,"data-table-row-actions":`Row actions route`,"data-table-actions-column":`Actions column route`,"data-table-select-column":`Select column route`,"data-table-saved-filters":`Saved filters route`};return(0,m.jsxs)(`div`,{className:`space-y-4`,children:[(0,m.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(r.Badge,{variant:`outline`,children:k[e]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[E.length,` rows`]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[D.length,` selected`]})]}),(0,m.jsx)(`p`,{className:`mt-3 text-sm font-medium aui-text-strong`,children:k[e]}),(0,m.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:{"data-table-pagination":`Pagination should be readable in isolation, but still feel like part of a production table shell.`,"data-table-toolbar":`Toolbar route should prove search, visibility and action layout without needing the whole docs page around it.`,"data-table-row-actions":`Row action interactions should stay isolated from row click and selection behavior.`,"data-table-actions-column":`Actions column should show how the helper sits inside a real DataTable definition.`,"data-table-select-column":`Select column route should prove bulk selection and row state separation.`,"data-table-saved-filters":`Saved filters should restore named views and stay aligned with other table controls.`}[e]})]}),e===`data-table-saved-filters`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsx)(d.DataTableSavedFilters,{savedFilters:[{id:`all`,name:`All invoices`,filters:{}},{id:`finance`,name:`Finance review`,filters:{}},{id:`risk`,name:`At risk`,filters:{}}],activeFilterId:l===`all`?`all`:l===`finance`?`finance`:`risk`,onSelectFilter:e=>_(e===`finance`?`finance`:e===`risk`?`at-risk`:`all`),onSaveFilter:e=>C(`Saved filter created: ${e}`),onDeleteFilter:e=>C(`Saved filter deleted: ${e}`),onClearFilters:()=>_(`all`)})}):null,e===`data-table-toolbar`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(u.DataTableViewPresets,{value:l,onValueChange:e=>_(e??`all`),presets:f.dataTableDemoPresets,size:`sm`}),(0,m.jsx)(`div`,{className:`w-full max-w-[320px]`,children:(0,m.jsx)(n.SearchInput,{value:i,onValueChange:c,placeholder:`Search invoice, customer...`})})]})}):null,(0,m.jsx)(s.DataTable,{columns:O,data:E,getRowId:e=>e.invoice,rowSelection:v,onRowSelectionChange:y,columnVisibility:b,onColumnVisibilityChange:x,enableRowSelection:!0,striped:!0,bordered:!0,stickyHeader:!0,toolbarProps:e=>({title:`Invoices`,description:`Premium subroute preview for reusable DataTable parts.`,search:(0,m.jsx)(n.SearchInput,{value:i,onValueChange:c,placeholder:`Search rows...`}),actions:(0,m.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,m.jsx)(o.DataTableColumnVisibilityMenu,{table:e}),(0,m.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>C(`Toolbar export prepared`),children:`Export`})]}),selectionActions:(0,m.jsx)(a.DataTableBulkActions,{rows:e.getSelectedRowModel().rows.map(e=>e.original),actions:[{key:`export`,label:`Export selected`,onSelect:e=>C(`${e.length} rows exported`)}],onClearSelection:()=>y({})})}),pagination:{manual:!0,pageIndex:w,pageSize:5,rowCount:E.length,pageCount:Math.max(Math.ceil(E.length/5),1),pageSizeOptions:[5,10],onPageChange:T,onPageSizeChange:()=>void 0}}),(0,m.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Focused feature`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:k[e]})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Interaction proof`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:S})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Selection`}),(0,m.jsxs)(`p`,{className:`mt-2 aui-text-muted`,children:[D.length,` active rows`]})]})]})]})}exports.DataTablePartShowcase=_;

package/dist/showcase/premium/data-table-parts/showcase.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { ComponentDemoProps } from "../types";
+export type DataTablePartSlug = "data-table-pagination" | "data-table-toolbar" | "data-table-row-actions" | "data-table-actions-column" | "data-table-select-column" | "data-table-saved-filters";
+export declare function DataTablePartShowcase({ slug, }: ComponentDemoProps & {
+    slug: DataTablePartSlug;
+}): React.JSX.Element;