tembro 2.0.4 → 2.0.5

package/dist/showcase/premium/combobox/showcase.js

@@ -1,9 +1,10 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
 import { Combobox as n } from "../../../components/inputs/combobox.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/showcase/premium/combobox/showcase.tsx
-var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", o = [
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
 	{
 		value: "azamat",
 		label: "Azamat",
@@ -25,118 +26,126 @@ var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(-
 		description: "Product manager"
 	}
 ];
-function s({ state: s, setState: c }) {
-	let l = o.some((e) => e.value === s.selectValue) ? s.selectValue : "azamat", u = o.find((e) => e.value === l) ?? o[0];
-	return /* @__PURE__ */ i("div", {
+function c({ state: c, setState: l }) {
+	let u = s.some((e) => e.value === c.selectValue) ? c.selectValue : "azamat", d = s.find((e) => e.value === u) ?? s[0], [f, p] = r.useState("");
+	return /* @__PURE__ */ a("div", {
 		className: "space-y-5",
-		children: [/* @__PURE__ */ i("section", {
+		children: [/* @__PURE__ */ a("section", {
 			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-			children: [/* @__PURE__ */ i("div", {
+			children: [/* @__PURE__ */ a("div", {
 				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-				children: [/* @__PURE__ */ i("div", {
+				children: [/* @__PURE__ */ a("div", {
 					className: "max-w-xl",
 					children: [
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 							children: "Search selection"
 						}),
-						/* @__PURE__ */ r("h3", {
+						/* @__PURE__ */ i("h3", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 							children: "Combobox is the keyboard-first local member"
 						}),
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
 							children: "Use it when users know part of the option name and need to jump directly through local filtering instead of scanning a longer static Select list."
 						})
 					]
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ a("div", {
 					className: "flex flex-wrap gap-2",
 					children: [
-						/* @__PURE__ */ r(t, {
+						/* @__PURE__ */ i(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Searchable"
 						}),
-						/* @__PURE__ */ r(t, {
+						/* @__PURE__ */ i(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Controlled"
 						}),
-						/* @__PURE__ */ r(t, {
+						/* @__PURE__ */ i(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Local options"
 						})
 					]
 				})]
-			}), /* @__PURE__ */ i("div", {
+			}), /* @__PURE__ */ a("div", {
 				className: "mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]",
-				children: [/* @__PURE__ */ i("div", {
-					className: a,
-					children: [/* @__PURE__ */ r("p", {
+				children: [/* @__PURE__ */ a("div", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
 						className: "text-sm font-medium aui-text-muted",
 						children: "Assign component owner"
-					}), /* @__PURE__ */ r("div", {
+					}), /* @__PURE__ */ i("div", {
 						className: "mt-3",
-						children: /* @__PURE__ */ r(n, {
-							value: l,
-							options: o.map((e) => ({ ...e })),
-							onValueChange: (e) => c({ selectValue: e ?? "azamat" }),
+						children: /* @__PURE__ */ i(n, {
+							value: u,
+							options: s.map((e) => ({ ...e })),
+							onValueChange: (e) => l({ selectValue: e ?? "azamat" }),
 							placeholder: "Choose teammate",
-							searchPlaceholder: "Search teammate..."
+							searchPlaceholder: "Search teammate...",
+							clearable: !0,
+							allowDeselect: !0,
+							showSelectedDescription: !0,
+							onSearchChange: p
 						})
 					})]
-				}), /* @__PURE__ */ i("div", {
-					className: a,
+				}), /* @__PURE__ */ a("div", {
+					className: o,
 					children: [
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "text-sm font-medium aui-text-muted",
 							children: "Selection summary"
 						}),
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "mt-3 text-lg font-semibold aui-text-strong",
-							children: u.label
+							children: d.label
 						}),
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "mt-2 text-sm leading-6 aui-text-muted",
-							children: u.description
+							children: d.description
 						}),
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "mt-3 text-sm leading-6 aui-text-muted",
 							children: "Keep Combobox for local search-heavy reassignment flows. If options are remote, move back to the Select family and choose AsyncSelect instead."
 						})
 					]
 				})]
 			})]
-		}), /* @__PURE__ */ r("section", {
-			className: a,
-			children: /* @__PURE__ */ i("div", {
+		}), /* @__PURE__ */ i("section", {
+			className: o,
+			children: /* @__PURE__ */ a("div", {
 				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
-				children: [/* @__PURE__ */ i("div", { children: [
-					/* @__PURE__ */ r("p", {
+				children: [/* @__PURE__ */ a("div", { children: [
+					/* @__PURE__ */ i("p", {
 						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
 						children: "Live state"
 					}),
-					/* @__PURE__ */ i("h4", {
+					/* @__PURE__ */ a("h4", {
 						className: "mt-2 text-lg font-semibold aui-text-strong",
-						children: ["Current owner: ", u.label]
+						children: ["Current owner: ", d.label]
 					}),
-					/* @__PURE__ */ r("p", {
+					/* @__PURE__ */ i("p", {
 						className: "mt-2 text-sm leading-6 aui-text-muted",
 						children: "Use quick actions below to verify that the value stays controlled outside the dropdown itself."
+					}),
+					/* @__PURE__ */ a("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: ["Search query: ", f || "empty"]
 					})
-				] }), /* @__PURE__ */ i("div", {
+				] }), /* @__PURE__ */ a("div", {
 					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ r(e, {
+					children: [/* @__PURE__ */ i(e, {
 						type: "button",
 						size: "sm",
-						onClick: () => c({ selectValue: "nodira" }),
+						onClick: () => l({ selectValue: "nodira" }),
 						children: "Pick Nodira"
-					}), /* @__PURE__ */ r(e, {
+					}), /* @__PURE__ */ i(e, {
 						type: "button",
 						size: "sm",
 						variant: "secondary",
-						onClick: () => c({ selectValue: "azamat" }),
+						onClick: () => l({ selectValue: "azamat" }),
 						children: "Reset"
 					})]
 				})]
@@ -145,4 +154,4 @@ function s({ state: s, setState: c }) {
 	});
 }
 //#endregion
-export { s as ComboboxShowcase };
+export { c as ComboboxShowcase };

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

@@ -1 +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;
+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/inputs/simple-select.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),o=require("../../../components/data-table/data-table.cjs"),s=require("../../../components/data-table/data-table-sortable-header.cjs"),c=require("../../../components/data-table/data-table-select-column.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{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 f(){let[e,f]=l.useState(``),[p,m]=l.useState(`all`),[h,g]=l.useState(`all`),[_,v]=l.useState({}),y=d.filter(t=>{let n=e.trim().toLowerCase(),r=!n||`${t.invoice} ${t.customer} ${t.owner} ${t.amount}`.toLowerCase().includes(n),i=p===`all`||t.status===p,a=h===`all`||t.owner===h;return r&&i&&a}),b=Object.values(_).filter(Boolean).length,x=l.useMemo(()=>[c.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,u.jsx)(n.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,u.jsx)(s.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,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Operational table`}),(0,u.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Search, selection and actions in one table`})]}),(0,u.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Rows`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:y.length})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Selected`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:b})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e||p!==`all`||h!==`all`?`Filtered`:`Live`})]})]})]}),(0,u.jsx)(o.DataTable,{columns:x,data:y,getRowId:e=>e.invoice,enableRowSelection:!0,rowSelection:_,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:e,onValueChange:f,placeholder:`Search invoice, customer...`,clearable:!0},filters:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.SimpleSelect,{value:p,onValueChange:e=>m(e??`all`),options:[{value:`all`,label:`All statuses`},{value:`Paid`,label:`Paid`},{value:`Review`,label:`Review`},{value:`Draft`,label:`Draft`}],triggerClassName:`min-w-40`}),(0,u.jsx)(r.SimpleSelect,{value:h,onValueChange:e=>g(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:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.Badge,{variant:`outline`,children:[y.length,` rows`]}),(0,u.jsxs)(n.Badge,{variant:`outline`,children:[b,` selected`]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e||p!==`all`||h!==`all`?`Filtered view`:`Live view`})]}),toolbarActions:({table:e})=>(0,u.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,u.jsx)(a.DataTableColumnVisibilityMenu,{table:e}),(0,u.jsx)(t.Button,{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=>{v(t=>typeof e==`function`?e(t):e)},onRowClick:()=>void 0,renderMobileCard:e=>(0,u.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,u.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-base font-semibold aui-text-strong`,children:e.original.invoice}),(0,u.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.original.customer})]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e.original.status})]})}),pagination:{pageIndex:0,pageSize:5,rowCount:y.length,pageCount:Math.max(Math.ceil(y.length/5),1),pageSizeOptions:[5,10],onPageChange:()=>void 0,onPageSizeChange:()=>void 0}}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{size:`sm`,children:`Export`}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Refresh`})]})]})}exports.DataTableShowcase=f;

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

@@ -1,14 +1,13 @@
 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 { Badge as t } from "../../../components/ui/badge/index.js";
+import { SimpleSelect as n } from "../../../components/inputs/simple-select.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 { 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 { 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";
+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 = [
 	{
@@ -34,24 +33,48 @@ var f = [
 		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] = 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(() => [
+	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(c, {
+			header: ({ column: e }) => /* @__PURE__ */ u(o, {
 				column: e,
 				children: "Invoice"
 			})
 		},
 		{
 			accessorKey: "customer",
-			header: ({ column: e }) => /* @__PURE__ */ u(c, {
+			header: ({ column: e }) => /* @__PURE__ */ u(o, {
 				column: e,
 				children: "Customer"
 			})
@@ -59,14 +82,14 @@ function p() {
 		{
 			accessorKey: "status",
 			header: "Status",
-			cell: ({ row: e }) => /* @__PURE__ */ u(n, {
+			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(c, {
+			header: ({ column: e }) => /* @__PURE__ */ u(o, {
 				column: e,
 				children: "Amount"
 			})
@@ -107,7 +130,7 @@ function p() {
 								children: "Rows"
 							}), /* @__PURE__ */ u("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: _.length
+								children: x.length
 							})]
 						}),
 						/* @__PURE__ */ d("div", {
@@ -117,7 +140,7 @@ function p() {
 								children: "Selected"
 							}), /* @__PURE__ */ u("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: h
+								children: S
 							})]
 						}),
 						/* @__PURE__ */ d("div", {
@@ -127,41 +150,110 @@ function p() {
 								children: "State"
 							}), /* @__PURE__ */ u("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: "Live"
+								children: p || h !== "all" || _ !== "all" ? "Filtered" : "Live"
 							})]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ u(o, {
-				columns: v,
-				data: _,
+			/* @__PURE__ */ u(a, {
+				columns: C,
+				data: x,
 				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..."
+				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"]
 					}),
-					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)
-						})]
+					/* @__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) => {
-					let t = typeof e == "function" ? e({}) : e;
-					g(Object.values(t).filter(Boolean).length);
+					b((t) => typeof e == "function" ? e(t) : e);
 				},
 				onRowClick: () => void 0,
 				renderMobileCard: (e) => /* @__PURE__ */ u("div", {
@@ -174,7 +266,7 @@ function p() {
 						}), /* @__PURE__ */ u("p", {
 							className: "mt-1 text-sm aui-text-muted",
 							children: e.original.customer
-						})] }), /* @__PURE__ */ u(n, {
+						})] }), /* @__PURE__ */ u(t, {
 							variant: "outline",
 							children: e.original.status
 						})]
@@ -183,9 +275,9 @@ function p() {
 				pagination: {
 					pageIndex: 0,
 					pageSize: 5,
-					rowCount: _.length,
-					pageCount: 1,
-					pageSizeOptions: [5],
+					rowCount: x.length,
+					pageCount: Math.max(Math.ceil(x.length / 5), 1),
+					pageSizeOptions: [5, 10],
 					onPageChange: () => void 0,
 					onPageSizeChange: () => void 0
 				}

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

@@ -1 +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("./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=_;
+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-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.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.js

@@ -5,10 +5,10 @@ import { createDataTableActionsColumn as r } from "../../../components/data-tabl
 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 { DataTableViewPresets as l } from "../../../components/data-table/data-table-view-presets.js";
-import { DataTableSavedFilters as u } from "../../../components/data-table/data-table-saved-filters.js";
+import { DataTableSortableHeader as s } from "../../../components/data-table/data-table-sortable-header.js";
+import { DataTableViewPresets as c } from "../../../components/data-table/data-table-view-presets.js";
+import { DataTableSavedFilters as l } from "../../../components/data-table/data-table-saved-filters.js";
+import { createDataTableSelectColumn as u } from "../../../components/data-table/data-table-select-column.js";
 import { buildDataTableDemoRows as d, dataTableDemoPresets as f } from "./data.js";
 import * as p from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
@@ -16,17 +16,17 @@ import { jsx as m, jsxs as h } from "react/jsx-runtime";
 var g = d(6);
 function _(e) {
 	return [
-		s(),
+		u(),
 		{
 			accessorKey: "invoice",
-			header: ({ column: e }) => /* @__PURE__ */ m(c, {
+			header: ({ column: e }) => /* @__PURE__ */ m(s, {
 				column: e,
 				children: "Invoice"
 			})
 		},
 		{
 			accessorKey: "customer",
-			header: ({ column: e }) => /* @__PURE__ */ m(c, {
+			header: ({ column: e }) => /* @__PURE__ */ m(s, {
 				column: e,
 				children: "Customer"
 			})
@@ -41,7 +41,7 @@ function _(e) {
 		},
 		{
 			accessorKey: "amount",
-			header: ({ column: e }) => /* @__PURE__ */ m(c, {
+			header: ({ column: e }) => /* @__PURE__ */ m(s, {
 				column: e,
 				children: "Amount"
 			})
@@ -59,7 +59,7 @@ function _(e) {
 	];
 }
 function v({ slug: r }) {
-	let [s, c] = p.useState(""), [d, v] = p.useState("all"), [y, b] = p.useState({}), [x, S] = p.useState({}), [C, w] = p.useState("Ready"), [T, E] = p.useState(0), D = p.useMemo(() => {
+	let [s, u] = p.useState(""), [d, v] = p.useState("all"), [y, b] = p.useState({}), [x, S] = p.useState({}), [C, w] = p.useState("Ready"), [T, E] = p.useState(0), D = p.useMemo(() => {
 		let e = s.trim().toLowerCase(), t = g;
 		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,
@@ -118,7 +118,7 @@ function v({ slug: r }) {
 			}),
 			r === "data-table-saved-filters" ? /* @__PURE__ */ m("div", {
 				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
-				children: /* @__PURE__ */ m(u, {
+				children: /* @__PURE__ */ m(l, {
 					savedFilters: [
 						{
 							id: "all",
@@ -147,7 +147,7 @@ function v({ slug: r }) {
 				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4",
 				children: /* @__PURE__ */ h("div", {
 					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ m(l, {
+					children: [/* @__PURE__ */ m(c, {
 						value: d,
 						onValueChange: (e) => v(e ?? "all"),
 						presets: f,
@@ -156,7 +156,7 @@ function v({ slug: r }) {
 						className: "w-full max-w-[320px]",
 						children: /* @__PURE__ */ m(t, {
 							value: s,
-							onValueChange: c,
+							onValueChange: u,
 							placeholder: "Search invoice, customer..."
 						})
 					})]
@@ -179,7 +179,7 @@ function v({ slug: r }) {
 					description: "Premium subroute preview for reusable DataTable parts.",
 					search: /* @__PURE__ */ m(t, {
 						value: s,
-						onValueChange: c,
+						onValueChange: u,
 						placeholder: "Search rows..."
 					}),
 					actions: /* @__PURE__ */ h("div", {

package/dist/showcase/premium/date-input/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { DateInput } from "@/index"
+import { DateInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("2026-06-19")

package/dist/showcase/premium/date-input/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/date-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { DateInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <DateInput\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      placeholder=\"YYYY-MM-DD\"\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { DateInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <DateInput\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      placeholder=\"YYYY-MM-DD\"\n    />\n  )\n}",
 	htmlCode: "<label for=\"date\">Date</label><input id=\"date\" type=\"text\" value=\"2026-06-19\" placeholder=\"YYYY-MM-DD\" />",
 	cliCommand: "npx tembro add date-input",
 	highlights: [

package/dist/showcase/premium/date-range-picker/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/calendar/date-range-picker.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)({from:`2026-06-01`,to:`2026-06-07`});return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.DateRangePicker,{value:i,onValueChange:e=>a({from:e.from??``,to:e.to??``}),min:`2026-06-01`,max:`2026-12-31`,disabledDates:[`2026-06-21`,`2026-06-22`]}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Range: `,i.from,` → `,i.to]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateRangePickerShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/calendar/date-range-picker.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)({from:`2026-06-01`,to:`2026-06-07`});return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.DateRangePicker,{value:i,onValueChange:e=>a({from:e.from??``,to:e.to??``}),min:`2026-06-01`,max:`2026-12-31`,disabledDates:[`2026-06-21`,`2026-06-22`],closeOnPresetSelect:!0,presets:[{label:`This week`,value:{from:`2026-06-01`,to:`2026-06-07`}},{label:`Next 14 days`,value:{from:`2026-06-08`,to:`2026-06-20`}},{label:`Q3`,value:{from:`2026-07-01`,to:`2026-09-30`}}],labels:{placeholder:`Choose reporting range`,apply:`Apply range`,clear:`Clear`,start:`Start`,end:`End`}}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Range: `,i.from,` → `,i.to]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateRangePickerShowcase=r;