@alepha/ui 0.12.0 → 0.13.0

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

@@ -1,30 +1,169 @@
-import { i as ToastService, n as Omnibar_default, r as useToast, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-D8cHYAge.js";
-import { AlephaReactForm, useForm, useFormState } from "@alepha/react/form";
+import { AlephaReactForm, FormValidationError, useForm, useFormState } from "@alepha/react/form";
 import { AlephaReactHead } from "@alepha/react/head";
 import { AlephaReactI18n, useI18n } from "@alepha/react/i18n";
 import { $module, Alepha, TypeBoxError, t } from "alepha";
 import { $page, NestedView, useAction, useActive, useEvents, useInject, useRouter, useStore } from "@alepha/react";
-import { ActionIcon, AppShell, Autocomplete, Badge, Box, Burger, Button, Collapse, ColorInput, CopyButton, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
-import { modals } from "@mantine/modals";
-import { IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconCopy, IconFile, IconFilter, IconHash, IconInfoTriangle, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconX } from "@tabler/icons-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Collapse, ColorInput, ColorSchemeScript, CopyButton, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+import { ModalsProvider, modals } from "@mantine/modals";
+import { Notifications, notifications } from "@mantine/notifications";
+import { NavigationProgress, nprogress } from "@mantine/nprogress";
+import { IconAlertTriangle, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconCopy, IconFile, IconFilter, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { spotlight } from "@mantine/spotlight";
+import { Spotlight, spotlight } from "@mantine/spotlight";
+import { Children, createElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
 import { useDebouncedCallback } from "@mantine/hooks";
 import { DateTimeProvider } from "alepha/datetime";
 
-//#region src/RootRouter.ts
+//#region src/core/services/ToastService.tsx
+var ToastService = class {
+	raw = notifications;
+	options = { default: {
+		radius: "md",
+		withBorder: true,
+		withCloseButton: true,
+		autoClose: 5e3,
+		position: "top-center"
+	} };
+	show(options) {
+		notifications.show({
+			...this.options.default,
+			...options
+		});
+	}
+	info(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "blue",
+			icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: 20 }),
+			title: "Info",
+			message: "Information notification",
+			...options
+		});
+	}
+	success(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "green",
+			icon: /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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 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 = useRouter();
+	return /* @__PURE__ */ jsx(Spotlight, {
+		actions: 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__ */ jsx(IconSearch, { size: 20 }),
+			placeholder: searchPlaceholder
+		},
+		nothingFound
+	});
+};
+var Omnibar_default = Omnibar;
+
+//#endregion
+//#region src/core/components/layout/AlephaMantineProvider.tsx
+const AlephaMantineProvider = (props) => {
+	const toast = useToast();
+	useEvents({
+		"react:transition:begin": () => {
+			nprogress.start();
+		},
+		"react:transition:end": () => {
+			nprogress.complete();
+		},
+		"react:action:error": ({ error }) => {
+			if (error instanceof FormValidationError) return;
+			toast.danger({
+				title: error.name || "Error",
+				message: error.message ?? "An error occurred while processing your action."
+			});
+		}
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
+		defaultColorScheme: props.mantine?.defaultColorScheme,
+		...props.colorSchemeScript
+	}), /* @__PURE__ */ jsxs(MantineProvider, {
+		...props.mantine,
+		theme: { ...props.mantine?.theme },
+		children: [
+			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
+			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
+			/* @__PURE__ */ jsxs(ModalsProvider, {
+				...props.modals,
+				children: [/* @__PURE__ */ jsx(Omnibar_default, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
+			})
+		]
+	})] });
+};
+var AlephaMantineProvider_default = AlephaMantineProvider;
+
+//#endregion
+//#region src/core/RootRouter.ts
 var RootRouter = class {
 	root = $page({
 		path: "/",
-		lazy: () => import("./AlephaMantineProvider-twBqV4IO.js")
+		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__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
 	mb: "md",
 	children: options.message
@@ -326,7 +465,7 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { c
 var AlertDialog_default = AlertDialog;
 
 //#endregion
-//#region src/components/dialogs/ConfirmDialog.tsx
+//#region src/core/components/dialogs/ConfirmDialog.tsx
 const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
 	mb: "md",
 	children: options.message
@@ -345,7 +484,7 @@ const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment,
 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] = useState(options?.defaultValue || "");
 	const inputRef = 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 = 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__ */ jsx(ThemeIcon, {
+		const icon$1 = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ jsx(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 = 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__ */ jsx(Anchor, {
+		component: "a",
+		...anchorProps,
+		...props.anchorProps,
+		children: props.children
+	});
 	return /* @__PURE__ */ jsx(Button, {
 		component: "a",
 		loading: isPending,
@@ -791,9 +945,19 @@ const ActionHrefButton = (props) => {
 		children: props.children
 	});
 };
+function isComponentType(param) {
+	if (isValidElement(param)) return false;
+	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
+}
+const renderIcon = (icon) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	if (isComponentType(icon)) return /* @__PURE__ */ 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] = useStore("alepha.ui.sidebar.opened");
 	return /* @__PURE__ */ jsx(Burger, {
@@ -807,7 +971,29 @@ const BurgerButton = (props) => {
 var BurgerButton_default = BurgerButton;
 
 //#endregion
-//#region src/components/buttons/DarkModeButton.tsx
+//#region src/core/components/buttons/ClipboardButton.tsx
+const ClipboardButton = (props) => {
+	const { value, timeout = 2e3, copyLabel = "Copy", copiedLabel = "Copied", children, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(CopyButton, {
+		value,
+		timeout,
+		children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, {
+			label: copied ? copiedLabel : copyLabel,
+			openDelay: 500,
+			children: /* @__PURE__ */ jsx(ActionButton_default, {
+				color: copied ? "teal" : void 0,
+				onClick: copy,
+				icon: copied ? IconCheck : IconCopy,
+				...buttonProps,
+				children
+			})
+		})
+	});
+};
+var ClipboardButton_default = ClipboardButton;
+
+//#endregion
+//#region src/core/components/buttons/DarkModeButton.tsx
 const DarkModeButton = (props) => {
 	const { setColorScheme } = useMantineColorScheme();
 	const computedColorScheme = useComputedColorScheme("light");
@@ -844,25 +1030,40 @@ const DarkModeButton = (props) => {
 	});
 	return /* @__PURE__ */ 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__ */ jsx(IconSun, { size: 20 }) : colorScheme === "light" ? /* @__PURE__ */ jsx(IconMoon, { size: 20 }) : /* @__PURE__ */ jsx(Flex$1, {
-			h: 20,
-			w: 20
-		}),
+		icon: colorScheme === "dark" ? IconSun : colorScheme === "light" ? IconMoon : 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 = useI18n();
+	return /* @__PURE__ */ jsx(ActionButton_default, {
+		variant: "default",
+		icon: 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__ */ jsx(ActionButton_default, {
-		variant: "outline",
+		variant: "default",
 		miw: 256,
 		onClick: spotlight.open,
 		justify: "space-between",
@@ -889,23 +1090,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__ */ jsx(IconMail, { size: iconSize });
 		case "url":
@@ -941,7 +1132,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 +1155,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 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"
-	});
+	}) : isValidElement(props.icon) ? props.icon : 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 +1193,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 +1251,7 @@ const ControlDate = (props) => {
 var ControlDate_default = ControlDate;
 
 //#endregion
-//#region src/components/form/ControlNumber.tsx
+//#region src/core/components/form/ControlNumber.tsx
 /**
 *
 */
@@ -1112,7 +1303,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.
@@ -1157,12 +1348,7 @@ function getOperatorsForField(field) {
 	if (field.enum) return [...allOperators, "in"];
 	switch (field.type) {
 		case "string":
-		case "text": return [
-			...allOperators,
-			"~",
-			"~*",
-			"null"
-		];
+		case "text": return [...allOperators, "null"];
 		case "number":
 		case "integer": return [
 			...allOperators,
@@ -1217,16 +1403,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 +1421,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 +1668,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 +1768,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 +1924,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 +2026,7 @@ const TypeForm = (props) => {
 var TypeForm_default = TypeForm;
 
 //#endregion
-//#region src/components/buttons/LanguageButton.tsx
-const LanguageButton = (props) => {
-	const i18n = useI18n();
-	return /* @__PURE__ */ jsx(ActionButton_default, {
-		icon: /* @__PURE__ */ jsx(IconLanguage, {}),
-		variant: "outline",
-		menu: { items: i18n.languages.map((lang) => ({
-			label: i18n.tr(lang),
-			onClick: () => i18n.setLang(lang),
-			active: i18n.lang === lang
-		})) },
-		...props.actionProps
-	});
-};
-var LanguageButton_default = LanguageButton;
-
-//#endregion
-//#region src/components/layout/AppBar.tsx
+//#region src/core/components/layout/AppBar.tsx
 const AppBar = (props) => {
 	const { items = [] } = props;
 	const renderItem = (item, index) => {
@@ -1901,7 +2066,6 @@ const AppBar = (props) => {
 			}, index)) }),
 			/* @__PURE__ */ jsx(Flex$1, {
 				flex: 1,
-				gap: "md",
 				align: "center",
 				justify: "end",
 				children: rightItems.map((item, index) => /* @__PURE__ */ jsx(Flex$1, {
@@ -1916,7 +2080,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 = useRouter();
 	const { top = [], bottom = [], onItemClick } = props;
@@ -1937,19 +2101,14 @@ const Sidebar = (props) => {
 					mb: "xs",
 					align: "center",
 					gap: "xs",
-					children: [/* @__PURE__ */ jsx(ThemeIcon, {
-						c: "dimmed",
-						size: "xs",
-						variant: "transparent",
-						children: item.icon
-					}), /* @__PURE__ */ jsx(Text$1, {
+					children: [renderIcon(item.icon), /* @__PURE__ */ jsx(Text$1, {
 						size: "xs",
 						c: "dimmed",
 						tt: "uppercase",
 						fw: "bold",
 						children: item.label
 					}, key)]
-				});
+				}, key);
 			}
 		}
 		if ("element" in item) return /* @__PURE__ */ jsx(Flex$1, { children: item.element }, key);
@@ -1971,8 +2130,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__ */ jsxs(Flex$1, {
 		flex: 1,
@@ -2040,8 +2199,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 +2209,7 @@ const SidebarItem = (props) => {
 				w: "100%",
 				align: "center",
 				gap: "sm",
-				children: [item.icon && /* @__PURE__ */ jsx(ThemeIcon, {
-					size: level === 0 ? "sm" : "xs",
-					variant: "transparent",
-					children: item.icon
-				}), /* @__PURE__ */ jsxs(Flex$1, {
+				children: [renderIcon(item.icon), /* @__PURE__ */ jsxs(Flex$1, {
 					direction: "column",
 					children: [/* @__PURE__ */ jsx(Flex$1, { children: item.label }), item.description && /* @__PURE__ */ jsx(Text$1, {
 						size: "xs",
@@ -2106,12 +2262,13 @@ const SidebarCollapsedItem = (props) => {
 		}
 	};
 	return /* @__PURE__ */ 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__ */ jsx(IconSquareRounded, {}),
+		icon: renderIcon(item.icon) ?? /* @__PURE__ */ jsx(IconSquareRounded, {}),
 		href: props.item.href,
 		target: props.item.target,
 		menu: item.children ? {
@@ -2120,7 +2277,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 +2286,35 @@ const SidebarCollapsedItem = (props) => {
 };
 
 //#endregion
-//#region src/components/layout/AdminShell.tsx
+//#region src/core/components/layout/AdminShell.tsx
 const AdminShell = (props) => {
+	const router = useRouter();
 	const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
 	const [collapsed] = useStore("alepha.ui.sidebar.collapsed", props.sidebarProps?.collapsed);
-	useEvents({ "react:transition:begin": () => {
-		setOpened(false);
-	} }, []);
+	const 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] = useState(shouldShowSidebar());
+	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__ */ jsxs(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 +2330,17 @@ const AdminShell = (props) => {
 					...props.appBarProps
 				})
 			}),
-			props.sidebarProps !== void 0 && /* @__PURE__ */ jsx(AppShell.Navbar, {
+			hasSidebar && /* @__PURE__ */ jsx(AppShell.Navbar, {
 				bg: ui.colors.surface,
 				...props.appShellNavbarProps,
 				children: /* @__PURE__ */ jsx(Sidebar, {
 					collapsed,
-					...props.sidebarProps
+					...props.sidebarProps ?? {}
 				})
 			}),
 			/* @__PURE__ */ jsx(AppShell.Main, {
+				display: "flex",
+				flex: 1,
 				...props.appShellMainProps,
 				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
 			}),
@@ -2182,7 +2355,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] = useState(typeof props.items === "function" ? { content: [] } : props.items);
 	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
@@ -2302,7 +2475,6 @@ const DataTable = (props) => {
 				schema
 			}) : null,
 			/* @__PURE__ */ jsx(Flex$1, {
-				flex: 1,
 				className: "overflow-auto",
 				children: /* @__PURE__ */ jsxs(Table, {
 					striped: true,
@@ -2359,7 +2531,7 @@ const DataTable = (props) => {
 var DataTable_default = DataTable;
 
 //#endregion
-//#region src/hooks/useDialog.ts
+//#region src/core/hooks/useDialog.ts
 /**
 * Use this hook to access the Dialog Service for showing various dialog types.
 *
@@ -2376,7 +2548,7 @@ const useDialog = () => {
 };
 
 //#endregion
-//#region src/index.ts
+//#region src/core/index.ts
 /**
 * Mantine
 *
@@ -2399,5 +2571,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, ICON_SIZES, JsonViewer_default as JsonViewer, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, prettyName, ui, useDialog, useToast };
+export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ClipboardButton_default as ClipboardButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, JsonViewer_default as JsonViewer, LanguageButton_default as LanguageButton, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, prettyName, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map