@alepha/ui 0.11.9 → 0.11.10

package/dist/index.cjs

@@ -0,0 +1,2444 @@
+const require_AlephaMantineProvider = require('./AlephaMantineProvider-DlOEv9f0.cjs');
+let __alepha_core = require("@alepha/core");
+let __alepha_react_form = require("@alepha/react-form");
+let __alepha_react_head = require("@alepha/react-head");
+let __alepha_react_i18n = require("@alepha/react-i18n");
+let __alepha_react = require("@alepha/react");
+let __mantine_core = require("@mantine/core");
+let __mantine_modals = require("@mantine/modals");
+let __tabler_icons_react = require("@tabler/icons-react");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __mantine_spotlight = require("@mantine/spotlight");
+let __mantine_dates = require("@mantine/dates");
+let __alepha_postgres = require("@alepha/postgres");
+let __alepha_datetime = require("@alepha/datetime");
+let __mantine_hooks = require("@mantine/hooks");
+
+//#region src/RootRouter.ts
+var RootRouter = class {
+	root = (0, __alepha_react.$page)({
+		path: "/",
+		lazy: () => Promise.resolve().then(() => require("./AlephaMantineProvider-DCF5kidi.cjs"))
+	});
+};
+
+//#endregion
+//#region src/components/data/JsonViewer.tsx
+const getSizeConfig = (size = "sm") => {
+	const configs = {
+		xs: {
+			text: "xs",
+			icon: 12,
+			indent: 16,
+			gap: 2
+		},
+		sm: {
+			text: "sm",
+			icon: 14,
+			indent: 20,
+			gap: 4
+		},
+		md: {
+			text: "md",
+			icon: 16,
+			indent: 24,
+			gap: 6
+		},
+		lg: {
+			text: "lg",
+			icon: 18,
+			indent: 28,
+			gap: 8
+		},
+		xl: {
+			text: "xl",
+			icon: 20,
+			indent: 32,
+			gap: 10
+		}
+	};
+	return configs[size] || configs.sm;
+};
+const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem = false, size = "sm" }) => {
+	const [expanded, setExpanded] = (0, react.useState)(depth < 2);
+	const sizeConfig = getSizeConfig(size);
+	const getValueType = (val) => {
+		if (val === null) return "null";
+		if (val === void 0) return "undefined";
+		if (Array.isArray(val)) return "array";
+		return typeof val;
+	};
+	const valueType = getValueType(value);
+	const renderPrimitive = (val) => {
+		switch (getValueType(val)) {
+			case "string": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Text, {
+				component: "span",
+				c: "teal",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: [
+					"\"",
+					val,
+					"\""
+				]
+			});
+			case "number": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+				component: "span",
+				c: "blue",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: val
+			});
+			case "boolean": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+				component: "span",
+				c: "violet",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: String(val)
+			});
+			case "null": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+				component: "span",
+				c: "dimmed",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: "null"
+			});
+			case "undefined": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+				component: "span",
+				c: "dimmed",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: "undefined"
+			});
+			default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+				component: "span",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: String(val)
+			});
+		}
+	};
+	const renderKey = () => {
+		if (!name) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Text, {
+			component: "span",
+			c: "cyan",
+			ff: "monospace",
+			fw: 500,
+			size: sizeConfig.text,
+			children: [isArrayItem ? `[${name}]` : `"${name}"`, ":"]
+		});
+	};
+	if (valueType === "object" || valueType === "array") {
+		const isObject = valueType === "object";
+		const entries = isObject ? Object.entries(value) : value.map((v, i) => [i, v]);
+		const isEmpty = entries.length === 0;
+		const canExpand = depth < maxDepth && !isEmpty;
+		const preview = isObject ? "{...}" : "[...]";
+		const brackets = isObject ? ["{", "}"] : ["[", "]"];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Box, {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: sizeConfig.gap,
+				minWidth: "max-content"
+			},
+			children: [
+				canExpand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ActionIcon, {
+					size: "xs",
+					variant: "transparent",
+					c: "dimmed",
+					onClick: () => setExpanded(!expanded),
+					style: {
+						cursor: "pointer",
+						flexShrink: 0
+					},
+					children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronDown, { size: sizeConfig.icon }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronRight, { size: sizeConfig.icon })
+				}),
+				!canExpand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+					w: sizeConfig.icon + 6,
+					style: { flexShrink: 0 }
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+					style: { flexShrink: 0 },
+					children: renderKey()
+				}),
+				" ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+					component: "span",
+					c: "dimmed",
+					ff: "monospace",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: brackets[0]
+				}),
+				!expanded && !isEmpty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+					component: "span",
+					c: "dimmed",
+					ff: "monospace",
+					fs: "italic",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: preview
+				}),
+				(isEmpty || !expanded) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+					component: "span",
+					c: "dimmed",
+					ff: "monospace",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: brackets[1]
+				}),
+				!isEmpty && !expanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Text, {
+					component: "span",
+					c: "dimmed",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: [
+						entries.length,
+						" ",
+						entries.length === 1 ? "item" : "items"
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Collapse, {
+			in: expanded && canExpand,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+				pl: sizeConfig.indent,
+				style: {
+					borderLeft: "1px solid var(--mantine-color-default-border)",
+					marginLeft: Math.floor((sizeConfig.icon + 6) / 2)
+				},
+				children: entries.map(([key, val], index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonNode, {
+					name: String(key),
+					value: val,
+					depth: depth + 1,
+					maxDepth,
+					isLast: index === entries.length - 1,
+					isArrayItem: !isObject,
+					size
+				}, String(key)))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Box, {
+				style: {
+					display: "flex",
+					minWidth: "max-content"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+					w: sizeConfig.icon + 6,
+					style: { flexShrink: 0 }
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+					c: "dimmed",
+					ff: "monospace",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: brackets[1]
+				})]
+			})]
+		})] });
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Box, {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: sizeConfig.gap,
+			minWidth: "max-content"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+				w: sizeConfig.icon + 6,
+				style: { flexShrink: 0 }
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+				style: { flexShrink: 0 },
+				children: renderKey()
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+				style: { flexShrink: 0 },
+				children: renderPrimitive(value)
+			}),
+			!isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+				component: "span",
+				c: "dimmed",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { flexShrink: 0 },
+				children: ","
+			})
+		]
+	});
+};
+const JsonViewer = ({ data, defaultExpanded = true, maxDepth = 10, copyable = true, size = "sm" }) => {
+	const copyIconSize = getSizeConfig(size).icon + 2;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Box, {
+		pos: "relative",
+		w: "100%",
+		children: [copyable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+			pos: "absolute",
+			top: 0,
+			right: 0,
+			style: { zIndex: 1 },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.CopyButton, {
+				value: JSON.stringify(data, null, 2),
+				children: ({ copied, copy }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Tooltip, {
+					label: copied ? "Copied" : "Copy JSON",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ActionIcon, {
+						color: copied ? "teal" : "gray",
+						variant: "subtle",
+						onClick: copy,
+						size,
+						children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCheck, { size: copyIconSize }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCopy, { size: copyIconSize })
+					})
+				})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Box, {
+			pt: copyable ? 30 : 0,
+			style: { overflowX: "auto" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonNode, {
+				value: data,
+				depth: 0,
+				maxDepth,
+				size
+			})
+		})]
+	});
+};
+var JsonViewer_default = JsonViewer;
+
+//#endregion
+//#region src/components/dialogs/AlertDialog.tsx
+const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [options?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+	mb: "md",
+	children: options.message
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Group, {
+	justify: "flex-end",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		onClick: onClose,
+		children: options?.okLabel || "OK"
+	})
+})] });
+var AlertDialog_default = AlertDialog;
+
+//#endregion
+//#region src/components/dialogs/ConfirmDialog.tsx
+const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [options?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+	mb: "md",
+	children: options.message
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Group, {
+	justify: "flex-end",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		variant: "subtle",
+		onClick: () => onConfirm(false),
+		children: options?.cancelLabel || "Cancel"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		color: options?.confirmColor || "blue",
+		onClick: () => onConfirm(true),
+		children: options?.confirmLabel || "Confirm"
+	})]
+})] });
+var ConfirmDialog_default = ConfirmDialog;
+
+//#endregion
+//#region src/components/dialogs/PromptDialog.tsx
+const PromptDialog = ({ options, onSubmit }) => {
+	const [value, setValue] = (0, react.useState)(options?.defaultValue || "");
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		inputRef.current?.focus();
+	}, []);
+	const handleSubmit = () => {
+		if (!options?.required || value.trim()) onSubmit(value);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") handleSubmit();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		options?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+			mb: "md",
+			children: options.message
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.TextInput, {
+			ref: inputRef,
+			label: options?.label,
+			placeholder: options?.placeholder,
+			value,
+			onChange: (event) => setValue(event.currentTarget.value),
+			onKeyDown: handleKeyDown,
+			required: options?.required,
+			mb: "md"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Group, {
+			justify: "flex-end",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+				variant: "subtle",
+				onClick: () => onSubmit(null),
+				children: options?.cancelLabel || "Cancel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+				onClick: handleSubmit,
+				disabled: options?.required && !value.trim(),
+				children: options?.submitLabel || "OK"
+			})]
+		})
+	] });
+};
+var PromptDialog_default = PromptDialog;
+
+//#endregion
+//#region src/constants/ui.ts
+const ui = { colors: {
+	transparent: "transparent",
+	background: "var(--alepha-background)",
+	surface: "var(--alepha-surface)",
+	elevated: "var(--alepha-elevated)",
+	border: "var(--alepha-border)"
+} };
+
+//#endregion
+//#region src/services/DialogService.tsx
+var DialogService = class {
+	options = { default: {
+		centered: true,
+		withCloseButton: true,
+		size: "md",
+		overlayProps: {
+			backgroundOpacity: .55,
+			blur: 3
+		},
+		transitionProps: {
+			transition: "pop",
+			duration: 200
+		}
+	} };
+	/**
+	* Show an alert dialog with a message
+	*/
+	alert(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Alert",
+				content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog_default, {
+					options,
+					onClose: () => {
+						this.close(modalId);
+						resolve();
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Show a confirmation dialog that returns a promise
+	*/
+	confirm(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Confirm",
+				closeOnClickOutside: false,
+				closeOnEscape: false,
+				content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfirmDialog_default, {
+					options,
+					onConfirm: (confirmed) => {
+						this.close(modalId);
+						resolve(confirmed);
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Show a prompt dialog to get user input
+	*/
+	prompt(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Input",
+				closeOnClickOutside: false,
+				closeOnEscape: false,
+				content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PromptDialog_default, {
+					options,
+					onSubmit: (value) => {
+						this.close(modalId);
+						resolve(value);
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Open a custom dialog with provided content
+	*/
+	open(options) {
+		return __mantine_modals.modals.open({
+			...this.options.default,
+			...options,
+			children: options?.content || options?.message
+		});
+	}
+	/**
+	* Close the currently open dialog or a specific dialog by ID
+	*/
+	close(modalId) {
+		if (modalId) __mantine_modals.modals.close(modalId);
+		else __mantine_modals.modals.closeAll();
+	}
+	/**
+	* Show a JSON editor/viewer dialog
+	*/
+	json(data, options) {
+		this.open({
+			size: "lg",
+			title: options?.title || "Json Viewer",
+			...options,
+			content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				bdrs: "md",
+				w: "100%",
+				flex: 1,
+				p: "sm",
+				bg: ui.colors.surface,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonViewer_default, {
+					size: "xs",
+					data
+				})
+			})
+		});
+	}
+	/**
+	* Show a form dialog for structured input
+	*/
+	form(options) {
+		return Promise.resolve(null);
+	}
+	/**
+	* Show a loading/progress dialog with optional progress percentage
+	*/
+	loading(options) {}
+	/**
+	* Show an image viewer/gallery dialog
+	*/
+	image(src, options) {}
+};
+
+//#endregion
+//#region src/components/buttons/ActionButton.tsx
+const ActionMenuItem = (props) => {
+	const { item, index } = props;
+	const router = (0, __alepha_react.useRouter)();
+	const action = (0, __alepha_react.useAction)({ handler: async (e) => {
+		await item.onClick?.();
+	} }, [item.onClick]);
+	if (item.type === "divider") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Divider, {}, index);
+	if (item.type === "label") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Label, { children: item.label }, index);
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Menu, {
+		trigger: "hover",
+		position: "right-start",
+		offset: 2,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Item, {
+			leftSection: item.icon,
+			rightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronRight, { size: 14 }),
+			children: item.label
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionMenuItem, {
+			item: child,
+			index: childIndex
+		}, childIndex)) })]
+	}, index);
+	const menuItemProps = {};
+	if (props.item.onClick) menuItemProps.onClick = action.run;
+	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Item, {
+		leftSection: item.icon,
+		onClick: item.onClick,
+		color: item.color,
+		rightSection: item.active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
+			size: "xs",
+			variant: "transparent",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCheck, {})
+		}) : void 0,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
+const ActionButton = (_props) => {
+	const props = {
+		variant: "subtle",
+		..._props
+	};
+	const { tooltip, menu, icon, ...restProps } = props;
+	if (props.icon) {
+		const icon$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
+			w: 24,
+			variant: "transparent",
+			size: "sm",
+			c: "var(--mantine-color-text)",
+			...props.themeIconProps,
+			children: props.icon
+		});
+		if (!props.children) {
+			restProps.children = icon$1;
+			restProps.p ??= "xs";
+		} else restProps.leftSection = icon$1;
+	}
+	if (props.leftSection && !props.children) {
+		restProps.className ??= "mantine-Action-iconOnly";
+		restProps.p ??= "xs";
+	}
+	if (props.textVisibleFrom) {
+		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+			w: "100%",
+			visibleFrom: textVisibleFrom,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+				flex: 1,
+				...rest,
+				leftSection,
+				tooltip,
+				menu,
+				children
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+			w: "100%",
+			hiddenFrom: textVisibleFrom,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+				px: "xs",
+				...rest,
+				tooltip,
+				menu,
+				children: leftSection
+			})
+		})] });
+	}
+	const renderAction = () => {
+		if ("href" in restProps && restProps.href) {
+			if (restProps.href.startsWith("http") || restProps.target) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionHrefButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionNavigationButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+		}
+		delete restProps.classNameActive;
+		delete restProps.variantActive;
+		if ("action" in restProps && restProps.action) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionHookButton, {
+			...restProps,
+			action: restProps.action,
+			children: restProps.children
+		});
+		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionClickButton, {
+			...restProps,
+			onClick: restProps.onClick,
+			children: restProps.children
+		});
+		if ("form" in restProps && restProps.form) {
+			if (restProps.type === "reset") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionResetButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionSubmitButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+			...restProps,
+			children: restProps.children
+		});
+	};
+	let actionElement = renderAction();
+	if (menu) actionElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Menu, {
+		position: menu.position || "bottom-start",
+		width: menu.width || 200,
+		shadow: menu.shadow || "md",
+		trigger: menu.on === "hover" ? "hover" : "click",
+		...menu.menuProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Target, {
+			...menu.targetProps,
+			children: actionElement
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Menu.Dropdown, { children: menu.items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionMenuItem, {
+			item,
+			index
+		}, index)) })]
+	});
+	if (tooltip) {
+		const defaultTooltipProps = { openDelay: 1e3 };
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Tooltip, { ...typeof tooltip === "string" ? {
+			...defaultTooltipProps,
+			label: tooltip,
+			children: actionElement
+		} : {
+			...defaultTooltipProps,
+			...tooltip,
+			children: actionElement
+		} });
+	}
+	return actionElement;
+};
+var ActionButton_default = ActionButton;
+/**
+* Action button that submits a form with loading and disabled state handling.
+*/
+const ActionSubmitButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = (0, __alepha_react_form.useFormState)(form);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		...buttonProps,
+		loading: state.loading,
+		disabled: state.loading,
+		type: "submit",
+		children: props.children
+	});
+};
+const ActionResetButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = (0, __alepha_react_form.useFormState)(form);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.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.
+*
+* @example
+* ```tsx
+* const saveAction = useAction({
+*   handler: async (data) => {
+*     await api.save(data);
+*   }
+* }, []);
+*
+* <ActionButton action={saveAction}>
+*   Save
+* </ActionButton>
+* ```
+*/
+const ActionHookButton = (props) => {
+	const { action, ...buttonProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		...buttonProps,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: () => action.run(),
+		children: props.children
+	});
+};
+/**
+* Basic action button that handles click events with loading and error handling.
+*
+* @example
+* ```tsx
+* <ActionButton onClick={() => api.doSomething()}>
+*   Do Something
+* </ActionButton>
+* ```
+*/
+const ActionClickButton = (props) => {
+	const action = (0, __alepha_react.useAction)({ handler: async (e) => {
+		await props.onClick(e);
+	} }, [props.onClick]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		...props,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: action.run,
+		children: props.children
+	});
+};
+/**
+* Action for navigation with active state support.
+*/
+const ActionNavigationButton = (props) => {
+	const { active: options, classNameActive, variantActive, routerGoOptions, ...buttonProps } = props;
+	const router = (0, __alepha_react.useRouter)();
+	const { isPending, isActive } = (0, __alepha_react.useActive)(options ? {
+		href: props.href,
+		...options
+	} : { href: props.href });
+	const anchorProps = router.anchor(props.href, routerGoOptions);
+	const className = buttonProps.className || "";
+	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		component: "a",
+		loading: isPending,
+		...buttonProps,
+		...anchorProps,
+		variant: isActive && options !== false ? variantActive ?? "filled" : buttonProps.variant ?? "subtle",
+		children: props.children
+	});
+};
+const ActionHrefButton = (props) => {
+	const { active: options, classNameActive, variantActive, routerGoOptions, target, ...buttonProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
+		component: "a",
+		target,
+		...buttonProps,
+		children: props.children
+	});
+};
+
+//#endregion
+//#region src/components/buttons/DarkModeButton.tsx
+const DarkModeButton = (props) => {
+	const { setColorScheme } = (0, __mantine_core.useMantineColorScheme)();
+	const computedColorScheme = (0, __mantine_core.useComputedColorScheme)("light");
+	const [colorScheme, setColorScheme2] = (0, react.useState)("default");
+	const mode = props.mode ?? "minimal";
+	(0, react.useEffect)(() => {
+		setColorScheme2(computedColorScheme);
+	}, [computedColorScheme]);
+	const toggleColorScheme = () => {
+		setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+	};
+	if (mode === "segmented") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.SegmentedControl, {
+		value: colorScheme,
+		onChange: (value) => setColorScheme(value),
+		data: [{
+			value: "light",
+			label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				h: 20,
+				align: "center",
+				justify: "center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSun, { size: 16 })
+			})
+		}, {
+			value: "dark",
+			label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				h: 20,
+				align: "center",
+				justify: "center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMoon, { size: 16 })
+			})
+		}],
+		w: props.fullWidth ? "100%" : void 0,
+		...props.segmentedProps
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+		onClick: toggleColorScheme,
+		variant: props.variant ?? "outline",
+		size: props.size ?? "sm",
+		"aria-label": "Toggle color scheme",
+		px: "xs",
+		fullWidth: props.fullWidth ?? false,
+		icon: colorScheme === "dark" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSun, { size: 20 }) : colorScheme === "light" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMoon, { size: 20 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+			h: 20,
+			w: 20
+		}),
+		...props.actionProps
+	});
+};
+var DarkModeButton_default = DarkModeButton;
+
+//#endregion
+//#region src/components/buttons/OmnibarButton.tsx
+const OmnibarButton = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+		variant: "outline",
+		miw: 256,
+		onClick: __mantine_spotlight.spotlight.open,
+		justify: "space-between",
+		rightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Kbd, {
+			size: "sm",
+			children: "⌘+K"
+		}),
+		radius: "md",
+		...props.actionProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+			align: "center",
+			gap: "xs",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSearch, {
+				size: 16,
+				color: "gray"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+				size: "xs",
+				c: "dimmed",
+				children: "Search..."
+			})]
+		})
+	});
+};
+var OmnibarButton_default = OmnibarButton;
+
+//#endregion
+//#region src/utils/icons.tsx
+/**
+* Icon size presets following Mantine's size conventions
+*/
+const ICON_SIZES = {
+	xs: 12,
+	sm: 16,
+	md: 20,
+	lg: 24,
+	xl: 28
+};
+/**
+* Get the default icon for an input based on its type, format, or name.
+*/
+const getDefaultIcon = (params) => {
+	const { type, format, name, isEnum, isArray, size = "sm" } = params;
+	const iconSize = ICON_SIZES[size];
+	if (format) switch (format) {
+		case "email": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMail, { size: iconSize });
+		case "url":
+		case "uri": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconLink, { size: iconSize });
+		case "tel":
+		case "phone": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconPhone, { size: iconSize });
+		case "date": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCalendar, { size: iconSize });
+		case "date-time": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCalendar, { size: iconSize });
+		case "time": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconClock, { size: iconSize });
+		case "color": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconColorPicker, { size: iconSize });
+		case "uuid": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconKey, { size: iconSize });
+	}
+	if (name) {
+		const nameLower = name.toLowerCase();
+		if (nameLower.includes("password") || nameLower.includes("secret")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconKey, { size: iconSize });
+		if (nameLower.includes("email") || nameLower.includes("mail")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMail, { size: iconSize });
+		if (nameLower.includes("url") || nameLower.includes("link")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconLink, { size: iconSize });
+		if (nameLower.includes("phone") || nameLower.includes("tel")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconPhone, { size: iconSize });
+		if (nameLower.includes("color")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconPalette, { size: iconSize });
+		if (nameLower.includes("file") || nameLower.includes("upload")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconFile, { size: iconSize });
+		if (nameLower.includes("date")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCalendar, { size: iconSize });
+		if (nameLower.includes("time")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconClock, { size: iconSize });
+	}
+	if (isEnum || isArray) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSelector, { size: iconSize });
+	if (type) switch (type) {
+		case "boolean": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconToggleLeft, { size: iconSize });
+		case "number":
+		case "integer": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconHash, { size: iconSize });
+		case "array": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconList, { size: iconSize });
+		case "string": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconLetterCase, { size: iconSize });
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconAt, { size: iconSize });
+};
+
+//#endregion
+//#region src/utils/string.ts
+/**
+* Capitalizes the first letter of a string.
+*
+* @example
+* capitalize("hello") // "Hello"
+*/
+const capitalize = (str) => {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+};
+/**
+* Converts a path or identifier string into a pretty display name.
+* Removes slashes and capitalizes the first letter.
+*
+* @example
+* prettyName("/userName") // "UserName"
+* prettyName("email") // "Email"
+*/
+const prettyName = (name) => {
+	return capitalize(name.replaceAll("/", ""));
+};
+
+//#endregion
+//#region src/utils/parseInput.ts
+const parseInput = (props, form) => {
+	const disabled = false;
+	const id = props.input.props.id;
+	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
+	const description = props.description ?? ("description" in props.input.schema && typeof props.input.schema.description === "string" ? props.input.schema.description : void 0);
+	const error = form.error && form.error instanceof __alepha_core.TypeBoxError ? form.error.value.message : void 0;
+	const icon = props.icon ?? getDefaultIcon({
+		type: props.input.schema && "type" in props.input.schema ? String(props.input.schema.type) : void 0,
+		format: props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0,
+		name: props.input.props.name,
+		isEnum: props.input.schema && "enum" in props.input.schema && Boolean(props.input.schema.enum),
+		isArray: props.input.schema && "type" in props.input.schema && props.input.schema.type === "array"
+	});
+	const format = props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0;
+	const required = props.input.required;
+	const schema = props.input.schema;
+	const inputProps = {
+		label,
+		description,
+		error,
+		required,
+		disabled
+	};
+	if ("minLength" in schema && typeof schema.minLength === "number") inputProps.minLength = schema.minLength;
+	if ("maxLength" in schema && typeof schema.maxLength === "number") inputProps.maxLength = schema.maxLength;
+	if ("minimum" in schema && typeof schema.minimum === "number") inputProps.minimum = schema.minimum;
+	if ("maximum" in schema && typeof schema.maximum === "number") inputProps.maximum = schema.maximum;
+	return {
+		id,
+		icon,
+		format,
+		schema: props.input.schema,
+		inputProps
+	};
+};
+
+//#endregion
+//#region src/components/form/ControlDate.tsx
+/**
+* ControlDate component for handling date, datetime, and time inputs.
+*
+* Features:
+* - DateInput for date format
+* - DateTimePicker for date-time format
+* - TimeInput for time format
+*
+* Automatically detects date formats from schema and renders appropriate picker.
+*/
+const ControlDate = (props) => {
+	const { inputProps, id, icon, format } = parseInput(props, (0, __alepha_react_form.useFormState)(props.input));
+	if (!props.input?.props) return null;
+	if (props.datetime || format === "date-time") {
+		const dateTimePickerProps = typeof props.datetime === "object" ? props.datetime : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_dates.DateTimePicker, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
+			onChange: (value) => {
+				props.input.set(value ? new Date(value).toISOString() : void 0);
+			},
+			...dateTimePickerProps
+		});
+	}
+	if (props.date || format === "date") {
+		const dateInputProps = typeof props.date === "object" ? props.date : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_dates.DateInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
+			onChange: (value) => {
+				props.input.set(value ? new Date(value).toISOString().slice(0, 10) : void 0);
+			},
+			...dateInputProps
+		});
+	}
+	if (props.time || format === "time") {
+		const timeInputProps = typeof props.time === "object" ? props.time : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_dates.TimeInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue,
+			onChange: (event) => {
+				props.input.set(event.currentTarget.value);
+			},
+			...timeInputProps
+		});
+	}
+	return null;
+};
+var ControlDate_default = ControlDate;
+
+//#endregion
+//#region src/components/form/ControlNumber.tsx
+/**
+*
+*/
+const ControlNumber = (props) => {
+	const { inputProps, id, icon } = parseInput(props, (0, __alepha_react_form.useFormState)(props.input));
+	const ref = (0, react.useRef)(null);
+	const [value, setValue] = (0, react.useState)(props.input.props.defaultValue);
+	(0, __alepha_react.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__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Input.Wrapper, {
+		...inputProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				height: 32,
+				padding: 8
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Slider, {
+				...inputProps,
+				ref,
+				id,
+				...inputPropsWithoutType,
+				...props.sliderProps,
+				value,
+				onChange: (val) => {
+					setValue(val);
+					props.input.set(val);
+				}
+			})
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.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 : "object";
+		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;
+			field.type = "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 for assistance...", ...textInputProps }) => {
+	const [helpOpened, setHelpOpened] = (0, react.useState)(false);
+	const [textValue, setTextValue] = (0, react.useState)(value);
+	const inputRef = (0, react.useRef)(null);
+	const fields = schema ? extractSchemaFields(schema) : [];
+	const [error, setError] = (0, react.useState)(null);
+	const isValid = (value$1) => {
+		try {
+			(0, __alepha_postgres.parseQueryString)(value$1.trim());
+		} catch (e) {
+			setError(e.message);
+			return false;
+		}
+		setError(null);
+		return true;
+	};
+	const handleTextChange = (newValue) => {
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+	};
+	const handleClear = () => {
+		setTextValue("");
+		onChange?.("");
+		isValid("");
+	};
+	const handleInsert = (text) => {
+		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+		setTimeout(() => {
+			inputRef.current?.focus();
+			const length = inputRef.current?.value.length || 0;
+			inputRef.current?.setSelectionRange(length, length);
+		}, 0);
+	};
+	(0, __alepha_react.useEvents)({ "form:change": (event) => {
+		if (event.id === inputRef.current?.form?.id) {
+			if (event.path === textInputProps["data-path"]) setTextValue(event.value ?? "");
+		}
+	} }, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Popover, {
+		width: 800,
+		position: "bottom-start",
+		shadow: "md",
+		opened: helpOpened,
+		onChange: setHelpOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.TextInput, {
+			ref: inputRef,
+			placeholder,
+			value: textValue,
+			onChange: (e) => handleTextChange(e.currentTarget.value),
+			onFocus: () => setHelpOpened(true),
+			leftSection: error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconFilter, { size: 16 }),
+			rightSection: textValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ActionIcon, {
+				size: "sm",
+				variant: "subtle",
+				color: "gray",
+				onClick: handleClear,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, { size: 14 })
+			}),
+			...textInputProps
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryHelp, {
+				fields,
+				onInsert: handleInsert
+			})
+		})]
+	});
+};
+function QueryHelp({ fields, onInsert }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Group, {
+		gap: "md",
+		align: "flex-start",
+		wrap: "nowrap",
+		bg: ui.colors.surface,
+		p: "sm",
+		bdrs: "sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Stack, {
+				gap: "md",
+				style: { flex: 1 },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Stack, {
+						gap: "xs",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+							size: "sm",
+							fw: 600,
+							children: "Operators"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Stack, {
+							gap: 4,
+							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert(info.symbol),
+									children: info.symbol
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+									size: "xs",
+									c: "dimmed",
+									style: { flex: 1 },
+									children: info.label
+								})]
+							}, key))
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Divider, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Stack, {
+						gap: "xs",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+							size: "sm",
+							fw: 600,
+							children: "Logic"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Stack, {
+							gap: 4,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert("&"),
+									children: "&"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+									size: "xs",
+									c: "dimmed",
+									children: "AND"
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert("|"),
+									children: "|"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+									size: "xs",
+									c: "dimmed",
+									children: "OR"
+								})]
+							})]
+						})]
+					})
+				]
+			}),
+			fields.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Divider, { orientation: "vertical" }),
+			fields.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+				direction: "column",
+				gap: "xs",
+				style: { flex: 2 },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+					size: "sm",
+					fw: 600,
+					children: "Fields"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+					direction: "column",
+					gap: 4,
+					style: {
+						maxHeight: 300,
+						overflowY: "auto"
+					},
+					children: fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+						gap: "xs",
+						wrap: "nowrap",
+						align: "flex-start",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+								px: "xs",
+								size: "xs",
+								h: 24,
+								variant: "default",
+								justify: "end",
+								miw: 120,
+								onClick: () => onInsert(field.path),
+								children: field.path
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+								mt: 3,
+								direction: "column",
+								gap: 2,
+								style: {
+									flex: 1,
+									minWidth: 0
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+									size: "xs",
+									c: "dimmed",
+									lineClamp: 1,
+									children: field.description || field.type
+								}), field.enum && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Group, {
+									gap: 0,
+									wrap: "wrap",
+									children: field.enum.map((enumValue) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+										px: "xs",
+										size: "xs",
+										h: 24,
+										onClick: () => onInsert(enumValue),
+										children: enumValue
+									}, enumValue))
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Badge, {
+								size: "xs",
+								variant: "light",
+								style: { flexShrink: 0 },
+								children: field.type
+							})
+						]
+					}, field.path))
+				})]
+			})
+		]
+	});
+}
+var ControlQueryBuilder_default = ControlQueryBuilder;
+
+//#endregion
+//#region src/components/form/ControlSelect.tsx
+/**
+* ControlSelect component for handling Select, MultiSelect, and TagsInput.
+*
+* Features:
+* - Basic Select with enum support
+* - MultiSelect for array of enums
+* - TagsInput for array of strings (no enum)
+* - Future: Lazy loading
+* - Future: Searchable/filterable options
+* - Future: Custom option rendering
+*
+* Automatically detects enum values and array types from schema.
+*/
+const ControlSelect = (props) => {
+	const { inputProps, id, icon } = parseInput(props, (0, __alepha_react_form.useFormState)(props.input));
+	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
+	let itemsEnum;
+	if (isArray && "items" in props.input.schema && props.input.schema.items) {
+		const items = props.input.schema.items;
+		if ("enum" in items && Array.isArray(items.enum)) itemsEnum = items.enum;
+	}
+	const enumValues = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum : [];
+	const [data, setData] = (0, react.useState)([]);
+	(0, react.useEffect)(() => {
+		if (!props.input?.props) return;
+		if (props.loader) props.loader().then(setData);
+		else setData(enumValues);
+	}, [props.input, props.loader]);
+	if (!props.input?.props) return null;
+	if (props.segmented) {
+		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.SegmentedControl, {
+				disabled: inputProps.disabled,
+				defaultValue: String(props.input.props.defaultValue),
+				...segmentedControlProps,
+				onChange: (value) => {
+					props.input.set(value);
+				},
+				data: data.slice(0, 10)
+			}) })
+		});
+	}
+	if (props.autocomplete) {
+		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Autocomplete, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			data,
+			...props.input.props,
+			...autocompleteProps
+		});
+	}
+	if (isArray && !itemsEnum || props.tags) {
+		const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.TagsInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
+			onChange: (value) => {
+				props.input.set(value);
+			},
+			...tagsInputProps
+		});
+	}
+	if (isArray && itemsEnum || props.multi) {
+		const data$1 = itemsEnum?.map((value) => ({
+			value,
+			label: value
+		})) || [];
+		const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.MultiSelect, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			data: data$1,
+			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
+			onChange: (value) => {
+				props.input.set(value);
+			},
+			...multiSelectProps
+		});
+	}
+	const selectProps = typeof props.select === "object" ? props.select : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Select, {
+		...inputProps,
+		id,
+		leftSection: icon,
+		data,
+		...props.input.props,
+		...selectProps
+	});
+};
+var ControlSelect_default = ControlSelect;
+
+//#endregion
+//#region src/components/form/Control.tsx
+/**
+* Generic form control that renders the appropriate input based on the schema and props.
+*
+* Supports:
+* - TextInput (with format detection: email, url, tel)
+* - Textarea
+* - NumberInput (for number/integer types)
+* - FileInput
+* - ColorInput (for color format)
+* - Select (for enum types)
+* - Autocomplete
+* - PasswordInput
+* - Switch (for boolean types)
+* - SegmentedControl (for enum types)
+* - 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.
+*/
+const Control = (_props) => {
+	const { inputProps, id, icon, format, schema } = parseInput(_props, (0, __alepha_react_form.useFormState)(_props.input, ["error"]));
+	if (!_props.input?.props) return null;
+	const props = {
+		..._props,
+		...schema.$control
+	};
+	if (props.query) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlQueryBuilder_default, {
+		...props.input.props,
+		...inputProps,
+		schema: props.query,
+		value: props.input.props.value,
+		onChange: (value) => {
+			props.input.set(value);
+		}
+	});
+	if (props.custom) {
+		const Custom = props.custom;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				flex: 1,
+				mt: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Custom, {
+					defaultValue: props.input.props.defaultValue,
+					onChange: (value) => {
+						props.input.set(value);
+					}
+				})
+			})
+		});
+	}
+	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
+		const controlNumberProps = typeof props.number === "object" ? props.number : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlNumber_default, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			icon,
+			...controlNumberProps
+		});
+	}
+	if (props.file) {
+		const fileInputProps = typeof props.file === "object" ? props.file : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.FileInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			onChange: (file) => {
+				props.input.set(file);
+			},
+			...fileInputProps
+		});
+	}
+	if (props.color || format === "color") {
+		const colorInputProps = typeof props.color === "object" ? props.color : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ColorInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...colorInputProps
+		});
+	}
+	const isEnum = props.input.schema && "enum" in props.input.schema && props.input.schema.enum;
+	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
+	if (isEnum || isArray || props.select) {
+		const opts = typeof props.select === "object" ? props.select : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlSelect_default, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			icon,
+			...opts
+		});
+	}
+	if (props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean" || props.switch) {
+		const switchProps = typeof props.switch === "object" ? props.switch : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Switch, {
+			...inputProps,
+			id,
+			color: "blue",
+			defaultChecked: props.input.props.defaultValue,
+			...props.input.props,
+			...switchProps
+		});
+	}
+	if (props.password || props.input.props.name?.includes("password")) {
+		const passwordInputProps = typeof props.password === "object" ? props.password : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.PasswordInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...passwordInputProps
+		});
+	}
+	if (props.area) {
+		const textAreaProps = typeof props.area === "object" ? props.area : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Textarea, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...textAreaProps
+		});
+	}
+	if (props.date || props.datetime || props.time || format === "date" || format === "date-time" || format === "time") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlDate_default, {
+		input: props.input,
+		title: props.title,
+		description: props.description,
+		icon,
+		date: props.date,
+		datetime: props.datetime,
+		time: props.time
+	});
+	const textInputProps = typeof props.text === "object" ? props.text : {};
+	const getInputType = () => {
+		switch (format) {
+			case "email": return "email";
+			case "url":
+			case "uri": return "url";
+			case "tel":
+			case "phone": return "tel";
+			default: return;
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.TextInput, {
+		...inputProps,
+		id,
+		leftSection: icon,
+		type: getInputType(),
+		...props.input.props,
+		...textInputProps
+	});
+};
+var Control_default = Control;
+
+//#endregion
+//#region src/components/form/TypeForm.tsx
+/**
+* TypeForm component that automatically renders all form inputs based on schema.
+* Uses the Control component to render individual fields and Mantine Grid for responsive layout.
+*
+* @example
+* ```tsx
+* import { t } from "alepha";
+* import { useForm } from "@alepha/react-form";
+* import { TypeForm } from "@alepha/ui";
+*
+* const form = useForm({
+*   schema: t.object({
+*     username: t.text(),
+*     email: t.text(),
+*     age: t.integer(),
+*     subscribe: t.boolean(),
+*   }),
+*   handler: (values) => {
+*     console.log(values);
+*   },
+* });
+*
+* return <TypeForm form={form} columns={2} />;
+* ```
+*/
+const TypeForm = (props) => {
+	const { form, columns = 3, children, controlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
+	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$1 = field.schema;
+		if ("type" in schema$1) {
+			if (schema$1.type === "object") return false;
+		}
+		if ("properties" in schema$1 && schema$1.properties) return false;
+		return true;
+	});
+	const colSpan = typeof columns === "number" ? {
+		xs: 12,
+		sm: 6,
+		lg: 12 / columns
+	} : {
+		base: columns.base ? 12 / columns.base : void 0,
+		xs: columns.xs ? 12 / columns.xs : 12,
+		sm: columns.sm ? 12 / columns.sm : 6,
+		md: columns.md ? 12 / columns.md : void 0,
+		lg: columns.lg ? 12 / columns.lg : 4,
+		xl: columns.xl ? 12 / columns.xl : void 0
+	};
+	const renderFields = () => {
+		if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(form.input) });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Grid, { children: supportedFields.map((fieldName) => {
+			const field = form.input[fieldName];
+			if (!field || typeof field !== "object" || !("schema" in field)) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Grid.Col, {
+				span: colSpan,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Control_default, {
+					input: field,
+					...controlProps
+				})
+			}, fieldName);
+		}) });
+	};
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+		direction: "column",
+		gap: "sm",
+		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+			gap: "sm",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+				form,
+				...submitButtonProps,
+				children: submitButtonProps?.children ?? "Submit"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+				type: "reset",
+				children: "Reset"
+			})]
+		})]
+	});
+	if (skipFormElement) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+		...form.props,
+		children: content
+	});
+};
+var TypeForm_default = TypeForm;
+
+//#endregion
+//#region src/components/buttons/BurgerButton.tsx
+const BurgerButton = (props) => {
+	const [opened, setOpened] = (0, __alepha_react.useStore)("alepha.ui.sidebar.opened");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Burger, {
+		opened,
+		onClick: () => setOpened(!opened),
+		hiddenFrom: "sm",
+		size: "sm",
+		...props
+	});
+};
+var BurgerButton_default = BurgerButton;
+
+//#endregion
+//#region src/components/buttons/LanguageButton.tsx
+const LanguageButton = (props) => {
+	const i18n = (0, __alepha_react_i18n.useI18n)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconLanguage, {}),
+		variant: "outline",
+		menu: { items: i18n.languages.map((lang) => ({
+			label: i18n.tr(lang),
+			onClick: () => i18n.setLang(lang),
+			active: i18n.lang === lang
+		})) },
+		...props.actionProps
+	});
+};
+var LanguageButton_default = LanguageButton;
+
+//#endregion
+//#region src/components/layout/AppBar.tsx
+const AppBar = (props) => {
+	const { items = [] } = props;
+	const renderItem = (item, index) => {
+		if ("type" in item) {
+			if (item.type === "burger") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BurgerButton_default, {}, index);
+			if (item.type === "dark") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DarkModeButton_default, { ...item.props }, index);
+			if (item.type === "search") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OmnibarButton_default, { ...item.props }, index);
+			if (item.type === "lang") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageButton_default, { ...item.props }, index);
+			if (item.type === "spacer") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { w: 16 }, index);
+			if (item.type === "divider") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Divider, { orientation: "vertical" }, index);
+		}
+		if ("element" in item) return item.element;
+		return null;
+	};
+	const leftItems = items.filter((item) => item.position === "left");
+	const centerItems = items.filter((item) => item.position === "center");
+	const rightItems = items.filter((item) => item.position === "right");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+		h: "100%",
+		align: "center",
+		px: "md",
+		justify: "space-between",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				flex: 1,
+				children: leftItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+					ml: index === 0 ? 0 : "md",
+					align: "center",
+					children: renderItem(item, index)
+				}, index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: centerItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				mx: "md",
+				align: "center",
+				children: renderItem(item, index)
+			}, index)) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				flex: 1,
+				gap: "md",
+				align: "center",
+				justify: "end",
+				children: rightItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+					ml: index === 0 ? 0 : "md",
+					align: "center",
+					children: renderItem(item, index)
+				}, index))
+			})
+		]
+	});
+};
+var AppBar_default = AppBar;
+
+//#endregion
+//#region src/components/layout/Sidebar.tsx
+const Sidebar = (props) => {
+	const router = (0, __alepha_react.useRouter)();
+	const { top = [], bottom = [], onItemClick } = props;
+	const renderNode = (item, key) => {
+		if ("type" in item) {
+			if (item.type === "spacer") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { h: 16 }, key);
+			if (item.type === "divider") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				h: 1,
+				bg: "var(--alepha-border)",
+				my: "md",
+				mx: "sm"
+			}, key);
+			if (item.type === "search") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OmnibarButton_default, { collapsed: props.collapsed }, key);
+			if (item.type === "section") {
+				if (props.collapsed) return;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+					mt: "md",
+					mb: "xs",
+					align: "center",
+					gap: "xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
+						c: "dimmed",
+						size: "xs",
+						variant: "transparent",
+						children: item.icon
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: "bold",
+						children: item.label
+					}, key)]
+				});
+			}
+		}
+		if ("element" in item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: item.element }, key);
+		if (props.collapsed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsedItem, {
+			item,
+			level: 0,
+			onItemClick,
+			theme: props.theme ?? {}
+		}, key);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItem, {
+			item,
+			level: 0,
+			onItemClick,
+			theme: props.theme ?? {}
+		}, key);
+	};
+	const padding = "md";
+	const gap = props.gap;
+	const menu = props.menu ?? router.concretePages.map((page) => ({
+		label: page.label ?? page.name,
+		description: page.description,
+		icon: page.icon,
+		href: page.path
+	}));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+		flex: 1,
+		py: padding,
+		direction: "column",
+		className: "overflow-auto",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+				gap,
+				px: padding,
+				direction: "column",
+				children: [top.map((item, index) => renderNode(item, index)), menu.filter((it) => it.position === "top").map((item, index) => renderNode(item, index + top.length))]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				gap,
+				px: padding,
+				direction: "column",
+				flex: 1,
+				className: "overflow-auto",
+				children: menu.filter((it) => !it.position).map((item, index) => renderNode(item, index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+				gap,
+				px: padding,
+				direction: "column",
+				children: [bottom.map((item, index) => renderNode(item, index)), menu.filter((it) => it.position === "bottom").map((item, index) => renderNode(item, index + bottom.length))]
+			})
+		]
+	});
+};
+const SidebarItem = (props) => {
+	const { item, level } = props;
+	const maxLevel = 2;
+	const router = (0, __alepha_react.useRouter)();
+	const isActive = (0, react.useCallback)((item$1) => {
+		if (!item$1.children) return false;
+		for (const child of item$1.children) {
+			if (child.href) {
+				if (router.isActive(child.href)) return true;
+			}
+			if (isActive(child)) return true;
+		}
+		return false;
+	}, []);
+	const [isOpen, setIsOpen] = (0, react.useState)(isActive(item));
+	(0, __alepha_react.useEvents)({ "react:transition:end": () => {
+		if (isActive(item)) setIsOpen(true);
+	} }, []);
+	if (level > maxLevel) return null;
+	const handleItemClick = (e) => {
+		if (!props.item.target) e.preventDefault();
+		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
+		else {
+			props.onItemClick?.(item);
+			item.onClick?.();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+		direction: "column",
+		ps: level === 0 ? 0 : 32,
+		pos: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+			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",
+			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
+			onClick: handleItemClick,
+			leftSection: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+				w: "100%",
+				align: "center",
+				gap: "sm",
+				children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
+					size: level === 0 ? "sm" : "xs",
+					variant: "transparent",
+					children: item.icon
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+					direction: "column",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: item.label }), item.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+						size: "xs",
+						c: "dimmed",
+						children: item.description
+					})]
+				})]
+			}),
+			rightSection: item.children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronDown, { size: 14 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronRight, { size: 14 }) }) : props.item.rightSection,
+			...props.item.actionProps
+		}), item.children && isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+			direction: "column",
+			"data-parent-level": level,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { style: {
+				position: "absolute",
+				width: 1,
+				background: "linear-gradient(to bottom, transparent, var(--alepha-border), transparent)",
+				top: 48,
+				left: 20 + 32 * level,
+				bottom: 16
+			} }), item.children.map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItem, {
+				item: child,
+				level: level + 1,
+				onItemClick: props.onItemClick,
+				theme: props.theme
+			}, index))]
+		})]
+	});
+};
+const SidebarCollapsedItem = (props) => {
+	const { item, level } = props;
+	const router = (0, __alepha_react.useRouter)();
+	const isActive = (0, react.useCallback)((item$1) => {
+		if (!item$1.children) return false;
+		for (const child of item$1.children) {
+			if (child.href) {
+				if (router.isActive(child.href)) return true;
+			}
+			if (isActive(child)) return true;
+		}
+		return false;
+	}, []);
+	const [isOpen, setIsOpen] = (0, react.useState)(isActive(item));
+	const handleItemClick = (e) => {
+		if (!props.item.target) e.preventDefault();
+		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
+		else {
+			props.onItemClick?.(item);
+			item.onClick?.();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+		variant: "subtle",
+		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
+		variantActive: "default",
+		radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
+		onClick: handleItemClick,
+		icon: item.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSquareRounded, {}),
+		href: props.item.href,
+		target: props.item.target,
+		menu: item.children ? {
+			position: "right",
+			on: "hover",
+			items: item.children.map((child) => ({
+				label: child.label,
+				href: child.href,
+				icon: child.icon,
+				children: child.children
+			}))
+		} : void 0,
+		...props.item.actionProps
+	});
+};
+
+//#endregion
+//#region src/components/layout/AdminShell.tsx
+const AdminShell = (props) => {
+	const [opened, setOpened] = (0, __alepha_react.useStore)("alepha.ui.sidebar.opened");
+	const [collapsed] = (0, __alepha_react.useStore)("alepha.ui.sidebar.collapsed", props.sidebarProps?.collapsed);
+	(0, __alepha_react.useEvents)({ "react:transition:begin": () => {
+		setOpened(false);
+	} }, []);
+	const defaultAppBarItems = [{
+		position: "left",
+		type: "burger"
+	}];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.AppShell, {
+		padding: "md",
+		header: { height: 60 },
+		navbar: props.sidebarProps !== void 0 ? {
+			width: collapsed ? { base: 72 } : { base: 300 },
+			breakpoint: "sm",
+			collapsed: { mobile: !opened }
+		} : void 0,
+		footer: props.footer ? { height: 60 } : void 0,
+		...props.appShellProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.AppShell.Header, {
+				bg: ui.colors.surface,
+				...props.appShellHeaderProps,
+				children: props.header ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppBar_default, {
+					items: defaultAppBarItems,
+					...props.appBarProps
+				})
+			}),
+			props.sidebarProps !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.AppShell.Navbar, {
+				bg: ui.colors.surface,
+				...props.appShellNavbarProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {
+					collapsed,
+					...props.sidebarProps
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.AppShell.Main, {
+				...props.appShellMainProps,
+				children: props.children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__alepha_react.NestedView, {})
+			}),
+			props.footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.AppShell.Footer, {
+				bg: ui.colors.surface,
+				...props.appShellFooterProps,
+				children: props.footer
+			})
+		]
+	});
+};
+var AdminShell_default = AdminShell;
+
+//#endregion
+//#region src/components/table/DataTable.tsx
+const DataTable = (props) => {
+	const [items, setItems] = (0, react.useState)(typeof props.items === "function" ? { content: [] } : props.items);
+	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+	const [page, setPage] = (0, react.useState)(1);
+	const [size, setSize] = (0, react.useState)(String(defaultSize));
+	const [currentPage, setCurrentPage] = (0, react.useState)(0);
+	const alepha = (0, __alepha_react.useInject)(__alepha_core.Alepha);
+	const form = (0, __alepha_react_form.useForm)({
+		schema: __alepha_core.t.object({
+			...props.filters ? props.filters.properties : {},
+			page: __alepha_core.t.number({ default: 0 }),
+			size: __alepha_core.t.number({ default: defaultSize }),
+			sort: __alepha_core.t.optional(__alepha_core.t.string())
+		}),
+		handler: async (values, args) => {
+			if (typeof props.items === "function") {
+				const response = await props.items(values, { items: items.content });
+				if (props.infinityScroll && values.page > 0) setItems((prev) => ({
+					...response,
+					content: [...prev.content, ...response.content]
+				}));
+				else setItems(response);
+				setCurrentPage(values.page);
+			}
+		},
+		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;
+			}
+			props.onFilterChange?.(key, value, form);
+		}
+	}, [items]);
+	(0, __mantine_hooks.useDebouncedCallback)(() => form.submit(), { delay: 800 });
+	const dt = (0, __alepha_react.useInject)(__alepha_datetime.DateTimeProvider);
+	(0, react.useEffect)(() => {
+		if (props.submitOnInit) form.submit();
+		if (props.submitEvery) {
+			const it = dt.createInterval(() => {
+				form.submit();
+			}, props.submitEvery);
+			return () => dt.clearInterval(it);
+		}
+	}, []);
+	(0, react.useEffect)(() => {
+		if (typeof props.items !== "function") setItems(props.items);
+	}, [props.items]);
+	(0, react.useEffect)(() => {
+		if (!props.infinityScroll || typeof props.items !== "function") return;
+		const handleScroll = () => {
+			if (form.submitting) return;
+			const scrollTop = window.scrollY;
+			const windowHeight = window.innerHeight;
+			const docHeight = document.documentElement.scrollHeight;
+			if (scrollTop + windowHeight >= docHeight - 300) {
+				const totalPages = items.page?.totalPages ?? 1;
+				if (currentPage + 1 < totalPages) form.input.page.set(currentPage + 1);
+			}
+		};
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [
+		props.infinityScroll,
+		form.submitting,
+		items.page?.totalPages,
+		currentPage,
+		form
+	]);
+	const head = Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Table.Th, {
+		style: { ...col.fit ? {
+			width: "1%",
+			whiteSpace: "nowrap"
+		} : {} },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+			justify: "space-between",
+			radius: 0,
+			fullWidth: true,
+			size: "xs",
+			children: col.label
+		})
+	}, key));
+	const rows = items.content.map((item, index) => {
+		const trProps = props.tableTrProps ? props.tableTrProps(item) : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Table.Tr, {
+			...trProps,
+			children: Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Table.Td, { children: col.value(item, {
+				index,
+				form,
+				alepha
+			}) }, key))
+		}, JSON.stringify(item));
+	});
+	const schema = __alepha_core.t.omit(form.options.schema, [
+		"page",
+		"size",
+		"sort"
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+		direction: "column",
+		gap: "sm",
+		flex: 1,
+		children: [
+			props.filters ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TypeForm_default, {
+				...props.typeFormProps,
+				form,
+				schema
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
+				flex: 1,
+				className: "overflow-auto",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Table, {
+					striped: true,
+					withRowBorders: true,
+					withColumnBorders: true,
+					withTableBorder: true,
+					stripedColor: "",
+					...props.tableProps,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Table.Thead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Table.Tr, { children: head }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Table.Tbody, { children: rows })]
+				})
+			}),
+			!props.infinityScroll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+				justify: "space-between",
+				align: "center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Pagination, {
+					withEdges: true,
+					total: items.page?.totalPages ?? 1,
+					value: page,
+					onChange: (value) => {
+						form.input.page.set(value - 1);
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.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;
+
+//#endregion
+//#region src/hooks/useDialog.ts
+/**
+* Use this hook to access the Dialog Service for showing various dialog types.
+*
+* @example
+* const dialog = useDialog();
+* await dialog.alert({ title: "Alert", message: "This is an alert message" });
+* const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
+* const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
+*/
+const useDialog = () => {
+	return (0, __alepha_react.useInject)(DialogService);
+};
+
+//#endregion
+//#region src/index.ts
+/**
+* Mantine
+*
+* @module alepha.ui
+*/
+const AlephaUI = (0, __alepha_core.$module)({
+	name: "alepha.ui",
+	services: [
+		DialogService,
+		require_AlephaMantineProvider.ToastService,
+		RootRouter
+	],
+	register: (alepha) => {
+		alepha.with(__alepha_react_i18n.AlephaReactI18n);
+		alepha.with(__alepha_react_head.AlephaReactHead);
+		alepha.with(__alepha_react_form.AlephaReactForm);
+		alepha.with(DialogService);
+		alepha.with(require_AlephaMantineProvider.ToastService);
+	}
+});
+
+//#endregion
+exports.ActionButton = ActionButton_default;
+exports.AdminShell = AdminShell_default;
+exports.AlephaMantineProvider = require_AlephaMantineProvider.AlephaMantineProvider_default;
+exports.AlephaUI = AlephaUI;
+exports.AlertDialog = AlertDialog_default;
+exports.AppBar = AppBar_default;
+exports.ConfirmDialog = ConfirmDialog_default;
+exports.Control = Control_default;
+exports.ControlDate = ControlDate_default;
+exports.ControlQueryBuilder = ControlQueryBuilder_default;
+exports.ControlSelect = ControlSelect_default;
+exports.DarkModeButton = DarkModeButton_default;
+exports.DataTable = DataTable_default;
+exports.DialogService = DialogService;
+Object.defineProperty(exports, 'Flex', {
+  enumerable: true,
+  get: function () {
+    return __mantine_core.Flex;
+  }
+});
+exports.ICON_SIZES = ICON_SIZES;
+exports.JsonViewer = JsonViewer_default;
+exports.OPERATOR_INFO = OPERATOR_INFO;
+exports.Omnibar = require_AlephaMantineProvider.Omnibar_default;
+exports.OmnibarButton = OmnibarButton_default;
+exports.PromptDialog = PromptDialog_default;
+exports.RootRouter = RootRouter;
+exports.Sidebar = Sidebar;
+Object.defineProperty(exports, 'Text', {
+  enumerable: true,
+  get: function () {
+    return __mantine_core.Text;
+  }
+});
+exports.ToastService = require_AlephaMantineProvider.ToastService;
+exports.TypeForm = TypeForm_default;
+exports.capitalize = capitalize;
+exports.extractSchemaFields = extractSchemaFields;
+exports.getDefaultIcon = getDefaultIcon;
+exports.getOperatorsForField = getOperatorsForField;
+exports.prettyName = prettyName;
+exports.ui = ui;
+exports.useDialog = useDialog;
+exports.useToast = require_AlephaMantineProvider.useToast;
+//# sourceMappingURL=index.cjs.map