@alepha/ui 0.10.7 → 0.11.0

package/dist/index.js

@@ -1,22 +1,224 @@
-import { n as Omnibar_default, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-WfiC2EH6.js";
+import { n as Omnibar_default, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-DDbIijPF.js";
 import { $module, TypeBoxError } from "@alepha/core";
 import { $page, AlephaReact, useActive, useAlepha, useInject, useRouter } from "@alepha/react";
-import { notifications } from "@mantine/notifications";
-import { IconAlertTriangle, IconAt, IconCalendar, IconCheck, IconClock, IconColorPicker, IconFile, IconHash, IconInfoCircle, IconKey, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSelector, IconSun, IconToggleLeft, IconX } from "@tabler/icons-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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ActionIcon, Autocomplete, Button, ColorInput, FileInput, Flex, Flex as Flex$1, Grid, Input, MultiSelect, NumberInput, PasswordInput, SegmentedControl, Select, Stack, Switch, TagsInput, TextInput, Textarea, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+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 { useEffect, useState } from "react";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
+import { useActive as useActive$1 } from "@alepha/react/src/hooks/useActive";
 
 //#region src/RootRouter.ts
 var RootRouter = class {
 	root = $page({
 		path: "/",
-		lazy: () => import("./AlephaMantineProvider-EemOtraW.js")
+		lazy: () => import("./AlephaMantineProvider-pOu8hOzK.js")
 	});
 };
 
+//#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"
+		})
+	})] });
+}
+
+//#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"
+		})]
+	})] });
+}
+
+//#endregion
+//#region src/components/dialogs/PromptDialog.tsx
+function PromptDialog({ options, onSubmit }) {
+	const [value, setValue] = useState(options?.defaultValue || "");
+	const inputRef = useRef(null);
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+	const handleSubmit = () => {
+		if (!options?.required || value.trim()) onSubmit(value);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") handleSubmit();
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		options?.message && /* @__PURE__ */ jsx(Text, {
+			mb: "md",
+			children: options.message
+		}),
+		/* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
+			label: options?.label,
+			placeholder: options?.placeholder,
+			value,
+			onChange: (event) => setValue(event.currentTarget.value),
+			onKeyDown: handleKeyDown,
+			required: options?.required,
+			mb: "md"
+		}),
+		/* @__PURE__ */ jsxs(Group, {
+			justify: "flex-end",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "subtle",
+				onClick: () => onSubmit(null),
+				children: options?.cancelLabel || "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				onClick: handleSubmit,
+				disabled: options?.required && !value.trim(),
+				children: options?.submitLabel || "OK"
+			})]
+		})
+	] });
+}
+
+//#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__ */ jsx(AlertDialog, {
+					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__ */ jsx(ConfirmDialog, {
+					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__ */ jsx(PromptDialog, {
+					options,
+					onSubmit: (value) => {
+						this.close(modalId);
+						resolve(value);
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Open a custom dialog with provided content
+	*/
+	open(options) {
+		return modals.open({
+			...this.options.default,
+			...options,
+			children: options?.content || options?.message
+		});
+	}
+	/**
+	* Show a JSON editor/viewer dialog
+	*/
+	json(data, options) {}
+	/**
+	* Show a form dialog for structured input
+	*/
+	form(options) {
+		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) {}
+	/**
+	* 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 {
@@ -72,17 +274,38 @@ var ToastService = class {
 
 //#endregion
 //#region src/components/Action.tsx
+const renderMenuItem = (item, index) => {
+	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, {
+		trigger: "hover",
+		position: "right-start",
+		offset: 2,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			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)) })]
+	}, index);
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		leftSection: item.icon,
+		onClick: item.onClick,
+		color: item.color,
+		children: item.label
+	}, index);
+};
 const Action = (_props) => {
 	const props = {
 		variant: "subtle",
 		..._props
 	};
+	const { tooltip, menu,...restProps } = props;
 	if (props.leftSection && !props.children) {
-		props.className ??= "mantine-Action-iconOnly";
-		props.p ??= "xs";
+		restProps.className ??= "mantine-Action-iconOnly";
+		restProps.p ??= "xs";
 	}
 	if (props.textVisibleFrom) {
-		const { children, textVisibleFrom, leftSection,...rest } = props;
+		const { children, textVisibleFrom, leftSection,...rest } = restProps;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			visibleFrom: textVisibleFrom,
@@ -90,6 +313,8 @@ const Action = (_props) => {
 				flex: 1,
 				...rest,
 				leftSection,
+				tooltip,
+				menu,
 				children
 			})
 		}), /* @__PURE__ */ jsx(Flex$1, {
@@ -98,32 +323,48 @@ const Action = (_props) => {
 			children: /* @__PURE__ */ jsx(Action, {
 				px: "xs",
 				...rest,
+				tooltip,
+				menu,
 				children: leftSection
 			})
 		})] });
 	}
 	const renderAction = () => {
-		if ("href" in props && props.href) return /* @__PURE__ */ jsx(ActionHref, {
-			...props,
-			href: props.href,
-			children: props.children
+		if ("href" in restProps && restProps.href) return /* @__PURE__ */ jsx(ActionHref, {
+			...restProps,
+			href: restProps.href,
+			children: restProps.children
 		});
-		if ("onClick" in props && props.onClick) return /* @__PURE__ */ jsx(ActionClick, {
-			...props,
-			onClick: props.onClick,
-			children: props.children
+		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ jsx(ActionClick, {
+			...restProps,
+			onClick: restProps.onClick,
+			children: restProps.children
 		});
-		if ("form" in props && props.form) return /* @__PURE__ */ jsx(ActionSubmit, {
-			...props,
-			form: props.form,
-			children: props.children
+		if ("form" in restProps && restProps.form) return /* @__PURE__ */ jsx(ActionSubmit, {
+			...restProps,
+			form: restProps.form,
+			children: restProps.children
 		});
 		return /* @__PURE__ */ jsx(Button, {
-			...props,
-			children: props.children
+			...restProps,
+			children: restProps.children
 		});
 	};
-	return renderAction();
+	let actionElement = renderAction();
+	if (menu) actionElement = /* @__PURE__ */ jsxs(Menu, {
+		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)) })]
+	});
+	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
+		label: tooltip,
+		children: actionElement
+	} : {
+		...tooltip,
+		children: actionElement
+	} });
+	return actionElement;
 };
 var Action_default = Action;
 /**
@@ -263,6 +504,44 @@ 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 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/ControlDate.tsx
 /**
@@ -276,9 +555,8 @@ const prettyName = (name) => {
 * Automatically detects date formats from schema and renders appropriate picker.
 */
 const ControlDate = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
+	const { inputProps, id, icon, format } = parseInput(props, useFormState(props.input));
 	if (!props.input?.props) return null;
-	const format = props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0;
 	if (props.datetime || format === "date-time") {
 		const dateTimePickerProps = typeof props.datetime === "object" ? props.datetime : {};
 		return /* @__PURE__ */ jsx(DateTimePicker, {
@@ -339,7 +617,6 @@ var ControlDate_default = ControlDate;
 */
 const ControlSelect = (props) => {
 	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
-	if (!props.input?.props) return null;
 	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) {
@@ -347,6 +624,42 @@ const ControlSelect = (props) => {
 		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] = useState([]);
+	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__ */ jsx(Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx(Flex$1, {
+				mt: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(TagsInput, {
@@ -378,10 +691,6 @@ const ControlSelect = (props) => {
 			...multiSelectProps
 		});
 	}
-	const data = enumValues.map((value) => ({
-		value,
-		label: value
-	}));
 	const selectProps = typeof props.select === "object" ? props.select : {};
 	return /* @__PURE__ */ jsx(Select, {
 		...inputProps,
@@ -417,10 +726,13 @@ var ControlSelect_default = ControlSelect;
 *
 * Automatically handles labels, descriptions, error messages, required state, and default icons.
 */
-const Control = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
-	if (!props.input?.props) return null;
-	const format = props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0;
+const Control = (_props) => {
+	const { inputProps, id, icon, format, schema } = parseInput(_props, useFormState(_props.input, ["error"]));
+	if (!_props.input?.props) return null;
+	const props = {
+		..._props,
+		...schema.$control
+	};
 	if (props.custom) {
 		const Custom = props.custom;
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
@@ -470,47 +782,18 @@ const Control = (props) => {
 			...colorInputProps
 		});
 	}
-	if (props.segmented) {
-		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
-		const data = segmentedControlProps.data ?? (props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum?.map((value) => ({
-			value,
-			label: value
-		})) : []);
-		return /* @__PURE__ */ jsx(Input.Wrapper, {
-			...inputProps,
-			children: /* @__PURE__ */ jsx(Flex$1, {
-				mt: "calc(var(--mantine-spacing-xs) / 2)",
-				children: /* @__PURE__ */ jsx(SegmentedControl, {
-					disabled: inputProps.disabled,
-					defaultValue: String(props.input.props.defaultValue),
-					...segmentedControlProps,
-					onChange: (value) => {
-						props.input.set(value);
-					},
-					data
-				})
-			})
-		});
-	}
-	if (props.autocomplete) {
-		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
-		return /* @__PURE__ */ jsx(Autocomplete, {
-			...inputProps,
-			id,
-			leftSection: icon,
-			...props.input.props,
-			...autocompleteProps
-		});
-	}
 	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) return /* @__PURE__ */ jsx(ControlSelect_default, {
-		input: props.input,
-		title: props.title,
-		description: props.description,
-		icon,
-		select: props.select
-	});
+	if (isEnum || isArray || props.select) {
+		const opts = typeof props.select === "object" ? props.select : {};
+		return /* @__PURE__ */ 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__ */ jsx(Switch, {
@@ -572,30 +855,6 @@ const Control = (props) => {
 	});
 };
 var Control_default = Control;
-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 TypeBoxError ? form.error.value.message : void 0;
-	return {
-		id,
-		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"
-		}),
-		inputProps: {
-			label,
-			description,
-			error,
-			required: props.input.required,
-			disabled
-		}
-	};
-};
 
 //#endregion
 //#region src/components/DarkModeButton.tsx
@@ -603,10 +862,10 @@ 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 mode = props.mode ?? "minimal";
 	const toggleColorScheme = () => {
 		setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
 	};
@@ -636,11 +895,523 @@ const DarkModeButton = (props) => {
 		variant: props.variant ?? "default",
 		size: props.size ?? "lg",
 		"aria-label": "Toggle color scheme",
-		children: colorScheme === "dark" ? /* @__PURE__ */ jsx(IconSun, { size: 20 }) : /* @__PURE__ */ jsx(IconMoon, { size: 20 })
+		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$1({
+		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
 /**
@@ -669,7 +1440,7 @@ var DarkModeButton_default = DarkModeButton;
 * ```
 */
 const TypeForm = (props) => {
-	const { form, columns = 1, children, controlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
+	const { form, columns = 3, children, controlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
 	if (!form.options?.schema?.properties) return null;
 	const supportedFields = Object.keys(form.options.schema.properties).filter((fieldName) => {
 		const field = form.input[fieldName];
@@ -684,7 +1455,7 @@ const TypeForm = (props) => {
 	const colSpan = typeof columns === "number" ? {
 		xs: 12,
 		sm: 6,
-		lg: 12 / 3
+		lg: 12 / columns
 	} : {
 		base: columns.base ? 12 / columns.base : void 0,
 		xs: columns.xs ? 12 / columns.xs : 12,
@@ -707,20 +1478,41 @@ const TypeForm = (props) => {
 			}, fieldName);
 		}) });
 	};
-	const content = /* @__PURE__ */ jsxs(Stack, { children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsx(Action_default, {
-		form,
-		...submitButtonProps,
-		children: submitButtonProps?.children ?? "Submit"
-	})] });
+	const content = /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		gap: "sm",
+		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, { children: [/* @__PURE__ */ jsx(Action_default, {
+			form,
+			...submitButtonProps,
+			children: submitButtonProps?.children ?? "Submit"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "reset",
+			children: "Reset"
+		})] })]
+	});
 	if (skipFormElement) return content;
 	return /* @__PURE__ */ jsx("form", {
-		onSubmit: form.onSubmit,
-		noValidate: true,
+		...form.props,
 		children: content
 	});
 };
 var TypeForm_default = TypeForm;
 
+//#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 useInject(DialogService);
+};
+
 //#endregion
 //#region src/hooks/useToast.ts
 /**
@@ -738,7 +1530,7 @@ const useToast = () => {
 //#endregion
 //#region src/index.ts
 /**
-*
+* Mantine
 *
 * @module alepha.ui
 */
@@ -746,11 +1538,12 @@ const AlephaUI = $module({
 	name: "alepha.ui",
 	services: [
 		AlephaReact,
+		DialogService,
 		ToastService,
 		RootRouter
 	]
 });
 
 //#endregion
-export { Action_default as Action, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, Control_default as Control, ControlDate_default as ControlDate, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, Flex, ICON_SIZES, Omnibar_default as Omnibar, RootRouter, ToastService, TypeForm_default as TypeForm, capitalize, getDefaultIcon, prettyName, useToast };
+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