@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/DataTable/DataTableFilters.es.js

@@ -0,0 +1,461 @@
+"use client";
+"use client";
+import { Badge as e } from "../badge/index.es.js";
+import { Button as t } from "../button/index.es.js";
+import { Checkbox as n } from "../checkbox/index.es.js";
+import { Command as r, CommandEmpty as i, CommandGroup as a, CommandInput as o, CommandItem as s } from "../command/index.es.js";
+import { Label as c } from "../label/index.es.js";
+import { Input as l } from "../input/index.es.js";
+import { Select as u, SelectContent as d, SelectItem as f, SelectTrigger as p, SelectValue as m } from "../select/index.es.js";
+import { Popover as h, PopoverContent as g, PopoverTrigger as _ } from "../popover/index.es.js";
+import { Sheet as v, SheetContent as y, SheetDescription as b, SheetHeader as x, SheetTitle as S, SheetTrigger as C } from "../sheet/index.es.js";
+import * as w from "react";
+import { ChevronDown as T, Filter as E, Plus as D, Trash2 as O, X as k } from "lucide-react";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { useTranslation as M } from "react-i18next";
+//#region src/components/DataTable/DataTableFilters.tsx
+function N({ table: N, filters: P, position: F = "top", onFiltersChange: I }) {
+	let { t: L } = M(), [R, z] = w.useState([]), [B, V] = w.useState(!1), H = w.useCallback((e) => {
+		let t = N.getPreFilteredRowModel().rows, n = /* @__PURE__ */ new Set();
+		return t.forEach((t) => {
+			let r = t.getValue(e);
+			r != null && r !== "" && n.add(String(r));
+		}), Array.from(n).sort();
+	}, [N]), U = {
+		text: [
+			{
+				value: "contains",
+				label: L("datatable.filters.contains", { defaultValue: "Contains" })
+			},
+			{
+				value: "equals",
+				label: L("datatable.filters.equals", { defaultValue: "Equals" })
+			},
+			{
+				value: "startsWith",
+				label: L("datatable.filters.startsWith", { defaultValue: "Starts with" })
+			},
+			{
+				value: "endsWith",
+				label: L("datatable.filters.endsWith", { defaultValue: "Ends with" })
+			},
+			{
+				value: "notContains",
+				label: L("datatable.filters.notContains", { defaultValue: "Not contains" })
+			}
+		],
+		select: [{
+			value: "equals",
+			label: L("datatable.filters.equals", { defaultValue: "Equals" })
+		}, {
+			value: "notEquals",
+			label: L("datatable.filters.notEquals", { defaultValue: "Not equals" })
+		}],
+		multiselect: [{
+			value: "in",
+			label: L("datatable.filters.in", { defaultValue: "In" })
+		}, {
+			value: "notIn",
+			label: L("datatable.filters.notIn", { defaultValue: "Not in" })
+		}],
+		range: [
+			{
+				value: "between",
+				label: L("datatable.filters.between", { defaultValue: "Between" })
+			},
+			{
+				value: "greaterThan",
+				label: L("datatable.filters.greaterThan", { defaultValue: "Greater than" })
+			},
+			{
+				value: "lessThan",
+				label: L("datatable.filters.lessThan", { defaultValue: "Less than" })
+			}
+		],
+		date: [
+			{
+				value: "equals",
+				label: L("datatable.filters.equals", { defaultValue: "Equals" })
+			},
+			{
+				value: "before",
+				label: L("datatable.filters.before", { defaultValue: "Before" })
+			},
+			{
+				value: "after",
+				label: L("datatable.filters.after", { defaultValue: "After" })
+			},
+			{
+				value: "between",
+				label: L("datatable.filters.between", { defaultValue: "Between" })
+			}
+		],
+		daterange: [
+			{
+				value: "between",
+				label: L("datatable.filters.between", { defaultValue: "Between" })
+			},
+			{
+				value: "before",
+				label: L("datatable.filters.before", { defaultValue: "Before" })
+			},
+			{
+				value: "after",
+				label: L("datatable.filters.after", { defaultValue: "After" })
+			}
+		],
+		checkbox: [{
+			value: "equals",
+			label: L("datatable.filters.equals", { defaultValue: "Equals" })
+		}],
+		number: [
+			{
+				value: "equals",
+				label: L("datatable.filters.equals", { defaultValue: "Equals" })
+			},
+			{
+				value: "notEquals",
+				label: L("datatable.filters.notEquals", { defaultValue: "Not equals" })
+			},
+			{
+				value: "greaterThan",
+				label: L("datatable.filters.greaterThan", { defaultValue: "Greater than" })
+			},
+			{
+				value: "lessThan",
+				label: L("datatable.filters.lessThan", { defaultValue: "Less than" })
+			},
+			{
+				value: "between",
+				label: L("datatable.filters.between", { defaultValue: "Between" })
+			}
+		],
+		boolean: [{
+			value: "equals",
+			label: L("datatable.filters.equals", { defaultValue: "Equals" })
+		}, {
+			value: "notEquals",
+			label: L("datatable.filters.notEquals", { defaultValue: "Not equals" })
+		}]
+	}, W = (e, t, n) => {
+		let r = N.getColumn(e.column || e.id);
+		if (!r) return;
+		let i = {
+			columnId: e.column || e.id,
+			operator: t,
+			value: n,
+			label: e.label
+		};
+		z((e) => [...e, i]), r.setFilterValue({
+			operator: t,
+			value: n
+		}), I?.([...R, i]);
+	}, G = (e) => {
+		let t = R[e], n = N.getColumn(t.columnId);
+		n && n.setFilterValue(void 0);
+		let r = R.filter((t, n) => n !== e);
+		z(r), I?.(r);
+	}, K = () => {
+		R.forEach((e) => {
+			let t = N.getColumn(e.columnId);
+			t && t.setFilterValue(void 0);
+		}), z([]), I?.([]);
+	}, q = (v) => {
+		let [y, b] = w.useState(U[v.type]?.[0]?.value || "equals"), x = () => v.defaultValue === void 0 ? v.type === "range" ? {
+			min: "",
+			max: ""
+		} : v.type === "daterange" ? {
+			from: "",
+			to: ""
+		} : v.type === "checkbox" ? !1 : "" : v.defaultValue, [S, C] = w.useState(x()), [E, O] = w.useState([]), [k, M] = w.useState(!1), N = v.column ? H(v.column) : [];
+		return /* @__PURE__ */ j("div", {
+			className: "space-y-3 p-4 border rounded-lg",
+			children: [
+				/* @__PURE__ */ j("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ A(c, {
+						className: "text-sm font-medium",
+						children: v.label
+					}), /* @__PURE__ */ A(e, {
+						variant: "outline",
+						className: "text-xs",
+						children: v.type
+					})]
+				}),
+				U[v.type] && U[v.type].length > 1 && /* @__PURE__ */ j(u, {
+					value: y,
+					onValueChange: b,
+					children: [/* @__PURE__ */ A(p, {
+						className: "h-9",
+						children: /* @__PURE__ */ A(m, {})
+					}), /* @__PURE__ */ A(d, { children: U[v.type].map((e) => /* @__PURE__ */ A(f, {
+						value: e.value,
+						children: e.label
+					}, e.value)) })]
+				}),
+				v.type === "text" && /* @__PURE__ */ A("div", {
+					className: "space-y-2",
+					children: /* @__PURE__ */ j(h, {
+						open: k,
+						onOpenChange: M,
+						children: [/* @__PURE__ */ A(_, {
+							asChild: !0,
+							children: /* @__PURE__ */ A(l, {
+								placeholder: v.placeholder || L("datatable.filters.enterValue", { defaultValue: "Enter value..." }),
+								value: S,
+								onChange: (e) => {
+									C(e.target.value), M(!0);
+								},
+								className: "h-9"
+							})
+						}), N.length > 0 && S && /* @__PURE__ */ A(g, {
+							className: "w-[--radix-popover-trigger-width] p-0",
+							align: "start",
+							children: /* @__PURE__ */ j(r, { children: [
+								/* @__PURE__ */ A(o, { placeholder: L("datatable.filters.search", { defaultValue: "Search..." }) }),
+								/* @__PURE__ */ A(i, { children: L("datatable.filters.noResults", { defaultValue: "No results" }) }),
+								/* @__PURE__ */ A(a, {
+									className: "max-h-64 overflow-auto",
+									children: N.filter((e) => e.toLowerCase().includes(S.toLowerCase())).slice(0, 50).map((e) => /* @__PURE__ */ A(s, {
+										onSelect: () => {
+											C(e), M(!1);
+										},
+										children: e
+									}, e))
+								})
+							] })
+						})]
+					})
+				}),
+				v.type === "select" && /* @__PURE__ */ j(u, {
+					value: S,
+					onValueChange: C,
+					children: [/* @__PURE__ */ A(p, {
+						className: "h-9",
+						children: /* @__PURE__ */ A(m, { placeholder: v.placeholder })
+					}), /* @__PURE__ */ A(d, { children: (v.options || N.map((e) => ({
+						label: e,
+						value: e
+					}))).map((e) => /* @__PURE__ */ A(f, {
+						value: String(e.value),
+						children: e.label
+					}, e.value)) })]
+				}),
+				v.type === "multiselect" && /* @__PURE__ */ j(h, { children: [/* @__PURE__ */ A(_, {
+					asChild: !0,
+					children: /* @__PURE__ */ j(t, {
+						variant: "outline",
+						className: "w-full justify-between h-9",
+						children: [E.length > 0 ? `${E.length} ${L("datatable.filters.selected", { defaultValue: "selected" })}` : v.placeholder || L("datatable.filters.selectValues", { defaultValue: "Select values..." }), /* @__PURE__ */ A(T, { className: "ml-2 h-4 w-4 opacity-50" })]
+					})
+				}), /* @__PURE__ */ A(g, {
+					className: "w-[--radix-popover-trigger-width] p-0",
+					align: "start",
+					children: /* @__PURE__ */ j(r, { children: [
+						/* @__PURE__ */ A(o, { placeholder: L("datatable.filters.search", { defaultValue: "Search..." }) }),
+						/* @__PURE__ */ A(i, { children: L("datatable.filters.noResults", { defaultValue: "No results" }) }),
+						/* @__PURE__ */ A(a, {
+							className: "max-h-64 overflow-auto",
+							children: N.map((e) => /* @__PURE__ */ j(s, {
+								onSelect: () => {
+									O((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+								},
+								children: [/* @__PURE__ */ A(n, {
+									checked: E.includes(e),
+									className: "mr-2"
+								}), e]
+							}, e))
+						})
+					] })
+				})] }),
+				v.type === "date" && /* @__PURE__ */ A(l, {
+					type: "date",
+					value: S,
+					onChange: (e) => C(e.target.value),
+					className: "h-9"
+				}),
+				v.type === "range" && /* @__PURE__ */ j("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ A(l, {
+						type: "number",
+						placeholder: "Min",
+						value: S.min || "",
+						onChange: (e) => C({
+							...S,
+							min: e.target.value
+						}),
+						className: "h-9"
+					}), /* @__PURE__ */ A(l, {
+						type: "number",
+						placeholder: "Max",
+						value: S.max || "",
+						onChange: (e) => C({
+							...S,
+							max: e.target.value
+						}),
+						className: "h-9"
+					})]
+				}),
+				v.type === "daterange" && /* @__PURE__ */ j("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ A(l, {
+						type: "date",
+						placeholder: L("datatable.filters.from", { defaultValue: "From" }),
+						value: S.from || "",
+						onChange: (e) => C({
+							...S,
+							from: e.target.value
+						}),
+						className: "h-9"
+					}), /* @__PURE__ */ A(l, {
+						type: "date",
+						placeholder: L("datatable.filters.to", { defaultValue: "To" }),
+						value: S.to || "",
+						onChange: (e) => C({
+							...S,
+							to: e.target.value
+						}),
+						className: "h-9"
+					})]
+				}),
+				v.type === "checkbox" && /* @__PURE__ */ j("div", {
+					className: "flex items-center space-x-2",
+					children: [/* @__PURE__ */ A(n, {
+						id: `checkbox-${v.id}`,
+						checked: S === !0,
+						onCheckedChange: (e) => C(e === !0)
+					}), /* @__PURE__ */ A(c, {
+						htmlFor: `checkbox-${v.id}`,
+						className: "text-sm font-normal",
+						children: v.placeholder || L("datatable.filters.checked", { defaultValue: "Checked" })
+					})]
+				}),
+				/* @__PURE__ */ j(t, {
+					onClick: () => {
+						let e = v.type === "multiselect" ? E : S, t = !1;
+						if (v.type === "multiselect") t = Array.isArray(e) && e.length > 0;
+						else if (v.type === "range") {
+							let n = e;
+							t = n.min !== "" || n.max !== "";
+						} else if (v.type === "daterange") {
+							let n = e;
+							t = n.from !== "" || n.to !== "";
+						} else t = v.type === "checkbox" ? !0 : e !== "" && e != null;
+						t && (W(v, y, e), C(x()), O([]), M(!1));
+					},
+					size: "sm",
+					className: "w-full",
+					children: [/* @__PURE__ */ A(D, { className: "h-4 w-4 mr-2" }), L("datatable.filters.apply", { defaultValue: "Apply filter" })]
+				})
+			]
+		});
+	};
+	if (!P || P.length === 0) return null;
+	let J = /* @__PURE__ */ j("div", {
+		className: "space-y-4",
+		children: [R.length > 0 && /* @__PURE__ */ j("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ j("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ A(c, {
+					className: "text-sm text-muted-foreground",
+					children: L("datatable.filters.active", { defaultValue: "Filtres actifs" })
+				}), /* @__PURE__ */ j(t, {
+					variant: "ghost",
+					size: "sm",
+					onClick: K,
+					children: [/* @__PURE__ */ A(O, { className: "h-3 w-3 mr-1" }), L("datatable.filters.clearAll", { defaultValue: "Tout effacer" })]
+				})]
+			}), /* @__PURE__ */ A("div", {
+				className: "space-y-1",
+				children: R.map((e, n) => /* @__PURE__ */ j("div", {
+					className: "flex items-center justify-between p-2 bg-muted rounded-md text-sm",
+					children: [/* @__PURE__ */ j("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ A("span", {
+								className: "font-medium",
+								children: e.label
+							}),
+							/* @__PURE__ */ A("span", {
+								className: "text-muted-foreground mx-2",
+								children: e.operator
+							}),
+							/* @__PURE__ */ A("span", {
+								className: "text-primary truncate",
+								children: Array.isArray(e.value) ? e.value.join(", ") : String(e.value)
+							})
+						]
+					}), /* @__PURE__ */ A(t, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-6 w-6 shrink-0",
+						onClick: () => G(n),
+						children: /* @__PURE__ */ A(k, { className: "h-3 w-3" })
+					})]
+				}, n))
+			})]
+		}), /* @__PURE__ */ j("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ A(c, {
+				className: "text-sm text-muted-foreground",
+				children: L("datatable.filters.available", { defaultValue: "Filtres disponibles" })
+			}), P.map((e) => /* @__PURE__ */ A("div", { children: q(e) }, e.id))]
+		})]
+	}), Y = /* @__PURE__ */ j(t, {
+		variant: "outline",
+		size: "sm",
+		children: [
+			/* @__PURE__ */ A(E, { className: "h-4 w-4 mr-2" }),
+			L("datatable.filters.title", { defaultValue: "Filtres" }),
+			R.length > 0 && /* @__PURE__ */ A(e, {
+				variant: "secondary",
+				className: "ml-2",
+				children: R.length
+			})
+		]
+	});
+	return F === "right" || F === "left" ? /* @__PURE__ */ j(v, {
+		open: B,
+		onOpenChange: V,
+		children: [/* @__PURE__ */ A(C, {
+			asChild: !0,
+			children: Y
+		}), /* @__PURE__ */ j(y, {
+			side: F,
+			className: "w-[400px] sm:w-[540px] overflow-y-auto",
+			children: [/* @__PURE__ */ j(x, { children: [/* @__PURE__ */ j(S, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ A(E, { className: "h-5 w-5" }), L("datatable.filters.title", { defaultValue: "Filtres" })]
+			}), /* @__PURE__ */ A(b, { children: L("datatable.filters.description", { defaultValue: "Appliquez des filtres pour affiner les résultats" }) })] }), /* @__PURE__ */ A("div", {
+				className: "mt-6",
+				children: J
+			})]
+		})]
+	}) : /* @__PURE__ */ j(h, {
+		open: B,
+		onOpenChange: V,
+		children: [/* @__PURE__ */ A(_, {
+			asChild: !0,
+			children: Y
+		}), /* @__PURE__ */ A(g, {
+			className: "w-[400px] max-h-[600px] overflow-y-auto",
+			align: F === "top" ? "start" : "end",
+			children: /* @__PURE__ */ j("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center justify-between",
+					children: /* @__PURE__ */ j("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ A(E, { className: "h-4 w-4" }), /* @__PURE__ */ A("h4", {
+							className: "font-semibold text-sm",
+							children: L("datatable.filters.title", { defaultValue: "Filtres" })
+						})]
+					})
+				}), J]
+			})
+		})]
+	});
+}
+//#endregion
+export { N as DataTableFilters };

package/dist/components/DataTable/DataTableGrouping.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../button/index.cjs.js"),n=require("./utils.cjs.js");let r=require("react");r=e.__toESM(r);let i=require("lucide-react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-table");function s({row:e,table:s,className:c}){let[l,u]=r.useState(e.getIsExpanded()),d=r.useCallback(()=>{u(!l),e.toggleExpanded()},[l,e]);e.getValue(e.groupingColumnId);let f=e.subRows.length;return(0,a.jsxs)(`div`,{className:n.cn(`flex items-center gap-2 py-2`,c),children:[(0,a.jsx)(t.Button,{variant:`ghost`,size:`sm`,onClick:d,className:`h-6 w-6 p-0`,children:l?(0,a.jsx)(i.ChevronDown,{className:`h-4 w-4`}):(0,a.jsx)(i.ChevronRight,{className:`h-4 w-4`})}),(0,a.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`font-medium`,children:(0,o.flexRender)(e.groupingColumn.columnDef.cell,e.getGroupingValue())}),(0,a.jsxs)(`span`,{className:`text-sm text-muted-foreground`,children:[`(`,f,` `,f===1?`item`:`items`,`)`]})]})]})}function c({row:e,table:t,className:r}){let i=e.getAggregationValue();return i?(0,a.jsx)(`div`,{className:n.cn(`flex items-center gap-4 py-2 bg-muted/50`,r),children:Object.entries(i).map(([e,t])=>(0,a.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,a.jsxs)(`span`,{className:`text-sm font-medium`,children:[e,`:`]}),(0,a.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:typeof t==`number`?t.toLocaleString():String(t)})]},e))}):null}function l({table:e,groupingColumns:i,onGroupingChange:o,className:s}){let[c,l]=r.useState(i),u=r.useCallback(e=>{let t=c.includes(e)?c.filter(t=>t!==e):[...c,e];l(t),o(t)},[c,o]),d=r.useCallback(()=>{l([]),o([])},[o]);return(0,a.jsxs)(`div`,{className:n.cn(`flex items-center gap-2`,s),children:[(0,a.jsx)(`span`,{className:`text-sm font-medium`,children:`Group by:`}),e.getAllColumns().filter(e=>e.getCanGroup()).map(e=>(0,a.jsx)(t.Button,{variant:c.includes(e.id)?`default`:`outline`,size:`sm`,onClick:()=>u(e.id),children:e.columnDef.header},e.id)),c.length>0&&(0,a.jsx)(t.Button,{variant:`ghost`,size:`sm`,onClick:d,children:`Clear`})]})}exports.DataTableGroupTotals=c,exports.DataTableGrouping=s,exports.DataTableGroupingControls=l;

package/dist/components/DataTable/DataTableGrouping.d.ts

@@ -1,25 +1,36 @@
+import { Row, Table, Column } from "@tanstack/react-table";
+/**
+ * Métadonnées de groupe accédées au runtime mais absentes de l'API publique
+ * `Row` de TanStack v8 (conservées telles quelles pour ne pas changer le runtime).
+ */
+type GroupedRow<TData> = Omit<Row<TData>, "groupingColumnId"> & {
+    groupingColumnId: string;
+    groupingColumn: Column<TData, unknown>;
+    getAggregationValue: () => Record<string, unknown> | null | undefined;
+};
 /**
  * Composant pour l'affichage des groupes dans le DataTable
  */
 export declare function DataTableGrouping<TData>({ row, table, className, }: {
-    row: any;
-    table: any;
+    row: GroupedRow<TData>;
+    table: Table<TData>;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Composant pour les totaux de groupe
  */
 export declare function DataTableGroupTotals<TData>({ row, table, className, }: {
-    row: any;
-    table: any;
+    row: GroupedRow<TData>;
+    table: Table<TData>;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;
 /**
  * Composant pour les contrôles de groupement
  */
 export declare function DataTableGroupingControls<TData>({ table, groupingColumns, onGroupingChange, className, }: {
-    table: any;
+    table: Table<TData>;
     groupingColumns: string[];
     onGroupingChange: (columns: string[]) => void;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataTable/DataTableGrouping.es.js

@@ -0,0 +1,88 @@
+"use client";
+"use client";
+import { Button as e } from "../button/index.es.js";
+import { cn as t } from "./utils.es.js";
+import * as n from "react";
+import { ChevronDown as r, ChevronRight as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { flexRender as s } from "@tanstack/react-table";
+//#region src/components/DataTable/DataTableGrouping.tsx
+function c({ row: c, table: l, className: u }) {
+	let [d, f] = n.useState(c.getIsExpanded()), p = n.useCallback(() => {
+		f(!d), c.toggleExpanded();
+	}, [d, c]);
+	c.getValue(c.groupingColumnId);
+	let m = c.subRows.length;
+	return /* @__PURE__ */ o("div", {
+		className: t("flex items-center gap-2 py-2", u),
+		children: [/* @__PURE__ */ a(e, {
+			variant: "ghost",
+			size: "sm",
+			onClick: p,
+			className: "h-6 w-6 p-0",
+			children: a(d ? r : i, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ o("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ a("span", {
+				className: "font-medium",
+				children: s(c.groupingColumn.columnDef.cell, c.getGroupingValue())
+			}), /* @__PURE__ */ o("span", {
+				className: "text-sm text-muted-foreground",
+				children: [
+					"(",
+					m,
+					" ",
+					m === 1 ? "item" : "items",
+					")"
+				]
+			})]
+		})]
+	});
+}
+function l({ row: e, table: n, className: r }) {
+	let i = e.getAggregationValue();
+	return i ? /* @__PURE__ */ a("div", {
+		className: t("flex items-center gap-4 py-2 bg-muted/50", r),
+		children: Object.entries(i).map(([e, t]) => /* @__PURE__ */ o("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ o("span", {
+				className: "text-sm font-medium",
+				children: [e, ":"]
+			}), /* @__PURE__ */ a("span", {
+				className: "text-sm text-muted-foreground",
+				children: typeof t == "number" ? t.toLocaleString() : String(t)
+			})]
+		}, e))
+	}) : null;
+}
+function u({ table: r, groupingColumns: i, onGroupingChange: s, className: c }) {
+	let [l, u] = n.useState(i), d = n.useCallback((e) => {
+		let t = l.includes(e) ? l.filter((t) => t !== e) : [...l, e];
+		u(t), s(t);
+	}, [l, s]), f = n.useCallback(() => {
+		u([]), s([]);
+	}, [s]);
+	return /* @__PURE__ */ o("div", {
+		className: t("flex items-center gap-2", c),
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: "text-sm font-medium",
+				children: "Group by:"
+			}),
+			r.getAllColumns().filter((e) => e.getCanGroup()).map((t) => /* @__PURE__ */ a(e, {
+				variant: l.includes(t.id) ? "default" : "outline",
+				size: "sm",
+				onClick: () => d(t.id),
+				children: t.columnDef.header
+			}, t.id)),
+			l.length > 0 && /* @__PURE__ */ a(e, {
+				variant: "ghost",
+				size: "sm",
+				onClick: f,
+				children: "Clear"
+			})
+		]
+	});
+}
+//#endregion
+export { l as DataTableGroupTotals, c as DataTableGrouping, u as DataTableGroupingControls };

package/dist/components/DataTable/DataTablePagination.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../button/index.cjs.js"),n=require("../select/index.cjs.js");let r=require("react");r=e.__toESM(r);let i=require("lucide-react"),a=require("react/jsx-runtime"),o=require("react-i18next");function s({table:e,pageSizeOptions:r=[25,50,100,500],showInfo:s=!0,onPageChange:c,onPageSizeChange:l}){let{t:u}=(0,o.useTranslation)(),d=e.getState().pagination.pageIndex,f=e.getState().pagination.pageSize,p=e.getPageCount(),m=e.getFilteredRowModel().rows.length,h=d*f+1,g=Math.min((d+1)*f,m);return(0,a.jsxs)(`div`,{className:`flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t`,children:[s&&(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:m>0?(0,a.jsxs)(a.Fragment,{children:[u(`datatable.pagination.showing`,{defaultValue:`Showing`}),` `,h,` `,u(`datatable.pagination.to`,{defaultValue:`to`}),` `,g,` `,u(`datatable.pagination.of`,{defaultValue:`of`}),` `,m,` `,u(`datatable.pagination.results`,{defaultValue:`results`})]}):u(`datatable.pagination.noResults`,{defaultValue:`No results`})}),(0,a.jsxs)(`div`,{className:`flex items-center gap-6`,children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`text-sm text-muted-foreground whitespace-nowrap`,children:u(`datatable.pagination.rowsPerPage`,{defaultValue:`Rows per page`})}),(0,a.jsxs)(n.Select,{value:`${f}`,onValueChange:t=>{let n=Number(t);e.setPageSize(n),l?.(n)},children:[(0,a.jsx)(n.SelectTrigger,{className:`h-8 w-[70px]`,children:(0,a.jsx)(n.SelectValue,{placeholder:f})}),(0,a.jsx)(n.SelectContent,{side:`top`,children:r.map(e=>(0,a.jsx)(n.SelectItem,{value:`${e}`,children:e},e))})]})]}),(0,a.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,a.jsxs)(`span`,{className:`text-sm text-muted-foreground mr-2`,children:[u(`datatable.pagination.page`,{defaultValue:`Page`}),` `,d+1,` `,u(`datatable.pagination.of`,{defaultValue:`of`}),` `,p]}),(0,a.jsxs)(t.Button,{variant:`outline`,size:`icon`,className:`h-8 w-8`,onClick:()=>{e.setPageIndex(0),c?.(0)},disabled:!e.getCanPreviousPage(),children:[(0,a.jsx)(i.ChevronsLeft,{className:`h-4 w-4`}),(0,a.jsx)(`span`,{className:`sr-only`,children:u(`datatable.pagination.firstPage`,{defaultValue:`First page`})})]}),(0,a.jsxs)(t.Button,{variant:`outline`,size:`icon`,className:`h-8 w-8`,onClick:()=>{let t=d-1;e.previousPage(),c?.(t)},disabled:!e.getCanPreviousPage(),children:[(0,a.jsx)(i.ChevronLeft,{className:`h-4 w-4`}),(0,a.jsx)(`span`,{className:`sr-only`,children:u(`datatable.pagination.previousPage`,{defaultValue:`Previous page`})})]}),(0,a.jsxs)(t.Button,{variant:`outline`,size:`icon`,className:`h-8 w-8`,onClick:()=>{let t=d+1;e.nextPage(),c?.(t)},disabled:!e.getCanNextPage(),children:[(0,a.jsx)(i.ChevronRight,{className:`h-4 w-4`}),(0,a.jsx)(`span`,{className:`sr-only`,children:u(`datatable.pagination.nextPage`,{defaultValue:`Next page`})})]}),(0,a.jsxs)(t.Button,{variant:`outline`,size:`icon`,className:`h-8 w-8`,onClick:()=>{e.setPageIndex(p-1),c?.(p-1)},disabled:!e.getCanNextPage(),children:[(0,a.jsx)(i.ChevronsRight,{className:`h-4 w-4`}),(0,a.jsx)(`span`,{className:`sr-only`,children:u(`datatable.pagination.lastPage`,{defaultValue:`Last page`})})]})]})]})]})}exports.DataTablePagination=s;

package/dist/components/DataTable/DataTablePagination.d.ts

@@ -3,6 +3,8 @@ interface DataTablePaginationProps<TData> {
     table: Table<TData>;
     pageSizeOptions?: number[];
     showInfo?: boolean;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
 }
-export declare function DataTablePagination<TData>({ table, pageSizeOptions, showInfo, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination<TData>({ table, pageSizeOptions, showInfo, onPageChange, onPageSizeChange, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};