@alepha/ui 0.12.0 → 0.12.1

package/dist/{index.cjs → admin/core-aFtK4l9I.cjs}

@@ -1,4 +1,3 @@
-const require_AlephaMantineProvider = require('./AlephaMantineProvider-DuvZFAuk.cjs');
 let __alepha_react_form = require("@alepha/react/form");
 let __alepha_react_head = require("@alepha/react/head");
 let __alepha_react_i18n = require("@alepha/react/i18n");
@@ -6,25 +5,165 @@ let alepha = require("alepha");
 let __alepha_react = require("@alepha/react");
 let __mantine_core = require("@mantine/core");
 let __mantine_modals = require("@mantine/modals");
+let __mantine_notifications = require("@mantine/notifications");
+let __mantine_nprogress = require("@mantine/nprogress");
 let __tabler_icons_react = require("@tabler/icons-react");
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let __mantine_spotlight = require("@mantine/spotlight");
+let react = require("react");
 let __mantine_dates = require("@mantine/dates");
 let alepha_orm = require("alepha/orm");
 let __mantine_hooks = require("@mantine/hooks");
 let alepha_datetime = require("alepha/datetime");
 
-//#region src/RootRouter.ts
+//#region src/core/services/ToastService.tsx
+var ToastService = class {
+	raw = __mantine_notifications.notifications;
+	options = { default: {
+		radius: "md",
+		withBorder: true,
+		withCloseButton: true,
+		autoClose: 5e3,
+		position: "top-center"
+	} };
+	show(options) {
+		__mantine_notifications.notifications.show({
+			...this.options.default,
+			...options
+		});
+	}
+	info(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "blue",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconInfoCircle, { size: 20 }),
+			title: "Info",
+			message: "Information notification",
+			...options
+		});
+	}
+	success(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "green",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCheck, { size: 16 }),
+			title: "Success",
+			message: "Operation completed successfully",
+			...options
+		});
+	}
+	warning(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "yellow",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconAlertTriangle, { size: 20 }),
+			title: "Warning",
+			message: "Please review this warning",
+			...options
+		});
+	}
+	danger(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "red",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, { size: 20 }),
+			title: "Error",
+			message: "An error occurred",
+			...options
+		});
+	}
+};
+
+//#endregion
+//#region src/core/hooks/useToast.ts
+/**
+* Use this hook to access the Toast Service for showing notifications.
+*
+* @example
+* ```tsx
+* const toast = useToast();
+* toast.success({ message: "Operation completed successfully!" });
+* toast.error({ title: "Error", message: "Something went wrong" });
+* ```
+*/
+const useToast = () => {
+	return (0, __alepha_react.useInject)(ToastService);
+};
+
+//#endregion
+//#region src/core/components/layout/Omnibar.tsx
+const Omnibar = (props) => {
+	const shortcut = props.shortcut ?? "mod+K";
+	const searchPlaceholder = props.searchPlaceholder ?? "Search...";
+	const nothingFound = props.nothingFound ?? "Nothing found...";
+	const router = (0, __alepha_react.useRouter)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_spotlight.Spotlight, {
+		actions: (0, react.useMemo)(() => router.concretePages.map((page) => ({
+			id: page.name,
+			label: page.label ?? page.name,
+			description: page.description,
+			onClick: () => router.go(page.name),
+			leftSection: page.icon
+		})), []),
+		shortcut,
+		limit: 10,
+		searchProps: {
+			leftSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSearch, { size: 20 }),
+			placeholder: searchPlaceholder
+		},
+		nothingFound
+	});
+};
+var Omnibar_default = Omnibar;
+
+//#endregion
+//#region src/core/components/layout/AlephaMantineProvider.tsx
+const AlephaMantineProvider = (props) => {
+	const toast = useToast();
+	(0, __alepha_react.useEvents)({
+		"react:transition:begin": () => {
+			__mantine_nprogress.nprogress.start();
+		},
+		"react:transition:end": () => {
+			__mantine_nprogress.nprogress.complete();
+		},
+		"react:action:error": ({ error }) => {
+			if (error instanceof __alepha_react_form.FormValidationError) return;
+			toast.danger({
+				title: error.name || "Error",
+				message: error.message ?? "An error occurred while processing your action."
+			});
+		}
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ColorSchemeScript, {
+		defaultColorScheme: props.mantine?.defaultColorScheme,
+		...props.colorSchemeScript
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.MantineProvider, {
+		...props.mantine,
+		theme: { ...props.mantine?.theme },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_notifications.Notifications, { ...props.notifications }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_nprogress.NavigationProgress, { ...props.navigationProgress }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_modals.ModalsProvider, {
+				...props.modals,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Omnibar_default, { ...props.omnibar }), props.children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__alepha_react.NestedView, {})]
+			})
+		]
+	})] });
+};
+var AlephaMantineProvider_default = AlephaMantineProvider;
+
+//#endregion
+//#region src/core/RootRouter.ts
 var RootRouter = class {
 	root = (0, __alepha_react.$page)({
 		path: "/",
-		lazy: () => Promise.resolve().then(() => require("./AlephaMantineProvider-CGpgWDt8.cjs"))
+		component: AlephaMantineProvider_default
 	});
 };
 
 //#endregion
-//#region src/components/data/JsonViewer.tsx
+//#region src/core/components/data/JsonViewer.tsx
 const getSizeConfig = (size = "sm") => {
 	const configs = {
 		xs: {
@@ -312,7 +451,7 @@ const JsonViewer = ({ data, defaultExpanded = true, maxDepth = 10, copyable = tr
 var JsonViewer_default = JsonViewer;
 
 //#endregion
-//#region src/components/dialogs/AlertDialog.tsx
+//#region src/core/components/dialogs/AlertDialog.tsx
 const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [options?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
 	mb: "md",
 	children: options.message
@@ -326,7 +465,7 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ (0, react_jsx_runt
 var AlertDialog_default = AlertDialog;
 
 //#endregion
-//#region src/components/dialogs/ConfirmDialog.tsx
+//#region src/core/components/dialogs/ConfirmDialog.tsx
 const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [options?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
 	mb: "md",
 	children: options.message
@@ -345,7 +484,7 @@ const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ (0, react_jsx_
 var ConfirmDialog_default = ConfirmDialog;
 
 //#endregion
-//#region src/components/dialogs/PromptDialog.tsx
+//#region src/core/components/dialogs/PromptDialog.tsx
 const PromptDialog = ({ options, onSubmit }) => {
 	const [value, setValue] = (0, react.useState)(options?.defaultValue || "");
 	const inputRef = (0, react.useRef)(null);
@@ -390,17 +529,26 @@ const PromptDialog = ({ options, onSubmit }) => {
 var PromptDialog_default = PromptDialog;
 
 //#endregion
-//#region src/constants/ui.ts
-const ui = { colors: {
-	transparent: "transparent",
-	background: "var(--alepha-background)",
-	surface: "var(--alepha-surface)",
-	elevated: "var(--alepha-elevated)",
-	border: "var(--alepha-border)"
-} };
+//#region src/core/constants/ui.ts
+const ui = {
+	colors: {
+		transparent: "transparent",
+		background: "var(--alepha-background)",
+		surface: "var(--alepha-surface)",
+		elevated: "var(--alepha-elevated)",
+		border: "var(--alepha-border)"
+	},
+	sizes: { icon: {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		xl: 32
+	} }
+};
 
 //#endregion
-//#region src/services/DialogService.tsx
+//#region src/core/services/DialogService.tsx
 var DialogService = class {
 	options = { default: {
 		centered: true,
@@ -528,7 +676,7 @@ var DialogService = class {
 };
 
 //#endregion
-//#region src/components/buttons/ActionButton.tsx
+//#region src/core/components/buttons/ActionButton.tsx
 const ActionMenuItem = (props) => {
 	const { item, index } = props;
 	const router = (0, __alepha_react.useRouter)();
@@ -568,12 +716,12 @@ const ActionMenuItem = (props) => {
 };
 const ActionButton = (_props) => {
 	const props = {
-		variant: "subtle",
+		variant: "default",
 		..._props
 	};
 	const { tooltip, menu, icon, ...restProps } = props;
 	if (props.icon) {
-		const icon$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
+		const icon$1 = isComponentType(props.icon) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
 			w: 24,
 			variant: "transparent",
 			size: "sm",
@@ -582,7 +730,7 @@ const ActionButton = (_props) => {
 			children: props.icon
 		});
 		if (!props.children) {
-			restProps.children = icon$1;
+			restProps.children = react.Children.only(icon$1);
 			restProps.p ??= "xs";
 		} else restProps.leftSection = icon$1;
 	}
@@ -773,6 +921,12 @@ const ActionNavigationButton = (props) => {
 	const anchorProps = router.anchor(props.href, routerGoOptions);
 	const className = buttonProps.className || "";
 	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
+	if (props.anchorProps) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Anchor, {
+		component: "a",
+		...anchorProps,
+		...props.anchorProps,
+		children: props.children
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Button, {
 		component: "a",
 		loading: isPending,
@@ -791,9 +945,19 @@ const ActionHrefButton = (props) => {
 		children: props.children
 	});
 };
+function isComponentType(param) {
+	if ((0, react.isValidElement)(param)) return false;
+	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
+}
+const renderIcon = (icon) => {
+	if (!icon) return null;
+	if ((0, react.isValidElement)(icon)) return icon;
+	if (isComponentType(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon, { size: ui.sizes.icon.md });
+	return icon;
+};
 
 //#endregion
-//#region src/components/buttons/BurgerButton.tsx
+//#region src/core/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
 	const [opened, setOpened] = (0, __alepha_react.useStore)("alepha.ui.sidebar.opened");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Burger, {
@@ -807,7 +971,7 @@ const BurgerButton = (props) => {
 var BurgerButton_default = BurgerButton;
 
 //#endregion
-//#region src/components/buttons/DarkModeButton.tsx
+//#region src/core/components/buttons/DarkModeButton.tsx
 const DarkModeButton = (props) => {
 	const { setColorScheme } = (0, __mantine_core.useMantineColorScheme)();
 	const computedColorScheme = (0, __mantine_core.useComputedColorScheme)("light");
@@ -844,25 +1008,40 @@ const DarkModeButton = (props) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
 		onClick: toggleColorScheme,
-		variant: props.variant ?? "outline",
+		variant: props.variant ?? "default",
 		size: props.size ?? "sm",
 		"aria-label": "Toggle color scheme",
 		px: "xs",
+		c: colorScheme !== "default" ? void 0 : "transparent",
 		fullWidth: props.fullWidth ?? false,
-		icon: colorScheme === "dark" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSun, { size: 20 }) : colorScheme === "light" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMoon, { size: 20 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
-			h: 20,
-			w: 20
-		}),
+		icon: colorScheme === "dark" ? __tabler_icons_react.IconSun : colorScheme === "light" ? __tabler_icons_react.IconMoon : __tabler_icons_react.IconSun,
 		...props.actionProps
 	});
 };
 var DarkModeButton_default = DarkModeButton;
 
 //#endregion
-//#region src/components/buttons/OmnibarButton.tsx
+//#region src/core/components/buttons/LanguageButton.tsx
+const LanguageButton = (props) => {
+	const i18n = (0, __alepha_react_i18n.useI18n)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
+		variant: "default",
+		icon: __tabler_icons_react.IconLanguage,
+		menu: { items: i18n.languages.map((lang) => ({
+			label: i18n.tr(lang),
+			onClick: () => i18n.setLang(lang),
+			active: i18n.lang === lang
+		})) },
+		...props.actionProps
+	});
+};
+var LanguageButton_default = LanguageButton;
+
+//#endregion
+//#region src/core/components/buttons/OmnibarButton.tsx
 const OmnibarButton = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
-		variant: "outline",
+		variant: "default",
 		miw: 256,
 		onClick: __mantine_spotlight.spotlight.open,
 		justify: "space-between",
@@ -889,23 +1068,13 @@ const OmnibarButton = (props) => {
 var OmnibarButton_default = OmnibarButton;
 
 //#endregion
-//#region src/utils/icons.tsx
-/**
-* Icon size presets following Mantine's size conventions
-*/
-const ICON_SIZES = {
-	xs: 12,
-	sm: 16,
-	md: 20,
-	lg: 24,
-	xl: 28
-};
+//#region src/core/utils/icons.tsx
 /**
 * 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];
+	const iconSize = ui.sizes.icon[size];
 	if (format) switch (format) {
 		case "email": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMail, { size: iconSize });
 		case "url":
@@ -941,7 +1110,7 @@ const getDefaultIcon = (params) => {
 };
 
 //#endregion
-//#region src/utils/string.ts
+//#region src/core/utils/string.ts
 /**
 * Capitalizes the first letter of a string.
 *
@@ -964,20 +1133,20 @@ const prettyName = (name) => {
 };
 
 //#endregion
-//#region src/utils/parseInput.ts
+//#region src/core/utils/parseInput.ts
 const parseInput = (props, form) => {
 	const disabled = false;
 	const id = props.input.props.id;
 	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
 	const description = props.description ?? ("description" in props.input.schema && typeof props.input.schema.description === "string" ? props.input.schema.description : void 0);
 	const error = form.error && form.error instanceof alepha.TypeBoxError ? form.error.value.message : void 0;
-	const icon = props.icon ?? getDefaultIcon({
+	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"
-	});
+	}) : (0, react.isValidElement)(props.icon) ? props.icon : (0, react.createElement)(props.icon, { size: ui.sizes.icon.md });
 	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;
@@ -1002,7 +1171,7 @@ const parseInput = (props, form) => {
 };
 
 //#endregion
-//#region src/components/form/ControlDate.tsx
+//#region src/core/components/form/ControlDate.tsx
 /**
 * ControlDate component for handling date, datetime, and time inputs.
 *
@@ -1060,7 +1229,7 @@ const ControlDate = (props) => {
 var ControlDate_default = ControlDate;
 
 //#endregion
-//#region src/components/form/ControlNumber.tsx
+//#region src/core/components/form/ControlNumber.tsx
 /**
 *
 */
@@ -1112,7 +1281,7 @@ const ControlNumber = (props) => {
 var ControlNumber_default = ControlNumber;
 
 //#endregion
-//#region src/utils/extractSchemaFields.ts
+//#region src/core/utils/extractSchemaFields.ts
 /**
 * Extract field information from a TypeBox schema for query building.
 * Supports nested objects and provides field metadata for autocomplete.
@@ -1150,40 +1319,6 @@ function extractSchemaFields(schema, prefix = "") {
 	return fields;
 }
 /**
-* Get suggested operators based on field type
-*/
-function getOperatorsForField(field) {
-	const allOperators = ["=", "!="];
-	if (field.enum) return [...allOperators, "in"];
-	switch (field.type) {
-		case "string":
-		case "text": return [
-			...allOperators,
-			"~",
-			"~*",
-			"null"
-		];
-		case "number":
-		case "integer": return [
-			...allOperators,
-			">",
-			">=",
-			"<",
-			"<="
-		];
-		case "boolean": return allOperators;
-		case "datetime":
-		case "date": return [
-			...allOperators,
-			">",
-			">=",
-			"<",
-			"<="
-		];
-		default: return [...allOperators, "null"];
-	}
-}
-/**
 * Get operator symbol and description
 */
 const OPERATOR_INFO = {
@@ -1217,16 +1352,6 @@ const OPERATOR_INFO = {
 		label: "less or equal",
 		example: "age<=65"
 	},
-	like: {
-		symbol: "~",
-		label: "like (case-sensitive)",
-		example: "name~John"
-	},
-	ilike: {
-		symbol: "~*",
-		label: "like (case-insensitive)",
-		example: "name~*john"
-	},
 	null: {
 		symbol: "=null",
 		label: "is null",
@@ -1245,7 +1370,7 @@ const OPERATOR_INFO = {
 };
 
 //#endregion
-//#region src/components/form/ControlQueryBuilder.tsx
+//#region src/core/components/form/ControlQueryBuilder.tsx
 /**
 * Query builder with text input and help popover.
 * Generates query strings for parseQueryString syntax.
@@ -1492,7 +1617,7 @@ function QueryHelp({ fields, onInsert }) {
 var ControlQueryBuilder_default = ControlQueryBuilder;
 
 //#endregion
-//#region src/components/form/ControlSelect.tsx
+//#region src/core/components/form/ControlSelect.tsx
 /**
 * ControlSelect component for handling Select, MultiSelect, and TagsInput.
 *
@@ -1592,7 +1717,7 @@ const ControlSelect = (props) => {
 var ControlSelect_default = ControlSelect;
 
 //#endregion
-//#region src/components/form/Control.tsx
+//#region src/core/components/form/Control.tsx
 /**
 * Generic form control that renders the appropriate input based on the schema and props.
 *
@@ -1748,13 +1873,19 @@ const Control = (_props) => {
 		leftSection: icon,
 		type: getInputType(),
 		...props.input.props,
-		...textInputProps
+		...textInputProps,
+		inputWrapperOrder: [
+			"label",
+			"input",
+			"description",
+			"error"
+		]
 	});
 };
 var Control_default = Control;
 
 //#endregion
-//#region src/components/form/TypeForm.tsx
+//#region src/core/components/form/TypeForm.tsx
 /**
 * TypeForm component that automatically renders all form inputs based on schema.
 * Uses the Control component to render individual fields and Mantine Grid for responsive layout.
@@ -1844,24 +1975,7 @@ const TypeForm = (props) => {
 var TypeForm_default = TypeForm;
 
 //#endregion
-//#region src/components/buttons/LanguageButton.tsx
-const LanguageButton = (props) => {
-	const i18n = (0, __alepha_react_i18n.useI18n)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconLanguage, {}),
-		variant: "outline",
-		menu: { items: i18n.languages.map((lang) => ({
-			label: i18n.tr(lang),
-			onClick: () => i18n.setLang(lang),
-			active: i18n.lang === lang
-		})) },
-		...props.actionProps
-	});
-};
-var LanguageButton_default = LanguageButton;
-
-//#endregion
-//#region src/components/layout/AppBar.tsx
+//#region src/core/components/layout/AppBar.tsx
 const AppBar = (props) => {
 	const { items = [] } = props;
 	const renderItem = (item, index) => {
@@ -1901,7 +2015,6 @@ const AppBar = (props) => {
 			}, index)) }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
 				flex: 1,
-				gap: "md",
 				align: "center",
 				justify: "end",
 				children: rightItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
@@ -1916,7 +2029,7 @@ const AppBar = (props) => {
 var AppBar_default = AppBar;
 
 //#endregion
-//#region src/components/layout/Sidebar.tsx
+//#region src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
 	const router = (0, __alepha_react.useRouter)();
 	const { top = [], bottom = [], onItemClick } = props;
@@ -1937,19 +2050,14 @@ const Sidebar = (props) => {
 					mb: "xs",
 					align: "center",
 					gap: "xs",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
-						c: "dimmed",
-						size: "xs",
-						variant: "transparent",
-						children: item.icon
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
+					children: [renderIcon(item.icon), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
 						size: "xs",
 						c: "dimmed",
 						tt: "uppercase",
 						fw: "bold",
 						children: item.label
 					}, key)]
-				});
+				}, key);
 			}
 		}
 		if ("element" in item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: item.element }, key);
@@ -1971,8 +2079,8 @@ const Sidebar = (props) => {
 	const menu = props.menu ?? router.concretePages.map((page) => ({
 		label: page.label ?? page.name,
 		description: page.description,
-		icon: page.icon,
-		href: page.path
+		icon: renderIcon(page.icon),
+		href: router.path(page.name)
 	}));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
 		flex: 1,
@@ -2040,8 +2148,9 @@ const SidebarItem = (props) => {
 			justify: "space-between",
 			href: props.item.href,
 			target: props.item.target,
-			variant: "subtle",
 			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
+			color: "var(--alepha-text)",
+			variant: "subtle",
 			variantActive: "default",
 			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
 			onClick: handleItemClick,
@@ -2049,11 +2158,7 @@ const SidebarItem = (props) => {
 				w: "100%",
 				align: "center",
 				gap: "sm",
-				children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.ThemeIcon, {
-					size: level === 0 ? "sm" : "xs",
-					variant: "transparent",
-					children: item.icon
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
+				children: [renderIcon(item.icon), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Flex, {
 					direction: "column",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, { children: item.label }), item.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Text, {
 						size: "xs",
@@ -2106,12 +2211,13 @@ const SidebarCollapsedItem = (props) => {
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton_default, {
-		variant: "subtle",
 		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
+		color: "var(--alepha-text)",
+		variant: "subtle",
 		variantActive: "default",
 		radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
 		onClick: handleItemClick,
-		icon: item.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSquareRounded, {}),
+		icon: renderIcon(item.icon) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSquareRounded, {}),
 		href: props.item.href,
 		target: props.item.target,
 		menu: item.children ? {
@@ -2120,7 +2226,7 @@ const SidebarCollapsedItem = (props) => {
 			items: item.children.map((child) => ({
 				label: child.label,
 				href: child.href,
-				icon: child.icon,
+				icon: renderIcon(child.icon),
 				children: child.children
 			}))
 		} : void 0,
@@ -2129,21 +2235,35 @@ const SidebarCollapsedItem = (props) => {
 };
 
 //#endregion
-//#region src/components/layout/AdminShell.tsx
+//#region src/core/components/layout/AdminShell.tsx
 const AdminShell = (props) => {
+	const router = (0, __alepha_react.useRouter)();
 	const [opened, setOpened] = (0, __alepha_react.useStore)("alepha.ui.sidebar.opened");
 	const [collapsed] = (0, __alepha_react.useStore)("alepha.ui.sidebar.collapsed", props.sidebarProps?.collapsed);
-	(0, __alepha_react.useEvents)({ "react:transition:begin": () => {
-		setOpened(false);
-	} }, []);
+	const shouldShowSidebar = () => {
+		if (props.noSidebarWhen?.paths) {
+			for (const path of props.noSidebarWhen.paths) if (router.isActive(path, { startWith: true })) return false;
+		}
+		return true;
+	};
+	const [showSidebar, setShowSidebar] = (0, react.useState)(shouldShowSidebar());
+	(0, __alepha_react.useEvents)({
+		"react:transition:end": () => {
+			setShowSidebar(shouldShowSidebar());
+		},
+		"react:transition:begin": () => {
+			setOpened(false);
+		}
+	}, []);
 	const defaultAppBarItems = [{
 		position: "left",
 		type: "burger"
 	}];
+	const hasSidebar = showSidebar && props.sidebarProps !== void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.AppShell, {
 		padding: "md",
-		header: { height: 60 },
-		navbar: props.sidebarProps !== void 0 ? {
+		header: hasSidebar || props.appBarProps || props.header ? { height: 60 } : void 0,
+		navbar: hasSidebar ? {
 			width: collapsed ? { base: 72 } : { base: 300 },
 			breakpoint: "sm",
 			collapsed: { mobile: !opened }
@@ -2159,15 +2279,17 @@ const AdminShell = (props) => {
 					...props.appBarProps
 				})
 			}),
-			props.sidebarProps !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.AppShell.Navbar, {
+			hasSidebar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.AppShell.Navbar, {
 				bg: ui.colors.surface,
 				...props.appShellNavbarProps,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {
 					collapsed,
-					...props.sidebarProps
+					...props.sidebarProps ?? {}
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.AppShell.Main, {
+				display: "flex",
+				flex: 1,
 				...props.appShellMainProps,
 				children: props.children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__alepha_react.NestedView, {})
 			}),
@@ -2182,7 +2304,7 @@ const AdminShell = (props) => {
 var AdminShell_default = AdminShell;
 
 //#endregion
-//#region src/components/table/DataTable.tsx
+//#region src/core/components/table/DataTable.tsx
 const DataTable = (props) => {
 	const [items, setItems] = (0, react.useState)(typeof props.items === "function" ? { content: [] } : props.items);
 	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
@@ -2302,7 +2424,6 @@ const DataTable = (props) => {
 				schema
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__mantine_core.Flex, {
-				flex: 1,
 				className: "overflow-auto",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__mantine_core.Table, {
 					striped: true,
@@ -2359,24 +2480,7 @@ const DataTable = (props) => {
 var DataTable_default = DataTable;
 
 //#endregion
-//#region src/hooks/useDialog.ts
-/**
-* Use this hook to access the Dialog Service for showing various dialog types.
-*
-* @example
-* ```tsx
-* const dialog = useDialog();
-* await dialog.alert({ title: "Alert", message: "This is an alert message" });
-* const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
-* const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
-* ```
-*/
-const useDialog = () => {
-	return (0, __alepha_react.useInject)(DialogService);
-};
-
-//#endregion
-//#region src/index.ts
+//#region src/core/index.ts
 /**
 * Mantine
 *
@@ -2386,7 +2490,7 @@ const AlephaUI = (0, alepha.$module)({
 	name: "alepha.ui",
 	services: [
 		DialogService,
-		require_AlephaMantineProvider.ToastService,
+		ToastService,
 		RootRouter
 	],
 	register: (alepha$1) => {
@@ -2394,54 +2498,33 @@ const AlephaUI = (0, alepha.$module)({
 		alepha$1.with(__alepha_react_head.AlephaReactHead);
 		alepha$1.with(__alepha_react_form.AlephaReactForm);
 		alepha$1.with(DialogService);
-		alepha$1.with(require_AlephaMantineProvider.ToastService);
+		alepha$1.with(ToastService);
 	}
 });
 
 //#endregion
-exports.ActionButton = ActionButton_default;
-exports.AdminShell = AdminShell_default;
-exports.AlephaMantineProvider = require_AlephaMantineProvider.AlephaMantineProvider_default;
-exports.AlephaUI = AlephaUI;
-exports.AlertDialog = AlertDialog_default;
-exports.AppBar = AppBar_default;
-exports.BurgerButton = BurgerButton_default;
-exports.ConfirmDialog = ConfirmDialog_default;
-exports.Control = Control_default;
-exports.ControlDate = ControlDate_default;
-exports.ControlQueryBuilder = ControlQueryBuilder_default;
-exports.ControlSelect = ControlSelect_default;
-exports.DarkModeButton = DarkModeButton_default;
-exports.DataTable = DataTable_default;
-exports.DialogService = DialogService;
-Object.defineProperty(exports, 'Flex', {
+Object.defineProperty(exports, 'AdminShell_default', {
+  enumerable: true,
+  get: function () {
+    return AdminShell_default;
+  }
+});
+Object.defineProperty(exports, 'AlephaMantineProvider_default', {
+  enumerable: true,
+  get: function () {
+    return AlephaMantineProvider_default;
+  }
+});
+Object.defineProperty(exports, 'AlephaUI', {
   enumerable: true,
   get: function () {
-    return __mantine_core.Flex;
+    return AlephaUI;
   }
 });
-exports.ICON_SIZES = ICON_SIZES;
-exports.JsonViewer = JsonViewer_default;
-exports.OPERATOR_INFO = OPERATOR_INFO;
-exports.Omnibar = require_AlephaMantineProvider.Omnibar_default;
-exports.OmnibarButton = OmnibarButton_default;
-exports.PromptDialog = PromptDialog_default;
-exports.RootRouter = RootRouter;
-exports.Sidebar = Sidebar;
-Object.defineProperty(exports, 'Text', {
+Object.defineProperty(exports, 'DataTable_default', {
   enumerable: true,
   get: function () {
-    return __mantine_core.Text;
+    return DataTable_default;
   }
 });
-exports.ToastService = require_AlephaMantineProvider.ToastService;
-exports.TypeForm = TypeForm_default;
-exports.capitalize = capitalize;
-exports.extractSchemaFields = extractSchemaFields;
-exports.getDefaultIcon = getDefaultIcon;
-exports.getOperatorsForField = getOperatorsForField;
-exports.prettyName = prettyName;
-exports.ui = ui;
-exports.useDialog = useDialog;
-exports.useToast = require_AlephaMantineProvider.useToast;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=core-aFtK4l9I.cjs.map