@tulip-systems/core 0.8.3 → 0.10.0

package/dist/src/modules/data-tables/components/cell/select.client.d.mts

@@ -0,0 +1,10 @@
+import { TableColumnDef } from "../../lib/types.mjs";
+import "../../../../../data-tables.mjs";
+
+//#region src/modules/data-tables/components/cell/select.client.d.ts
+/**
+ * Create a new column with the select checkbox
+ */
+declare const createTableSelectCell: <TData>(newColumn?: Partial<TableColumnDef<TData>>) => TableColumnDef<TData>;
+//#endregion
+export { createTableSelectCell };

package/dist/src/modules/data-tables/components/cell/select.client.mjs

@@ -0,0 +1,36 @@
+import { Checkbox } from "../../../../components/ui/checkbox.client.mjs";
+import { TableCell } from "../table.mjs";
+import { createTableCell } from "../../lib/helpers/create-column.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/cell/select.client.tsx
+/**
+* Create a new column with the select checkbox
+*/
+const createTableSelectCell = createTableCell({
+	id: "select",
+	header: ({ table }) => /* @__PURE__ */ jsx("div", {
+		className: "flex w-full items-center justify-center",
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: table.getIsAllPageRowsSelected(),
+			onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+			"aria-label": "Select all"
+		})
+	}),
+	cell: ({ row }) => /* @__PURE__ */ jsx(TableCell, {
+		className: "w-8",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex w-full items-center justify-center",
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: row.getIsSelected(),
+				onCheckedChange: (value) => row.toggleSelected(!!value),
+				"aria-label": "Select row"
+			})
+		})
+	}),
+	enableHiding: false,
+	enableSorting: false
+});
+
+//#endregion
+export { createTableSelectCell };

package/dist/src/modules/data-tables/components/column-header.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Column } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/components/column-header.d.ts
+interface TableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+declare function TableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className
+}: TableColumnHeaderProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableColumnHeader };

package/dist/src/modules/data-tables/components/column-header.mjs

@@ -0,0 +1,46 @@
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../components/ui/dropdown-menu.client.mjs";
+import { ChevronsUpDown, RotateCcwIcon, SortAsc, SortDesc } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/column-header.tsx
+function TableColumnHeader({ column, title, className }) {
+	if (!column.getCanSort()) return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		children: title
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center space-x-2", className),
+		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				type: "button",
+				variant: "ghost",
+				className: "-ml-3 h-8 data-[state=open]:bg-accent",
+				children: [/* @__PURE__ */ jsx("span", { children: title }), column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(SortDesc, { className: "ml-2 h-4 w-4" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(SortAsc, { className: "ml-2 h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4" })]
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			children: [
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => column.toggleSorting(false),
+					children: [/* @__PURE__ */ jsx(SortAsc, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), "Asc"]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => column.toggleSorting(true),
+					children: [/* @__PURE__ */ jsx(SortDesc, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), "Desc"]
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => column.clearSorting(),
+					children: [/* @__PURE__ */ jsx(RotateCcwIcon, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), "Clear"]
+				})
+			]
+		})] })
+	});
+}
+
+//#endregion
+export { TableColumnHeader };

package/dist/src/modules/data-tables/components/filters/combobox.client.d.mts

@@ -0,0 +1,27 @@
+import { LucideIcon } from "lucide-react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/combobox.client.d.ts
+type TableFilterComboboxOption = {
+  label: string;
+  value: string;
+  className?: string;
+  icon?: LucideIcon;
+  total?: number;
+};
+type TableFilterComboboxProps<TValue extends string = string> = {
+  title?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<TValue[] | null>;
+  };
+  options: TableFilterComboboxOption[];
+};
+declare function TableFilterCombobox<TValue extends string>({
+  title,
+  filter,
+  options
+}: TableFilterComboboxProps<TValue>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterCombobox, TableFilterComboboxOption, TableFilterComboboxProps };

package/dist/src/modules/data-tables/components/filters/combobox.client.mjs

@@ -0,0 +1,97 @@
+"use client";
+
+import { cn } from "../../../../lib/utils/cn.mjs";
+import { Badge } from "../../../../components/ui/badge.mjs";
+import { Button } from "../../../../components/ui/button.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../components/ui/popover.client.mjs";
+import { Separator } from "../../../../components/ui/separator.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandItemCheck, CommandList, CommandSeparator } from "../../../../components/ui/command.client.mjs";
+import { ListFilter } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { startTransition, useOptimistic } from "react";
+import { useQueryState } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/combobox.client.tsx
+function TableFilterCombobox({ title, filter, options }) {
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	const [selectedValues, setSelectedValues] = useOptimistic(new Set(Array.isArray(query) ? query : []));
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			className: "h-8 border-dashed",
+			children: [
+				/* @__PURE__ */ jsx(ListFilter, { className: "mr-1 h-4 w-4" }),
+				title,
+				selectedValues?.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "mx-2 h-full"
+					}),
+					/* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal lg:hidden",
+						children: selectedValues.size
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "hidden space-x-1 lg:flex",
+						children: selectedValues.size > 2 ? /* @__PURE__ */ jsxs(Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: [selectedValues.size, " selected"]
+						}) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: option.label
+						}, option.value))
+					})
+				] })
+			]
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		className: "w-[20rem] p-0",
+		align: "start",
+		children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: title }), /* @__PURE__ */ jsxs(CommandList, { children: [
+			/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+			/* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+				const Icon = option.icon;
+				return /* @__PURE__ */ jsxs(CommandItem, {
+					value: option.value,
+					"data-checked": selectedValues.has(option.value),
+					onSelect: () => startTransition(() => {
+						const newSelectedValues = new Set(selectedValues);
+						if (newSelectedValues.has(option.value)) newSelectedValues.delete(option.value);
+						else newSelectedValues.add(option.value);
+						setSelectedValues(newSelectedValues);
+						const filterValues = Array.from(newSelectedValues);
+						setQuery(filterValues.length ? filterValues : null);
+					}),
+					children: [
+						/* @__PURE__ */ jsx(CommandItemCheck, {}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 items-center gap-2",
+							children: [Icon && /* @__PURE__ */ jsx(Icon, { className: cn("size-4", option.className) }), /* @__PURE__ */ jsx("span", {
+								className: cn(option.className),
+								children: option.label
+							})]
+						}),
+						option.total !== void 0 && /* @__PURE__ */ jsx("span", {
+							className: "size-4 justify-self-end font-mono text-muted-foreground/50 text-xs",
+							children: option.total
+						})
+					]
+				}, option.value);
+			}) }),
+			selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CommandSeparator, {}), /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(CommandItem, {
+				onSelect: () => setQuery(null),
+				className: "justify-center text-center",
+				children: "Clear filters"
+			}) })] })
+		] })] })
+	})] });
+}
+
+//#endregion
+export { TableFilterCombobox };

package/dist/src/modules/data-tables/components/filters/date-range.client.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/date-range.client.d.ts
+type TableFilterDateRangeValue = [Date, Date] | null;
+type TableFilterDateRangeProps = {
+  title?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<[Date, Date] | null>;
+  };
+  presets?: TableFilterDateRangePreset[];
+};
+type TableFilterDateRangePreset = {
+  label: string;
+  value: [Date, Date];
+};
+declare function TableFilterDateRange({
+  title,
+  filter,
+  presets
+}: TableFilterDateRangeProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterDateRange, TableFilterDateRangePreset, TableFilterDateRangeProps, TableFilterDateRangeValue };

package/dist/src/modules/data-tables/components/filters/date-range.client.mjs

@@ -0,0 +1,99 @@
+"use client";
+
+import { CalendarIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { startTransition, useState } from "react";
+import { format } from "date-fns";
+import { useQueryState } from "nuqs";
+import { Badge, Button, Separator } from "@tulip-systems/core/components";
+import { Calendar as Calendar$1, Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/core/components/client";
+
+//#region src/modules/data-tables/components/filters/date-range.client.tsx
+function TableFilterDateRange({ title, filter, presets }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	const from = query?.[0] ?? null;
+	const until = query?.[1] ?? null;
+	const selectedRange = from || until ? {
+		from: from ?? void 0,
+		to: until ?? void 0
+	} : void 0;
+	const label = formatDateRange(from, until);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				className: "h-8 border-dashed",
+				children: [
+					/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-1 h-4 w-4" }),
+					title,
+					label && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "mx-2 h-full"
+					}), /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal",
+						children: label
+					})] })
+				]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3 p-3 lg:flex-row",
+				children: [presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-40 flex-col gap-1 lg:border-r lg:pr-3",
+					children: presets.map((preset) => /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						className: "justify-start",
+						onClick: () => {
+							setQuery(preset.value, { startTransition });
+							setOpen(false);
+						},
+						children: preset.label
+					}, preset.label))
+				}), /* @__PURE__ */ jsx(Calendar$1, {
+					mode: "range",
+					numberOfMonths: 2,
+					selected: selectedRange,
+					onSelect: (range) => {
+						if (range?.from && range?.to) setQuery([range.from, range.to], { startTransition });
+						else if (range?.from) setQuery([range.from, range.from], { startTransition });
+						else setQuery(null, { startTransition });
+					},
+					autoFocus: true
+				})]
+			}), label && /* @__PURE__ */ jsxs("div", {
+				className: "w-full space-y-2 p-1.5",
+				children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					type: "button",
+					variant: "ghost",
+					onClick: () => {
+						setOpen(false);
+						setQuery(null, { startTransition });
+					},
+					className: "w-full text-center",
+					children: "Clear filters"
+				})]
+			})]
+		})]
+	});
+}
+function formatDateRange(from, until) {
+	if (from && until) return `${format(from, "dd/MM/yyyy")} tot ${format(until, "dd/MM/yyyy")}`;
+	if (from) return `Vanaf ${format(from, "dd/MM/yyyy")}`;
+	if (until) return `Tot ${format(until, "dd/MM/yyyy")}`;
+	return null;
+}
+
+//#endregion
+export { TableFilterDateRange };

package/dist/src/modules/data-tables/components/filters/search.client.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/search.client.d.ts
+type TableFilterSearchProps = {
+  placeholder?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<string | null>;
+  };
+};
+declare function TableFilterSearch({
+  placeholder,
+  filter
+}: TableFilterSearchProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterSearch, TableFilterSearchProps };

package/dist/src/modules/data-tables/components/filters/search.client.mjs

@@ -0,0 +1,32 @@
+"use client";
+
+import { Input } from "../../../../components/ui/input.mjs";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { startTransition } from "react";
+import { debounce, useQueryState } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/search.client.tsx
+function TableFilterSearch({ placeholder, filter }) {
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+			defaultValue: query ?? void 0,
+			placeholder,
+			className: "h-8 w-[150px] pl-8 lg:w-[250px]",
+			onChange: (e) => {
+				setQuery(e.target.value || null, {
+					limitUrlUpdates: e.target.value === "" ? void 0 : debounce(350),
+					startTransition
+				});
+			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter") setQuery(e.currentTarget.value || null, { startTransition });
+			}
+		})]
+	});
+}
+
+//#endregion
+export { TableFilterSearch };

package/dist/src/modules/data-tables/components/filters/slider.client.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/slider.client.d.ts
+type TableFilterSliderProps = {
+  title?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<[number, number] | null>;
+  };
+  options?: {
+    min: number;
+    max: number;
+  };
+};
+declare function TableFilterSlider({
+  title,
+  filter,
+  options
+}: TableFilterSliderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterSlider, TableFilterSliderProps };

package/dist/src/modules/data-tables/components/filters/slider.client.mjs

@@ -0,0 +1,128 @@
+"use client";
+
+import { Badge } from "../../../../components/ui/badge.mjs";
+import { Button } from "../../../../components/ui/button.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../components/ui/popover.client.mjs";
+import { Input } from "../../../../components/ui/input.mjs";
+import { Separator } from "../../../../components/ui/separator.mjs";
+import { Slider } from "../../../../components/ui/slider.mjs";
+import { SlidersHorizontal } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { startTransition, useState } from "react";
+import { useQueryState } from "nuqs";
+import { useDebouncedCallback } from "use-debounce";
+
+//#region src/modules/data-tables/components/filters/slider.client.tsx
+function TableFilterSlider({ title, filter, options = {
+	min: 0,
+	max: 100
+} }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	const [selectedValues, setSelectedValues] = useState(query);
+	const handleSliderChange = useDebouncedCallback((values) => setQuery(values, { startTransition }), 300);
+	const { min, max } = options;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				className: "h-8 border-dashed",
+				children: [
+					/* @__PURE__ */ jsx(SlidersHorizontal, { className: "mr-1 h-4 w-4" }),
+					title,
+					selectedValues && selectedValues?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Separator, {
+							orientation: "vertical",
+							className: "mx-2 h-4"
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal lg:hidden",
+							children: selectedValues?.length
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "hidden space-x-1 lg:flex",
+							children: /* @__PURE__ */ jsxs(Badge, {
+								variant: "secondary",
+								className: "rounded-sm px-1 font-normal",
+								children: [
+									query?.[0],
+									" tot ",
+									query?.[1]
+								]
+							})
+						})
+					] })
+				]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-[20rem] p-0",
+			align: "start",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-8 p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: selectedValues?.[0] ?? void 0,
+						placeholder: "Min",
+						onChange: (e) => {
+							startTransition(() => {
+								setSelectedValues(e.target.value ? [Number(e.target.value), selectedValues?.[1] ?? max] : null);
+							});
+						},
+						onBlur: () => handleSliderChange(selectedValues)
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: selectedValues?.[1] ?? void 0,
+						placeholder: "Max",
+						max,
+						onChange: (e) => {
+							startTransition(() => {
+								setSelectedValues(e.target.value ? [selectedValues?.[0] ?? min, Number(e.target.value)] : null);
+							});
+						},
+						onBlur: () => handleSliderChange(selectedValues)
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ jsx(Slider, {
+						value: selectedValues ?? [min, max],
+						onValueChange: (values) => startTransition(() => {
+							setSelectedValues(values);
+							handleSliderChange(values);
+						}),
+						step: 1,
+						min,
+						max
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between text-muted-foreground text-xs",
+						children: [/* @__PURE__ */ jsx("span", { children: min }), /* @__PURE__ */ jsx("span", { children: max })]
+					})]
+				})]
+			}), selectedValues && selectedValues.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "w-full space-y-2 p-1.5",
+				children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					type: "button",
+					variant: "ghost",
+					onClick: () => {
+						setOpen(false);
+						setSelectedValues(null);
+						handleSliderChange(null);
+					},
+					className: "w-full text-center",
+					children: "Clear filters"
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { TableFilterSlider };

package/dist/src/modules/data-tables/components/filters/toggle.client.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SingleParserBuilder } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/toggle.client.d.ts
+type TableFilterToggleProps = {
+  title?: string;
+  filter: {
+    name: string;
+    parser: SingleParserBuilder<boolean | null>;
+  };
+};
+declare function TableFilterToggle({
+  title,
+  filter
+}: TableFilterToggleProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFilterToggle, TableFilterToggleProps };

package/dist/src/modules/data-tables/components/filters/toggle.client.mjs

@@ -0,0 +1,25 @@
+"use client";
+
+import { Toggle } from "../../../../components/ui/toggle.client.mjs";
+import { ToggleLeft } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { startTransition } from "react";
+import { useQueryState } from "nuqs";
+
+//#region src/modules/data-tables/components/filters/toggle.client.tsx
+function TableFilterToggle({ title, filter }) {
+	const [query, setQuery] = useQueryState(filter.name, filter.parser);
+	return /* @__PURE__ */ jsxs(Toggle, {
+		variant: "outline",
+		size: "sm",
+		className: "h-8 border-border border-dashed bg-background data-[state=on]:border-primary data-[state=on]:border-solid data-[state=on]:bg-primary data-[state=on]:text-primary-foreground dark:border-input dark:bg-input/30",
+		pressed: query === true,
+		onPressedChange: (pressed) => startTransition(() => {
+			setQuery(pressed ? true : null);
+		}),
+		children: [/* @__PURE__ */ jsx(ToggleLeft, { className: "mr-2 h-4 w-4" }), title]
+	});
+}
+
+//#endregion
+export { TableFilterToggle };

package/dist/src/modules/data-tables/components/footer.mjs

@@ -0,0 +1,31 @@
+"use client";
+
+import { InfinteTableBottombar, InfinteTableFooter } from "../strategies/infinite/components.mjs";
+import { LocalTableFooter } from "../strategies/local/components.mjs";
+import { PaginationTableFooter } from "../strategies/pagination/components.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/components/footer.tsx
+/**
+* Table bottombar
+*/
+function TableFooter({ table }) {
+	const meta = table.options.meta;
+	if (meta.strategy.name === "pagination") return null;
+	if (meta.strategy.name === "infinite") return /* @__PURE__ */ jsx(InfinteTableFooter, { table });
+	if (meta.strategy.name === "local") return null;
+	throw new Error(`Unknown strategy: ${meta.strategy.name}`);
+}
+/**
+* Table bottombar
+*/
+function TableBottombar({ table }) {
+	const meta = table.options.meta;
+	if (meta.strategy.name === "pagination") return /* @__PURE__ */ jsx(PaginationTableFooter, { table });
+	if (meta.strategy.name === "infinite") return /* @__PURE__ */ jsx(InfinteTableBottombar, { table });
+	if (meta.strategy.name === "local") return /* @__PURE__ */ jsx(LocalTableFooter, { table });
+	throw new Error(`Unknown strategy: ${meta.strategy.name}`);
+}
+
+//#endregion
+export { TableBottombar, TableFooter };