@alepha/ui 0.15.4 → 0.15.5

package/dist/core/index.js

@@ -3,7 +3,7 @@ import { AlephaReactForm, FormValidationError, useForm, useFormState } from "ale
 import { $head, AlephaReactHead } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, Container, CopyButton, Divider, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Group, Image, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme, useMantineTheme } from "@mantine/core";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, Container, CopyButton, Divider, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Group, Image, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
 import { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconColumns, IconCopy, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconPlus, IconRefresh, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
 import { Children, createElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -1045,19 +1045,24 @@ const ActionClickButton = (props) => {
 * Action for navigation with active state support.
 */
 const ActionNavigationButton = (props) => {
-	const { active: options, classNameActive, variantActive, routerGoOptions, ...buttonProps } = props;
+	const { active: options, classNameActive, variantActive, routerGoOptions, onClick: propsOnClick, ...buttonProps } = props;
 	const router = useRouter();
 	const { isPending, isActive } = useActive(options ? {
 		href: props.href,
 		...options
 	} : { href: props.href });
 	const anchorProps = router.anchor(props.href, routerGoOptions);
+	const combinedOnClick = (e) => {
+		propsOnClick?.(e);
+		anchorProps.onClick?.(e);
+	};
 	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,
+		onClick: combinedOnClick,
 		children: props.children
 	});
 	return /* @__PURE__ */ jsx(Button, {
@@ -1065,6 +1070,7 @@ const ActionNavigationButton = (props) => {
 		loading: isPending,
 		...buttonProps,
 		...anchorProps,
+		onClick: combinedOnClick,
 		variant: isActive && options !== false ? variantActive ?? "filled" : buttonProps.variant ?? "subtle",
 		children: props.children
 	});
@@ -1120,49 +1126,26 @@ var ClipboardButton_default = ClipboardButton;
 
 //#endregion
 //#region ../../src/core/components/buttons/DarkModeButton.tsx
+/**
+* SSR-safe dark mode toggle button.
+*
+* Uses CSS-based icon switching to avoid hydration mismatches.
+* Both icons are rendered, CSS hides the wrong one based on
+* `data-mantine-color-scheme` attribute.
+*/
 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");
+		setColorScheme((document.documentElement.getAttribute("data-mantine-color-scheme") ?? "light") === "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 })
-			})
-		}],
-		w: props.fullWidth ? "100%" : void 0,
-		...props.segmentedProps
-	});
 	return /* @__PURE__ */ jsx(ActionButton_default, {
 		onClick: toggleColorScheme,
 		variant: props.variant ?? "subtle",
 		size: props.size ?? "sm",
 		"aria-label": "Toggle color scheme",
 		px: "xs",
-		fullWidth: props.fullWidth ?? false,
-		icon: colorScheme === "dark" ? IconSun : colorScheme === "light" ? IconMoon : IconSun,
-		...props.actionProps
+		icon: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSun, { className: "alepha-light-hidden" }), /* @__PURE__ */ jsx(IconMoon, { className: "alepha-dark-hidden" })] }),
+		...props
 	});
 };
 var DarkModeButton_default = DarkModeButton;
@@ -1179,7 +1162,7 @@ const LanguageButton = (props) => {
 			onClick: () => i18n.setLang(lang),
 			active: i18n.lang === lang
 		})) },
-		...props.actionProps
+		...props
 	});
 };
 var LanguageButton_default = LanguageButton;
@@ -1244,7 +1227,7 @@ const ThemeButton = (props) => {
 			onClick: () => setTheme({ index }),
 			active: theme.name === it.name
 		})) },
-		...props.actionProps
+		...props
 	});
 };
 var ThemeButton_default = ThemeButton;
@@ -3111,6 +3094,10 @@ const AdminShell = (props) => {
 	const expandedWidth = Math.max(sidebar.width, collapsedWidth);
 	const isExpandedByHover = collapsed && isHovering;
 	const effectiveCollapsed = collapsed && !isHovering;
+	const handleSidebarItemClick = useCallback((item) => {
+		if (isExpandedByHover) setIsHovering(false);
+		props.sidebarProps?.onItemClick?.(item);
+	}, [isExpandedByHover, props.sidebarProps?.onItemClick]);
 	const hoverWidth = Math.max(defaultWidth, collapsedWidth);
 	const sidebarWidth = hasSidebar ? effectiveCollapsed || isExpandedByHover ? collapsedWidth : expandedWidth : 0;
 	const canResize = props.sidebarResizable && !collapsed;
@@ -3154,7 +3141,8 @@ const AdminShell = (props) => {
 				...props.appShellNavbarProps,
 				children: [/* @__PURE__ */ jsx(Sidebar, {
 					...props.sidebarProps ?? {},
-					collapsed: effectiveCollapsed
+					collapsed: effectiveCollapsed,
+					onItemClick: handleSidebarItemClick
 				}), (canResize || isExpandedByHover) && /* @__PURE__ */ jsx(Flex$1, {
 					pos: "absolute",
 					right: -6,