@tulip-systems/core 0.8.3 → 0.9.0

package/dist/modules/commands/{utils → components/utils}/delete-command.client.mjs

@@ -1,15 +1,11 @@
 "use client";
 
-import { Icons } from "../../../components/common/icons.mjs";
-import { CommandLabel } from "../components/command-trigger.client.mjs";
-import { CommandAlertDialog, CommandAlertDialogAction, CommandAlertDialogCancel, CommandAlertDialogContent, CommandAlertDialogDescription, CommandAlertDialogFooter, CommandAlertDialogHeader, CommandAlertDialogTitle, CommandAlertDialogTrigger } from "../components/alert-dialog-command.client.mjs";
+import { Icons } from "../../../../components/common/icons.mjs";
+import { CommandLabel } from "../primitives/command-trigger.client.mjs";
+import { CommandAlertDialog, CommandAlertDialogAction, CommandAlertDialogCancel, CommandAlertDialogContent, CommandAlertDialogDescription, CommandAlertDialogFooter, CommandAlertDialogHeader, CommandAlertDialogTitle, CommandAlertDialogTrigger } from "../primitives/alert-dialog-command.client.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/modules/commands/utils/delete-command.client.tsx
-/**
-* Delete command
-* @description command to delete a resource
-*/
+//#region src/modules/commands/components/utils/delete-command.client.tsx
 function DeleteCommand({ variables, mutation }) {
 	return /* @__PURE__ */ jsxs(CommandAlertDialog, { children: [/* @__PURE__ */ jsxs(CommandAlertDialogTrigger, {
 		className: "text-destructive",
@@ -21,9 +17,6 @@ function DeleteCommand({ variables, mutation }) {
 		children: "Verwijderen"
 	})] })] })] });
 }
-/**
-* Single Delete command
-*/
 function SingleDeleteCommand({ variables, mutation }) {
 	return /* @__PURE__ */ jsx(DeleteCommand, {
 		variables,

package/dist/modules/commands/hooks/use-command-mutation.client.d.mts

@@ -3,14 +3,9 @@ import * as _tanstack_react_query0 from "@tanstack/react-query";
 import { DefaultError, MutationOptions } from "@tanstack/react-query";
 
 //#region src/modules/commands/hooks/use-command-mutation.client.d.ts
-type CommandActionResult = Promise<unknown>;
-type CommandAction<TInput = void> = (input: TInput) => CommandActionResult;
-type BulkCommandAction = (params: {
-  ids: string[];
-}) => CommandActionResult;
 type CommandMutationMeta = {
   router: ReturnType<typeof useRouter>;
 };
 declare function useCommandMutation<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options?: MutationOptions<TData, TError, TVariables, TOnMutateResult>): _tanstack_react_query0.UseMutationResult<TData, TError, TVariables, TOnMutateResult>;
 //#endregion
-export { BulkCommandAction, CommandAction, CommandActionResult, CommandMutationMeta, useCommandMutation };
+export { CommandMutationMeta, useCommandMutation };

package/dist/modules/commands/hooks/use-command-mutation.client.mjs

@@ -1,10 +1,10 @@
 "use client";
 
 import { useAction } from "../../../lib/hooks/use-action.mjs";
-import { useCommand } from "./context.client.mjs";
+import { useCommand } from "./use-command.client.mjs";
 import { useRouter } from "next/navigation";
 
-//#region src/modules/commands/hooks/use-command-mutation.client.tsx
+//#region src/modules/commands/hooks/use-command-mutation.client.ts
 function useCommandMutation(options) {
 	const router = useRouter();
 	const commandContext = useCommand();
@@ -19,13 +19,11 @@ function useCommandMutation(options) {
 		onSuccess: async (...params) => {
 			const result = options?.onSuccess?.(...params);
 			commandContext.setStatus("success");
-			await commandContext.onSuccess?.();
 			return await result;
 		},
 		onError: async (...params) => {
 			const result = options?.onError?.(...params);
 			commandContext.setStatus("error");
-			await commandContext.onError?.();
 			return await result;
 		},
 		onSettled: async (...params) => {

package/dist/modules/commands/hooks/use-command.client.d.mts

@@ -0,0 +1,31 @@
+import { CommandStatus, CommandUI } from "../lib/builder.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Dispatch, PropsWithChildren, SetStateAction } from "react";
+
+//#region src/modules/commands/hooks/use-command.client.d.ts
+type CommandContextValue = {
+  ui: CommandUI;
+  status: CommandStatus;
+  disabled: boolean;
+  setStatus: Dispatch<SetStateAction<CommandStatus>>;
+};
+declare function useCommand(): CommandContextValue;
+type CommandContextLifecycle = {
+  onSuccess?: () => Promise<void> | void;
+  onError?: () => Promise<void> | void;
+  onSettled?: () => Promise<void> | void;
+};
+type CommandContextProviderProps = PropsWithChildren<CommandContextLifecycle & {
+  ui: CommandUI;
+  disabled?: boolean;
+}>;
+declare function CommandContextProvider({
+  children,
+  ui,
+  disabled,
+  onSuccess,
+  onError,
+  onSettled
+}: CommandContextProviderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CommandContextLifecycle, CommandContextProvider, useCommand };

package/dist/modules/commands/hooks/use-command.client.mjs

@@ -0,0 +1,45 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+
+//#region src/modules/commands/hooks/use-command.client.tsx
+const CommandContext = createContext(null);
+function useCommand() {
+	const context = useContext(CommandContext);
+	if (!context) throw new Error("useCommand must be used within CommandContextProvider");
+	return context;
+}
+function CommandContextProvider({ children, ui, disabled = false, onSuccess, onError, onSettled }) {
+	const [status, setStatus] = useState("idle");
+	const previousStatusRef = useRef("idle");
+	useEffect(() => {
+		if (status === previousStatusRef.current) return;
+		if (status === "success") {
+			onSuccess?.();
+			onSettled?.();
+		}
+		if (status === "error") {
+			onError?.();
+			onSettled?.();
+		}
+		previousStatusRef.current = status;
+	}, [
+		status,
+		onSuccess,
+		onError,
+		onSettled
+	]);
+	return /* @__PURE__ */ jsx(CommandContext.Provider, {
+		value: {
+			ui,
+			status,
+			disabled,
+			setStatus
+		},
+		children
+	});
+}
+
+//#endregion
+export { CommandContextProvider, useCommand };

package/dist/modules/commands/lib/builder.d.mts

@@ -0,0 +1,39 @@
+import { Permission } from "../../auth/lib/permissions.mjs";
+import { z as z$1 } from "zod";
+
+//#region src/modules/commands/lib/builder.d.ts
+type CommandUI = "dropdown" | "context" | "table" | "inline" | "custom";
+type CommandStatus = "idle" | "pending" | "success" | "error";
+type CommandCondition<TSchema extends z$1.ZodTypeAny, TMeta> = (params: {
+  data: z$1.output<TSchema>;
+  meta: TMeta;
+}) => boolean | boolean[];
+type CommandRender<TSchema extends z$1.ZodTypeAny, TMeta> = (params: {
+  data: z$1.output<TSchema>;
+  meta: TMeta;
+  ui: CommandUI;
+}) => React.ReactNode;
+/**
+ * Final command definition (without name).
+ * Name is derived from the object key in `defineCommands`.
+ */
+type CommandDef<TSchema extends z$1.ZodTypeAny = z$1.ZodTypeAny, TMeta = object> = {
+  permission?: Permission;
+  schema: TSchema;
+  visibleWhen?: CommandCondition<TSchema, TMeta>;
+  disabledWhen?: CommandCondition<TSchema, TMeta>;
+  render: CommandRender<TSchema, TMeta>;
+};
+type ReadyCommandBuilder<TSchema extends z$1.ZodTypeAny, TMeta> = {
+  permission(permission: Permission): ReadyCommandBuilder<TSchema, TMeta>;
+  visibleWhen(condition: CommandCondition<TSchema, TMeta>): ReadyCommandBuilder<TSchema, TMeta>;
+  disabledWhen(condition: CommandCondition<TSchema, TMeta>): ReadyCommandBuilder<TSchema, TMeta>;
+  render(render: CommandRender<TSchema, TMeta>): CommandDef<TSchema, TMeta>;
+};
+type InitialCommandBuilder<TMeta> = {
+  input<TNextSchema extends z$1.ZodTypeAny>(schema: TNextSchema): ReadyCommandBuilder<TNextSchema, TMeta>;
+};
+declare function createCommandBuilder<TMeta = object>(): InitialCommandBuilder<TMeta>;
+declare const commandBuilder: InitialCommandBuilder<object>;
+//#endregion
+export { CommandCondition, CommandDef, CommandRender, CommandStatus, CommandUI, commandBuilder, createCommandBuilder };

package/dist/modules/commands/lib/builder.mjs

@@ -0,0 +1,47 @@
+//#region src/modules/commands/lib/builder.ts
+function createInitialBuilder(state) {
+	return { input(schema) {
+		return createReadyBuilder({
+			permission: state.permission,
+			schema
+		});
+	} };
+}
+function createReadyBuilder(state) {
+	return {
+		permission(permission) {
+			return createReadyBuilder({
+				...state,
+				permission
+			});
+		},
+		visibleWhen(condition) {
+			return createReadyBuilder({
+				...state,
+				visibleWhen: condition
+			});
+		},
+		disabledWhen(condition) {
+			return createReadyBuilder({
+				...state,
+				disabledWhen: condition
+			});
+		},
+		render(render) {
+			return {
+				permission: state.permission,
+				schema: state.schema,
+				visibleWhen: state.visibleWhen,
+				disabledWhen: state.disabledWhen,
+				render
+			};
+		}
+	};
+}
+function createCommandBuilder() {
+	return createInitialBuilder({});
+}
+const commandBuilder = createCommandBuilder();
+
+//#endregion
+export { commandBuilder, createCommandBuilder };

package/dist/modules/commands/lib/registery.d.mts

@@ -0,0 +1,35 @@
+import { CommandDef } from "./builder.mjs";
+import z from "zod";
+
+//#region src/modules/commands/lib/registery.d.ts
+/**
+ * Command map type defining the shape of command definitions.
+ */
+type CommandMap = Record<string, CommandDef<z.ZodTypeAny, any>>;
+type CommandKey<TCommands extends CommandMap> = Extract<keyof TCommands, string>;
+type CommandFlags<TCommands extends CommandMap> = Partial<Record<CommandKey<TCommands>, boolean>>;
+type CommandInput<TCommands extends CommandMap> = readonly CommandKey<TCommands>[] | CommandFlags<TCommands>;
+type TruthyKeys<T> = { [K in keyof T]-?: T[K] extends true ? K : never }[keyof T];
+type PickedCommands<TCommands extends CommandMap, TInput extends CommandInput<TCommands>> = TInput extends readonly CommandKey<TCommands>[] ? Pick<TCommands, TInput[number]> : TInput extends CommandFlags<TCommands> ? Pick<TCommands, Extract<TruthyKeys<TInput>, keyof TCommands>> : never;
+type OmittedCommands<TCommands extends CommandMap, TInput extends CommandInput<TCommands>> = TInput extends readonly CommandKey<TCommands>[] ? Omit<TCommands, TInput[number]> : TInput extends CommandFlags<TCommands> ? Omit<TCommands, Extract<TruthyKeys<TInput>, keyof TCommands>> : never;
+type ExtendedCommands<TBase extends CommandMap, TExtension extends CommandMap> = Omit<TBase, keyof TExtension> & TExtension;
+/**
+ * Command registry type with utility methods for picking, omitting, and converting to array.
+ * This allows for flexible manipulation of command sets while maintaining type safety.
+ */
+type CommandRegistry<TCommands extends CommandMap> = {
+  commands: TCommands;
+  extend<const TExtension extends CommandMap>(extension: TExtension): CommandRegistry<ExtendedCommands<TCommands, TExtension>>;
+  pick<const TInput extends CommandInput<TCommands>>(input: TInput): CommandRegistry<PickedCommands<TCommands, TInput>>;
+  omit<const TInput extends CommandInput<TCommands>>(input: TInput): CommandRegistry<OmittedCommands<TCommands, TInput>>;
+  toArray(): Array<CommandDef<z.ZodTypeAny, any>>;
+};
+/**
+ * Public function to define commands. It takes a command map and returns a command registry with utility methods.
+ * This is the main entry point for users to create their command sets.
+ * @param commands - A map of command definitions keyed by command name.
+ * @returns A command registry with the defined commands and utility methods.
+ */
+declare function defineCommands<TCommands extends CommandMap>(commands: TCommands): CommandRegistry<TCommands>;
+//#endregion
+export { CommandMap, defineCommands };

package/dist/modules/commands/lib/registery.mjs

@@ -0,0 +1,43 @@
+//#region src/modules/commands/lib/registery.ts
+function toKeys(input) {
+	if (Array.isArray(input)) return [...input];
+	return Object.entries(input).filter(([, enabled]) => enabled === true).map(([key]) => key);
+}
+/**
+* Internal function to create a command registry from a given command map.
+*/
+function createRegistry(commands) {
+	return {
+		commands,
+		extend(extension) {
+			return createRegistry({
+				...commands,
+				...extension
+			});
+		},
+		pick(input) {
+			const keys = toKeys(input);
+			return createRegistry(Object.fromEntries(keys.flatMap((key) => key in commands ? [[key, commands[key]]] : [])));
+		},
+		omit(input) {
+			const keys = toKeys(input);
+			const blacklist = new Set(keys);
+			return createRegistry(Object.fromEntries(Object.entries(commands).filter(([key]) => !blacklist.has(key))));
+		},
+		toArray() {
+			return Object.values(commands);
+		}
+	};
+}
+/**
+* Public function to define commands. It takes a command map and returns a command registry with utility methods.
+* This is the main entry point for users to create their command sets.
+* @param commands - A map of command definitions keyed by command name.
+* @returns A command registry with the defined commands and utility methods.
+*/
+function defineCommands(commands) {
+	return createRegistry(commands);
+}
+
+//#endregion
+export { defineCommands };

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

@@ -1,6 +1,6 @@
 import { LucideIcon } from "lucide-react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ParserBuilder } from "nuqs";
+import { SingleParserBuilder } from "nuqs";
 
 //#region src/modules/data-tables/components/filters/combobox.client.d.ts
 type TableFilterComboboxOption = {
@@ -14,7 +14,7 @@ type TableFilterComboboxProps<TValue extends string = string> = {
   title?: string;
   filter: {
     name: string;
-    parser: ParserBuilder<TValue[] | null>;
+    parser: SingleParserBuilder<TValue[] | null>;
   };
   options: TableFilterComboboxOption[];
 };

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

@@ -5,8 +5,8 @@ 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, CommandList, CommandSeparator } from "../../../../components/ui/command.client.mjs";
-import { Check, PlusCircle } from "lucide-react";
+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";
@@ -23,12 +23,12 @@ function TableFilterCombobox({ title, filter, options }) {
 			size: "sm",
 			className: "h-8 border-dashed",
 			children: [
-				/* @__PURE__ */ jsx(PlusCircle, { className: "h-4 w-4" }),
+				/* @__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-4"
+						className: "mx-2 h-full"
 					}),
 					/* @__PURE__ */ jsx(Badge, {
 						variant: "secondary",
@@ -58,6 +58,8 @@ function TableFilterCombobox({ title, filter, options }) {
 			/* @__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);
@@ -67,11 +69,7 @@ function TableFilterCombobox({ title, filter, options }) {
 						setQuery(filterValues.length ? filterValues : null);
 					}),
 					children: [
-						/* @__PURE__ */ jsx("div", {
-							"data-active": selectedValues.has(option.value),
-							className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary opacity-50 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:opacity-100 [&>svg]:invisible data-[active=true]:[&>svg]:visible data-[active=true]:[&>svg]:text-primary-foreground"),
-							children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-foreground" })
-						}),
+						/* @__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", {

package/dist/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/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/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/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/modules/data-tables/components/filters/slider.client.d.mts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ParserBuilder } from "nuqs";
+import { SingleParserBuilder } from "nuqs";
 
 //#region src/modules/data-tables/components/filters/slider.client.d.ts
 type TableFilterSliderProps = {
   title?: string;
   filter: {
     name: string;
-    parser: ParserBuilder<[number, number] | null>;
+    parser: SingleParserBuilder<[number, number] | null>;
   };
   options?: {
     min: number;

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

@@ -6,7 +6,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../../../../components/
 import { Input } from "../../../../components/ui/input.mjs";
 import { Separator } from "../../../../components/ui/separator.mjs";
 import { Slider } from "../../../../components/ui/slider.mjs";
-import { PlusCircle } from "lucide-react";
+import { SlidersHorizontal } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { startTransition, useState } from "react";
 import { useQueryState } from "nuqs";
@@ -33,7 +33,7 @@ function TableFilterSlider({ title, filter, options = {
 				size: "sm",
 				className: "h-8 border-dashed",
 				children: [
-					/* @__PURE__ */ jsx(PlusCircle, { className: "mr-2 h-4 w-4" }),
+					/* @__PURE__ */ jsx(SlidersHorizontal, { className: "mr-1 h-4 w-4" }),
 					title,
 					selectedValues && selectedValues?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx(Separator, {

package/dist/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/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 };