@alepha/ui 0.10.5 → 0.10.7

package/dist/index.js

@@ -1,17 +1,76 @@
+import { n as Omnibar_default, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-WfiC2EH6.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 { 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ModalsProvider } from "@mantine/modals";
-import { Notifications } from "@mantine/notifications";
-import { NavigationProgress, nprogress } from "@mantine/nprogress";
+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 { useFormState } from "@alepha/react-form";
+import { useEffect, useState } from "react";
+import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
+
+//#region src/RootRouter.ts
+var RootRouter = class {
+	root = $page({
+		path: "/",
+		lazy: () => import("./AlephaMantineProvider-EemOtraW.js")
+	});
+};
 
+//#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 Action = (_props) => {
 	const props = {
@@ -24,7 +83,7 @@ const Action = (_props) => {
 	}
 	if (props.textVisibleFrom) {
 		const { children, textVisibleFrom, leftSection,...rest } = props;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex, {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			visibleFrom: textVisibleFrom,
 			children: /* @__PURE__ */ jsx(Action, {
@@ -33,7 +92,7 @@ const Action = (_props) => {
 				leftSection,
 				children
 			})
-		}), /* @__PURE__ */ jsx(Flex, {
+		}), /* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			hiddenFrom: textVisibleFrom,
 			children: /* @__PURE__ */ jsx(Action, {
@@ -66,6 +125,7 @@ const Action = (_props) => {
 	};
 	return renderAction();
 };
+var Action_default = Action;
 /**
 * Action button that submits a form with loading and disabled state handling.
 */
@@ -75,7 +135,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 +178,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,31 +189,210 @@ const ActionHref = (props) => {
 };
 
 //#endregion
-//#region src/components/AlephaMantineProvider.tsx
-const AlephaMantineProvider = (props) => {
-	useRouterEvents({
-		onBegin: () => {
-			nprogress.start();
-		},
-		onEnd: () => {
-			nprogress.complete();
-		}
+//#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/utils/string.ts
+/**
+* Capitalizes the first letter of a string.
+*
+* @example
+* capitalize("hello") // "Hello"
+*/
+const capitalize = (str) => {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+};
+/**
+* Converts a path or identifier string into a pretty display name.
+* Removes slashes and capitalizes the first letter.
+*
+* @example
+* prettyName("/userName") // "UserName"
+* prettyName("email") // "Email"
+*/
+const prettyName = (name) => {
+	return capitalize(name.replaceAll("/", ""));
+};
+
+//#endregion
+//#region src/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 } = 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, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
+			onChange: (value) => {
+				props.input.set(value ? new Date(value).toISOString() : void 0);
+			},
+			...dateTimePickerProps
+		});
+	}
+	if (props.date || format === "date") {
+		const dateInputProps = typeof props.date === "object" ? props.date : {};
+		return /* @__PURE__ */ 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));
+	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) {
+		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 : [];
+	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 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 data = enumValues.map((value) => ({
+		value,
+		label: value
+	}));
+	const selectProps = typeof props.select === "object" ? props.select : {};
+	return /* @__PURE__ */ jsx(Select, {
+		...inputProps,
+		id,
+		leftSection: icon,
+		data,
+		...props.input.props,
+		...selectProps
 	});
-	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, {})
-			})
-		]
-	})] });
 };
+var ControlSelect_default = ControlSelect;
 
 //#endregion
 //#region src/components/Control.tsx
@@ -162,39 +400,32 @@ const AlephaMantineProvider = (props) => {
 * Generic form control that renders the appropriate input based on the schema and props.
 *
 * Supports:
-* - TextInput
+* - 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, and required state.
+* Automatically handles labels, descriptions, error messages, required state, and default icons.
 */
 const Control = (props) => {
-	const form = useFormState(props.input);
+	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
 	if (!props.input?.props) return null;
-	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 required = props.input.required;
-	const inputProps = {
-		label,
-		description,
-		error,
-		required,
-		disabled
-	};
+	const format = props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0;
 	if (props.custom) {
 		const Custom = props.custom;
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
 			...inputProps,
-			children: /* @__PURE__ */ jsx(Flex, {
+			children: /* @__PURE__ */ jsx(Flex$1, {
 				flex: 1,
 				mt: "calc(var(--mantine-spacing-xs) / 2)",
 				children: /* @__PURE__ */ jsx(Custom, {
@@ -206,6 +437,39 @@ const Control = (props) => {
 			})
 		});
 	}
+	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
+		const numberInputProps = typeof props.number === "object" ? props.number : {};
+		const { type,...inputPropsWithoutType } = props.input.props;
+		return /* @__PURE__ */ jsx(NumberInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...inputPropsWithoutType,
+			...numberInputProps
+		});
+	}
+	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,
+			...props.input.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) => ({
@@ -214,10 +478,10 @@ const Control = (props) => {
 		})) : []);
 		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) => {
@@ -238,21 +502,15 @@ const Control = (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) => ({
-			value,
-			label: value
-		})) : [];
-		const selectProps = typeof props.select === "object" ? props.select : {};
-		return /* @__PURE__ */ jsx(Select, {
-			...inputProps,
-			id,
-			leftSection: icon,
-			data,
-			...props.input.props,
-			...selectProps
-		});
-	}
+	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 (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, {
@@ -264,7 +522,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,20 +542,197 @@ 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;
+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
+		}
+	};
 };
-const capitalize = (str) => {
-	return str.charAt(0).toUpperCase() + str.slice(1);
+
+//#endregion
+//#region src/components/DarkModeButton.tsx
+const DarkModeButton = (props) => {
+	const { setColorScheme } = useMantineColorScheme();
+	const computedColorScheme = useComputedColorScheme("light");
+	const [colorScheme, setColorScheme2] = useState("default");
+	useEffect(() => {
+		setColorScheme2(computedColorScheme);
+	}, [computedColorScheme]);
+	const mode = props.mode ?? "minimal";
+	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 }) : /* @__PURE__ */ jsx(IconMoon, { size: 20 })
+	});
+};
+var DarkModeButton_default = DarkModeButton;
+
+//#endregion
+//#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 = 1, 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 / 3
+	} : {
+		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(Stack, { children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsx(Action_default, {
+		form,
+		...submitButtonProps,
+		children: submitButtonProps?.children ?? "Submit"
+	})] });
+	if (skipFormElement) return content;
+	return /* @__PURE__ */ jsx("form", {
+		onSubmit: form.onSubmit,
+		noValidate: true,
+		children: content
+	});
+};
+var TypeForm_default = TypeForm;
+
+//#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
@@ -309,9 +744,13 @@ const capitalize = (str) => {
 */
 const AlephaUI = $module({
 	name: "alepha.ui",
-	services: [AlephaReact]
+	services: [
+		AlephaReact,
+		ToastService,
+		RootRouter
+	]
 });
 
 //#endregion
-export { Action, AlephaMantineProvider, AlephaUI, Control };
+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 };
 //# sourceMappingURL=index.js.map