tembro 2.0.4 → 2.0.6

package/dist/components/calendar/date-range-picker.js

@@ -4,94 +4,179 @@ import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../ui/po
 import { parseDateKey as a } from "./date-utils.js";
 import { Calendar as o } from "./calendar.js";
 import * as s from "react";
-import { CalendarIcon as c } from "lucide-react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { CalendarIcon as c, XIcon as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/calendar/date-range-picker.tsx
-function d(e) {
+function f(e) {
 	let t = a(e);
 	return t ? new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(t) : e;
 }
-function f({ className: a, value: f, onValueChange: p, labels: m, placeholder: h, disabled: g = !1, formatValue: _ = d, closeOnSelect: v = !0, showFooter: y = !1, triggerClassName: b, contentClassName: x, numberOfMonths: S = 2, pagedNavigation: C = !0, ...w }) {
-	let [T, E] = s.useState(!1), [D, O] = s.useState(f ?? {}), k = f?.from ?? "", A = f?.to ?? "", j = !!(k || A), M = y ? D : f, N = M?.from ?? "", P = M?.to ?? "", F = !!(N || P), I = k && A ? `${_(k)} - ${_(A)}` : k ? `${_(k)} - ...` : h ?? m?.placeholder ?? "Select date range", L = N && P ? `${_(N)} - ${_(P)}` : N ? `${_(N)} - ...` : m?.placeholder ?? "Select date range";
+function p(e, t) {
+	return typeof e == "string" ? e : t;
+}
+function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _, disabled: v = !1, clearable: y = !0, formatValue: b = f, closeOnSelect: x = !1, closeOnPresetSelect: S = !1, showFooter: C = !0, presets: w, triggerClassName: T, contentClassName: E, numberOfMonths: D = 2, pagedNavigation: O = !0, ...k }) {
+	let [A, j] = s.useState(!1), [M, N] = s.useState(m ?? {}), P = m?.from ?? "", F = m?.to ?? "", I = !!(P || F), L = C ? M : m, R = L?.from ?? "", z = L?.to ?? "", B = !!(R || z), V = P && F ? `${b(P)} - ${b(F)}` : P ? `${b(P)} - ...` : _ ?? g?.placeholder ?? "Select date range", H = R && z ? `${b(R)} - ${b(z)}` : R ? `${b(R)} - ...` : g?.placeholder ?? "Select date range";
 	s.useEffect(() => {
-		T && y && O(f ?? {});
+		A && C && N(m ?? {});
 	}, [
-		T,
-		y,
-		f
+		A,
+		C,
+		m
 	]);
-	let R = (e) => {
-		if (y) {
-			O(e);
+	let U = (e) => {
+		if (C) {
+			N(e);
+			return;
+		}
+		h?.(e), x && e.from && e.to && j(!1);
+	}, W = () => {
+		h?.(M), j(!1);
+	}, G = () => {
+		let e = {};
+		if (C) {
+			N(e);
 			return;
 		}
-		p?.(e), v && e.from && e.to && E(!1);
-	}, z = () => {
-		p?.(D), E(!1);
-	}, B = () => {
+		h?.(e);
+	}, K = () => {
 		let e = {};
-		if (y) {
-			O(e);
+		N(e), h?.(e);
+	}, q = (e) => {
+		e.preventDefault(), e.stopPropagation(), K();
+	}, J = (e) => {
+		if (C) {
+			N(e), S && (h?.(e), j(!1));
 			return;
 		}
-		p?.(e);
+		h?.(e), (x || S) && e.from && e.to && j(!1);
 	};
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		"data-slot": "date-range-picker",
 		className: e("w-full", a),
-		children: /* @__PURE__ */ u(n, {
-			open: T,
-			onOpenChange: E,
-			children: [/* @__PURE__ */ u(i, {
-				render: /* @__PURE__ */ l(t, {
+		children: /* @__PURE__ */ d(n, {
+			open: A,
+			onOpenChange: j,
+			children: [/* @__PURE__ */ d(i, {
+				render: /* @__PURE__ */ u(t, {
 					type: "button",
 					variant: "outline",
-					disabled: g,
-					className: e("min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]", !j && "text-muted-foreground", b)
+					disabled: v,
+					className: e("group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]", !I && "text-muted-foreground", T)
 				}),
-				children: [/* @__PURE__ */ l(c, { "data-icon": "inline-start" }), /* @__PURE__ */ l("span", {
-					className: "min-w-0 flex-1 truncate",
-					children: I
-				})]
-			}), /* @__PURE__ */ u(r, {
+				children: [
+					/* @__PURE__ */ u(c, {
+						"data-icon": "inline-start",
+						className: e(I && "text-primary")
+					}),
+					I ? /* @__PURE__ */ d("span", {
+						className: "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2",
+						children: [
+							/* @__PURE__ */ d("span", {
+								className: "grid min-w-0 gap-0.5",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+									children: g?.start ?? "Start"
+								}), /* @__PURE__ */ u("span", {
+									className: "truncate text-sm font-semibold text-foreground",
+									children: P ? b(P) : "..."
+								})]
+							}),
+							/* @__PURE__ */ u("span", {
+								className: "text-muted-foreground",
+								children: "-"
+							}),
+							/* @__PURE__ */ d("span", {
+								className: "grid min-w-0 gap-0.5",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+									children: g?.end ?? "End"
+								}), /* @__PURE__ */ u("span", {
+									className: "truncate text-sm font-semibold text-foreground",
+									children: F ? b(F) : "..."
+								})]
+							})
+						]
+					}) : /* @__PURE__ */ d("span", {
+						className: "grid min-w-0 flex-1 gap-0.5",
+						children: [/* @__PURE__ */ u("span", {
+							className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+							children: "Range"
+						}), /* @__PURE__ */ u("span", {
+							className: "truncate text-sm",
+							children: V
+						})]
+					}),
+					y && I ? /* @__PURE__ */ u("span", {
+						role: "button",
+						tabIndex: 0,
+						"aria-label": p(g?.clear, "Clear date range"),
+						className: "ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+						onClick: q,
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), K());
+						},
+						children: /* @__PURE__ */ u(l, { className: "size-3.5" })
+					}) : null
+				]
+			}), /* @__PURE__ */ d(r, {
 				align: "start",
-				className: e("w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur", x),
-				children: [/* @__PURE__ */ l(o, {
-					mode: "range",
-					range: M,
-					onRangeChange: R,
-					labels: m,
-					numberOfMonths: S,
-					pagedNavigation: C,
-					...w
-				}), y && /* @__PURE__ */ u("div", {
-					className: "flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/24 px-4 py-3",
-					children: [/* @__PURE__ */ l("div", {
-						className: "min-w-0 text-sm text-muted-foreground",
-						children: /* @__PURE__ */ l("span", {
-							className: "block truncate",
-							children: L
-						})
-					}), /* @__PURE__ */ u("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ l(t, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							onClick: B,
-							children: m?.clear ?? "Clear"
-						}), /* @__PURE__ */ l(t, {
+				className: e("w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur", E),
+				children: [
+					w?.length ? /* @__PURE__ */ u("div", {
+						className: "flex flex-wrap gap-2 border-b border-border/70 bg-muted/20 px-3 py-3",
+						children: w.map((e, n) => /* @__PURE__ */ u(t, {
 							type: "button",
+							variant: "outline",
 							size: "sm",
-							disabled: !F,
-							onClick: z,
-							children: m?.apply ?? "Apply"
+							className: "h-7 rounded-full px-3 text-xs",
+							onClick: () => J(e.value),
+							children: e.label
+						}, n))
+					}) : null,
+					/* @__PURE__ */ u(o, {
+						mode: "range",
+						range: L,
+						onRangeChange: U,
+						labels: g,
+						renderSelectionSummary: ({ range: e }) => {
+							let t = e?.from ? b(e.from) : null, n = e?.to ? b(e.to) : null;
+							return t && n ? `${t} -> ${n}` : t ? `${t} -> ...` : "No range selected";
+						},
+						numberOfMonths: D,
+						pagedNavigation: O,
+						showClearShortcut: !C && y,
+						showSelectionSummary: !0,
+						...k
+					}),
+					C && /* @__PURE__ */ d("div", {
+						className: "flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/24 px-4 py-3",
+						children: [/* @__PURE__ */ u("div", {
+							className: "min-w-0 text-sm text-muted-foreground",
+							children: /* @__PURE__ */ u("span", {
+								className: "block truncate",
+								children: H
+							})
+						}), /* @__PURE__ */ d("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ u(t, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								onClick: G,
+								children: g?.clear ?? "Clear"
+							}), /* @__PURE__ */ u(t, {
+								type: "button",
+								size: "sm",
+								disabled: !B,
+								onClick: W,
+								children: g?.apply ?? "Apply"
+							})]
 						})]
-					})]
-				})]
+					})
+				]
 			})]
 		})
 	});
 }
 //#endregion
-export { f as DateRangePicker };
+export { m as DateRangePicker };

package/dist/components/data-table/data-table-pagination.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../navigation/pagination.cjs"),r=require("../inputs/simple-select.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o(e,t,n){return typeof t==`number`?Math.max(t,1):typeof n==`number`?Math.max(Math.ceil(n/e),1):1}function s({className:e,pageIndex:i,pageSize:s,pageCount:c,rowCount:l,pageSizeOptions:u=[10,20,30,50,100],disabled:d=!1,showPageSize:f=!0,labels:p,onPageChange:m,onPageSizeChange:h,...g}){let _=o(s,c,l),v=Math.min(Math.max(i+1,1),_);return(0,a.jsxs)(`div`,{"data-slot":`data-table-pagination`,className:t.cn(`flex flex-col gap-3 border-t px-4 py-3 sm:flex-row sm:items-center sm:justify-between`,e),...g,children:[(0,a.jsx)(`div`,{className:`text-sm font-medium text-muted-foreground`,children:p?.pageInfo?.(v,_,l)??`Page ${v} of ${_}`}),(0,a.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row sm:items-center`,children:[f&&h&&(0,a.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,a.jsx)(`span`,{children:p?.rowsPerPage??`Rows per page`}),(0,a.jsx)(r.SimpleSelect,{value:String(s),onValueChange:e=>h(Number(e)),options:u.map(e=>({label:String(e),value:String(e)})),disabled:d,triggerClassName:`h-9 w-20 rounded-full border-border/70 bg-background/80 shadow-none`})]}),(0,a.jsx)(n.Pagination,{page:v,pageCount:_,disabled:d,labels:p,onPageChange:e=>m?.(e-1)})]})]})}exports.DataTablePagination=s,exports.getDataTablePageCount=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/select/index.cjs"),r=require("../navigation/pagination.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o(e,t,n){return typeof t==`number`?Math.max(t,1):typeof n==`number`?Math.max(Math.ceil(n/e),1):1}function s({className:e,pageIndex:i,pageSize:s,pageCount:c,rowCount:l,pageSizeOptions:u=[10,20,30,50,100],disabled:d=!1,showPageSize:f=!0,labels:p,onPageChange:m,onPageSizeChange:h,...g}){let _=o(s,c,l),v=Math.min(Math.max(i+1,1),_);return(0,a.jsxs)(`div`,{"data-slot":`data-table-pagination`,className:t.cn(`flex flex-col gap-3 border-t px-4 py-3 sm:flex-row sm:items-center sm:justify-between`,e),...g,children:[(0,a.jsx)(`div`,{className:`text-sm font-medium text-muted-foreground`,children:p?.pageInfo?.(v,_,l)??`Page ${v} of ${_}`}),(0,a.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row sm:items-center`,children:[f&&h&&(0,a.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,a.jsx)(`span`,{children:p?.rowsPerPage??`Rows per page`}),(0,a.jsx)(n.Select,{value:String(s),onValueChange:e=>h(Number(e)),options:u.map(e=>({label:String(e),value:String(e)})),disabled:d,triggerClassName:`h-9 w-20 rounded-full border-border/70 bg-background/80 shadow-none`})]}),(0,a.jsx)(r.Pagination,{page:v,pageCount:_,disabled:d,labels:p,onPageChange:e=>m?.(e-1)})]})]})}exports.DataTablePagination=s,exports.getDataTablePageCount=o;

package/dist/components/data-table/data-table-pagination.js

@@ -1,6 +1,6 @@
 import { cn as e } from "../../lib/utils.js";
-import { Pagination as t } from "../navigation/pagination.js";
-import { SimpleSelect as n } from "../inputs/simple-select.js";
+import { Select as t } from "../ui/select/index.js";
+import { Pagination as n } from "../navigation/pagination.js";
 import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/data-table/data-table-pagination.tsx
@@ -26,7 +26,7 @@ function o({ className: o, pageIndex: s, pageSize: c, pageCount: l, rowCount: u,
 			className: "flex flex-col gap-3 sm:flex-row sm:items-center",
 			children: [p && g && /* @__PURE__ */ i("div", {
 				className: "flex items-center gap-2 text-sm text-muted-foreground",
-				children: [/* @__PURE__ */ r("span", { children: m?.rowsPerPage ?? "Rows per page" }), /* @__PURE__ */ r(n, {
+				children: [/* @__PURE__ */ r("span", { children: m?.rowsPerPage ?? "Rows per page" }), /* @__PURE__ */ r(t, {
 					value: String(c),
 					onValueChange: (e) => g(Number(e)),
 					options: d.map((e) => ({
@@ -36,7 +36,7 @@ function o({ className: o, pageIndex: s, pageSize: c, pageCount: l, rowCount: u,
 					disabled: f,
 					triggerClassName: "h-9 w-20 rounded-full border-border/70 bg-background/80 shadow-none"
 				})]
-			}), /* @__PURE__ */ r(t, {
+			}), /* @__PURE__ */ r(n, {
 				page: y,
 				pageCount: v,
 				disabled: f,

package/dist/components/data-table/data-table-toolbar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("class-variance-authority"),i=require("react/jsx-runtime");var a=(0,r.cva)(`flex flex-col`,{variants:{variant:{default:``,plain:`border-transparent bg-transparent shadow-none`,soft:`rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--card),var(--background)_16%)] shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]`},density:{compact:`gap-3 p-3`,default:`gap-4 p-4 md:p-5`,comfortable:`gap-5 p-5 md:p-6`}},defaultVariants:{variant:`plain`,density:`default`}});function o({className:e,variant:n,density:r,title:o,description:s,search:c,filters:l,actions:u,selectionActions:d,selectedCount:f=0,totalCount:p,selectedLabel:m=(e,t)=>t===void 0?`${e} selected`:`${e} of ${t} selected`,titleClassName:h,descriptionClassName:g,actionsClassName:_,children:v,...y}){let b=!!(o||s),x=f>0&&!!d;return(0,i.jsxs)(`div`,{"data-slot":`data-table-toolbar`,"data-variant":n??`plain`,"data-density":r??`default`,className:t.cn(a({variant:n,density:r}),e),...y,children:[(b||u)&&(0,i.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,children:[b&&(0,i.jsxs)(`div`,{className:`grid gap-1`,children:[o&&(0,i.jsx)(`h2`,{className:t.cn(`text-lg font-semibold tracking-tight text-foreground`,h),children:o}),s&&(0,i.jsx)(`p`,{className:t.cn(`text-sm leading-6 text-muted-foreground`,g),children:s})]}),u&&(0,i.jsx)(`div`,{className:t.cn(`flex shrink-0 flex-wrap items-center gap-2`,_),children:u})]}),(c||l||x||v)&&(0,i.jsxs)(`div`,{className:`flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center`,children:[c,l,v]}),x&&(0,i.jsxs)(`div`,{"data-slot":`data-table-selection-bar`,className:`flex shrink-0 items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:m(f,p)}),d]})]})]})}exports.DataTableToolbar=o,exports.dataTableToolbarVariants=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("class-variance-authority"),i=require("react/jsx-runtime");var a=(0,r.cva)(`flex flex-col`,{variants:{variant:{default:``,plain:`border-transparent bg-transparent shadow-none`,soft:`rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--card),var(--background)_16%)] shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]`},density:{compact:`gap-3 p-3`,default:`gap-4 p-4 md:p-5`,comfortable:`gap-5 p-5 md:p-6`}},defaultVariants:{variant:`plain`,density:`default`}});function o({className:e,variant:n,density:r,title:o,description:s,search:c,filters:l,summary:u,actions:d,selectionActions:f,selectedCount:p=0,totalCount:m,selectedLabel:h=(e,t)=>t===void 0?`${e} selected`:`${e} of ${t} selected`,titleClassName:g,descriptionClassName:_,searchClassName:v,filtersClassName:y,summaryClassName:b,actionsClassName:x,children:S,...C}){let w=!!(o||s),T=p>0&&!!f,E=!!(c||l||S);return(0,i.jsxs)(`div`,{"data-slot":`data-table-toolbar`,"data-variant":n??`plain`,"data-density":r??`default`,className:t.cn(a({variant:n,density:r}),e),...C,children:[(w||d)&&(0,i.jsxs)(`div`,{className:`flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between`,children:[w&&(0,i.jsxs)(`div`,{className:`grid gap-1`,children:[o&&(0,i.jsx)(`h2`,{className:t.cn(`text-lg font-semibold tracking-tight text-foreground`,g),children:o}),s&&(0,i.jsx)(`p`,{className:t.cn(`text-sm leading-6 text-muted-foreground`,_),children:s})]}),d&&(0,i.jsx)(`div`,{className:t.cn(`flex min-w-0 shrink-0 flex-wrap items-center gap-2 xl:justify-end`,x),children:d})]}),(E||u||T)&&(0,i.jsxs)(`div`,{className:`flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-3`,children:[E&&(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 lg:flex-row lg:flex-wrap lg:items-center`,children:[c?(0,i.jsx)(`div`,{className:t.cn(`min-w-[16rem] max-w-xl flex-1`,v),children:c}):null,l?(0,i.jsx)(`div`,{className:t.cn(`flex min-w-0 flex-1 flex-wrap items-center gap-2`,y),children:l}):null,S]}),u?(0,i.jsx)(`div`,{"data-slot":`data-table-summary`,className:t.cn(`flex flex-wrap items-center gap-2 text-sm text-muted-foreground`,b),children:u}):null]}),T&&(0,i.jsxs)(`div`,{"data-slot":`data-table-selection-bar`,className:`flex shrink-0 flex-wrap items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:h(p,m)}),f]})]})]})}exports.DataTableToolbar=o,exports.dataTableToolbarVariants=a;

package/dist/components/data-table/data-table-toolbar.d.ts

@@ -9,6 +9,7 @@ export type DataTableToolbarProps = React.ComponentProps<"div"> & VariantProps<t
     description?: React.ReactNode;
     search?: React.ReactNode;
     filters?: React.ReactNode;
+    summary?: React.ReactNode;
     actions?: React.ReactNode;
     selectionActions?: React.ReactNode;
     selectedCount?: number;
@@ -16,7 +17,10 @@ export type DataTableToolbarProps = React.ComponentProps<"div"> & VariantProps<t
     selectedLabel?: (selectedCount: number, totalCount?: number) => React.ReactNode;
     titleClassName?: string;
     descriptionClassName?: string;
+    searchClassName?: string;
+    filtersClassName?: string;
+    summaryClassName?: string;
     actionsClassName?: string;
 };
-declare function DataTableToolbar({ className, variant, density, title, description, search, filters, actions, selectionActions, selectedCount, totalCount, selectedLabel, titleClassName, descriptionClassName, actionsClassName, children, ...props }: DataTableToolbarProps): React.JSX.Element;
+declare function DataTableToolbar({ className, variant, density, title, description, search, filters, summary, actions, selectionActions, selectedCount, totalCount, selectedLabel, titleClassName, descriptionClassName, searchClassName, filtersClassName, summaryClassName, actionsClassName, children, ...props }: DataTableToolbarProps): React.JSX.Element;
 export { DataTableToolbar, dataTableToolbarVariants };

package/dist/components/data-table/data-table-toolbar.js

@@ -21,8 +21,8 @@ var i = t("flex flex-col", {
 		density: "default"
 	}
 });
-function a({ className: t, variant: a, density: o, title: s, description: c, search: l, filters: u, actions: d, selectionActions: f, selectedCount: p = 0, totalCount: m, selectedLabel: h = (e, t) => t === void 0 ? `${e} selected` : `${e} of ${t} selected`, titleClassName: g, descriptionClassName: _, actionsClassName: v, children: y, ...b }) {
-	let x = !!(s || c), S = p > 0 && !!f;
+function a({ className: t, variant: a, density: o, title: s, description: c, search: l, filters: u, summary: d, actions: f, selectionActions: p, selectedCount: m = 0, totalCount: h, selectedLabel: g = (e, t) => t === void 0 ? `${e} selected` : `${e} of ${t} selected`, titleClassName: _, descriptionClassName: v, searchClassName: y, filtersClassName: b, summaryClassName: x, actionsClassName: S, children: C, ...w }) {
+	let T = !!(s || c), E = m > 0 && !!p, D = !!(l || u || C);
 	return /* @__PURE__ */ r("div", {
 		"data-slot": "data-table-toolbar",
 		"data-variant": a ?? "plain",
@@ -31,38 +31,51 @@ function a({ className: t, variant: a, density: o, title: s, description: c, sea
 			variant: a,
 			density: o
 		}), t),
-		...b,
-		children: [(x || d) && /* @__PURE__ */ r("div", {
-			className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
-			children: [x && /* @__PURE__ */ r("div", {
+		...w,
+		children: [(T || f) && /* @__PURE__ */ r("div", {
+			className: "flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between",
+			children: [T && /* @__PURE__ */ r("div", {
 				className: "grid gap-1",
 				children: [s && /* @__PURE__ */ n("h2", {
-					className: e("text-lg font-semibold tracking-tight text-foreground", g),
+					className: e("text-lg font-semibold tracking-tight text-foreground", _),
 					children: s
 				}), c && /* @__PURE__ */ n("p", {
-					className: e("text-sm leading-6 text-muted-foreground", _),
+					className: e("text-sm leading-6 text-muted-foreground", v),
 					children: c
 				})]
-			}), d && /* @__PURE__ */ n("div", {
-				className: e("flex shrink-0 flex-wrap items-center gap-2", v),
-				children: d
+			}), f && /* @__PURE__ */ n("div", {
+				className: e("flex min-w-0 shrink-0 flex-wrap items-center gap-2 xl:justify-end", S),
+				children: f
 			})]
-		}), (l || u || S || y) && /* @__PURE__ */ r("div", {
-			className: "flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between",
+		}), (D || d || E) && /* @__PURE__ */ r("div", {
+			className: "flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between",
 			children: [/* @__PURE__ */ r("div", {
-				className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center",
-				children: [
-					l,
-					u,
-					y
-				]
-			}), S && /* @__PURE__ */ r("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-3",
+				children: [D && /* @__PURE__ */ r("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2 lg:flex-row lg:flex-wrap lg:items-center",
+					children: [
+						l ? /* @__PURE__ */ n("div", {
+							className: e("min-w-[16rem] max-w-xl flex-1", y),
+							children: l
+						}) : null,
+						u ? /* @__PURE__ */ n("div", {
+							className: e("flex min-w-0 flex-1 flex-wrap items-center gap-2", b),
+							children: u
+						}) : null,
+						C
+					]
+				}), d ? /* @__PURE__ */ n("div", {
+					"data-slot": "data-table-summary",
+					className: e("flex flex-wrap items-center gap-2 text-sm text-muted-foreground", x),
+					children: d
+				}) : null]
+			}), E && /* @__PURE__ */ r("div", {
 				"data-slot": "data-table-selection-bar",
-				className: "flex shrink-0 items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur",
+				className: "flex shrink-0 flex-wrap items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur",
 				children: [/* @__PURE__ */ n("span", {
 					className: "text-muted-foreground",
-					children: h(p, m)
-				}), f]
+					children: g(m, h)
+				}), p]
 			})]
 		})]
 	});

package/dist/components/data-table/data-table.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../inputs/search-input.cjs"),i=require("../ui/table/index.cjs"),a=require("../feedback/empty-state.cjs"),o=require("../feedback/loading-state.cjs"),ee=require("./data-table-actions-column.cjs"),te=require("./data-table-bulk-actions.cjs"),ne=require("./data-table-column-visibility-menu.cjs"),re=require("./data-table-pagination.cjs"),ie=require("./data-table-toolbar.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("@tanstack/react-table");var ae={compact:`h-8 px-2 py-1.5`,default:`h-10 px-2 py-2`,comfortable:`h-12 px-3 py-3`},u={compact:`px-2 py-1.5`,default:`p-2`,comfortable:`px-3 py-3`};function oe(e,t){return typeof t==`function`?t(e):t}function se(e,t){return typeof t==`function`?t(e):t}function ce(e,t){return typeof t==`function`?t(e):t}function le(e){return e==null||e===``}function d({className:e,columns:d,data:f,title:p,description:m,features:h,search:g,toolbarActions:_,rowActions:v,bulkActions:y,onRefresh:b,onExport:x,refreshLabel:ue=`Refresh`,exportLabel:de=`Export`,getRowId:fe,isLoading:S=!1,isError:pe=!1,emptyState:me,errorState:he,loadingState:C,loadingVariant:ge=`skeleton`,toolbar:w,toolbarProps:T,pagination:E,sorting:_e,onSortingChange:ve,columnVisibility:ye,onColumnVisibilityChange:be,rowSelection:xe,onRowSelectionChange:Se,enableRowSelection:Ce,renderMobileCard:D,onRowClick:O,onRowDoubleClick:we,getRowDisabled:k,density:A=`default`,striped:j=!1,bordered:M=!1,stickyHeader:N=!1,skeletonRows:Te=6,skeletonCellClassName:Ee,cellFallback:De=`-`,tableClassName:Oe,tableWrapperClassName:ke,headerCellClassName:Ae,cellClassName:je,rowClassName:Me,renderExpandedRow:P,expanded:Ne,onExpandedChange:F,getRowCanExpand:Pe,columnPinning:I,onColumnPinningChange:Fe,...Ie}){let Le=s.useMemo(()=>{let e=d;return!v||h?.rowActions===!1?e:[...e,ee.createDataTableActionsColumn({getActions:v})]},[d,h?.rowActions,v]),L=E===!1?void 0:E,Re=L?{pageIndex:L.pageIndex,pageSize:L.pageSize}:void 0,R=!!(L&&L.manual!==!1),z=xe??{},ze=Object.keys(z).length,B=(0,l.useReactTable)({data:f,columns:Le,getRowId:fe,getCoreRowModel:(0,l.getCoreRowModel)(),getPaginationRowModel:L&&!R?(0,l.getPaginationRowModel)():void 0,manualPagination:R,pageCount:L?.pageCount,state:{sorting:_e,columnVisibility:ye,rowSelection:z,pagination:Re,expanded:Ne,...I?{columnPinning:I}:{}},onSortingChange:ve,onColumnVisibilityChange:be,onRowSelectionChange:Se,onExpandedChange:F,onColumnPinningChange:Fe,enableRowSelection:Ce,getRowCanExpand:Pe,getExpandedRowModel:(0,l.getExpandedRowModel)()}),V=B.getRowModel().rows,H=B.getSelectedRowModel().rows.map(e=>e.original),U=s.useMemo(()=>({table:B,data:f,selectedRows:H}),[f,H,B]),W=B.getVisibleLeafColumns(),Be=Math.max(W.length,1),G=typeof w==`function`?w(B):w,K=typeof T==`function`?T(B):T,Ve=!!(g&&h?.search!==!1),He=!!(h?.columnVisibility&&B.getAllLeafColumns().some(e=>e.getCanHide())),q=!!(h?.refresh&&b),J=!!(h?.export&&x),Ue=!!(h?.bulkActions!==!1&&y?.length),Y=He&&!!(p||m||g||_||q||J),X=Ve&&g?(0,c.jsx)(r.SearchInput,{value:g.value,onValueChange:g.onValueChange,placeholder:g.placeholder??`Search...`,wrapperClassName:g.wrapperClassName??g.className,inputClassName:g.inputClassName,disabled:g.disabled,clearable:g.clearable,clearLabel:g.clearLabel,searchIcon:g.searchIcon}):void 0,We=(0,c.jsxs)(c.Fragment,{children:[typeof _==`function`?_(U):_,Y&&(0,c.jsx)(ne.DataTableColumnVisibilityMenu,{table:B}),q&&(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,disabled:S,onClick:()=>b?.(U),children:ue}),J&&(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:()=>x?.(U),children:de})]}),Z=Ue?(0,c.jsx)(te.DataTableBulkActions,{rows:H,actions:y??[],selectedLabel:()=>`Actions`,clearLabel:null,onClearSelection:()=>B.resetRowSelection(),hideWhenEmpty:!1}):void 0,Ge=!!(G||K||p||m||X||_||Y||q||J||Z),Ke=!!(L&&!L.hidden),Q=S&&ge===`skeleton`,qe=e=>(0,c.jsx)(i.TableRow,{children:(0,c.jsx)(i.TableCell,{colSpan:Be,className:`p-0`,children:e})}),Je=()=>Array.from({length:Math.max(Te,1)},(e,n)=>(0,c.jsx)(i.TableRow,{"aria-hidden":`true`,children:W.map(e=>(0,c.jsx)(i.TableCell,{className:t.cn(u[A],M&&`border-r last:border-r-0`),children:(0,c.jsx)(`div`,{className:t.cn(`h-4 w-full max-w-40 animate-pulse rounded-md bg-muted`,n%3==1&&`max-w-24`,n%3==2&&`max-w-32`,Ee)})},`${e.id}-${n}`))},`skeleton-${n}`)),$=Q?null:S?(0,c.jsx)(o.LoadingState,{label:`Loading data...`,...C}):pe?(0,c.jsx)(a.EmptyState,{title:`Could not load data`,description:`Please try again.`,...he}):V.length===0?(0,c.jsx)(a.EmptyState,{...me}):null;return(0,c.jsxs)(`div`,{"data-slot":`data-table`,className:t.cn(`grid gap-3`,e),...Ie,children:[Ge&&(G??(0,c.jsx)(ie.DataTableToolbar,{title:p,description:m,search:X,actions:We,selectionActions:Z,selectedCount:ze,totalCount:L?L.rowCount??f.length:f.length,variant:`plain`,...K})),D&&(0,c.jsx)(`div`,{className:`grid gap-3 md:hidden`,children:$??(Q?(0,c.jsx)(o.LoadingState,{label:`Loading data...`,...C}):V.map(e=>(0,c.jsx)(s.Fragment,{children:D(e)},e.id)))}),(0,c.jsxs)(`div`,{"data-slot":`data-table-wrapper`,"data-density":A,"data-striped":j||void 0,"data-bordered":M||void 0,className:t.cn(`overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur`,D&&`hidden md:block`,ke),children:[(0,c.jsxs)(i.Table,{containerClassName:`rounded-none border-0 bg-transparent shadow-none ring-0`,className:t.cn(`text-[0.95rem]`,Oe),children:[(0,c.jsx)(i.TableHeader,{className:t.cn(N&&`sticky top-0 z-10 shadow-sm backdrop-blur`),children:B.getHeaderGroups().map(e=>(0,c.jsx)(i.TableRow,{children:e.headers.map(e=>(0,c.jsx)(i.TableHead,{style:{width:e.getSize(),...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:N?20:11}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:N?20:11}:{}},className:t.cn(ae[A],`bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground`,N&&`bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur`,e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,M&&`border-r last:border-r-0`,se(e,Ae)),children:e.isPlaceholder?null:(0,l.flexRender)(e.column.columnDef.header,e.getContext())},e.id))},e.id))}),(0,c.jsx)(i.TableBody,{children:$?qe($):Q?Je():V.map((e,n)=>{let r=k?.(e)??!1;return(0,c.jsxs)(s.Fragment,{children:[(0,c.jsx)(i.TableRow,{"data-state":e.getIsSelected()?`selected`:void 0,"data-striped":j&&n%2==1?`true`:void 0,"data-disabled":r||void 0,className:t.cn(O&&!r&&`cursor-pointer`,!r&&`transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]`,r&&`pointer-events-none opacity-55`,oe(e,Me)),onClick:()=>{r||O?.(e)},onDoubleClick:()=>{r||we?.(e)},children:e.getVisibleCells().map(e=>{let n=(0,l.flexRender)(e.column.columnDef.cell,e.getContext());return(0,c.jsx)(i.TableCell,{style:{...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:10}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:10}:{}},className:t.cn(u[A],e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,M&&`border-r last:border-r-0`,ce(e,je)),children:le(n)?De:n},e.id)})}),e.getIsExpanded()&&P&&(0,c.jsx)(i.TableRow,{className:`bg-muted/50 hover:bg-muted/50`,children:(0,c.jsx)(i.TableCell,{colSpan:e.getVisibleCells().length,children:P(e)})})]},e.id)})})]}),Ke&&L&&(0,c.jsx)(re.DataTablePagination,{pageIndex:L.pageIndex,pageSize:L.pageSize,pageCount:L.pageCount,rowCount:L.rowCount,pageSizeOptions:L.pageSizeOptions,showPageSize:L.showPageSize,labels:L.labels,disabled:S,onPageChange:L.onPageChange,onPageSizeChange:L.onPageSizeChange})]})]})}exports.DataTable=d;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/table/index.cjs"),a=require("../feedback/loading-state.cjs"),o=require("../display/data-state.cjs"),ee=require("./data-table-actions-column.cjs"),te=require("./data-table-bulk-actions.cjs"),ne=require("./data-table-column-visibility-menu.cjs"),re=require("./data-table-pagination.cjs"),ie=require("./data-table-toolbar.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("@tanstack/react-table");var ae={compact:`h-8 px-2 py-1.5`,default:`h-10 px-2 py-2`,comfortable:`h-12 px-3 py-3`},u={compact:`px-2 py-1.5`,default:`p-2`,comfortable:`px-3 py-3`};function oe(e,t){return typeof t==`function`?t(e):t}function se(e,t){return typeof t==`function`?t(e):t}function ce(e,t){return typeof t==`function`?t(e):t}function le(e){return e==null||e===``}function d({className:e,columns:d,data:f,title:p,description:m,features:h,search:g,filters:_,summary:v,toolbarActions:y,rowActions:b,bulkActions:x,onRefresh:S,onExport:C,refreshLabel:ue=`Refresh`,exportLabel:de=`Export`,getRowId:fe,isLoading:w=!1,isError:pe=!1,emptyState:me,errorState:he,loadingState:T,loadingVariant:ge=`skeleton`,toolbar:E,toolbarProps:D,pagination:O,sorting:_e,onSortingChange:ve,columnVisibility:ye,onColumnVisibilityChange:be,rowSelection:xe,onRowSelectionChange:Se,enableRowSelection:Ce,renderMobileCard:k,onRowClick:A,onRowDoubleClick:we,getRowDisabled:Te,density:j=`default`,striped:M=!1,bordered:N=!1,stickyHeader:P=!1,skeletonRows:Ee=6,skeletonCellClassName:De,cellFallback:Oe=`-`,tableClassName:ke,tableWrapperClassName:Ae,headerCellClassName:je,cellClassName:Me,rowClassName:Ne,renderExpandedRow:Pe,expanded:Fe,onExpandedChange:Ie,getRowCanExpand:Le,columnPinning:F,onColumnPinningChange:Re,...ze}){let Be=s.useMemo(()=>{let e=d;return!b||h?.rowActions===!1?e:[...e,ee.createDataTableActionsColumn({getActions:b})]},[d,h?.rowActions,b]),I=O===!1?void 0:O,Ve=I?{pageIndex:I.pageIndex,pageSize:I.pageSize}:void 0,L=!!(I&&I.manual!==!1),He=xe??{},R=(0,l.useReactTable)({data:f,columns:Be,getRowId:fe,getCoreRowModel:(0,l.getCoreRowModel)(),getPaginationRowModel:I&&!L?(0,l.getPaginationRowModel)():void 0,manualPagination:L,pageCount:I?.pageCount,state:{sorting:_e,columnVisibility:ye,rowSelection:He,pagination:Ve,expanded:Fe,...F?{columnPinning:F}:{}},onSortingChange:ve,onColumnVisibilityChange:be,onRowSelectionChange:Se,onExpandedChange:Ie,onColumnPinningChange:Re,enableRowSelection:Ce,getRowCanExpand:Le,getExpandedRowModel:(0,l.getExpandedRowModel)()}),z=R.getRowModel().rows,B=R.getSelectedRowModel().rows.map(e=>e.original),Ue=B.length,V=s.useMemo(()=>({table:R,data:f,selectedRows:B}),[f,B,R]),H=R.getVisibleLeafColumns(),We=Math.max(H.length,1),U=typeof E==`function`?E(R):E,W=typeof D==`function`?D(R):D,G=typeof _==`function`?_(V):_,K=typeof v==`function`?v(V):v,Ge=!!(g&&h?.search!==!1),Ke=!!(h?.columnVisibility&&R.getAllLeafColumns().some(e=>e.getCanHide())),q=!!(h?.refresh&&S),J=!!(h?.export&&C),qe=!!(h?.bulkActions!==!1&&x?.length),Y=Ke&&!!(p||m||g||G||K||y||q||J),X=Ge&&g?(0,c.jsx)(r.Input,{type:`search`,value:g.value,onValueChange:g.onValueChange,placeholder:g.placeholder??`Search...`,wrapperClassName:g.wrapperClassName??g.className,inputClassName:g.inputClassName,disabled:g.disabled,clearable:g.clearable,clearLabel:g.clearLabel,searchIcon:g.searchIcon}):void 0,Je=(0,c.jsxs)(c.Fragment,{children:[typeof y==`function`?y(V):y,Y&&(0,c.jsx)(ne.DataTableColumnVisibilityMenu,{table:R}),q&&(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,disabled:w,onClick:()=>S?.(V),children:ue}),J&&(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:()=>C?.(V),children:de})]}),Z=qe?(0,c.jsx)(te.DataTableBulkActions,{rows:B,actions:x??[],selectedLabel:()=>`Actions`,clearLabel:null,onClearSelection:()=>R.resetRowSelection(),hideWhenEmpty:!1}):void 0,Ye=!!(U||W||p||m||X||G||K||y||Y||q||J||Z),Xe=!!(I&&!I.hidden),Q=w&&ge===`skeleton`,Ze=e=>(0,c.jsx)(i.TableRow,{children:(0,c.jsx)(i.TableCell,{colSpan:We,className:`p-0`,children:e})}),Qe=()=>Array.from({length:Math.max(Ee,1)},(e,n)=>(0,c.jsx)(i.TableRow,{"aria-hidden":`true`,children:H.map(e=>(0,c.jsx)(i.TableCell,{className:t.cn(u[j],N&&`border-r last:border-r-0`),children:(0,c.jsx)(`div`,{className:t.cn(`h-4 w-full max-w-40 animate-pulse rounded-md bg-muted`,n%3==1&&`max-w-24`,n%3==2&&`max-w-32`,De)})},`${e.id}-${n}`))},`skeleton-${n}`)),$=Q?null:w?(0,c.jsx)(a.LoadingState,{label:`Loading data...`,...T}):pe?(0,c.jsx)(o.DataState,{status:`error`,title:`Could not load data`,description:`Please try again.`,variant:`plain`,...he}):z.length===0?(0,c.jsx)(o.DataState,{status:`empty`,variant:`plain`,...me}):null;return(0,c.jsxs)(`div`,{"data-slot":`data-table`,className:t.cn(`grid gap-3`,e),...ze,children:[Ye&&(U??(0,c.jsx)(ie.DataTableToolbar,{title:p,description:m,search:X,filters:G,summary:K,actions:Je,selectionActions:Z,selectedCount:Ue,totalCount:I?I.rowCount??f.length:f.length,variant:`plain`,...W})),k&&(0,c.jsx)(`div`,{className:`grid gap-3 md:hidden`,children:$??(Q?(0,c.jsx)(a.LoadingState,{label:`Loading data...`,...T}):z.map(e=>(0,c.jsx)(s.Fragment,{children:k(e)},e.id)))}),(0,c.jsxs)(`div`,{"data-slot":`data-table-wrapper`,"data-density":j,"data-striped":M||void 0,"data-bordered":N||void 0,className:t.cn(`overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur`,k&&`hidden md:block`,Ae),children:[(0,c.jsxs)(i.Table,{containerClassName:`rounded-none border-0 bg-transparent shadow-none ring-0`,className:t.cn(`text-[0.95rem]`,ke),children:[(0,c.jsx)(i.TableHeader,{className:t.cn(P&&`sticky top-0 z-10 shadow-sm backdrop-blur`),children:R.getHeaderGroups().map(e=>(0,c.jsx)(i.TableRow,{children:e.headers.map(e=>(0,c.jsx)(i.TableHead,{style:{width:e.getSize(),...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:P?20:11}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:P?20:11}:{}},className:t.cn(ae[j],`bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground`,P&&`bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur`,e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,N&&`border-r last:border-r-0`,se(e,je)),children:e.isPlaceholder?null:(0,l.flexRender)(e.column.columnDef.header,e.getContext())},e.id))},e.id))}),(0,c.jsx)(i.TableBody,{children:$?Ze($):Q?Qe():z.map((e,n)=>{let r=Te?.(e)??!1;return(0,c.jsxs)(s.Fragment,{children:[(0,c.jsx)(i.TableRow,{"data-state":e.getIsSelected()?`selected`:void 0,"data-striped":M&&n%2==1?`true`:void 0,"data-disabled":r||void 0,className:t.cn(A&&!r&&`cursor-pointer`,!r&&`transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]`,r&&`pointer-events-none opacity-55`,oe(e,Ne)),onClick:()=>{r||A?.(e)},onDoubleClick:()=>{r||we?.(e)},children:e.getVisibleCells().map(e=>{let n=(0,l.flexRender)(e.column.columnDef.cell,e.getContext());return(0,c.jsx)(i.TableCell,{style:{...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:10}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:10}:{}},className:t.cn(u[j],e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,N&&`border-r last:border-r-0`,ce(e,Me)),children:le(n)?Oe:n},e.id)})}),e.getIsExpanded()&&Pe&&(0,c.jsx)(i.TableRow,{className:`bg-muted/50 hover:bg-muted/50`,children:(0,c.jsx)(i.TableCell,{colSpan:e.getVisibleCells().length,children:Pe(e)})})]},e.id)})})]}),Xe&&I&&(0,c.jsx)(re.DataTablePagination,{pageIndex:I.pageIndex,pageSize:I.pageSize,pageCount:I.pageCount,rowCount:I.rowCount,pageSizeOptions:I.pageSizeOptions,showPageSize:I.showPageSize,labels:I.labels,disabled:w,onPageChange:I.onPageChange,onPageSizeChange:I.onPageSizeChange})]})]})}exports.DataTable=d;

package/dist/components/data-table/data-table.d.ts

@@ -4,9 +4,9 @@ import { type DataTableBulkAction } from "@/components/data-table/data-table-bul
 import { type DataTablePaginationProps } from "@/components/data-table/data-table-pagination";
 import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions";
 import { type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar";
-import { type EmptyStateProps } from "@/components/feedback/empty-state";
+import { type DataStateProps } from "@/components/display/data-state";
 import { type LoadingStateProps } from "@/components/feedback/loading-state";
-import { type SearchInputProps } from "@/components/inputs/search-input";
+import { type InputSearchProps } from "@/components/ui/input";
 export type DataTableDensity = "compact" | "default" | "comfortable";
 export type DataTableLoadingVariant = "skeleton" | "state";
 export type DataTableFeatureConfig = {
@@ -17,7 +17,7 @@ export type DataTableFeatureConfig = {
     refresh?: boolean;
     export?: boolean;
 };
-export type DataTableSearchConfig = Pick<SearchInputProps, "value" | "onValueChange" | "placeholder" | "inputClassName" | "disabled" | "clearable" | "clearLabel" | "searchIcon"> & {
+export type DataTableSearchConfig = Pick<InputSearchProps, "value" | "onValueChange" | "placeholder" | "inputClassName" | "disabled" | "clearable" | "clearLabel" | "searchIcon"> & {
     className?: string;
     wrapperClassName?: string;
 };
@@ -39,6 +39,8 @@ export type DataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps<
     description?: React.ReactNode;
     features?: DataTableFeatureConfig;
     search?: DataTableSearchConfig;
+    filters?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode);
+    summary?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode);
     toolbarActions?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode);
     rowActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[];
     bulkActions?: DataTableBulkAction<TData>[];
@@ -49,8 +51,8 @@ export type DataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps<
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
     isLoading?: boolean;
     isError?: boolean;
-    emptyState?: EmptyStateProps;
-    errorState?: EmptyStateProps;
+    emptyState?: Omit<DataStateProps, "status">;
+    errorState?: Omit<DataStateProps, "status">;
     loadingState?: LoadingStateProps;
     loadingVariant?: DataTableLoadingVariant;
     toolbar?: React.ReactNode | ((table: TanStackTable<TData>) => React.ReactNode);
@@ -86,5 +88,5 @@ export type DataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps<
     columnPinning?: ColumnPinningState;
     onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
 };
-declare function DataTable<TData, TValue = unknown>({ className, columns, data, title, description, features, search, toolbarActions, rowActions, bulkActions, onRefresh, onExport, refreshLabel, exportLabel, getRowId, isLoading, isError, emptyState, errorState, loadingState, loadingVariant, toolbar, toolbarProps, pagination, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, rowSelection, onRowSelectionChange, enableRowSelection, renderMobileCard, onRowClick, onRowDoubleClick, getRowDisabled, density, striped, bordered, stickyHeader, skeletonRows, skeletonCellClassName, cellFallback, tableClassName, tableWrapperClassName, headerCellClassName, cellClassName, rowClassName, renderExpandedRow, expanded, onExpandedChange, getRowCanExpand, columnPinning, onColumnPinningChange, ...props }: DataTableProps<TData, TValue>): React.JSX.Element;
+declare function DataTable<TData, TValue = unknown>({ className, columns, data, title, description, features, search, filters, summary, toolbarActions, rowActions, bulkActions, onRefresh, onExport, refreshLabel, exportLabel, getRowId, isLoading, isError, emptyState, errorState, loadingState, loadingVariant, toolbar, toolbarProps, pagination, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, rowSelection, onRowSelectionChange, enableRowSelection, renderMobileCard, onRowClick, onRowDoubleClick, getRowDisabled, density, striped, bordered, stickyHeader, skeletonRows, skeletonCellClassName, cellFallback, tableClassName, tableWrapperClassName, headerCellClassName, cellClassName, rowClassName, renderExpandedRow, expanded, onExpandedChange, getRowCanExpand, columnPinning, onColumnPinningChange, ...props }: DataTableProps<TData, TValue>): React.JSX.Element;
 export { DataTable };