@alepha/ui 0.11.3 → 0.11.4

package/dist/{index.js → index.mjs}

@@ -1,61 +1,61 @@
-import { n as Omnibar_default, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-DDbIijPF.js";
+import { i as ToastService, n as Omnibar_default, r as useToast, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-CtIV-8MV.mjs";
 import { $module, TypeBoxError } from "@alepha/core";
-import { $page, AlephaReact, useActive, useAlepha, useInject, useRouter } from "@alepha/react";
+import { AlephaReactForm, 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 { ActionIcon, Autocomplete, Badge, Box, Button, Center, Checkbox, ColorInput, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Loader, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, ScrollArea, SegmentedControl, Select, Switch, Table, TagsInput, Text, TextInput, Textarea, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { notifications } from "@mantine/notifications";
-import { IconAlertTriangle, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconChevronUp, IconCircle, IconClock, IconColorPicker, IconColumns, IconDownload, IconFile, IconHash, IconInfoCircle, IconKey, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconRefresh, IconSearch, IconSelector, IconSun, IconToggleLeft, IconX } from "@tabler/icons-react";
-import { useFormState } from "@alepha/react-form";
+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 { spotlight } from "@mantine/spotlight";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 
 //#region src/RootRouter.ts
 var RootRouter = class {
 	root = $page({
 		path: "/",
-		lazy: () => import("./AlephaMantineProvider-pOu8hOzK.js")
+		lazy: () => import("./AlephaMantineProvider-D-vu9aCD.mjs")
 	});
 };
 
 //#endregion
 //#region src/components/dialogs/AlertDialog.tsx
-function AlertDialog({ options, onClose }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
-		mb: "md",
-		children: options.message
-	}), /* @__PURE__ */ jsx(Group, {
-		justify: "flex-end",
-		children: /* @__PURE__ */ jsx(Button, {
-			onClick: onClose,
-			children: options?.okLabel || "OK"
-		})
-	})] });
-}
+const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
+	mb: "md",
+	children: options.message
+}), /* @__PURE__ */ jsx(Group, {
+	justify: "flex-end",
+	children: /* @__PURE__ */ jsx(Button, {
+		onClick: onClose,
+		children: options?.okLabel || "OK"
+	})
+})] });
+var AlertDialog_default = AlertDialog;
 
 //#endregion
 //#region src/components/dialogs/ConfirmDialog.tsx
-function ConfirmDialog({ options, onConfirm }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
-		mb: "md",
-		children: options.message
-	}), /* @__PURE__ */ jsxs(Group, {
-		justify: "flex-end",
-		children: [/* @__PURE__ */ jsx(Button, {
-			variant: "subtle",
-			onClick: () => onConfirm(false),
-			children: options?.cancelLabel || "Cancel"
-		}), /* @__PURE__ */ jsx(Button, {
-			color: options?.confirmColor || "blue",
-			onClick: () => onConfirm(true),
-			children: options?.confirmLabel || "Confirm"
-		})]
-	})] });
-}
+const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
+	mb: "md",
+	children: options.message
+}), /* @__PURE__ */ jsxs(Group, {
+	justify: "flex-end",
+	children: [/* @__PURE__ */ jsx(Button, {
+		variant: "subtle",
+		onClick: () => onConfirm(false),
+		children: options?.cancelLabel || "Cancel"
+	}), /* @__PURE__ */ jsx(Button, {
+		color: options?.confirmColor || "blue",
+		onClick: () => onConfirm(true),
+		children: options?.confirmLabel || "Confirm"
+	})]
+})] });
+var ConfirmDialog_default = ConfirmDialog;
 
 //#endregion
 //#region src/components/dialogs/PromptDialog.tsx
-function PromptDialog({ options, onSubmit }) {
+const PromptDialog = ({ options, onSubmit }) => {
 	const [value, setValue] = useState(options?.defaultValue || "");
 	const inputRef = useRef(null);
 	useEffect(() => {
@@ -68,7 +68,7 @@ function PromptDialog({ options, onSubmit }) {
 		if (event.key === "Enter") handleSubmit();
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		options?.message && /* @__PURE__ */ jsx(Text, {
+		options?.message && /* @__PURE__ */ jsx(Text$1, {
 			mb: "md",
 			children: options.message
 		}),
@@ -95,7 +95,8 @@ function PromptDialog({ options, onSubmit }) {
 			})]
 		})
 	] });
-}
+};
+var PromptDialog_default = PromptDialog;
 
 //#endregion
 //#region src/services/DialogService.tsx
@@ -121,7 +122,7 @@ var DialogService = class {
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Alert",
-				content: /* @__PURE__ */ jsx(AlertDialog, {
+				content: /* @__PURE__ */ jsx(AlertDialog_default, {
 					options,
 					onClose: () => {
 						this.close(modalId);
@@ -141,7 +142,7 @@ var DialogService = class {
 				title: options?.title || "Confirm",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
-				content: /* @__PURE__ */ jsx(ConfirmDialog, {
+				content: /* @__PURE__ */ jsx(ConfirmDialog_default, {
 					options,
 					onConfirm: (confirmed) => {
 						this.close(modalId);
@@ -161,7 +162,7 @@ var DialogService = class {
 				title: options?.title || "Input",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
-				content: /* @__PURE__ */ jsx(PromptDialog, {
+				content: /* @__PURE__ */ jsx(PromptDialog_default, {
 					options,
 					onSubmit: (value) => {
 						this.close(modalId);
@@ -182,6 +183,13 @@ var DialogService = class {
 		});
 	}
 	/**
+	* Close the currently open dialog or a specific dialog by ID
+	*/
+	close(modalId) {
+		if (modalId) modals.close(modalId);
+		else modals.closeAll();
+	}
+	/**
 	* Show a JSON editor/viewer dialog
 	*/
 	json(data, options) {}
@@ -192,13 +200,6 @@ var DialogService = class {
 		return Promise.resolve(null);
 	}
 	/**
-	* Close the currently open dialog or a specific dialog by ID
-	*/
-	close(modalId) {
-		if (modalId) modals.close(modalId);
-		else modals.closeAll();
-	}
-	/**
 	* Show a loading/progress dialog with optional progress percentage
 	*/
 	loading(options) {}
@@ -206,74 +207,16 @@ var DialogService = class {
 	* Show an image viewer/gallery dialog
 	*/
 	image(src, options) {}
-	/**
-	* Show a table/data grid dialog for displaying tabular data
-	*/
-	table(data, options) {}
-	/**
-	* Show a multi-step wizard dialog
-	*/
-	wizard(steps, options) {
-		return Promise.resolve(null);
-	}
-};
-
-//#endregion
-//#region src/services/ToastService.tsx
-var ToastService = class {
-	raw = notifications;
-	options = { default: {
-		autoClose: 5e3,
-		withCloseButton: true,
-		position: "top-center"
-	} };
-	show(options) {
-		notifications.show({
-			...this.options.default,
-			...options
-		});
-	}
-	info(options) {
-		this.show({
-			color: "blue",
-			icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: 20 }),
-			title: "Info",
-			message: "Information notification",
-			...options
-		});
-	}
-	success(options) {
-		this.show({
-			color: "green",
-			icon: /* @__PURE__ */ jsx(IconCheck, { size: 16 }),
-			title: "Success",
-			message: "Operation completed successfully",
-			...options
-		});
-	}
-	warning(options) {
-		this.show({
-			color: "yellow",
-			icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20 }),
-			title: "Warning",
-			message: "Please review this warning",
-			...options
-		});
-	}
-	danger(options) {
-		this.show({
-			color: "red",
-			icon: /* @__PURE__ */ jsx(IconX, { size: 20 }),
-			title: "Error",
-			message: "An error occurred",
-			...options
-		});
-	}
 };
 
 //#endregion
-//#region src/components/Action.tsx
-const renderMenuItem = (item, index) => {
+//#region src/components/buttons/ActionButton.tsx
+const ActionMenuItem = (props) => {
+	const { item, index } = props;
+	const router = useRouter();
+	const action = useAction({ handler: async (e) => {
+		await item.onClick?.();
+	} }, [item.onClick]);
 	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
 	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
 	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
@@ -284,21 +227,47 @@ const renderMenuItem = (item, index) => {
 			leftSection: item.icon,
 			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
 			children: item.label
-		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => renderMenuItem(child, childIndex)) })]
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ 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__ */ jsx(Menu.Item, {
 		leftSection: item.icon,
 		onClick: item.onClick,
 		color: item.color,
+		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
+			size: "xs",
+			variant: "transparent",
+			children: /* @__PURE__ */ jsx(IconCheck, {})
+		}) : void 0,
+		...menuItemProps,
 		children: item.label
 	}, index);
 };
-const Action = (_props) => {
+const ActionButton = (_props) => {
 	const props = {
 		variant: "subtle",
 		..._props
 	};
-	const { tooltip, menu,...restProps } = props;
+	const { tooltip, menu, icon,...restProps } = props;
+	if (props.icon) {
+		const icon$1 = /* @__PURE__ */ jsx(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";
@@ -308,7 +277,7 @@ const Action = (_props) => {
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			visibleFrom: textVisibleFrom,
-			children: /* @__PURE__ */ jsx(Action, {
+			children: /* @__PURE__ */ jsx(ActionButton, {
 				flex: 1,
 				...rest,
 				leftSection,
@@ -319,7 +288,7 @@ const Action = (_props) => {
 		}), /* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			hiddenFrom: textVisibleFrom,
-			children: /* @__PURE__ */ jsx(Action, {
+			children: /* @__PURE__ */ jsx(ActionButton, {
 				px: "xs",
 				...rest,
 				tooltip,
@@ -329,17 +298,31 @@ const Action = (_props) => {
 		})] });
 	}
 	const renderAction = () => {
-		if ("href" in restProps && restProps.href) return /* @__PURE__ */ jsx(ActionHref, {
+		if ("href" in restProps && restProps.href) {
+			if (restProps.href.startsWith("http")) return /* @__PURE__ */ jsx(ActionHrefButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionNavigationButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+		}
+		delete restProps.classNameActive;
+		delete restProps.variantActive;
+		if ("action" in restProps && restProps.action) return /* @__PURE__ */ jsx(ActionHookButton, {
 			...restProps,
-			href: restProps.href,
+			action: restProps.action,
 			children: restProps.children
 		});
-		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ jsx(ActionClick, {
+		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ jsx(ActionClickButton, {
 			...restProps,
 			onClick: restProps.onClick,
 			children: restProps.children
 		});
-		if ("form" in restProps && restProps.form) return /* @__PURE__ */ jsx(ActionSubmit, {
+		if ("form" in restProps && restProps.form) return /* @__PURE__ */ jsx(ActionSubmitButton, {
 			...restProps,
 			form: restProps.form,
 			children: restProps.children
@@ -354,7 +337,15 @@ const Action = (_props) => {
 		position: menu.position || "bottom-start",
 		width: menu.width || 200,
 		shadow: menu.shadow || "md",
-		children: [/* @__PURE__ */ jsx(Menu.Target, { children: actionElement }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menu.items.map((item, index) => renderMenuItem(item, index)) })]
+		trigger: menu.on === "hover" ? "hover" : "click",
+		...menu.menuProps,
+		children: [/* @__PURE__ */ jsx(Menu.Target, {
+			...menu.targetProps,
+			children: actionElement
+		}), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menu.items.map((item, index) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item,
+			index
+		}, index)) })]
 	});
 	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
 		label: tooltip,
@@ -365,11 +356,11 @@ const Action = (_props) => {
 	} });
 	return actionElement;
 };
-var Action_default = Action;
+var ActionButton_default = ActionButton;
 /**
 * Action button that submits a form with loading and disabled state handling.
 */
-const ActionSubmit = (props) => {
+const ActionSubmitButton = (props) => {
 	const { form,...buttonProps } = props;
 	const state = useFormState(form);
 	return /* @__PURE__ */ jsx(Button, {
@@ -381,53 +372,168 @@ const ActionSubmit = (props) => {
 	});
 };
 /**
+* 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__ */ jsx(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 ActionClick = (props) => {
-	const [pending, setPending] = useState(false);
-	const alepha = useAlepha();
-	const onClick = async (e) => {
-		setPending(true);
-		try {
-			await props.onClick(e);
-		} catch (e$1) {
-			console.error(e$1);
-			await alepha.events.emit("form:submit:error", {
-				id: "action",
-				error: e$1
-			});
-		} finally {
-			setPending(false);
-		}
-	};
+const ActionClickButton = (props) => {
+	const action = useAction({ handler: async (e) => {
+		await props.onClick(e);
+	} }, [props.onClick]);
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
-		disabled: pending || props.disabled,
-		loading: pending,
-		onClick,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: action.run,
 		children: props.children
 	});
 };
 /**
 * Action for navigation with active state support.
 */
-const ActionHref = (props) => {
-	const { active: options, routerGoOptions,...buttonProps } = props;
+const ActionNavigationButton = (props) => {
+	const { active: options, classNameActive, variantActive, routerGoOptions,...buttonProps } = props;
 	const router = useRouter();
 	const { isPending, isActive } = 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__ */ jsx(Button, {
 		component: "a",
 		loading: isPending,
-		...router.anchor(props.href, routerGoOptions),
 		...buttonProps,
-		variant: isActive && options !== false ? "filled" : "subtle",
+		...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__ */ jsx(Button, {
+		component: "a",
+		target,
+		...buttonProps,
 		children: props.children
 	});
 };
 
+//#endregion
+//#region src/components/buttons/DarkModeButton.tsx
+const DarkModeButton = (props) => {
+	const { setColorScheme } = useMantineColorScheme();
+	const computedColorScheme = useComputedColorScheme("light");
+	const [colorScheme, setColorScheme2] = useState("default");
+	const mode = props.mode ?? "minimal";
+	useEffect(() => {
+		setColorScheme2(computedColorScheme);
+	}, [computedColorScheme]);
+	const toggleColorScheme = () => {
+		setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+	};
+	if (mode === "segmented") return /* @__PURE__ */ jsx(SegmentedControl, {
+		value: colorScheme,
+		onChange: (value) => setColorScheme(value),
+		data: [{
+			value: "light",
+			label: /* @__PURE__ */ jsx(Flex$1, {
+				h: 20,
+				align: "center",
+				justify: "center",
+				children: /* @__PURE__ */ jsx(IconSun, { size: 16 })
+			})
+		}, {
+			value: "dark",
+			label: /* @__PURE__ */ jsx(Flex$1, {
+				h: 20,
+				align: "center",
+				justify: "center",
+				children: /* @__PURE__ */ jsx(IconMoon, { size: 16 })
+			})
+		}],
+		w: props.fullWidth ? "100%" : void 0,
+		...props.segmentedProps
+	});
+	return /* @__PURE__ */ 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__ */ jsx(IconSun, { size: 20 }) : colorScheme === "light" ? /* @__PURE__ */ jsx(IconMoon, { size: 20 }) : /* @__PURE__ */ jsx(Flex$1, {
+			h: 20,
+			w: 20
+		}),
+		...props.actionProps
+	});
+};
+var DarkModeButton_default = DarkModeButton;
+
+//#endregion
+//#region src/components/buttons/OmnibarButton.tsx
+const OmnibarButton = (props) => {
+	return /* @__PURE__ */ jsx(ActionButton_default, {
+		variant: "outline",
+		miw: 256,
+		onClick: spotlight.open,
+		justify: "space-between",
+		rightSection: /* @__PURE__ */ jsx(Kbd, {
+			size: "sm",
+			children: "⌘+K"
+		}),
+		radius: "md",
+		...props.actionProps,
+		children: /* @__PURE__ */ jsxs(Flex$1, {
+			align: "center",
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(IconSearch, {
+				size: 16,
+				color: "gray"
+			}), /* @__PURE__ */ jsx(Text$1, {
+				size: "xs",
+				c: "dimmed",
+				children: "Search..."
+			})]
+		})
+	});
+};
+var OmnibarButton_default = OmnibarButton;
+
 //#endregion
 //#region src/utils/icons.tsx
 /**
@@ -542,7 +648,7 @@ const parseInput = (props, form) => {
 };
 
 //#endregion
-//#region src/components/ControlDate.tsx
+//#region src/components/form/ControlDate.tsx
 /**
 * ControlDate component for handling date, datetime, and time inputs.
 *
@@ -600,7 +706,7 @@ const ControlDate = (props) => {
 var ControlDate_default = ControlDate;
 
 //#endregion
-//#region src/components/ControlSelect.tsx
+//#region src/components/form/ControlSelect.tsx
 /**
 * ControlSelect component for handling Select, MultiSelect, and TagsInput.
 *
@@ -703,7 +809,7 @@ const ControlSelect = (props) => {
 var ControlSelect_default = ControlSelect;
 
 //#endregion
-//#region src/components/Control.tsx
+//#region src/components/form/Control.tsx
 /**
 * Generic form control that renders the appropriate input based on the schema and props.
 *
@@ -856,563 +962,7 @@ const Control = (_props) => {
 var Control_default = Control;
 
 //#endregion
-//#region src/components/DarkModeButton.tsx
-const DarkModeButton = (props) => {
-	const { setColorScheme } = useMantineColorScheme();
-	const computedColorScheme = useComputedColorScheme("light");
-	const [colorScheme, setColorScheme2] = useState("default");
-	const mode = props.mode ?? "minimal";
-	useEffect(() => {
-		setColorScheme2(computedColorScheme);
-	}, [computedColorScheme]);
-	const toggleColorScheme = () => {
-		setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
-	};
-	if (mode === "segmented") return /* @__PURE__ */ jsx(SegmentedControl, {
-		value: colorScheme,
-		onChange: (value) => setColorScheme(value),
-		data: [{
-			value: "light",
-			label: /* @__PURE__ */ jsx(Flex$1, {
-				h: 20,
-				align: "center",
-				justify: "center",
-				children: /* @__PURE__ */ jsx(IconSun, { size: 16 })
-			})
-		}, {
-			value: "dark",
-			label: /* @__PURE__ */ jsx(Flex$1, {
-				h: 20,
-				align: "center",
-				justify: "center",
-				children: /* @__PURE__ */ jsx(IconMoon, { size: 16 })
-			})
-		}]
-	});
-	return /* @__PURE__ */ jsx(ActionIcon, {
-		onClick: toggleColorScheme,
-		variant: props.variant ?? "default",
-		size: props.size ?? "lg",
-		"aria-label": "Toggle color scheme",
-		children: colorScheme === "dark" ? /* @__PURE__ */ jsx(IconSun, { size: 20 }) : colorScheme === "light" ? /* @__PURE__ */ jsx(IconMoon, { size: 20 }) : /* @__PURE__ */ jsx(Flex$1, { h: 20 })
-	});
-};
-var DarkModeButton_default = DarkModeButton;
-
-//#endregion
-//#region src/components/DataTable.tsx
-function getNestedValue(obj, path) {
-	return path.split(".").reduce((acc, part) => acc?.[part], obj);
-}
-function DataTable({ data = [], columns: initialColumns = [], loading = false, emptyMessage = "No data available", selectable = false, selectedRows = [], onRowSelect, sortable = false, sort, onSortChange, filterable = false, filters = [], onFiltersChange, filterPlaceholder = "Search...", paginate = false, page = 1, pageSize = 10, totalRecords, pageSizeOptions = [
-	10,
-	25,
-	50,
-	100
-], onPageChange, onPageSizeChange, rowActions, onRowClick, rowClassName, showHeader = true, showFooter = true, stickyHeader = false, striped = false, highlightOnHover = true, showToolbar = true, title, actions, showColumnToggle = true, showRefresh = false, onRefresh, showExport = false, onExport, height, minHeight, maxHeight,...tableProps }) {
-	const [hiddenColumns, setHiddenColumns] = useState(/* @__PURE__ */ new Set());
-	const [globalFilter, setGlobalFilter] = useState("");
-	const [internalPage, setInternalPage] = useState(page);
-	const [internalPageSize, setInternalPageSize] = useState(pageSize);
-	const [internalSort, setInternalSort] = useState(sort);
-	const [internalFilters, setInternalFilters] = useState(filters);
-	const [internalSelectedRows, setInternalSelectedRows] = useState(selectedRows);
-	const currentPage = onPageChange ? page : internalPage;
-	const currentPageSize = onPageSizeChange ? pageSize : internalPageSize;
-	const currentSort = onSortChange ? sort : internalSort;
-	const currentFilters = onFiltersChange ? filters : internalFilters;
-	const currentSelectedRows = onRowSelect ? selectedRows : internalSelectedRows;
-	const visibleColumns = useMemo(() => initialColumns.filter((col) => !col.hidden && !hiddenColumns.has(String(col.accessor))), [initialColumns, hiddenColumns]);
-	const processedData = useMemo(() => {
-		let result = [...data];
-		if (filterable && globalFilter) result = result.filter((row) => {
-			return visibleColumns.some((col) => {
-				const value = getNestedValue(row, String(col.accessor));
-				return String(value).toLowerCase().includes(globalFilter.toLowerCase());
-			});
-		});
-		if (filterable && currentFilters.length > 0) result = result.filter((row) => {
-			return currentFilters.every((filter) => {
-				const value = String(getNestedValue(row, filter.column)).toLowerCase();
-				const filterValue = filter.value.toLowerCase();
-				switch (filter.operator) {
-					case "equals": return value === filterValue;
-					case "startsWith": return value.startsWith(filterValue);
-					case "endsWith": return value.endsWith(filterValue);
-					default: return value.includes(filterValue);
-				}
-			});
-		});
-		if (sortable && currentSort?.direction) result.sort((a, b) => {
-			const aVal = getNestedValue(a, currentSort.column);
-			const bVal = getNestedValue(b, currentSort.column);
-			if (aVal === bVal) return 0;
-			if (aVal === null || aVal === void 0) return 1;
-			if (bVal === null || bVal === void 0) return -1;
-			const comparison = aVal < bVal ? -1 : 1;
-			return currentSort.direction === "asc" ? comparison : -comparison;
-		});
-		return result;
-	}, [
-		data,
-		visibleColumns,
-		filterable,
-		globalFilter,
-		currentFilters,
-		sortable,
-		currentSort
-	]);
-	const paginatedData = useMemo(() => {
-		if (!paginate) return processedData;
-		const startIndex = (currentPage - 1) * currentPageSize;
-		return processedData.slice(startIndex, startIndex + currentPageSize);
-	}, [
-		processedData,
-		paginate,
-		currentPage,
-		currentPageSize
-	]);
-	const totalPages = useMemo(() => {
-		const total = totalRecords ?? processedData.length;
-		return Math.ceil(total / currentPageSize);
-	}, [
-		totalRecords,
-		processedData.length,
-		currentPageSize
-	]);
-	const handleSort = useCallback((column) => {
-		if (!sortable) return;
-		const newSort = {
-			column,
-			direction: currentSort?.column === column ? currentSort.direction === "asc" ? "desc" : currentSort.direction === "desc" ? null : "asc" : "asc"
-		};
-		if (onSortChange) onSortChange(newSort);
-		else setInternalSort(newSort);
-	}, [
-		sortable,
-		currentSort,
-		onSortChange
-	]);
-	const handlePageChange = useCallback((newPage) => {
-		if (onPageChange) onPageChange(newPage);
-		else setInternalPage(newPage);
-	}, [onPageChange]);
-	const handlePageSizeChange = useCallback((size) => {
-		const newSize = Number(size) || currentPageSize;
-		if (onPageSizeChange) {
-			onPageSizeChange(newSize);
-			onPageChange?.(1);
-		} else {
-			setInternalPageSize(newSize);
-			setInternalPage(1);
-		}
-	}, [
-		currentPageSize,
-		onPageSizeChange,
-		onPageChange
-	]);
-	const handleSelectAll = useCallback((checked) => {
-		const newSelection = checked ? paginatedData : [];
-		if (onRowSelect) onRowSelect(newSelection);
-		else setInternalSelectedRows(newSelection);
-	}, [paginatedData, onRowSelect]);
-	const handleSelectRow = useCallback((row, checked) => {
-		const newSelection = checked ? [...currentSelectedRows, row] : currentSelectedRows.filter((r) => r !== row);
-		if (onRowSelect) onRowSelect(newSelection);
-		else setInternalSelectedRows(newSelection);
-	}, [currentSelectedRows, onRowSelect]);
-	const handleColumnToggle = useCallback((column) => {
-		const newHidden = new Set(hiddenColumns);
-		if (newHidden.has(column)) newHidden.delete(column);
-		else newHidden.add(column);
-		setHiddenColumns(newHidden);
-	}, [hiddenColumns]);
-	const isAllSelected = currentSelectedRows.length > 0 && currentSelectedRows.length === paginatedData.length;
-	const isIndeterminate = currentSelectedRows.length > 0 && currentSelectedRows.length < paginatedData.length;
-	const renderSortIcon = (column) => {
-		if (!sortable) return null;
-		if (currentSort?.column === column) {
-			if (currentSort.direction === "asc") return /* @__PURE__ */ jsx(IconChevronUp, {
-				className: "alepha-datatable-sort-icon",
-				size: 16
-			});
-			if (currentSort.direction === "desc") return /* @__PURE__ */ jsx(IconChevronDown, {
-				className: "alepha-datatable-sort-icon",
-				size: 16
-			});
-		}
-		return /* @__PURE__ */ jsx(IconChevronUp, {
-			className: "alepha-datatable-sort-icon-inactive",
-			size: 16
-		});
-	};
-	const toolbar = showToolbar && (title || actions || filterable || showColumnToggle || showRefresh || showExport) && /* @__PURE__ */ jsx(Paper, {
-		className: "alepha-datatable-toolbar",
-		p: "md",
-		mb: "sm",
-		children: /* @__PURE__ */ jsxs(Flex$1, {
-			justify: "space-between",
-			align: "center",
-			gap: "md",
-			children: [/* @__PURE__ */ jsxs(Group, { children: [title && /* @__PURE__ */ jsx(Text, {
-				size: "lg",
-				fw: 600,
-				children: title
-			}), currentSelectedRows.length > 0 && /* @__PURE__ */ jsxs(Badge, {
-				color: "blue",
-				variant: "light",
-				children: [currentSelectedRows.length, " selected"]
-			})] }), /* @__PURE__ */ jsxs(Group, { children: [
-				filterable && /* @__PURE__ */ jsx(TextInput, {
-					placeholder: filterPlaceholder,
-					value: globalFilter,
-					onChange: (e) => setGlobalFilter(e.target.value),
-					leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
-					rightSection: globalFilter && /* @__PURE__ */ jsx(ActionIcon, {
-						size: "xs",
-						variant: "subtle",
-						onClick: () => setGlobalFilter(""),
-						children: /* @__PURE__ */ jsx(IconX, { size: 14 })
-					}),
-					className: "alepha-datatable-search-input"
-				}),
-				showColumnToggle && /* @__PURE__ */ jsxs(Menu, {
-					position: "bottom-end",
-					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Tooltip, {
-						label: "Toggle columns",
-						children: /* @__PURE__ */ jsx(ActionIcon, {
-							variant: "subtle",
-							children: /* @__PURE__ */ jsx(IconColumns, { size: 20 })
-						})
-					}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [/* @__PURE__ */ jsx(Menu.Label, { children: "Visible columns" }), initialColumns.map((col) => /* @__PURE__ */ jsx(Menu.Item, {
-						onClick: () => handleColumnToggle(String(col.accessor)),
-						leftSection: /* @__PURE__ */ jsx(Checkbox, {
-							checked: !hiddenColumns.has(String(col.accessor)) && !col.hidden,
-							readOnly: true,
-							size: "xs"
-						}),
-						children: col.title || String(col.accessor)
-					}, String(col.accessor)))] })]
-				}),
-				showRefresh && /* @__PURE__ */ jsx(Tooltip, {
-					label: "Refresh",
-					children: /* @__PURE__ */ jsx(ActionIcon, {
-						variant: "subtle",
-						onClick: onRefresh,
-						loading,
-						children: /* @__PURE__ */ jsx(IconRefresh, { size: 20 })
-					})
-				}),
-				showExport && /* @__PURE__ */ jsx(Tooltip, {
-					label: "Export",
-					children: /* @__PURE__ */ jsx(ActionIcon, {
-						variant: "subtle",
-						onClick: onExport,
-						children: /* @__PURE__ */ jsx(IconDownload, { size: 20 })
-					})
-				}),
-				actions
-			] })]
-		})
-	});
-	const tableContent = /* @__PURE__ */ jsxs(Table, {
-		striped,
-		highlightOnHover,
-		stickyHeader,
-		className: "alepha-datatable-table",
-		...tableProps,
-		children: [
-			showHeader && /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
-				selectable && /* @__PURE__ */ jsx(Table.Th, {
-					className: "alepha-datatable-checkbox-column",
-					children: /* @__PURE__ */ jsx(Checkbox, {
-						checked: isAllSelected,
-						indeterminate: isIndeterminate,
-						onChange: (e) => handleSelectAll(e.currentTarget.checked)
-					})
-				}),
-				visibleColumns.map((column) => /* @__PURE__ */ jsx(Table.Th, {
-					className: `alepha-datatable-th ${column.headerClassName || ""}`,
-					style: {
-						width: column.width,
-						textAlign: column.align,
-						cursor: column.sortable && sortable ? "pointer" : "default"
-					},
-					onClick: () => column.sortable && handleSort(String(column.accessor)),
-					children: /* @__PURE__ */ jsxs(Group, {
-						gap: "xs",
-						justify: column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
-						children: [column.renderHeader ? column.renderHeader() : column.title || String(column.accessor), column.sortable && renderSortIcon(String(column.accessor))]
-					})
-				}, String(column.accessor))),
-				rowActions && /* @__PURE__ */ jsx(Table.Th, {
-					className: "alepha-datatable-actions-column",
-					children: "Actions"
-				})
-			] }) }),
-			/* @__PURE__ */ jsx(Table.Tbody, { children: loading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
-				colSpan: visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0),
-				children: /* @__PURE__ */ jsx(Center, {
-					py: "xl",
-					children: /* @__PURE__ */ jsx(Loader, { size: "sm" })
-				})
-			}) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
-				colSpan: visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0),
-				children: /* @__PURE__ */ jsx(Center, {
-					py: "xl",
-					children: /* @__PURE__ */ jsx(Text, {
-						c: "dimmed",
-						children: emptyMessage
-					})
-				})
-			}) }) : paginatedData.map((row, index) => {
-				const isSelected = currentSelectedRows.includes(row);
-				return /* @__PURE__ */ jsxs(Table.Tr, {
-					className: `alepha-datatable-tr ${isSelected ? "alepha-datatable-selected" : ""} ${rowClassName?.(row, index) || ""}`,
-					onClick: () => onRowClick?.(row, index),
-					style: { cursor: onRowClick ? "pointer" : "default" },
-					children: [
-						selectable && /* @__PURE__ */ jsx(Table.Td, {
-							className: "alepha-datatable-checkbox-column",
-							children: /* @__PURE__ */ jsx(Checkbox, {
-								checked: isSelected,
-								onChange: (e) => handleSelectRow(row, e.currentTarget.checked),
-								onClick: (e) => e.stopPropagation()
-							})
-						}),
-						visibleColumns.map((column) => {
-							const value = getNestedValue(row, String(column.accessor));
-							return /* @__PURE__ */ jsx(Table.Td, {
-								className: column.className,
-								style: {
-									textAlign: column.align,
-									...column.ellipsis && {
-										maxWidth: column.width,
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-										whiteSpace: "nowrap"
-									}
-								},
-								children: column.render ? column.render(value, row, index) : value
-							}, String(column.accessor));
-						}),
-						rowActions && /* @__PURE__ */ jsx(Table.Td, {
-							className: "alepha-datatable-actions-column",
-							children: rowActions(row, index)
-						})
-					]
-				}, index);
-			}) }),
-			showFooter && paginate && /* @__PURE__ */ jsx(Table.Tfoot, { children: /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
-				colSpan: visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0),
-				children: /* @__PURE__ */ jsxs(Flex$1, {
-					justify: "space-between",
-					align: "center",
-					py: "xs",
-					children: [/* @__PURE__ */ jsxs(Group, {
-						gap: "xs",
-						children: [/* @__PURE__ */ jsxs(Text, {
-							size: "sm",
-							c: "dimmed",
-							children: [
-								"Showing ",
-								(currentPage - 1) * currentPageSize + 1,
-								" to",
-								" ",
-								Math.min(currentPage * currentPageSize, totalRecords ?? processedData.length),
-								" ",
-								"of ",
-								totalRecords ?? processedData.length,
-								" records"
-							]
-						}), /* @__PURE__ */ jsx(Select, {
-							size: "xs",
-							value: String(currentPageSize),
-							onChange: handlePageSizeChange,
-							data: pageSizeOptions.map((size) => ({
-								value: String(size),
-								label: `${size} / page`
-							})),
-							className: "alepha-datatable-page-size-select"
-						})]
-					}), /* @__PURE__ */ jsx(Pagination, {
-						size: "sm",
-						value: currentPage,
-						onChange: handlePageChange,
-						total: totalPages,
-						siblings: 1,
-						boundaries: 1
-					})]
-				})
-			}) }) })
-		]
-	});
-	return /* @__PURE__ */ jsxs(Box, {
-		className: "alepha-datatable-container",
-		children: [toolbar, height || maxHeight ? /* @__PURE__ */ jsx(ScrollArea.Autosize, {
-			mah: maxHeight,
-			h: height,
-			mih: minHeight,
-			children: tableContent
-		}) : tableContent]
-	});
-}
-
-//#endregion
-//#region src/components/Sidebar.tsx
-const Sidebar = ({ menu, defaultOpenIds = [], onItemClick, showSearchButton = false, onSearchClick }) => {
-	const [openIds, setOpenIds] = useState(new Set(defaultOpenIds));
-	const toggleOpen = (id) => {
-		setOpenIds((prev) => {
-			const newSet = new Set(prev);
-			if (newSet.has(id)) newSet.delete(id);
-			else newSet.add(id);
-			return newSet;
-		});
-	};
-	return /* @__PURE__ */ jsxs(Box, {
-		component: "nav",
-		className: "alepha-sidebar",
-		children: [showSearchButton && /* @__PURE__ */ jsx(UnstyledButton, {
-			className: "alepha-sidebar-search-button",
-			onClick: onSearchClick,
-			children: /* @__PURE__ */ jsxs(Box, {
-				className: "alepha-sidebar-search-button-content",
-				children: [/* @__PURE__ */ jsxs(Box, {
-					className: "alepha-sidebar-search-button-left",
-					children: [/* @__PURE__ */ jsx(IconSearch, { size: 16 }), /* @__PURE__ */ jsx("span", { children: "Search..." })]
-				}), /* @__PURE__ */ jsx(Box, {
-					className: "alepha-sidebar-search-button-shortcut",
-					children: /* @__PURE__ */ jsx("kbd", { children: "⌘+K" })
-				})]
-			})
-		}), menu.map((item) => /* @__PURE__ */ jsx(SidebarItem, {
-			item,
-			level: 0,
-			openIds,
-			onToggle: toggleOpen,
-			onItemClick
-		}, item.id))]
-	});
-};
-const SidebarItem = (props) => {
-	const { item, level } = props;
-	if (level > 2) return null;
-	if (item.href) return /* @__PURE__ */ jsx(SidebarItemHref, { ...props });
-	return /* @__PURE__ */ jsx(SidebarItemButton, { ...props });
-};
-const SidebarItemHref = ({ item, level, openIds, onToggle, onItemClick }) => {
-	const hasChildren = item.children && item.children.length > 0;
-	const isOpen = openIds.has(item.id);
-	const { isActive, anchorProps } = useActive({
-		href: item.href,
-		startWith: item.activeStartsWith
-	});
-	const handleItemClick = (e) => {
-		if (hasChildren) {
-			e.preventDefault();
-			onToggle(item.id);
-		}
-	};
-	return /* @__PURE__ */ jsxs(Box, {
-		className: "alepha-sidebar-item-wrapper",
-		children: [/* @__PURE__ */ jsx(UnstyledButton, {
-			component: "a",
-			...anchorProps,
-			className: `alepha-sidebar-item alepha-sidebar-level-${level} ${isActive ? "alepha-sidebar-item-active" : ""}`,
-			onClick: hasChildren ? handleItemClick : anchorProps.onClick,
-			children: /* @__PURE__ */ jsxs(Flex$1, {
-				justify: "space-between",
-				align: "center",
-				w: "100%",
-				children: [/* @__PURE__ */ jsxs(Flex$1, {
-					className: "alepha-sidebar-item-content",
-					align: "center",
-					gap: 10,
-					children: [/* @__PURE__ */ jsx(Box, {
-						className: "alepha-sidebar-item-icon",
-						children: item.icon || /* @__PURE__ */ jsx(IconCircle, { size: 16 })
-					}), /* @__PURE__ */ jsx(Box, {
-						className: "alepha-sidebar-item-label",
-						children: item.label
-					})]
-				}), hasChildren && /* @__PURE__ */ jsx(Box, {
-					className: "alepha-sidebar-item-caret",
-					children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
-				})]
-			})
-		}), hasChildren && isOpen && /* @__PURE__ */ jsxs(Box, {
-			className: "alepha-sidebar-children",
-			"data-parent-level": level,
-			children: [(level === 0 || level === 1) && /* @__PURE__ */ jsx(Box, { className: "alepha-sidebar-vertical-bar" }), /* @__PURE__ */ jsx(Box, {
-				className: "alepha-sidebar-children-items",
-				children: item.children.map((child) => /* @__PURE__ */ jsx(SidebarItem, {
-					item: child,
-					level: level + 1,
-					openIds,
-					onToggle,
-					onItemClick
-				}, child.id))
-			})]
-		})]
-	});
-};
-const SidebarItemButton = ({ item, level, openIds, onToggle, onItemClick }) => {
-	const hasChildren = item.children && item.children.length > 0;
-	const isOpen = openIds.has(item.id);
-	const handleItemClick = (e) => {
-		e.preventDefault();
-		if (hasChildren) onToggle(item.id);
-		else {
-			onItemClick?.(item);
-			item.onClick?.();
-		}
-	};
-	return /* @__PURE__ */ jsxs(Box, {
-		className: "alepha-sidebar-item-wrapper",
-		children: [/* @__PURE__ */ jsx(UnstyledButton, {
-			component: "button",
-			className: `alepha-sidebar-item alepha-sidebar-level-${level}`,
-			onClick: handleItemClick,
-			children: /* @__PURE__ */ jsxs(Flex$1, {
-				justify: "space-between",
-				align: "center",
-				w: "100%",
-				children: [/* @__PURE__ */ jsxs(Flex$1, {
-					className: "alepha-sidebar-item-content",
-					align: "center",
-					gap: 10,
-					children: [/* @__PURE__ */ jsx(Box, {
-						className: "alepha-sidebar-item-icon",
-						children: item.icon || /* @__PURE__ */ jsx(IconCircle, { size: 16 })
-					}), /* @__PURE__ */ jsx(Box, {
-						className: "alepha-sidebar-item-label",
-						children: item.label
-					})]
-				}), hasChildren && /* @__PURE__ */ jsx(Box, {
-					className: "alepha-sidebar-item-caret",
-					children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
-				})]
-			})
-		}), hasChildren && isOpen && /* @__PURE__ */ jsxs(Box, {
-			className: "alepha-sidebar-children",
-			"data-parent-level": level,
-			children: [(level === 0 || level === 1) && /* @__PURE__ */ jsx(Box, { className: "alepha-sidebar-vertical-bar" }), /* @__PURE__ */ jsx(Box, {
-				className: "alepha-sidebar-children-items",
-				children: item.children.map((child) => /* @__PURE__ */ jsx(SidebarItem, {
-					item: child,
-					level: level + 1,
-					openIds,
-					onToggle,
-					onItemClick
-				}, child.id))
-			})]
-		})]
-	});
-};
-
-//#endregion
-//#region src/components/TypeForm.tsx
+//#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.
@@ -1480,7 +1030,7 @@ const TypeForm = (props) => {
 	const content = /* @__PURE__ */ jsxs(Flex$1, {
 		direction: "column",
 		gap: "sm",
-		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, { children: [/* @__PURE__ */ jsx(Action_default, {
+		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, { children: [/* @__PURE__ */ jsx(ActionButton_default, {
 			form,
 			...submitButtonProps,
 			children: submitButtonProps?.children ?? "Submit"
@@ -1497,6 +1047,385 @@ const TypeForm = (props) => {
 };
 var TypeForm_default = TypeForm;
 
+//#endregion
+//#region src/constants/ui.ts
+const ui = { colors: {
+	transparent: "transparent",
+	background: "var(--alepha-background)",
+	surface: "var(--alepha-surface)",
+	elevated: "var(--alepha-elevated)"
+} };
+
+//#endregion
+//#region src/components/buttons/BurgerButton.tsx
+const BurgerButton = (props) => {
+	const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
+	return /* @__PURE__ */ jsx(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 = useI18n();
+	return /* @__PURE__ */ jsx(ActionButton_default, {
+		icon: /* @__PURE__ */ jsx(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__ */ jsx(BurgerButton_default, {}, index);
+			if (item.type === "dark") return /* @__PURE__ */ jsx(DarkModeButton_default, { ...item.props }, index);
+			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton_default, { ...item.props }, index);
+			if (item.type === "lang") return /* @__PURE__ */ jsx(LanguageButton_default, { ...item.props }, index);
+			if (item.type === "spacer") return /* @__PURE__ */ jsx(Flex$1, { w: 16 }, index);
+			if (item.type === "divider") return /* @__PURE__ */ jsx(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__ */ jsxs(Flex$1, {
+		h: "100%",
+		align: "center",
+		px: "md",
+		justify: "space-between",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ jsx(Flex$1, {
+				flex: 1,
+				children: leftItems.map((item, index) => /* @__PURE__ */ jsx(Flex$1, {
+					ml: index === 0 ? 0 : "md",
+					align: "center",
+					children: renderItem(item, index)
+				}, index))
+			}),
+			/* @__PURE__ */ jsx(Flex$1, { children: centerItems.map((item, index) => /* @__PURE__ */ jsx(Flex$1, {
+				mx: "md",
+				align: "center",
+				children: renderItem(item, index)
+			}, index)) }),
+			/* @__PURE__ */ jsx(Flex$1, {
+				flex: 1,
+				gap: "md",
+				align: "center",
+				justify: "end",
+				children: rightItems.map((item, index) => /* @__PURE__ */ jsx(Flex$1, {
+					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 = useRouter();
+	const { top = [], bottom = [], onItemClick } = props;
+	const renderNode = (item, key) => {
+		if ("type" in item) {
+			if (item.type === "spacer") return /* @__PURE__ */ jsx(Flex$1, { h: 16 }, key);
+			if (item.type === "divider") return /* @__PURE__ */ jsx(Flex$1, {
+				h: 1,
+				bg: "var(--alepha-border)",
+				my: "md",
+				mx: "sm"
+			}, key);
+			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",
+					mt: "md",
+					mb: "xs",
+					mx: "sm",
+					tt: "uppercase",
+					fw: "bold",
+					children: item.label
+				}, key);
+			}
+		}
+		if ("element" in item) return /* @__PURE__ */ jsx(Flex$1, { children: item.element }, key);
+		if (props.collapsed) return /* @__PURE__ */ jsx(SidebarCollapsedItem, {
+			item,
+			level: 0,
+			onItemClick,
+			theme: props.theme ?? {}
+		}, key);
+		return /* @__PURE__ */ 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__ */ jsxs(Flex$1, {
+		flex: 1,
+		py: padding,
+		direction: "column",
+		className: "overflow-auto",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ jsxs(Flex$1, {
+				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__ */ jsx(Flex$1, {
+				gap,
+				px: padding,
+				direction: "column",
+				flex: 1,
+				className: "overflow-auto",
+				children: menu.filter((it) => !it.position).map((item, index) => renderNode(item, index))
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				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 = useRouter();
+	const isActive = 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] = useState(isActive(item));
+	useEvents({ "react:transition:end": () => {
+		if (isActive(item)) setIsOpen(true);
+	} }, []);
+	if (level > maxLevel) return null;
+	const handleItemClick = (e) => {
+		e.preventDefault();
+		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
+		else {
+			props.onItemClick?.(item);
+			item.onClick?.();
+		}
+	};
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		ps: level === 0 ? 0 : 32,
+		pos: "relative",
+		children: [/* @__PURE__ */ jsx(ActionButton_default, {
+			w: "100%",
+			justify: "space-between",
+			href: props.item.href,
+			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__ */ jsxs(Flex$1, {
+				w: "100%",
+				align: "center",
+				gap: "sm",
+				children: [item.icon && /* @__PURE__ */ jsx(ThemeIcon, {
+					size: level === 0 ? "sm" : "xs",
+					variant: "transparent",
+					children: item.icon
+				}), /* @__PURE__ */ jsxs(Flex$1, {
+					direction: "column",
+					children: [/* @__PURE__ */ jsx(Flex$1, { children: item.label }), item.description && /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						children: item.description
+					})]
+				})]
+			}),
+			rightSection: item.children ? /* @__PURE__ */ jsx(Flex$1, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
+			...props.item.actionProps
+		}), item.children && isOpen && /* @__PURE__ */ jsxs(Flex$1, {
+			direction: "column",
+			"data-parent-level": level,
+			children: [/* @__PURE__ */ jsx(Flex$1, { 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__ */ jsx(SidebarItem, {
+				item: child,
+				level: level + 1,
+				onItemClick: props.onItemClick,
+				theme: props.theme
+			}, index))]
+		})]
+	});
+};
+const SidebarCollapsedItem = (props) => {
+	const { item, level } = props;
+	const router = useRouter();
+	const isActive = 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] = useState(isActive(item));
+	const handleItemClick = (e) => {
+		e.preventDefault();
+		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
+		else {
+			props.onItemClick?.(item);
+			item.onClick?.();
+		}
+	};
+	return /* @__PURE__ */ 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__ */ jsx(IconSquareRounded, {}),
+		href: props.item.href,
+		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] = useStore("alepha.ui.sidebar.opened");
+	const [collapsed] = useStore("alepha.ui.sidebar.collapsed", props.sidebarProps?.collapsed);
+	useEvents({ "react:transition:begin": () => {
+		setOpened(false);
+	} }, []);
+	const defaultAppBarItems = [{
+		position: "left",
+		type: "burger"
+	}];
+	return /* @__PURE__ */ jsxs(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__ */ jsx(AppShell.Header, {
+				bg: ui.colors.surface,
+				...props.appShellHeaderProps,
+				children: props.header ?? /* @__PURE__ */ jsx(AppBar_default, {
+					items: defaultAppBarItems,
+					...props.appBarProps
+				})
+			}),
+			props.sidebarProps !== void 0 && /* @__PURE__ */ jsx(AppShell.Navbar, {
+				bg: ui.colors.surface,
+				...props.appShellNavbarProps,
+				children: /* @__PURE__ */ jsx(Sidebar, {
+					collapsed,
+					...props.sidebarProps
+				})
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, {
+				...props.appShellMainProps,
+				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
+			}),
+			props.footer && /* @__PURE__ */ jsx(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] = useState(typeof props.items === "function" ? [] : props.items);
+	useEffect(() => {
+		if (typeof props.items !== "function") setItems(props.items);
+	}, [props.items]);
+	const head = Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsx(ActionButton_default, {
+		justify: "space-between",
+		radius: 0,
+		fullWidth: true,
+		size: "xs",
+		children: col.label
+	}) }, key));
+	const rows = items.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))
+		}, 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 })]
+	});
+};
+var DataTable_default = DataTable;
+
 //#endregion
 //#region src/hooks/useDialog.ts
 /**
@@ -1512,20 +1441,6 @@ const useDialog = () => {
 	return useInject(DialogService);
 };
 
-//#endregion
-//#region src/hooks/useToast.ts
-/**
-* Use this hook to access the Toast Service for showing notifications.
-*
-* @example
-* const toast = useToast();
-* toast.success({ message: "Operation completed successfully!" });
-* toast.error({ title: "Error", message: "Something went wrong" });
-*/
-const useToast = () => {
-	return useInject(ToastService);
-};
-
 //#endregion
 //#region src/index.ts
 /**
@@ -1536,13 +1451,19 @@ const useToast = () => {
 const AlephaUI = $module({
 	name: "alepha.ui",
 	services: [
-		AlephaReact,
 		DialogService,
 		ToastService,
 		RootRouter
-	]
+	],
+	register: (alepha) => {
+		alepha.with(AlephaReactI18n);
+		alepha.with(AlephaReactHead);
+		alepha.with(AlephaReactForm);
+		alepha.with(DialogService);
+		alepha.with(ToastService);
+	}
 });
 
 //#endregion
-export { Action_default as Action, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog, ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable, DialogService, Flex, ICON_SIZES, Omnibar_default as Omnibar, PromptDialog, RootRouter, Sidebar, SidebarItem, ToastService, TypeForm_default as TypeForm, capitalize, getDefaultIcon, prettyName, useDialog, useToast };
-//# sourceMappingURL=index.js.map
+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 };
+//# sourceMappingURL=index.mjs.map