@alepha/ui 0.11.5 → 0.11.6

package/dist/index.js

@@ -1,16 +1,18 @@
 import { i as ToastService, n as Omnibar_default, r as useToast, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-Be0DAazb.js";
-import { $module, TypeBoxError } from "@alepha/core";
-import { AlephaReactForm, useFormState } from "@alepha/react-form";
+import { $module, TypeBoxError, t } from "@alepha/core";
+import { AlephaReactForm, useForm, useFormState } from "@alepha/react-form";
 import { AlephaReactHead } from "@alepha/react-head";
 import { AlephaReactI18n, useI18n } from "@alepha/react-i18n";
 import { $page, NestedView, useAction, useActive, useEvents, useInject, useRouter, useStore } from "@alepha/react";
 import { modals } from "@mantine/modals";
-import { AppShell, Autocomplete, Burger, Button, ColorInput, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, Menu, MultiSelect, NumberInput, PasswordInput, SegmentedControl, Select, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, AppShell, Autocomplete, Badge, Burger, Button, Code, ColorInput, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconFile, IconHash, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft } from "@tabler/icons-react";
+import { IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconFile, IconFilter, IconHash, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconX } from "@tabler/icons-react";
 import { spotlight } from "@mantine/spotlight";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
+import { DateTimeProvider } from "@alepha/datetime";
+import { useDebouncedCallback } from "@mantine/hooks";
 
 //#region src/RootRouter.ts
 var RootRouter = class {
@@ -299,7 +301,7 @@ const ActionButton = (_props) => {
 	}
 	const renderAction = () => {
 		if ("href" in restProps && restProps.href) {
-			if (restProps.href.startsWith("http")) return /* @__PURE__ */ jsx(ActionHrefButton, {
+			if (restProps.href.startsWith("http") || restProps.target) return /* @__PURE__ */ jsx(ActionHrefButton, {
 				...restProps,
 				href: restProps.href,
 				children: restProps.children
@@ -322,11 +324,18 @@ const ActionButton = (_props) => {
 			onClick: restProps.onClick,
 			children: restProps.children
 		});
-		if ("form" in restProps && restProps.form) return /* @__PURE__ */ jsx(ActionSubmitButton, {
-			...restProps,
-			form: restProps.form,
-			children: restProps.children
-		});
+		if ("form" in restProps && restProps.form) {
+			if (restProps.type === "reset") return /* @__PURE__ */ jsx(ActionResetButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionSubmitButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+		}
 		return /* @__PURE__ */ jsx(Button, {
 			...restProps,
 			children: restProps.children
@@ -347,13 +356,18 @@ const ActionButton = (_props) => {
 			index
 		}, index)) })]
 	});
-	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
-		label: tooltip,
-		children: actionElement
-	} : {
-		...tooltip,
-		children: actionElement
-	} });
+	if (tooltip) {
+		const defaultTooltipProps = { openDelay: 1e3 };
+		return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
+			...defaultTooltipProps,
+			label: tooltip,
+			children: actionElement
+		} : {
+			...defaultTooltipProps,
+			...tooltip,
+			children: actionElement
+		} });
+	}
 	return actionElement;
 };
 var ActionButton_default = ActionButton;
@@ -371,6 +385,16 @@ const ActionSubmitButton = (props) => {
 		children: props.children
 	});
 };
+const ActionResetButton = (props) => {
+	const { form,...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: state.loading,
+		type: "reset",
+		children: props.children
+	});
+};
 /**
 * Action button that integrates with useAction hook return value.
 * Automatically handles loading state and executes the action on click.
@@ -705,6 +729,403 @@ const ControlDate = (props) => {
 };
 var ControlDate_default = ControlDate;
 
+//#endregion
+//#region src/components/form/ControlNumber.tsx
+/**
+*
+*/
+const ControlNumber = (props) => {
+	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
+	const ref = useRef(null);
+	const [value, setValue] = useState(props.input.props.defaultValue);
+	useEvents({ "form:reset": (event) => {
+		if (event.id === props.input?.form.id && ref.current) setValue(props.input.props.defaultValue);
+	} }, [props.input]);
+	if (!props.input?.props) return null;
+	const { type,...inputPropsWithoutType } = props.input.props;
+	if (props.sliderProps) return /* @__PURE__ */ jsx(Input.Wrapper, {
+		...inputProps,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				height: 32,
+				padding: 8
+			},
+			children: /* @__PURE__ */ jsx(Slider, {
+				...inputProps,
+				ref,
+				id,
+				...inputPropsWithoutType,
+				...props.sliderProps,
+				value,
+				onChange: (val) => {
+					setValue(val);
+					props.input.set(val);
+				}
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(NumberInput, {
+		...inputProps,
+		ref,
+		id,
+		leftSection: icon,
+		...inputPropsWithoutType,
+		...props.numberInputProps,
+		value: value ?? "",
+		onChange: (val) => {
+			const newValue = val !== null ? Number(val) : void 0;
+			setValue(newValue);
+			props.input.set(newValue);
+		}
+	});
+};
+var ControlNumber_default = ControlNumber;
+
+//#endregion
+//#region src/utils/extractSchemaFields.ts
+/**
+* Extract field information from a TypeBox schema for query building.
+* Supports nested objects and provides field metadata for autocomplete.
+*/
+function extractSchemaFields(schema, prefix = "") {
+	const fields = [];
+	if (!schema || typeof schema !== "object") return fields;
+	const properties = "properties" in schema ? schema.properties : schema;
+	if (!properties || typeof properties !== "object") return fields;
+	for (const [key, value] of Object.entries(properties)) {
+		if (typeof value !== "object" || value === null) continue;
+		const fieldSchema = value;
+		const path = prefix ? `${prefix}.${key}` : key;
+		const format = "format" in fieldSchema ? fieldSchema.format : void 0;
+		let displayType = "type" in fieldSchema ? fieldSchema.type : "unknown";
+		if (format === "date-time") displayType = "datetime";
+		else if (format === "date") displayType = "date";
+		else if (format === "time") displayType = "time";
+		else if (format === "duration") displayType = "duration";
+		const field = {
+			name: key,
+			path,
+			type: displayType,
+			format,
+			description: "description" in fieldSchema ? fieldSchema.description : void 0
+		};
+		if ("enum" in fieldSchema && fieldSchema.enum) field.enum = fieldSchema.enum;
+		if ("type" in fieldSchema && fieldSchema.type === "object" && "properties" in fieldSchema && typeof fieldSchema.properties === "object") field.nested = extractSchemaFields(fieldSchema.properties, path);
+		fields.push(field);
+		if (field.nested) fields.push(...field.nested);
+	}
+	return fields;
+}
+/**
+* Get suggested operators based on field type
+*/
+function getOperatorsForField(field) {
+	const allOperators = ["=", "!="];
+	if (field.enum) return [...allOperators, "in"];
+	switch (field.type) {
+		case "string":
+		case "text": return [
+			...allOperators,
+			"~",
+			"~*",
+			"null"
+		];
+		case "number":
+		case "integer": return [
+			...allOperators,
+			">",
+			">=",
+			"<",
+			"<="
+		];
+		case "boolean": return allOperators;
+		case "datetime":
+		case "date": return [
+			...allOperators,
+			">",
+			">=",
+			"<",
+			"<="
+		];
+		default: return [...allOperators, "null"];
+	}
+}
+/**
+* Get operator symbol and description
+*/
+const OPERATOR_INFO = {
+	eq: {
+		symbol: "=",
+		label: "equals",
+		example: "name=John"
+	},
+	ne: {
+		symbol: "!=",
+		label: "not equals",
+		example: "status!=archived"
+	},
+	gt: {
+		symbol: ">",
+		label: "greater than",
+		example: "age>18"
+	},
+	gte: {
+		symbol: ">=",
+		label: "greater or equal",
+		example: "age>=18"
+	},
+	lt: {
+		symbol: "<",
+		label: "less than",
+		example: "age<65"
+	},
+	lte: {
+		symbol: "<=",
+		label: "less or equal",
+		example: "age<=65"
+	},
+	like: {
+		symbol: "~",
+		label: "like (case-sensitive)",
+		example: "name~John"
+	},
+	ilike: {
+		symbol: "~*",
+		label: "like (case-insensitive)",
+		example: "name~*john"
+	},
+	null: {
+		symbol: "=null",
+		label: "is null",
+		example: "deletedAt=null"
+	},
+	notNull: {
+		symbol: "!=null",
+		label: "is not null",
+		example: "email!=null"
+	},
+	in: {
+		symbol: "[...]",
+		label: "in array",
+		example: "status=[active,pending]"
+	}
+};
+
+//#endregion
+//#region src/components/form/ControlQueryBuilder.tsx
+/**
+* Query builder with text input and help popover.
+* Generates query strings for parseQueryString syntax.
+*/
+const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Enter query or click help for assistance...",...textInputProps }) => {
+	const [helpOpened, setHelpOpened] = useState(false);
+	const [textValue, setTextValue] = useState(value);
+	const inputRef = useRef(null);
+	const fields = schema ? extractSchemaFields(schema) : [];
+	const handleTextChange = (newValue) => {
+		setTextValue(newValue);
+		onChange?.(newValue);
+	};
+	const handleClear = () => {
+		setTextValue("");
+		onChange?.("");
+	};
+	const handleInsert = (text) => {
+		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
+		setTextValue(newValue);
+		onChange?.(newValue);
+		setTimeout(() => {
+			inputRef.current?.focus();
+		}, 0);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 800,
+		position: "bottom-start",
+		shadow: "md",
+		opened: helpOpened,
+		onChange: setHelpOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		withArrow: true,
+		arrowSize: 14,
+		transitionProps: {
+			transition: "fade-down",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
+			placeholder,
+			value: textValue,
+			onChange: (e) => handleTextChange(e.currentTarget.value),
+			onFocus: () => setHelpOpened(true),
+			leftSection: /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
+			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
+				size: "sm",
+				variant: "subtle",
+				color: "gray",
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
+			}),
+			...textInputProps
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsx(QueryHelp, {
+			fields,
+			onInsert: handleInsert
+		}) })]
+	});
+};
+function QueryHelp({ fields, onInsert }) {
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: "md",
+		align: "flex-start",
+		wrap: "nowrap",
+		children: [
+			/* @__PURE__ */ jsxs(Stack, {
+				gap: "md",
+				style: { flex: 1 },
+				children: [
+					/* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Text$1, {
+							size: "sm",
+							fw: 600,
+							children: "Operators"
+						}), /* @__PURE__ */ jsx(Stack, {
+							gap: 4,
+							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(Code, {
+									style: {
+										minWidth: 35,
+										textAlign: "center",
+										cursor: "pointer"
+									},
+									onClick: () => onInsert(info.symbol),
+									children: info.symbol
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									style: { flex: 1 },
+									children: info.label
+								})]
+							}, key))
+						})]
+					}),
+					/* @__PURE__ */ jsx(Divider, {}),
+					/* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Text$1, {
+							size: "sm",
+							fw: 600,
+							children: "Logic"
+						}), /* @__PURE__ */ jsxs(Stack, {
+							gap: 4,
+							children: [/* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(Code, {
+									style: {
+										minWidth: 35,
+										textAlign: "center",
+										cursor: "pointer"
+									},
+									onClick: () => onInsert("&"),
+									children: "&"
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									children: "AND"
+								})]
+							}), /* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(Code, {
+									style: {
+										minWidth: 35,
+										textAlign: "center",
+										cursor: "pointer"
+									},
+									onClick: () => onInsert("|"),
+									children: "|"
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									children: "OR"
+								})]
+							})]
+						})]
+					})
+				]
+			}),
+			fields.length > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
+			fields.length > 0 && /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				style: { flex: 2 },
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					fw: 600,
+					children: "Fields"
+				}), /* @__PURE__ */ jsx(Stack, {
+					gap: 4,
+					style: {
+						maxHeight: 300,
+						overflowY: "auto"
+					},
+					children: fields.map((field) => /* @__PURE__ */ jsxs(Group, {
+						gap: "xs",
+						wrap: "nowrap",
+						align: "flex-start",
+						children: [
+							/* @__PURE__ */ jsx(Code, {
+								style: {
+									minWidth: 120,
+									cursor: "pointer"
+								},
+								onClick: () => onInsert(field.path),
+								children: field.path
+							}),
+							/* @__PURE__ */ jsxs(Stack, {
+								gap: 2,
+								style: {
+									flex: 1,
+									minWidth: 0
+								},
+								children: [/* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									lineClamp: 1,
+									children: field.description || field.type
+								}), field.enum && /* @__PURE__ */ jsx(Group, {
+									gap: 4,
+									wrap: "wrap",
+									children: field.enum.map((enumValue) => /* @__PURE__ */ jsx(Code, {
+										style: {
+											cursor: "pointer",
+											fontStyle: "italic",
+											fontSize: "0.75rem"
+										},
+										c: "blue",
+										onClick: () => onInsert(enumValue),
+										children: enumValue
+									}, enumValue))
+								})]
+							}),
+							/* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								variant: "light",
+								style: { flexShrink: 0 },
+								children: field.type
+							})
+						]
+					}, field.path))
+				})]
+			})
+		]
+	});
+}
+var ControlQueryBuilder_default = ControlQueryBuilder;
+
 //#endregion
 //#region src/components/form/ControlSelect.tsx
 /**
@@ -827,6 +1248,7 @@ var ControlSelect_default = ControlSelect;
 * - DateInput (for date format)
 * - DateTimePicker (for date-time format)
 * - TimeInput (for time format)
+* - QueryBuilder (for building type-safe queries with autocomplete)
 * - Custom component
 *
 * Automatically handles labels, descriptions, error messages, required state, and default icons.
@@ -838,6 +1260,16 @@ const Control = (_props) => {
 		..._props,
 		...schema.$control
 	};
+	if (props.query) return /* @__PURE__ */ jsx(Input.Wrapper, {
+		...inputProps,
+		children: /* @__PURE__ */ jsx(ControlQueryBuilder_default, {
+			schema: props.query,
+			value: props.input.props.value,
+			onChange: (value) => {
+				props.input.set(value);
+			}
+		})
+	});
 	if (props.custom) {
 		const Custom = props.custom;
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
@@ -855,14 +1287,13 @@ const Control = (_props) => {
 		});
 	}
 	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
-		const numberInputProps = typeof props.number === "object" ? props.number : {};
-		const { type,...inputPropsWithoutType } = props.input.props;
-		return /* @__PURE__ */ jsx(NumberInput, {
-			...inputProps,
-			id,
-			leftSection: icon,
-			...inputPropsWithoutType,
-			...numberInputProps
+		const controlNumberProps = typeof props.number === "object" ? props.number : {};
+		return /* @__PURE__ */ jsx(ControlNumber_default, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			icon,
+			...controlNumberProps
 		});
 	}
 	if (props.file) {
@@ -990,15 +1421,16 @@ var Control_default = Control;
 */
 const TypeForm = (props) => {
 	const { form, columns = 3, children, controlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
-	if (!form.options?.schema?.properties) return null;
-	const supportedFields = Object.keys(form.options.schema.properties).filter((fieldName) => {
+	const schema = props.schema || form.options.schema;
+	if (!schema?.properties) return null;
+	const supportedFields = Object.keys(schema.properties).filter((fieldName) => {
 		const field = form.input[fieldName];
 		if (!field || typeof field !== "object" || !("schema" in field)) return false;
-		const schema = field.schema;
-		if ("type" in schema) {
-			if (schema.type === "object") return false;
+		const schema$1 = field.schema;
+		if ("type" in schema$1) {
+			if (schema$1.type === "object") return false;
 		}
-		if ("properties" in schema && schema.properties) return false;
+		if ("properties" in schema$1 && schema$1.properties) return false;
 		return true;
 	});
 	const colSpan = typeof columns === "number" ? {
@@ -1030,14 +1462,17 @@ const TypeForm = (props) => {
 	const content = /* @__PURE__ */ jsxs(Flex$1, {
 		direction: "column",
 		gap: "sm",
-		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, { children: [/* @__PURE__ */ jsx(ActionButton_default, {
-			form,
-			...submitButtonProps,
-			children: submitButtonProps?.children ?? "Submit"
-		}), /* @__PURE__ */ jsx("button", {
-			type: "reset",
-			children: "Reset"
-		})] })]
+		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, {
+			gap: "sm",
+			children: [/* @__PURE__ */ jsx(ActionButton_default, {
+				form,
+				...submitButtonProps,
+				children: submitButtonProps?.children ?? "Submit"
+			}), /* @__PURE__ */ jsx(ActionButton_default, {
+				type: "reset",
+				children: "Reset"
+			})]
+		})]
 	});
 	if (skipFormElement) return content;
 	return /* @__PURE__ */ jsx("form", {
@@ -1053,7 +1488,8 @@ const ui = { colors: {
 	transparent: "transparent",
 	background: "var(--alepha-background)",
 	surface: "var(--alepha-surface)",
-	elevated: "var(--alepha-elevated)"
+	elevated: "var(--alepha-elevated)",
+	border: "var(--alepha-border)"
 } };
 
 //#endregion
@@ -1159,16 +1595,24 @@ const Sidebar = (props) => {
 			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton_default, { collapsed: props.collapsed }, key);
 			if (item.type === "section") {
 				if (props.collapsed) return;
-				return /* @__PURE__ */ jsx(Text$1, {
-					size: "xs",
-					c: "dimmed",
+				return /* @__PURE__ */ jsxs(Flex$1, {
 					mt: "md",
 					mb: "xs",
-					mx: "sm",
-					tt: "uppercase",
-					fw: "bold",
-					children: item.label
-				}, key);
+					align: "center",
+					gap: "xs",
+					children: [/* @__PURE__ */ jsx(ThemeIcon, {
+						c: "dimmed",
+						size: "xs",
+						variant: "transparent",
+						children: item.icon
+					}), /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: "bold",
+						children: item.label
+					}, key)]
+				});
 			}
 		}
 		if ("element" in item) return /* @__PURE__ */ jsx(Flex$1, { children: item.element }, key);
@@ -1243,7 +1687,7 @@ const SidebarItem = (props) => {
 	} }, []);
 	if (level > maxLevel) return null;
 	const handleItemClick = (e) => {
-		e.preventDefault();
+		if (!props.item.target) e.preventDefault();
 		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
 		else {
 			props.onItemClick?.(item);
@@ -1258,6 +1702,7 @@ const SidebarItem = (props) => {
 			w: "100%",
 			justify: "space-between",
 			href: props.item.href,
+			target: props.item.target,
 			variant: "subtle",
 			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
 			variantActive: "default",
@@ -1316,7 +1761,7 @@ const SidebarCollapsedItem = (props) => {
 	}, []);
 	const [isOpen, setIsOpen] = useState(isActive(item));
 	const handleItemClick = (e) => {
-		e.preventDefault();
+		if (!props.item.target) e.preventDefault();
 		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
 		else {
 			props.onItemClick?.(item);
@@ -1331,6 +1776,7 @@ const SidebarCollapsedItem = (props) => {
 		onClick: handleItemClick,
 		icon: item.icon ?? /* @__PURE__ */ jsx(IconSquareRounded, {}),
 		href: props.item.href,
+		target: props.item.target,
 		menu: item.children ? {
 			position: "right",
 			on: "hover",
@@ -1401,10 +1847,90 @@ var AdminShell_default = AdminShell;
 //#endregion
 //#region src/components/table/DataTable.tsx
 const DataTable = (props) => {
-	const [items, setItems] = useState(typeof props.items === "function" ? [] : props.items);
+	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
+	const defaultSize = props.infinityScroll ? 50 : props.defaultSize || 10;
+	const [page, setPage] = useState(1);
+	const [size, setSize] = useState(String(defaultSize));
+	const [isLoadingMore, setIsLoadingMore] = useState(false);
+	const [currentPage, setCurrentPage] = useState(0);
+	const form = useForm({
+		schema: t.object({
+			...props.filters ? props.filters.properties : {},
+			page: t.number({ default: 0 }),
+			size: t.number({ default: defaultSize }),
+			sort: t.optional(t.string())
+		}),
+		handler: async (values, args) => {
+			if (typeof props.items === "function") {
+				const response = await props.items(values);
+				if (props.infinityScroll && values.page > 0) setItems((prev) => ({
+					...response,
+					content: [...prev.content, ...response.content]
+				}));
+				else setItems(response);
+				setCurrentPage(values.page);
+				setIsLoadingMore(false);
+			}
+		},
+		onReset: async () => {
+			setPage(1);
+			setSize("10");
+			await form.submit();
+		},
+		onChange: async (key, value) => {
+			if (key === "page") {
+				setPage(value + 1);
+				await form.submit();
+				return;
+			}
+			if (key === "size") {
+				setSize(String(value));
+				form.input.page.set(0);
+				return;
+			}
+		}
+	}, []);
+	useDebouncedCallback(() => form.submit(), { delay: 1e3 });
+	const dt = useInject(DateTimeProvider);
+	useEffect(() => {
+		if (props.submitOnInit) {
+			console.log("submitting");
+			form.submit();
+		}
+		if (props.submitEvery) {
+			const it = dt.createInterval(() => {
+				form.submit();
+			}, props.submitEvery);
+			return () => dt.clearInterval(it);
+		}
+	}, []);
 	useEffect(() => {
 		if (typeof props.items !== "function") setItems(props.items);
 	}, [props.items]);
+	useEffect(() => {
+		if (!props.infinityScroll || typeof props.items !== "function") return;
+		const handleScroll = () => {
+			if (isLoadingMore) return;
+			const scrollTop = window.scrollY;
+			const windowHeight = window.innerHeight;
+			const docHeight = document.documentElement.scrollHeight;
+			if (scrollTop + windowHeight >= docHeight - 200) {
+				const totalPages = items.page?.totalPages ?? 1;
+				if (currentPage + 1 < totalPages) {
+					setIsLoadingMore(true);
+					form.input.page.set(currentPage + 1);
+				}
+			}
+		};
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [
+		props.infinityScroll,
+		isLoadingMore,
+		items.page?.totalPages,
+		currentPage,
+		form
+	]);
 	const head = Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsx(ActionButton_default, {
 		justify: "space-between",
 		radius: 0,
@@ -1412,16 +1938,77 @@ const DataTable = (props) => {
 		size: "xs",
 		children: col.label
 	}) }, key));
-	const rows = items.map((item, index) => {
+	const rows = items.content.map((item, index) => {
 		const trProps = props.tableTrProps ? props.tableTrProps(item) : {};
 		return /* @__PURE__ */ jsx(Table.Tr, {
 			...trProps,
-			children: Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item) }, key))
+			children: Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item, index) }, key))
 		}, JSON.stringify(item));
 	});
-	return /* @__PURE__ */ jsxs(Table, {
-		...props.tableProps,
-		children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: head }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
+	const schema = t.omit(form.options.schema, [
+		"page",
+		"size",
+		"sort"
+	]);
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		gap: "sm",
+		flex: 1,
+		children: [
+			/* @__PURE__ */ jsx(Paper, {
+				withBorder: true,
+				p: "sm",
+				children: props.filters ? /* @__PURE__ */ jsx(TypeForm_default, {
+					form,
+					schema
+				}) : null
+			}),
+			/* @__PURE__ */ jsxs(Table, {
+				striped: true,
+				stripedColor: "",
+				...props.tableProps,
+				children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: head }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
+			}),
+			!props.infinityScroll && /* @__PURE__ */ jsxs(Flex$1, {
+				justify: "space-between",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Pagination, {
+					withEdges: true,
+					total: items.page?.totalPages ?? 1,
+					value: page,
+					onChange: (value) => {
+						form.input.page.set(value - 1);
+					}
+				}), /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Select, {
+					value: size,
+					onChange: (value) => {
+						form.input.size.set(Number(value));
+					},
+					data: [
+						{
+							value: "5",
+							label: "5"
+						},
+						{
+							value: "10",
+							label: "10"
+						},
+						{
+							value: "25",
+							label: "25"
+						},
+						{
+							value: "50",
+							label: "50"
+						},
+						{
+							value: "100",
+							label: "100"
+						}
+					]
+				}) })]
+			})
+		]
 	});
 };
 var DataTable_default = DataTable;
@@ -1465,5 +2052,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, ICON_SIZES, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, getDefaultIcon, prettyName, ui, useDialog, useToast };
+export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, ICON_SIZES, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, prettyName, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map