tembro 3.0.0 → 3.1.1

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

@@ -0,0 +1,300 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Select as n } from "../../../components/ui/select/index.js";
+import { createDataTableActionsColumn as r } from "../../../components/data-table/data-table-actions-column.js";
+import { DataTableColumnVisibilityMenu as i } from "../../../components/data-table/data-table-column-visibility-menu.js";
+import { DataTable as a } from "../../../components/data-table/data-table.js";
+import { DataTableSortableHeader as o } from "../../../components/data-table/data-table-sortable-header.js";
+import { createDataTableSelectColumn as s } from "../../../components/data-table/data-table-select-column.js";
+import * as c from "react";
+import { Fragment as l, 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"
+	},
+	{
+		invoice: "INV-4824",
+		customer: "Pixel Union",
+		owner: "Azamat",
+		amount: "$17,300",
+		status: "Paid",
+		updatedAt: "44m ago"
+	},
+	{
+		invoice: "INV-4825",
+		customer: "Meridian Labs",
+		owner: "Madina",
+		amount: "$2,180",
+		status: "Review",
+		updatedAt: "1h ago"
+	},
+	{
+		invoice: "INV-4826",
+		customer: "Orbit Cloud",
+		owner: "Jasur",
+		amount: "$9,040",
+		status: "Draft",
+		updatedAt: "3h ago"
+	}
+];
+function p() {
+	let [p, m] = c.useState(""), [h, g] = c.useState("all"), [_, v] = c.useState("all"), [y, b] = c.useState({}), x = f.filter((e) => {
+		let t = p.trim().toLowerCase(), n = !t || `${e.invoice} ${e.customer} ${e.owner} ${e.amount}`.toLowerCase().includes(t), r = h === "all" || e.status === h, i = _ === "all" || e.owner === _;
+		return n && r && i;
+	}), S = Object.values(y).filter(Boolean).length, C = c.useMemo(() => [
+		s(),
+		{
+			accessorKey: "invoice",
+			header: ({ column: e }) => /* @__PURE__ */ u(o, {
+				column: e,
+				children: "Invoice"
+			})
+		},
+		{
+			accessorKey: "customer",
+			header: ({ column: e }) => /* @__PURE__ */ u(o, {
+				column: e,
+				children: "Customer"
+			})
+		},
+		{
+			accessorKey: "status",
+			header: "Status",
+			cell: ({ row: e }) => /* @__PURE__ */ u(t, {
+				variant: e.original.status === "Paid" ? "secondary" : e.original.status === "Review" ? "outline" : "destructive",
+				children: e.original.status
+			})
+		},
+		{
+			accessorKey: "amount",
+			header: ({ column: e }) => /* @__PURE__ */ u(o, {
+				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: x.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: S
+							})]
+						}),
+						/* @__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: p || h !== "all" || _ !== "all" ? "Filtered" : "Live"
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ u(a, {
+				columns: C,
+				data: x,
+				getRowId: (e) => e.invoice,
+				enableRowSelection: !0,
+				rowSelection: y,
+				title: "Invoices",
+				description: "Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface.",
+				features: {
+					search: !0,
+					columnVisibility: !0,
+					bulkActions: !0
+				},
+				search: {
+					value: p,
+					onValueChange: m,
+					placeholder: "Search invoice, customer...",
+					clearable: !0
+				},
+				filters: /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(n, {
+					value: h,
+					onValueChange: (e) => g(e ?? "all"),
+					options: [
+						{
+							value: "all",
+							label: "All statuses"
+						},
+						{
+							value: "Paid",
+							label: "Paid"
+						},
+						{
+							value: "Review",
+							label: "Review"
+						},
+						{
+							value: "Draft",
+							label: "Draft"
+						}
+					],
+					triggerClassName: "min-w-40"
+				}), /* @__PURE__ */ u(n, {
+					value: _,
+					onValueChange: (e) => v(e ?? "all"),
+					options: [
+						{
+							value: "all",
+							label: "All owners"
+						},
+						{
+							value: "Azamat",
+							label: "Azamat"
+						},
+						{
+							value: "Madina",
+							label: "Madina"
+						},
+						{
+							value: "Jasur",
+							label: "Jasur"
+						}
+					],
+					triggerClassName: "min-w-36"
+				})] }),
+				summary: /* @__PURE__ */ d(l, { children: [
+					/* @__PURE__ */ d(t, {
+						variant: "outline",
+						children: [x.length, " rows"]
+					}),
+					/* @__PURE__ */ d(t, {
+						variant: "outline",
+						children: [S, " selected"]
+					}),
+					/* @__PURE__ */ u(t, {
+						variant: "outline",
+						children: p || h !== "all" || _ !== "all" ? "Filtered view" : "Live view"
+					})
+				] }),
+				toolbarActions: ({ table: t }) => /* @__PURE__ */ d("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ u(i, { table: t }), /* @__PURE__ */ u(e, {
+						size: "sm",
+						variant: "outline",
+						children: "Export"
+					})]
+				}),
+				bulkActions: [{
+					key: "export",
+					label: "Export selected",
+					onSelect: () => void 0
+				}, {
+					key: "archive",
+					label: "Archive selected",
+					destructive: !0,
+					onSelect: () => void 0
+				}],
+				onRowSelectionChange: (e) => {
+					b((t) => typeof e == "function" ? e(t) : e);
+				},
+				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(t, {
+							variant: "outline",
+							children: e.original.status
+						})]
+					})
+				}),
+				pagination: {
+					pageIndex: 0,
+					pageSize: 5,
+					rowCount: x.length,
+					pageCount: Math.max(Math.ceil(x.length / 5), 1),
+					pageSizeOptions: [5, 10],
+					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/src/showcase/premium/data-table/types.cjs

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

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});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.`}];exports.buildDataTableDemoRows=d,exports.dataTableDemoPresets=p,exports.dataTableDemoRows=u,exports.dataTableToolbarActions=f;

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

@@ -0,0 +1,127 @@
+//#region src/showcase/premium/data-table-parts/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/src/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/src/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/src/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/src/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/src/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/ui/input/index.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-sortable-header.cjs"),l=require("../../../components/data-table/data-table-view-presets.cjs"),u=require("../../../components/data-table/data-table-saved-filters.cjs"),d=require("../../../components/data-table/data-table-select-column.cjs"),f=require("./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[d.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,m.jsx)(c.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)(c.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(``),[d,_]=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 d===`finance`&&(t=t.filter(e=>e.status===`Paid`||e.status===`Review`)),d===`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,d]),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)(u.DataTableSavedFilters,{savedFilters:[{id:`all`,name:`All invoices`,filters:{}},{id:`finance`,name:`Finance review`,filters:{}},{id:`risk`,name:`At risk`,filters:{}}],activeFilterId:d===`all`?`all`:d===`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)(l.DataTableViewPresets,{value:d,onValueChange:e=>_(e??`all`),presets:f.dataTableDemoPresets,size:`sm`}),(0,m.jsx)(`div`,{className:`w-full max-w-[320px]`,children:(0,m.jsx)(n.Input,{type:`search`,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.Input,{type:`search`,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=_;