refine-mantine 1.7.0-dev.3 → 1.7.0-dev.4

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { ActionIconProps, AnchorProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PolymorphicComponentProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps, TextProps, ThemeIconProps } from "@mantine/core";
-import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, TitleProps, UpdatePasswordFormTypes, UseFormProps as UseFormProps$1, UseFormReturnType as UseFormReturnType$1, UseImportInputPropsType, useTranslate } from "@refinedev/core";
+import { ActionIconProps, AnchorProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PolymorphicComponentProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps, TextProps, ThemeIconProps } from "@mantine/core";
+import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, TitleProps, UpdatePasswordFormTypes, UseFormProps as UseFormProps$1, UseFormReturnType as UseFormReturnType$1, UseImportInputPropsType, useMenu, useTranslate } from "@refinedev/core";
 import { IconProps, ReactNode } from "@tabler/icons-react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import React$1, { ReactNode as ReactNode$1 } from "react";
@@ -193,6 +193,56 @@ declare const FileField: React.FC<UrlFieldProps>;
 //#region src/components/fields/PhoneField.d.ts
 declare const PhoneField: React.FC<UrlFieldProps>;
 //#endregion
+//#region src/components/layout/Layout.d.ts
+interface LayoutProps$1 {
+  children: ReactNode$1;
+  shellProps?: AppShellProps;
+  headerProps?: AppShellHeaderProps;
+  navbarProps?: AppShellNavbarProps;
+  navbarConfiguration?: Partial<AppShellNavbarConfiguration>;
+  navbarMenuProps?: AppShellSectionProps;
+  navbarFooterProps?: AppShellSectionProps;
+  mainProps?: AppShellMainProps;
+  hideNavbar?: boolean;
+  footer?: ReactNode$1;
+  footerProps?: AppShellFooterProps;
+  locales?: LayoutLocale$1[];
+  renderHeader?: (toggle: () => void) => ReactNode$1;
+  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode$1;
+  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode$1;
+}
+interface LayoutLocale$1 {
+  lang: string;
+  label: string;
+  icon?: ReactNode$1;
+}
+declare const Layout: React.FC<LayoutProps$1>;
+//#endregion
+//#region src/components/layout/LayoutMinimal.d.ts
+interface LayoutProps {
+  children: ReactNode$1;
+  shellProps?: AppShellProps;
+  headerProps?: AppShellHeaderProps;
+  navbarProps?: AppShellNavbarProps;
+  navbarConfiguration?: Partial<AppShellNavbarConfiguration>;
+  navbarMenuProps?: AppShellSectionProps;
+  navbarFooterProps?: AppShellSectionProps;
+  mainProps?: AppShellMainProps;
+  hideNavbar?: boolean;
+  footer?: ReactNode$1;
+  footerProps?: AppShellFooterProps;
+  locales?: LayoutLocale[];
+  renderHeader?: (toggle: () => void) => ReactNode$1;
+  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode$1;
+  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode$1;
+}
+interface LayoutLocale {
+  lang: string;
+  label: string;
+  icon?: ReactNode$1;
+}
+declare const LayoutMinimal: React.FC<LayoutProps>;
+//#endregion
 //#region src/components/notification/AutoSaveIndicator.d.ts
 interface AutoSaveIndicatorProps {
   status: AutoSaveIndicatorProps$1["status"];
@@ -398,4 +448,4 @@ declare const authProvider: AuthProvider;
 //#region src/providers/notificationProvider.d.ts
 declare const notificationProvider: () => NotificationProvider;
 //#endregion
-export { AutoSaveIndicator, AutoSaveIndicatorProps, BooleanField, BooleanFieldProps, Breadcrumb, BreadcrumbProps, CloneButton, CloneButtonProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DateField, DateFieldProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, Empty, ExportButton, ExportButtonProps, FileField, ForgotPasswordForm, ForgotPasswordPage, ForgotPasswordPageProps, ImportButton, ImportButtonProps, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, NotFound, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, RegistrationVerificationPage, RegistrationVerificationPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UpdatePasswordPage, UpdatePasswordPageProps, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, AutoSaveIndicatorProps, BooleanField, BooleanFieldProps, Breadcrumb, BreadcrumbProps, CloneButton, CloneButtonProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DateField, DateFieldProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, Empty, ExportButton, ExportButtonProps, FileField, ForgotPasswordForm, ForgotPasswordPage, ForgotPasswordPageProps, ImportButton, ImportButtonProps, Layout, LayoutMinimal, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, NotFound, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, RegistrationVerificationPage, RegistrationVerificationPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UpdatePasswordPage, UpdatePasswordPageProps, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };

package/dist/index.js

@@ -1,6 +1,6 @@
-import { ActionIcon, Anchor, Badge, Box, Breadcrumbs, Button, ButtonGroup, Card, Center, Collapse, Container, Divider, Group, Input, Loader, LoadingOverlay, Menu, Notification, Pagination, PinInput, Popover, RingProgress, ScrollArea, Stack, Table as Table$1, Text, TextInput, ThemeIcon, Title, Tooltip, useMantineColorScheme } from "@mantine/core";
-import { Link, flattenObjectKeys, matchResourceFromRoute, useBack, useBreadcrumb, useCloneButton, useCreateButton, useDeleteButton, useEditButton, useExportButton, useForgotPassword, useForm as useForm$1, useGo, useImportButton, useLink, useListButton, useLogin, useMutationMode, useParsed, useRefineContext, useRefineOptions, useRefreshButton, useRegister, useResourceParams, useSaveButton, useShowButton, useToPath, useTranslate, useUpdatePassword, useUserFriendlyName, useWarnAboutChange } from "@refinedev/core";
-import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconCircleCheckFilled, IconCircleXFilled, IconDeviceFloppy, IconDots, IconExclamationCircle, IconExternalLink, IconEye, IconFileDownloadFilled, IconFileExport, IconFileImport, IconFilter, IconGhost3Filled, IconHome, IconLibraryPlus, IconList, IconLockPassword, IconMailShare, IconPencil, IconPhoneOutgoing, IconRefresh, IconSelector, IconSquarePlus, IconTrash, IconX } from "@tabler/icons-react";
+import { ActionIcon, Anchor, AppShell, Avatar, Badge, Box, Breadcrumbs, Burger, Button, ButtonGroup, Card, Center, Collapse, Container, Divider, Group, Input, Loader, LoadingOverlay, Menu, NavLink, Notification, Pagination, PinInput, Popover, RingProgress, ScrollArea, Stack, Table as Table$1, Text, TextInput, ThemeIcon, Title, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+import { CanAccess, Link, flattenObjectKeys, matchResourceFromRoute, useBack, useBreadcrumb, useCloneButton, useCreateButton, useDeleteButton, useEditButton, useExportButton, useForgotPassword, useForm as useForm$1, useGetIdentity, useGo, useImportButton, useLink, useListButton, useLogin, useLogout, useMenu, useMutationMode, useNavigation, useParsed, useRefineContext, useRefineOptions, useRefreshButton, useRegister, useResourceParams, useSaveButton, useShowButton, useToPath, useTranslate, useTranslation, useUpdatePassword, useUserFriendlyName, useWarnAboutChange } from "@refinedev/core";
+import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconCircleCheckFilled, IconCircleXFilled, IconDeviceFloppy, IconDots, IconExclamationCircle, IconExternalLink, IconEye, IconFileDownloadFilled, IconFileExport, IconFileImport, IconFilter, IconGhost3Filled, IconHome, IconLanguage, IconLibraryPlus, IconList, IconLockPassword, IconLogout, IconMailShare, IconMoon, IconPencil, IconPhoneOutgoing, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { useDebouncedCallback, useDisclosure } from "@mantine/hooks";
@@ -1059,6 +1059,419 @@ const PhoneField = (props) => /* @__PURE__ */ jsx(UrlField, {
 	}
 });
 
+//#endregion
+//#region src/components/layout/Layout.tsx
+const Layout = (p) => {
+	const [opened, { toggle, close }] = useDisclosure();
+	const { title: { icon: defaultIcon, text: defaultText } = {} } = useRefineOptions();
+	const { data: identity } = useGetIdentity();
+	const menu = useMenu();
+	const { mutate: logout } = useLogout();
+	const { setColorScheme } = useMantineColorScheme();
+	const computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+	const translate = useTranslate();
+	const handleLogout = useCallback(() => {
+		logout();
+	}, [logout]);
+	return /* @__PURE__ */ jsxs(AppShell, {
+		header: { height: 60 },
+		navbar: {
+			width: 300,
+			breakpoint: "sm",
+			collapsed: {
+				mobile: !opened || p.hideNavbar,
+				desktop: p.hideNavbar
+			},
+			...p.navbarConfiguration
+		},
+		padding: "md",
+		...p.shellProps,
+		children: [
+			/* @__PURE__ */ jsx(AppShell.Header, {
+				p: "md",
+				...p.headerProps,
+				children: p.renderHeader ? p.renderHeader(toggle) : /* @__PURE__ */ jsxs(Group, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Burger, {
+						opened,
+						onClick: toggle,
+						size: "sm",
+						hiddenFrom: "sm",
+						hidden: p.hideNavbar
+					}), /* @__PURE__ */ jsx(Anchor, {
+						component: Link,
+						to: "/",
+						style: { all: "unset" },
+						children: /* @__PURE__ */ jsxs(Group, { children: [defaultIcon, /* @__PURE__ */ jsx(Text, { children: defaultText })] })
+					})] }), /* @__PURE__ */ jsxs(Group, { children: [p.locales && /* @__PURE__ */ jsx(Locales$1, { locales: p.locales }), /* @__PURE__ */ jsx(Tooltip, {
+						label: computedColorScheme === "dark" ? translate("layout.header.lightMode", "Light mode") : translate("layout.header.darkMode", "Dark mode"),
+						children: /* @__PURE__ */ jsx(ActionIcon, {
+							onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+							"aria-label": translate("layout.header.toggleColorScheme", "Toggle color scheme"),
+							variant: "default",
+							children: computedColorScheme === "light" ? /* @__PURE__ */ jsx(IconSun, {
+								stroke: 1.5,
+								size: 22
+							}) : /* @__PURE__ */ jsx(IconMoon, {
+								stroke: 1.5,
+								size: 22
+							})
+						})
+					})] })]
+				})
+			}),
+			/* @__PURE__ */ jsxs(AppShell.Navbar, {
+				...p.navbarProps,
+				children: [/* @__PURE__ */ jsx(AppShell.Section, {
+					component: ScrollArea,
+					grow: true,
+					mt: "xs",
+					...p.navbarMenuProps,
+					children: p.renderMenu ? p.renderMenu(menu) : menu.menuItems.map((item) => /* @__PURE__ */ jsx(MenuItem, {
+						item,
+						defaultOpenKeys: menu.defaultOpenKeys,
+						selectedKey: menu.selectedKey,
+						onClickLeaf: close
+					}, item.key))
+				}), /* @__PURE__ */ jsx(AppShell.Section, {
+					...p.navbarFooterProps,
+					children: p.renderIdentity ? p.renderIdentity(identity, handleLogout) : /* @__PURE__ */ jsx(NavLink, {
+						onClick: handleLogout,
+						leftSection: identity?.avatar ? /* @__PURE__ */ jsx(Avatar, { src: identity.avatar }) : void 0,
+						rightSection: /* @__PURE__ */ jsx(IconLogout, {}),
+						label: translate("layout.navbar.signOutLabel", "Sign out"),
+						variant: "filled",
+						description: identity?.email ? translate("layout.navbar.signOutDescription", { email: identity.email }, `Signed in as ${identity.email}`) : void 0,
+						active: true
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, {
+				...p.mainProps,
+				children: p.children
+			}),
+			/* @__PURE__ */ jsx(AppShell.Footer, {
+				...p.footerProps,
+				children: p.footer
+			})
+		]
+	});
+};
+const MenuItem = (p) => {
+	const { listUrl } = useNavigation();
+	const isSelected = p.item.key === p.selectedKey;
+	return /* @__PURE__ */ jsx(CanAccess, {
+		resource: p.item.name,
+		action: "list",
+		params: { resource: p.item },
+		children: /* @__PURE__ */ jsx(NavLink, {
+			label: p.item.meta?.label,
+			leftSection: p.item.meta?.icon ?? /* @__PURE__ */ jsx(IconList, { size: 20 }),
+			active: isSelected,
+			defaultOpened: p.defaultOpenKeys.includes(p.item.key ?? ""),
+			component: Link,
+			to: listUrl(p.item.name),
+			onClick: p.item.children.length > 0 ? void 0 : p.onClickLeaf,
+			children: p.item.children.length > 0 ? p.item.children.map((child) => /* @__PURE__ */ jsx(MenuItem, {
+				item: child,
+				defaultOpenKeys: p.defaultOpenKeys,
+				selectedKey: p.selectedKey,
+				onClickLeaf: p.onClickLeaf
+			}, child.key)) : null
+		}, p.item.key)
+	}, p.item.key);
+};
+const Locales$1 = (p) => {
+	const { changeLocale, getLocale } = useTranslation();
+	const locale = getLocale();
+	return /* @__PURE__ */ jsxs(Menu, {
+		shadow: "md",
+		width: 200,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconLanguage, {}) }) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: p.locales.map(({ label, lang, icon }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: icon,
+			onClick: () => changeLocale(lang),
+			rightSection: lang === locale ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : void 0,
+			children: label
+		}) })) })]
+	});
+};
+
+//#endregion
+//#region src/components/layout/LayoutMinimal.tsx
+const LayoutMinimal = (p) => {
+	const [opened, { toggle, close }] = useDisclosure();
+	const { title: { icon: defaultIcon, text: defaultText } = {} } = useRefineOptions();
+	const { data: identity } = useGetIdentity();
+	const menu = useMenu();
+	const { mutate: logout } = useLogout();
+	const { setColorScheme } = useMantineColorScheme();
+	const computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+	const translate = useTranslate();
+	const languageLabel = translate("layout.navbar.languageLabel", "Language");
+	const colorSchemeLabel = computedColorScheme === "dark" ? translate("layout.header.lightMode", "Light mode") : translate("layout.header.darkMode", "Dark mode");
+	const handleLogout = useCallback(() => {
+		logout();
+	}, [logout]);
+	return /* @__PURE__ */ jsxs(AppShell, {
+		header: { height: {
+			base: 60,
+			sm: 0
+		} },
+		navbar: {
+			width: {
+				base: 260,
+				sm: 80
+			},
+			breakpoint: "sm",
+			collapsed: {
+				mobile: !opened || p.hideNavbar,
+				desktop: p.hideNavbar
+			},
+			...p.navbarConfiguration
+		},
+		padding: "md",
+		...p.shellProps,
+		children: [
+			/* @__PURE__ */ jsx(AppShell.Header, {
+				p: "md",
+				...p.headerProps,
+				hiddenFrom: "sm",
+				children: p.renderHeader ? p.renderHeader(toggle) : /* @__PURE__ */ jsx(Group, {
+					justify: "space-between",
+					children: /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Burger, {
+						opened,
+						onClick: toggle,
+						size: "sm",
+						hidden: p.hideNavbar
+					}), /* @__PURE__ */ jsx(Anchor, {
+						component: Link,
+						to: "/",
+						style: { all: "unset" },
+						children: /* @__PURE__ */ jsxs(Group, { children: [defaultIcon, defaultText ? /* @__PURE__ */ jsx(Text, { children: defaultText }) : null] })
+					})] })
+				})
+			}),
+			/* @__PURE__ */ jsxs(AppShell.Navbar, {
+				...p.navbarProps,
+				children: [
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						visibleFrom: "sm",
+						p: "md",
+						children: /* @__PURE__ */ jsx(Stack, {
+							align: "center",
+							gap: "xs",
+							children: /* @__PURE__ */ jsx(Tooltip, {
+								label: defaultText ?? translate("layout.navbar.homeLabel", "Home"),
+								position: "right",
+								transitionProps: { duration: 0 },
+								children: /* @__PURE__ */ jsx(Anchor, {
+									component: Link,
+									to: "/",
+									style: { all: "unset" },
+									children: /* @__PURE__ */ jsx(Stack, {
+										align: "center",
+										gap: 2,
+										children: defaultIcon
+									})
+								})
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						component: ScrollArea,
+						grow: true,
+						mt: "xs",
+						...p.navbarMenuProps,
+						visibleFrom: "sm",
+						children: p.renderMenu ? p.renderMenu(menu) : /* @__PURE__ */ jsx(Stack, {
+							align: "center",
+							gap: 0,
+							children: menu.menuItems.map((item) => /* @__PURE__ */ jsx(MenuItemIcon, {
+								item,
+								selectedKey: menu.selectedKey,
+								onClick: close
+							}, item.key))
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						component: ScrollArea,
+						grow: true,
+						mt: "xs",
+						...p.navbarMenuProps,
+						hiddenFrom: "sm",
+						children: p.renderMenu ? p.renderMenu(menu) : /* @__PURE__ */ jsx(Stack, {
+							gap: "xs",
+							children: menu.menuItems.map((item) => /* @__PURE__ */ jsx(MenuItemFull, {
+								item,
+								selectedKey: menu.selectedKey,
+								onClick: close
+							}, item.key))
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						...p.navbarFooterProps,
+						visibleFrom: "sm",
+						children: p.renderIdentity ? p.renderIdentity(identity, handleLogout) : /* @__PURE__ */ jsxs(Stack, {
+							align: "center",
+							gap: "xs",
+							children: [
+								p.locales && /* @__PURE__ */ jsx(Locales, {
+									locales: p.locales,
+									variant: "icon",
+									label: languageLabel
+								}),
+								/* @__PURE__ */ jsx(Tooltip, {
+									label: colorSchemeLabel,
+									position: "right",
+									transitionProps: { duration: 0 },
+									children: /* @__PURE__ */ jsx(ActionIcon, {
+										onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+										"aria-label": translate("layout.header.toggleColorScheme", "Toggle color scheme"),
+										variant: "subtle",
+										size: "xl",
+										children: computedColorScheme === "light" ? /* @__PURE__ */ jsx(IconSun, {
+											stroke: 1.5,
+											size: 22
+										}) : /* @__PURE__ */ jsx(IconMoon, {
+											stroke: 1.5,
+											size: 22
+										})
+									})
+								}),
+								/* @__PURE__ */ jsx(Tooltip, {
+									label: translate("layout.navbar.signOutLabel", "Sign out"),
+									position: "right",
+									transitionProps: { duration: 0 },
+									children: /* @__PURE__ */ jsx(ActionIcon, {
+										onClick: handleLogout,
+										"aria-label": translate("layout.navbar.signOutLabel", "Sign out"),
+										variant: "subtle",
+										size: "xl",
+										children: /* @__PURE__ */ jsx(IconLogout, { size: 20 })
+									})
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						...p.navbarFooterProps,
+						hiddenFrom: "sm",
+						children: /* @__PURE__ */ jsxs(Stack, {
+							gap: "xs",
+							children: [
+								p.locales && /* @__PURE__ */ jsx(Locales, {
+									locales: p.locales,
+									variant: "full",
+									label: languageLabel
+								}),
+								/* @__PURE__ */ jsx(NavLink, {
+									onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+									leftSection: computedColorScheme === "light" ? /* @__PURE__ */ jsx(IconSun, {
+										stroke: 1.5,
+										size: 18
+									}) : /* @__PURE__ */ jsx(IconMoon, {
+										stroke: 1.5,
+										size: 18
+									}),
+									label: colorSchemeLabel,
+									variant: "subtle"
+								}),
+								p.renderIdentity ? p.renderIdentity(identity, handleLogout) : /* @__PURE__ */ jsx(NavLink, {
+									onClick: handleLogout,
+									leftSection: identity?.avatar ? /* @__PURE__ */ jsx(Avatar, { src: identity.avatar }) : /* @__PURE__ */ jsx(IconLogout, { size: 18 }),
+									label: translate("layout.navbar.signOutLabel", "Sign out"),
+									description: identity?.email ? translate("layout.navbar.signOutDescription", { email: identity.email }, `Signed in as ${identity.email}`) : void 0,
+									variant: "filled",
+									active: true
+								})
+							]
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, {
+				...p.mainProps,
+				children: p.children
+			}),
+			/* @__PURE__ */ jsx(AppShell.Footer, {
+				...p.footerProps,
+				children: p.footer
+			})
+		]
+	});
+};
+const MenuItemIcon = (p) => {
+	const { listUrl } = useNavigation();
+	const isSelected = p.item.key === p.selectedKey;
+	const label = p.item.meta?.label ?? p.item.label ?? p.item.name;
+	return /* @__PURE__ */ jsx(CanAccess, {
+		resource: p.item.name,
+		action: "list",
+		params: { resource: p.item },
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			label,
+			position: "right",
+			transitionProps: { duration: 0 },
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				component: Link,
+				to: listUrl(p.item.name),
+				variant: isSelected ? "filled" : "subtle",
+				size: "xl",
+				mb: "xs",
+				bd: 0,
+				onClick: p.onClick,
+				children: p.item.meta?.icon ?? /* @__PURE__ */ jsx(IconList, { size: 20 })
+			}, p.item.key)
+		})
+	}, p.item.key);
+};
+const MenuItemFull = (p) => {
+	const { listUrl } = useNavigation();
+	const isSelected = p.item.key === p.selectedKey;
+	const label = p.item.meta?.label ?? p.item.label ?? p.item.name;
+	return /* @__PURE__ */ jsx(CanAccess, {
+		resource: p.item.name,
+		action: "list",
+		params: { resource: p.item },
+		children: /* @__PURE__ */ jsx(NavLink, {
+			label,
+			leftSection: p.item.meta?.icon ?? /* @__PURE__ */ jsx(IconList, { size: 18 }),
+			active: isSelected,
+			component: Link,
+			to: listUrl(p.item.name),
+			onClick: p.onClick
+		}, p.item.key)
+	}, p.item.key);
+};
+const Locales = (p) => {
+	const { changeLocale, getLocale } = useTranslation();
+	const locale = getLocale();
+	return /* @__PURE__ */ jsxs(Menu, {
+		shadow: "md",
+		width: 200,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: p.variant === "icon" ? /* @__PURE__ */ jsx(Tooltip, {
+			label: p.label,
+			position: "right",
+			transitionProps: { duration: 0 },
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				"aria-label": p.label,
+				variant: "subtle",
+				size: "xl",
+				children: /* @__PURE__ */ jsx(IconLanguage, {})
+			})
+		}) : /* @__PURE__ */ jsx(NavLink, {
+			label: p.label,
+			leftSection: /* @__PURE__ */ jsx(IconLanguage, { size: 18 }),
+			component: "button"
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: p.locales.map(({ label, lang, icon }) => /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: icon,
+			onClick: () => changeLocale(lang),
+			rightSection: lang === locale ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : void 0,
+			children: label
+		}, lang)) })]
+	});
+};
+
 //#endregion
 //#region src/components/notification/Message.tsx
 const Message = ({ message, description, undoLabel, undoableTime = 5, undoableTimeout = 0, notificationProps, actioniconProps, buttonProps, onUndo }) => /* @__PURE__ */ jsx(Notification, {
@@ -2003,4 +2416,4 @@ const notificationProvider = () => {
 };
 
 //#endregion
-export { AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, Empty, ExportButton, FileField, ForgotPasswordPage, ImportButton, List, ListButton, LoginPage, Message, NotFound, PhoneField, RefreshButton, RegisterPage, RegistrationVerificationPage, SaveButton, Show, ShowButton, Table, UpdatePasswordPage, UrlField, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, Empty, ExportButton, FileField, ForgotPasswordPage, ImportButton, Layout, LayoutMinimal, List, ListButton, LoginPage, Message, NotFound, PhoneField, RefreshButton, RegisterPage, RegistrationVerificationPage, SaveButton, Show, ShowButton, Table, UpdatePasswordPage, UrlField, notificationProvider, useForm, useOtp };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "refine-mantine",
-  "version": "1.7.0-dev.3",
+  "version": "1.7.0-dev.4",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/layout/LayoutMinimal.story.tsx

@@ -1,6 +1,6 @@
 import { Image } from "@mantine/core";
 import type { Meta } from "@storybook/react";
-import { Layout as LayoutMinimal } from "./LayoutMinimal";
+import { LayoutMinimal } from "./LayoutMinimal";
 
 export default {
   title: "Components/LayoutMinimal",

package/src/components/layout/LayoutMinimal.tsx

@@ -62,7 +62,7 @@ export interface LayoutLocale {
   icon?: ReactNode;
 }
 
-export const Layout: React.FC<LayoutProps> = (p) => {
+export const LayoutMinimal: React.FC<LayoutProps> = (p) => {
   const [opened, { toggle, close }] = useDisclosure();
   const { title: { icon: defaultIcon, text: defaultText } = {} } =
     useRefineOptions();