@alepha/ui 0.10.6 → 0.11.0

package/dist/index.js

@@ -1,71 +1,372 @@
+import { n as Omnibar_default, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-DDbIijPF.js";
 import { $module, TypeBoxError } from "@alepha/core";
-import { AlephaReact, NestedView, useActive, useAlepha, useRouter, useRouterEvents } from "@alepha/react";
-import "@mantine/core/styles.css";
-import "@mantine/nprogress/styles.css";
-import "@mantine/spotlight/styles.css";
-import "@mantine/notifications/styles.css";
-import { useFormState } from "@alepha/react-form";
-import { Autocomplete, Button, ColorSchemeScript, Flex, Input, MantineProvider, PasswordInput, SegmentedControl, Select, Switch, TextInput, Textarea } from "@mantine/core";
-import { useState } from "react";
+import { $page, AlephaReact, useActive, useAlepha, useInject, useRouter } 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ModalsProvider } from "@mantine/modals";
-import { Notifications } from "@mantine/notifications";
-import { NavigationProgress, nprogress } from "@mantine/nprogress";
+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 { 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-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 {
+	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) => {
+	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;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex, {
+		const { children, textVisibleFrom, leftSection,...rest } = restProps;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			visibleFrom: textVisibleFrom,
 			children: /* @__PURE__ */ jsx(Action, {
 				flex: 1,
 				...rest,
 				leftSection,
+				tooltip,
+				menu,
 				children
 			})
-		}), /* @__PURE__ */ jsx(Flex, {
+		}), /* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			hiddenFrom: textVisibleFrom,
 			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;
 /**
 * Action button that submits a form with loading and disabled state handling.
 */
@@ -75,7 +376,7 @@ const ActionSubmit = (props) => {
 	return /* @__PURE__ */ jsx(Button, {
 		...buttonProps,
 		loading: state.loading,
-		disabled: state.loading || !state.dirty,
+		disabled: state.loading,
 		type: "submit",
 		children: props.children
 	});
@@ -118,11 +419,10 @@ const ActionHref = (props) => {
 		href: props.href,
 		...options
 	} : { href: props.href });
-	const anchorProps = router.anchor(props.href, routerGoOptions);
 	return /* @__PURE__ */ jsx(Button, {
 		component: "a",
 		loading: isPending,
-		...anchorProps,
+		...router.anchor(props.href, routerGoOptions),
 		...buttonProps,
 		variant: isActive && options !== false ? "filled" : "subtle",
 		children: props.children
@@ -130,59 +430,98 @@ const ActionHref = (props) => {
 };
 
 //#endregion
-//#region src/components/AlephaMantineProvider.tsx
-const AlephaMantineProvider = (props) => {
-	useRouterEvents({
-		onBegin: () => {
-			nprogress.start();
-		},
-		onEnd: () => {
-			nprogress.complete();
-		}
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
-		defaultColorScheme: props.mantine?.defaultColorScheme,
-		...props.colorSchemeScript
-	}), /* @__PURE__ */ jsxs(MantineProvider, {
-		...props.mantine,
-		children: [
-			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
-			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
-			/* @__PURE__ */ jsx(ModalsProvider, {
-				...props.modals,
-				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
-			})
-		]
-	})] });
+//#region src/utils/icons.tsx
+/**
+* Icon size presets following Mantine's size conventions
+*/
+const ICON_SIZES = {
+	xs: 12,
+	sm: 16,
+	md: 20,
+	lg: 24,
+	xl: 28
+};
+/**
+* Get the default icon for an input based on its type, format, or name.
+*/
+const getDefaultIcon = (params) => {
+	const { type, format, name, isEnum, isArray, size = "sm" } = params;
+	const iconSize = ICON_SIZES[size];
+	if (format) switch (format) {
+		case "email": return /* @__PURE__ */ jsx(IconMail, { size: iconSize });
+		case "url":
+		case "uri": return /* @__PURE__ */ jsx(IconLink, { size: iconSize });
+		case "tel":
+		case "phone": return /* @__PURE__ */ jsx(IconPhone, { size: iconSize });
+		case "date": return /* @__PURE__ */ jsx(IconCalendar, { size: iconSize });
+		case "date-time": return /* @__PURE__ */ jsx(IconCalendar, { size: iconSize });
+		case "time": return /* @__PURE__ */ jsx(IconClock, { size: iconSize });
+		case "color": return /* @__PURE__ */ jsx(IconColorPicker, { size: iconSize });
+		case "uuid": return /* @__PURE__ */ jsx(IconKey, { size: iconSize });
+	}
+	if (name) {
+		const nameLower = name.toLowerCase();
+		if (nameLower.includes("password") || nameLower.includes("secret")) return /* @__PURE__ */ jsx(IconKey, { size: iconSize });
+		if (nameLower.includes("email") || nameLower.includes("mail")) return /* @__PURE__ */ jsx(IconMail, { size: iconSize });
+		if (nameLower.includes("url") || nameLower.includes("link")) return /* @__PURE__ */ jsx(IconLink, { size: iconSize });
+		if (nameLower.includes("phone") || nameLower.includes("tel")) return /* @__PURE__ */ jsx(IconPhone, { size: iconSize });
+		if (nameLower.includes("color")) return /* @__PURE__ */ jsx(IconPalette, { size: iconSize });
+		if (nameLower.includes("file") || nameLower.includes("upload")) return /* @__PURE__ */ jsx(IconFile, { size: iconSize });
+		if (nameLower.includes("date")) return /* @__PURE__ */ jsx(IconCalendar, { size: iconSize });
+		if (nameLower.includes("time")) return /* @__PURE__ */ jsx(IconClock, { size: iconSize });
+	}
+	if (isEnum || isArray) return /* @__PURE__ */ jsx(IconSelector, { size: iconSize });
+	if (type) switch (type) {
+		case "boolean": return /* @__PURE__ */ jsx(IconToggleLeft, { size: iconSize });
+		case "number":
+		case "integer": return /* @__PURE__ */ jsx(IconHash, { size: iconSize });
+		case "array": return /* @__PURE__ */ jsx(IconList, { size: iconSize });
+		case "string": return /* @__PURE__ */ jsx(IconLetterCase, { size: iconSize });
+	}
+	return /* @__PURE__ */ jsx(IconAt, { size: iconSize });
 };
 
 //#endregion
-//#region src/components/Control.tsx
+//#region src/utils/string.ts
 /**
-* Generic form control that renders the appropriate input based on the schema and props.
+* Capitalizes the first letter of a string.
 *
-* Supports:
-* - TextInput
-* - Textarea
-* - Select (for enum types)
-* - Autocomplete
-* - PasswordInput
-* - Switch (for boolean types)
-* - SegmentedControl (for enum types)
-* - Custom component
+* @example
+* capitalize("hello") // "Hello"
+*/
+const capitalize = (str) => {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+};
+/**
+* Converts a path or identifier string into a pretty display name.
+* Removes slashes and capitalizes the first letter.
 *
-* Automatically handles labels, descriptions, error messages, and required state.
+* @example
+* prettyName("/userName") // "UserName"
+* prettyName("email") // "Email"
 */
-const Control = (props) => {
-	const form = useFormState(props.input);
-	if (!props.input?.props) return null;
+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;
+	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,
@@ -190,40 +529,122 @@ const Control = (props) => {
 		required,
 		disabled
 	};
-	if (props.custom) {
-		const Custom = props.custom;
-		return /* @__PURE__ */ jsx(Input.Wrapper, {
+	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
+/**
+* ControlDate component for handling date, datetime, and time inputs.
+*
+* Features:
+* - DateInput for date format
+* - DateTimePicker for date-time format
+* - TimeInput for time format
+*
+* Automatically detects date formats from schema and renders appropriate picker.
+*/
+const ControlDate = (props) => {
+	const { inputProps, id, icon, format } = parseInput(props, useFormState(props.input));
+	if (!props.input?.props) return null;
+	if (props.datetime || format === "date-time") {
+		const dateTimePickerProps = typeof props.datetime === "object" ? props.datetime : {};
+		return /* @__PURE__ */ jsx(DateTimePicker, {
 			...inputProps,
-			children: /* @__PURE__ */ jsx(Flex, {
-				flex: 1,
-				mt: "calc(var(--mantine-spacing-xs) / 2)",
-				children: /* @__PURE__ */ jsx(Custom, {
-					defaultValue: props.input.props.defaultValue,
-					onChange: (value) => {
-						props.input.set(value);
-					}
-				})
-			})
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
+			onChange: (value) => {
+				props.input.set(value ? new Date(value).toISOString() : void 0);
+			},
+			...dateTimePickerProps
 		});
 	}
+	if (props.date || format === "date") {
+		const dateInputProps = typeof props.date === "object" ? props.date : {};
+		return /* @__PURE__ */ jsx(DateInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
+			onChange: (value) => {
+				props.input.set(value ? new Date(value).toISOString().slice(0, 10) : void 0);
+			},
+			...dateInputProps
+		});
+	}
+	if (props.time || format === "time") {
+		const timeInputProps = typeof props.time === "object" ? props.time : {};
+		return /* @__PURE__ */ jsx(TimeInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue,
+			onChange: (event) => {
+				props.input.set(event.currentTarget.value);
+			},
+			...timeInputProps
+		});
+	}
+	return null;
+};
+var ControlDate_default = ControlDate;
+
+//#endregion
+//#region src/components/ControlSelect.tsx
+/**
+* ControlSelect component for handling Select, MultiSelect, and TagsInput.
+*
+* Features:
+* - Basic Select with enum support
+* - MultiSelect for array of enums
+* - TagsInput for array of strings (no enum)
+* - Future: Lazy loading
+* - Future: Searchable/filterable options
+* - Future: Custom option rendering
+*
+* Automatically detects enum values and array types from schema.
+*/
+const ControlSelect = (props) => {
+	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
+	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
+	let itemsEnum;
+	if (isArray && "items" in props.input.schema && props.input.schema.items) {
+		const items = props.input.schema.items;
+		if ("enum" in items && Array.isArray(items.enum)) itemsEnum = items.enum;
+	}
+	const enumValues = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum : [];
+	const [data, setData] = 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 : {};
-		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, {
+			children: /* @__PURE__ */ jsx(Flex$1, {
 				mt: "calc(var(--mantine-spacing-xs) / 2)",
 				children: /* @__PURE__ */ jsx(SegmentedControl, {
-					disabled,
+					disabled: inputProps.disabled,
 					defaultValue: String(props.input.props.defaultValue),
 					...segmentedControlProps,
 					onChange: (value) => {
 						props.input.set(value);
 					},
-					data
+					data: data.slice(0, 10)
 				})
 			})
 		});
@@ -234,23 +655,143 @@ const Control = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
+			data,
 			...props.input.props,
 			...autocompleteProps
 		});
 	}
-	if (props.input.schema && "enum" in props.input.schema && props.input.schema.enum || props.select) {
-		const data = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum?.map((value) => ({
+	if (isArray && !itemsEnum || props.tags) {
+		const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
+		return /* @__PURE__ */ jsx(TagsInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
+			onChange: (value) => {
+				props.input.set(value);
+			},
+			...tagsInputProps
+		});
+	}
+	if (isArray && itemsEnum || props.multi) {
+		const data$1 = itemsEnum?.map((value) => ({
 			value,
 			label: value
-		})) : [];
-		const selectProps = typeof props.select === "object" ? props.select : {};
-		return /* @__PURE__ */ jsx(Select, {
+		})) || [];
+		const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+		return /* @__PURE__ */ jsx(MultiSelect, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			data: data$1,
+			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
+			onChange: (value) => {
+				props.input.set(value);
+			},
+			...multiSelectProps
+		});
+	}
+	const selectProps = typeof props.select === "object" ? props.select : {};
+	return /* @__PURE__ */ jsx(Select, {
+		...inputProps,
+		id,
+		leftSection: icon,
+		data,
+		...props.input.props,
+		...selectProps
+	});
+};
+var ControlSelect_default = ControlSelect;
+
+//#endregion
+//#region src/components/Control.tsx
+/**
+* Generic form control that renders the appropriate input based on the schema and props.
+*
+* Supports:
+* - TextInput (with format detection: email, url, tel)
+* - Textarea
+* - NumberInput (for number/integer types)
+* - FileInput
+* - ColorInput (for color format)
+* - Select (for enum types)
+* - Autocomplete
+* - PasswordInput
+* - Switch (for boolean types)
+* - SegmentedControl (for enum types)
+* - DateInput (for date format)
+* - DateTimePicker (for date-time format)
+* - TimeInput (for time format)
+* - Custom component
+*
+* Automatically handles labels, descriptions, error messages, required state, and default icons.
+*/
+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, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx(Flex$1, {
+				flex: 1,
+				mt: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(Custom, {
+					defaultValue: props.input.props.defaultValue,
+					onChange: (value) => {
+						props.input.set(value);
+					}
+				})
+			})
+		});
+	}
+	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
+		const numberInputProps = typeof props.number === "object" ? props.number : {};
+		const { type,...inputPropsWithoutType } = props.input.props;
+		return /* @__PURE__ */ jsx(NumberInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...inputPropsWithoutType,
+			...numberInputProps
+		});
+	}
+	if (props.file) {
+		const fileInputProps = typeof props.file === "object" ? props.file : {};
+		return /* @__PURE__ */ jsx(FileInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			onChange: (file) => {
+				props.input.set(file);
+			},
+			...fileInputProps
+		});
+	}
+	if (props.color || format === "color") {
+		const colorInputProps = typeof props.color === "object" ? props.color : {};
+		return /* @__PURE__ */ jsx(ColorInput, {
 			...inputProps,
 			id,
 			leftSection: icon,
-			data,
 			...props.input.props,
-			...selectProps
+			...colorInputProps
+		});
+	}
+	const isEnum = props.input.schema && "enum" in props.input.schema && props.input.schema.enum;
+	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
+	if (isEnum || isArray || props.select) {
+		const opts = typeof props.select === "object" ? props.select : {};
+		return /* @__PURE__ */ 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) {
@@ -264,7 +805,7 @@ const Control = (props) => {
 			...switchProps
 		});
 	}
-	if (props.password) {
+	if (props.password || props.input.props.name?.includes("password")) {
 		const passwordInputProps = typeof props.password === "object" ? props.password : {};
 		return /* @__PURE__ */ jsx(PasswordInput, {
 			...inputProps,
@@ -284,34 +825,725 @@ const Control = (props) => {
 			...textAreaProps
 		});
 	}
+	if (props.date || props.datetime || props.time || format === "date" || format === "date-time" || format === "time") return /* @__PURE__ */ jsx(ControlDate_default, {
+		input: props.input,
+		title: props.title,
+		description: props.description,
+		icon,
+		date: props.date,
+		datetime: props.datetime,
+		time: props.time
+	});
 	const textInputProps = typeof props.text === "object" ? props.text : {};
+	const getInputType = () => {
+		switch (format) {
+			case "email": return "email";
+			case "url":
+			case "uri": return "url";
+			case "tel":
+			case "phone": return "tel";
+			default: return;
+		}
+	};
 	return /* @__PURE__ */ jsx(TextInput, {
 		...inputProps,
 		id,
 		leftSection: icon,
+		type: getInputType(),
 		...props.input.props,
 		...textInputProps
 	});
 };
-const prettyName = (name) => {
-	return capitalize(name.replaceAll("/", ""));
+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 })
+	});
 };
-const capitalize = (str) => {
-	return str.charAt(0).toUpperCase() + str.slice(1);
+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/index.ts
+//#region src/components/TypeForm.tsx
 /**
+* TypeForm component that automatically renders all form inputs based on schema.
+* Uses the Control component to render individual fields and Mantine Grid for responsive layout.
+*
+* @example
+* ```tsx
+* import { t } from "alepha";
+* import { useForm } from "@alepha/react-form";
+* import { TypeForm } from "@alepha/ui";
 *
+* const form = useForm({
+*   schema: t.object({
+*     username: t.text(),
+*     email: t.text(),
+*     age: t.integer(),
+*     subscribe: t.boolean(),
+*   }),
+*   handler: (values) => {
+*     console.log(values);
+*   },
+* });
+*
+* return <TypeForm form={form} columns={2} />;
+* ```
+*/
+const TypeForm = (props) => {
+	const { form, columns = 3, children, controlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
+	if (!form.options?.schema?.properties) return null;
+	const supportedFields = Object.keys(form.options.schema.properties).filter((fieldName) => {
+		const field = form.input[fieldName];
+		if (!field || typeof field !== "object" || !("schema" in field)) return false;
+		const schema = field.schema;
+		if ("type" in schema) {
+			if (schema.type === "object") return false;
+		}
+		if ("properties" in schema && schema.properties) return false;
+		return true;
+	});
+	const colSpan = typeof columns === "number" ? {
+		xs: 12,
+		sm: 6,
+		lg: 12 / columns
+	} : {
+		base: columns.base ? 12 / columns.base : void 0,
+		xs: columns.xs ? 12 / columns.xs : 12,
+		sm: columns.sm ? 12 / columns.sm : 6,
+		md: columns.md ? 12 / columns.md : void 0,
+		lg: columns.lg ? 12 / columns.lg : 4,
+		xl: columns.xl ? 12 / columns.xl : void 0
+	};
+	const renderFields = () => {
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(form.input) });
+		return /* @__PURE__ */ jsx(Grid, { children: supportedFields.map((fieldName) => {
+			const field = form.input[fieldName];
+			if (!field || typeof field !== "object" || !("schema" in field)) return null;
+			return /* @__PURE__ */ jsx(Grid.Col, {
+				span: colSpan,
+				children: /* @__PURE__ */ jsx(Control_default, {
+					input: field,
+					...controlProps
+				})
+			}, fieldName);
+		}) });
+	};
+	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", {
+		...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
+/**
+* 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
+/**
+* Mantine
 *
 * @module alepha.ui
 */
 const AlephaUI = $module({
 	name: "alepha.ui",
-	services: [AlephaReact]
+	services: [
+		AlephaReact,
+		DialogService,
+		ToastService,
+		RootRouter
+	]
 });
 
 //#endregion
-export { Action, AlephaMantineProvider, AlephaUI, Control };
+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