refine-mantine 1.3.2 → 1.3.4

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 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 } from "@mantine/core";
-import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, UseFormProps as UseFormProps$1, UseFormReturnType as UseFormReturnType$1, useMenu, useTranslate } from "@refinedev/core";
+import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, 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";
-import { RefineBreadcrumbProps, RefineCreateButtonProps, RefineCrudCreateProps, RefineCrudEditProps, RefineCrudListProps, RefineCrudShowProps, RefineDeleteButtonProps, RefineEditButtonProps, RefineListButtonProps, RefineRefreshButtonProps, RefineSaveButtonProps, RefineShowButtonProps } from "@refinedev/ui-types";
+import { RefineBreadcrumbProps, RefineCloneButtonProps, RefineCreateButtonProps, RefineCrudCreateProps, RefineCrudEditProps, RefineCrudListProps, RefineCrudShowProps, RefineDeleteButtonProps, RefineEditButtonProps, RefineExportButtonProps, RefineImportButtonProps, RefineListButtonProps, RefineRefreshButtonProps, RefineSaveButtonProps, RefineShowButtonProps } from "@refinedev/ui-types";
 import { ConfigType } from "dayjs";
 import { FormValidateInput, UseFormInput, UseFormReturnType as UseFormReturnType$2 } from "@mantine/form";
 import { TooltipBaseProps } from "@mantine/core/lib/components/Tooltip/Tooltip.types";
@@ -14,6 +14,17 @@ import { UseTableReturnType } from "@refinedev/react-table";
 type BreadcrumbProps = RefineBreadcrumbProps<BreadcrumbsProps>;
 declare const Breadcrumb: React$1.FC<BreadcrumbProps>;
 //#endregion
+//#region src/components/buttons/CloneButton.d.ts
+type CloneButtonProps = RefineCloneButtonProps<{
+  iconProps?: IconProps;
+  actionIconProps?: ActionIconProps;
+  buttonProps?: ButtonProps;
+  disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
+}>;
+declare const CloneButton: React.FC<CloneButtonProps>;
+//#endregion
 //#region src/components/buttons/CreateButton.d.ts
 type CreateButtonProps = RefineCreateButtonProps<{
   iconProps?: IconProps;
@@ -48,6 +59,25 @@ type EditButtonProps = RefineEditButtonProps<{
 }>;
 declare const EditButton: React$1.FC<EditButtonProps>;
 //#endregion
+//#region src/components/buttons/ExportButton.d.ts
+type ExportButtonProps = RefineExportButtonProps<{
+  iconProps?: IconProps;
+  actionIconProps?: ActionIconProps;
+  buttonProps?: ButtonProps;
+  disabled?: boolean;
+}>;
+declare const ExportButton: React.FC<ExportButtonProps>;
+//#endregion
+//#region src/components/buttons/ImportButton.d.ts
+type ImportButtonProps = RefineImportButtonProps<{
+  inputProps: UseImportInputPropsType & React.InputHTMLAttributes<HTMLInputElement>;
+  iconProps?: IconProps;
+  actionIconProps?: ActionIconProps;
+  buttonProps?: ButtonProps;
+  disabled?: boolean;
+}>;
+declare const ImportButton: React.FC<ImportButtonProps>;
+//#endregion
 //#region src/components/buttons/ListButton.d.ts
 type ListButtonProps = RefineListButtonProps<{
   iconProps?: IconProps;
@@ -88,6 +118,9 @@ type ShowButtonProps = RefineShowButtonProps<{
 }>;
 declare const ShowButton: React$1.FC<ShowButtonProps>;
 //#endregion
+//#region src/components/ColorSchemeToggle.d.ts
+declare function ColorSchemeToggle(): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/crud/Create.d.ts
 type CreateProps = RefineCrudCreateProps<SaveButtonProps, GroupProps, GroupProps, CardProps, GroupProps, BoxProps>;
 declare const Create: React$1.FC<CreateProps>;
@@ -171,6 +204,14 @@ interface LayoutLocale {
 }
 declare const Layout: React.FC<LayoutProps>;
 //#endregion
+//#region src/components/notification/AutoSaveIndicator.d.ts
+interface AutoSaveIndicatorProps {
+  status: AutoSaveIndicatorProps$1["status"];
+  badgeProps?: BadgeProps;
+  iconSize?: number;
+}
+declare const AutoSaveIndicator: React$1.FC<AutoSaveIndicatorProps>;
+//#endregion
 //#region src/components/notification/Message.d.ts
 interface MessageProps {
   undoableTimeout?: number;
@@ -204,17 +245,6 @@ declare const Table: <TData extends BaseRecord = BaseRecord, TError extends Http
   tableProps?: TableProps;
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/notification/AutoSaveIndicator.d.ts
-interface AutoSaveIndicatorProps {
-  status: AutoSaveIndicatorProps$1["status"];
-  badgeProps?: BadgeProps;
-  iconSize?: number;
-}
-declare const AutoSaveIndicator: React$1.FC<AutoSaveIndicatorProps>;
-//#endregion
-//#region src/components/ColorSchemeToggle.d.ts
-declare function ColorSchemeToggle(): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/hooks/useForm.d.ts
 type FormVariableType<TVariables, TTransformed> = ReturnType<NonNullable<UseFormInput<TVariables, (values: TVariables) => TTransformed>["transformValues"]>>;
 type UseFormReturnType<TQueryFnData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables = Record<string, unknown>, TTransformed = TVariables, TData extends BaseRecord = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError> = UseFormReturnType$2<TVariables, (values: TVariables) => TTransformed> & {
@@ -251,6 +281,24 @@ declare const useOtp: () => {
   resolve: (otp: string) => void;
 };
 //#endregion
+//#region src/pages/auth/ForgotPasswordPage.d.ts
+interface ForgotPasswordPageProps {
+  loginLink?: string;
+  validate?: FormValidateInput<ForgotPasswordForm>;
+  wrapperProps?: StackProps;
+  scrollAreaProps?: ScrollAreaProps;
+  emailFieldProps?: TextInputProps;
+  cardProps?: CardProps;
+  loadingOverlayProps?: LoadingOverlayProps;
+  submitButtonProps?: ButtonProps;
+  icon?: ReactNode$1;
+  title?: ReactNode$1;
+}
+interface ForgotPasswordForm {
+  email: string;
+}
+declare const ForgotPasswordPage: React.FC<ForgotPasswordPageProps>;
+//#endregion
 //#region src/pages/auth/LoginPage.d.ts
 type TranslateFn = ReturnType<typeof useTranslate>;
 interface LoginArgs {
@@ -320,10 +368,26 @@ interface RegisterForm {
 }
 declare const RegisterPage: React.FC<RegisterPageProps>;
 //#endregion
+//#region src/pages/auth/UpdatePasswordPage.d.ts
+interface UpdatePasswordPageProps {
+  mutationVariables?: UpdatePasswordFormTypes;
+  validate?: FormValidateInput<UpdatePasswordFormTypes>;
+  withToken?: boolean;
+  wrapperProps?: StackProps;
+  passwordFieldProps?: TextInputProps;
+  confirmPasswordFieldProps?: TextInputProps;
+  cardProps?: CardProps;
+  loadingOverlayProps?: LoadingOverlayProps;
+  submitButtonProps?: ButtonProps;
+  icon?: ReactNode$1;
+  title?: ReactNode$1;
+}
+declare const UpdatePasswordPage: React.FC<UpdatePasswordPageProps>;
+//#endregion
 //#region src/providers/authProvider.d.ts
 declare const authProvider: AuthProvider;
 //#endregion
 //#region src/providers/notificationProvider.d.ts
 declare const notificationProvider: () => NotificationProvider;
 //#endregion
-export { AutoSaveIndicator, AutoSaveIndicatorProps, BooleanField, BooleanFieldProps, Breadcrumb, BreadcrumbProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DateField, DateFieldProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, FileField, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, 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, ExportButton, ExportButtonProps, FileField, ForgotPasswordForm, ForgotPasswordPage, ForgotPasswordPageProps, ImportButton, ImportButtonProps, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UpdatePasswordPage, UpdatePasswordPageProps, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };

package/dist/index.js

@@ -1,8 +1,8 @@
 import { ActionIcon, Anchor, AppShell, Avatar, Badge, Box, Breadcrumbs, Burger, Button, Card, Center, Collapse, Divider, Group, Input, Loader, LoadingOverlay, Menu, NavLink, Notification, Pagination, PinInput, Popover, RingProgress, ScrollArea, Stack, Table as Table$1, Text, TextInput, Title, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
-import { CanAccess, Link, flattenObjectKeys, matchResourceFromRoute, useBack, useBreadcrumb, useCreateButton, useDeleteButton, useEditButton, useForm as useForm$1, useGetIdentity, useGo, useLink, useListButton, useLogin, useLogout, useMenu, useMutationMode, useNavigation, useRefineContext, useRefineOptions, useRefreshButton, useRegister, useResourceParams, useSaveButton, useShowButton, useToPath, useTranslate, useTranslation, useUserFriendlyName, useWarnAboutChange } from "@refinedev/core";
-import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconCircleCheckFilled, IconCircleXFilled, IconDeviceFloppy, IconDots, IconExclamationCircle, IconExternalLink, IconEye, IconFileDownloadFilled, IconFilter, IconHome, IconLanguage, IconList, IconLockPassword, IconLogout, IconMailShare, IconMoon, IconPencil, IconPhoneOutgoing, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
+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, 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, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { useDebouncedCallback, useDisclosure } from "@mantine/hooks";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
 import dayjs from "dayjs";
@@ -52,6 +52,66 @@ const Breadcrumb = ({ breadcrumbProps, showHome = true, hideIcons = false, meta,
 	});
 };
 
+//#endregion
+//#region src/components/buttons/CloneButton.tsx
+const CloneButton = ({ resource, recordItemId, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onClick }) => {
+	const { to, label, title, hidden, disabled: disabledFromHook, LinkComponent } = useCloneButton({
+		resource,
+		id: recordItemId,
+		accessControl,
+		meta
+	});
+	const disabled = disabledFromProps || disabledFromHook;
+	const actionProps = {
+		component: LinkComponent,
+		onClick: useCallback((e) => {
+			if (disabled) {
+				e.preventDefault();
+				return;
+			}
+			if (onClick) {
+				e.preventDefault();
+				onClick(e);
+			}
+		}, [disabled, onClick]),
+		to
+	};
+	if (hidden) return null;
+	return hideText ? /* @__PURE__ */ jsx(ActionIcon, {
+		variant: "default",
+		disabled,
+		title,
+		"aria-label": label,
+		...actionProps,
+		...actionIconProps,
+		children: /* @__PURE__ */ jsx(IconLibraryPlus, {
+			size: 18,
+			...iconProps
+		})
+	}) : menuItem ? /* @__PURE__ */ jsx(Menu.Item, {
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconLibraryPlus, {
+			size: 14,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...menuItemProps,
+		children: children ?? label
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "default",
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconLibraryPlus, {
+			size: 18,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...buttonProps,
+		children: children ?? label
+	});
+};
+
 //#endregion
 //#region src/components/buttons/CreateButton.tsx
 const CreateButton = ({ resource, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onClick }) => {
@@ -138,7 +198,7 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 		opened,
 		onChange: handlers.toggle,
 		withArrow: true,
-		withinPortal: false,
+		withinPortal: true,
 		withOverlay: true,
 		disabled,
 		trapFocus: true,
@@ -259,6 +319,73 @@ const EditButton = ({ resource, recordItemId, hideText = false, accessControl, m
 	});
 };
 
+//#endregion
+//#region src/components/buttons/ExportButton.tsx
+const ExportButton = ({ hideText = false, children, loading = false, iconProps, actionIconProps, buttonProps, disabled, onClick }) => {
+	const { label } = useExportButton();
+	return hideText ? /* @__PURE__ */ jsx(ActionIcon, {
+		variant: "default",
+		loading,
+		disabled,
+		"aria-label": label,
+		onClick,
+		...actionIconProps,
+		children: /* @__PURE__ */ jsx(IconFileExport, {
+			size: 18,
+			...iconProps
+		})
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "default",
+		loading,
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconFileExport, {
+			size: 18,
+			...iconProps
+		}),
+		onClick,
+		...buttonProps,
+		children: children ?? label
+	});
+};
+
+//#endregion
+//#region src/components/buttons/ImportButton.tsx
+const ImportButton = ({ hideText = false, loading = false, children, inputProps, iconProps, actionIconProps, buttonProps, disabled }) => {
+	const { label } = useImportButton();
+	const inputId = useId();
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: inputId,
+		children: [/* @__PURE__ */ jsx("input", {
+			id: inputId,
+			multiple: true,
+			hidden: true,
+			...inputProps
+		}), hideText ? /* @__PURE__ */ jsx(ActionIcon, {
+			variant: "default",
+			"aria-label": label,
+			component: "span",
+			loading,
+			disabled,
+			...actionIconProps,
+			children: /* @__PURE__ */ jsx(IconFileImport, {
+				size: 18,
+				...iconProps
+			})
+		}) : /* @__PURE__ */ jsx(Button, {
+			variant: "default",
+			component: "span",
+			leftSection: /* @__PURE__ */ jsx(IconFileImport, {
+				size: 18,
+				...iconProps
+			}),
+			loading,
+			disabled,
+			...buttonProps,
+			children: children ?? label
+		})]
+	});
+};
+
 //#endregion
 //#region src/components/buttons/ListButton.tsx
 const ListButton = ({ resource, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onClick }) => {
@@ -436,6 +563,30 @@ const ShowButton = ({ resource, recordItemId, hideText = false, accessControl, m
 	});
 };
 
+//#endregion
+//#region src/components/ColorSchemeToggle.tsx
+function ColorSchemeToggle() {
+	const { setColorScheme } = useMantineColorScheme();
+	return /* @__PURE__ */ jsxs(Group, {
+		justify: "center",
+		mt: "xl",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				onClick: () => setColorScheme("light"),
+				children: "Light"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: () => setColorScheme("dark"),
+				children: "Dark"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: () => setColorScheme("auto"),
+				children: "Auto"
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/crud/Create.tsx
 const Create = (props) => {
@@ -1183,30 +1334,6 @@ const Table = ({ props, tableProps }) => /* @__PURE__ */ jsxs(Fragment, { childr
 	})
 })] });
 
-//#endregion
-//#region src/components/ColorSchemeToggle.tsx
-function ColorSchemeToggle() {
-	const { setColorScheme } = useMantineColorScheme();
-	return /* @__PURE__ */ jsxs(Group, {
-		justify: "center",
-		mt: "xl",
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => setColorScheme("light"),
-				children: "Light"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => setColorScheme("dark"),
-				children: "Dark"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => setColorScheme("auto"),
-				children: "Auto"
-			})
-		]
-	});
-}
-
 //#endregion
 //#region src/utils/paths.ts
 function has(obj, path) {
@@ -1365,6 +1492,88 @@ const DefaultTitle = () => {
 	});
 };
 
+//#endregion
+//#region src/pages/auth/ForgotPasswordPage.tsx
+const ForgotPasswordPage = (p) => {
+	const translate = useTranslate();
+	const { mutate: forgotPassword, isPending } = useForgotPassword();
+	const { getInputProps, onSubmit, key } = useForm({
+		initialValues: { email: "" },
+		validate: { email: isEmail(translate("pages.login.invalidEmail", "Email is not valid")) },
+		...p.validate
+	});
+	const handleResetPassword = onSubmit(({ email }) => {
+		forgotPassword({
+			email,
+			translate
+		});
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		h: "100vh",
+		align: "center",
+		justify: "center",
+		...p.wrapperProps,
+		children: /* @__PURE__ */ jsxs(ScrollArea, {
+			type: "never",
+			...p.scrollAreaProps,
+			children: [p.icon ?? /* @__PURE__ */ jsx(DefaultTitle, {}), /* @__PURE__ */ jsxs(Card, {
+				shadow: "sm",
+				padding: "lg",
+				radius: "md",
+				withBorder: true,
+				...p.cardProps,
+				children: [
+					/* @__PURE__ */ jsx(LoadingOverlay, {
+						visible: isPending,
+						...p.loadingOverlayProps
+					}),
+					p.title ?? /* @__PURE__ */ jsx(Title, {
+						order: 5,
+						mb: "lg",
+						ta: "center",
+						children: translate("pages.forgotPassword.title", "Reset your password")
+					}),
+					/* @__PURE__ */ jsxs("form", {
+						onSubmit: handleResetPassword,
+						children: [
+							/* @__PURE__ */ jsx(TextInput, {
+								mb: "lg",
+								type: "email",
+								label: translate("pages.forgotPassword.fields.email", "Email"),
+								leftSection: /* @__PURE__ */ jsx(IconAt, { size: 18 }),
+								placeholder: translate("pages.forgotPassword.fields.emailPlaceholder", "name@example.com"),
+								...getInputProps("email"),
+								...p.emailFieldProps
+							}, key("email")),
+							/* @__PURE__ */ jsx(Button, {
+								fullWidth: true,
+								variant: "outline",
+								type: "submit",
+								...p.submitButtonProps,
+								children: translate("pages.forgotPassword.buttons.submit", "Send reset instructions")
+							}),
+							p.loginLink && /* @__PURE__ */ jsxs(Text, {
+								mt: "lg",
+								size: "xs",
+								ta: "center",
+								children: [
+									translate("pages.register.buttons.haveAccount", "Have an account? "),
+									" ",
+									/* @__PURE__ */ jsx(Anchor, {
+										component: Link,
+										to: p.loginLink,
+										children: translate("pages.login.signin", "Sign in")
+									})
+								]
+							})
+						]
+					})
+				]
+			})]
+		})
+	});
+};
+
 //#endregion
 //#region src/pages/auth/LoginPage.tsx
 const LoginPage = (p) => {
@@ -1642,6 +1851,89 @@ const RegisterPage = (p) => {
 	});
 };
 
+//#endregion
+//#region src/pages/auth/UpdatePasswordPage.tsx
+const UpdatePasswordPage = (p) => {
+	const translate = useTranslate();
+	const { mutate: updatePassword, isPending } = useUpdatePassword();
+	const { params } = useParsed();
+	const token = params?.token;
+	const { getInputProps, onSubmit, key } = useForm({
+		initialValues: {
+			password: "",
+			confirmPassword: ""
+		},
+		validate: {
+			password: isNotEmpty(translate("pages.updatePassword.validate.passwordRequired", "Password is required")),
+			confirmPassword: (value, form) => form.password !== value ? translate("pages.updatePassword.validate.passwordMismatch", "Passwords do not match") : void 0,
+			...p.validate
+		}
+	});
+	const handleSubmit = onSubmit(({ password, confirmPassword }) => {
+		if (!p.withToken || token) updatePassword({
+			password,
+			confirmPassword,
+			token,
+			translate
+		});
+	});
+	return /* @__PURE__ */ jsxs(Stack, {
+		h: "100vh",
+		align: "center",
+		justify: "center",
+		...p.wrapperProps,
+		children: [p.icon ?? /* @__PURE__ */ jsx(DefaultTitle, {}), /* @__PURE__ */ jsxs(Card, {
+			shadow: "sm",
+			padding: "lg",
+			radius: "md",
+			withBorder: true,
+			...p.cardProps,
+			children: [
+				/* @__PURE__ */ jsx(LoadingOverlay, {
+					visible: isPending,
+					...p.loadingOverlayProps
+				}),
+				p.title ?? /* @__PURE__ */ jsx(Title, {
+					order: 5,
+					mb: "lg",
+					ta: "center",
+					children: translate("pages.updatePassword.title", "Update Password")
+				}),
+				/* @__PURE__ */ jsxs("form", {
+					onSubmit: handleSubmit,
+					children: [
+						/* @__PURE__ */ jsx(TextInput, {
+							mb: "sm",
+							label: translate("pages.updatePassword.fields.password", "New Password"),
+							leftSection: /* @__PURE__ */ jsx(IconLockPassword, { size: 18 }),
+							placeholder: "●●●●●●●●",
+							type: "password",
+							...getInputProps("password"),
+							...p.passwordFieldProps
+						}, key("password")),
+						/* @__PURE__ */ jsx(TextInput, {
+							mb: "lg",
+							label: translate("pages.updatePassword.fields.confirmPassword", "Confirm New Password"),
+							leftSection: /* @__PURE__ */ jsx(IconLockPassword, { size: 18 }),
+							placeholder: "●●●●●●●●",
+							type: "password",
+							...getInputProps("confirmPassword"),
+							...p.confirmPasswordFieldProps
+						}, key("confirmPassword")),
+						/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							fullWidth: true,
+							disabled: isPending,
+							...p.submitButtonProps,
+							children: translate("pages.updatePassword.buttons.submit", "Update")
+						})
+					]
+				})
+			]
+		})]
+	});
+};
+
 //#endregion
 //#region src/providers/notificationProvider.tsx
 const notificationProvider = () => {
@@ -1730,4 +2022,4 @@ const notificationProvider = () => {
 };
 
 //#endregion
-export { AutoSaveIndicator, BooleanField, Breadcrumb, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, FileField, Layout, List, ListButton, LoginPage, Message, PhoneField, RefreshButton, RegisterPage, SaveButton, Show, ShowButton, Table, UrlField, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, ExportButton, FileField, ForgotPasswordPage, ImportButton, Layout, List, ListButton, LoginPage, Message, PhoneField, RefreshButton, RegisterPage, SaveButton, Show, ShowButton, Table, UpdatePasswordPage, UrlField, notificationProvider, useForm, useOtp };

package/package.json

@@ -93,5 +93,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.3.2"
+  "version": "1.3.4"
 }

package/src/components/buttons/DeleteButton.tsx

@@ -90,7 +90,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
       opened={opened}
       onChange={handlers.toggle}
       withArrow
-      withinPortal={false}
+      withinPortal
       withOverlay
       disabled={disabled}
       trapFocus

package/src/components/crud/Show.story.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, getThemeColor, Text, Title, useMantineTheme } from "@mantine/core";
 import { useShow } from "@refinedev/core";
-import { Meta } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { CloneButton } from "../buttons/CloneButton";
 import { DeleteButton } from "../buttons/DeleteButton";
 import { EditButton } from "../buttons/EditButton";
@@ -69,7 +69,7 @@ export const Default = () => {
             trueLabel="active"
             falseLabel="inactive"
             falseIconProps={{color: getThemeColor("red", theme)}}
-            iconProps={{color: getThemeColor("green", theme)}}
+            trueIconProps={{color: getThemeColor("green", theme)}}
           />
         </>
       )}

package/src/components/fields/BooleanField.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from "@mantine/core";
 import type { TooltipBaseProps } from "@mantine/core/lib/components/Tooltip/Tooltip.types";
-import { IconCircleCheckFilled, IconCircleXFilled, ReactNode, type IconProps } from "@tabler/icons-react";
+import { IconCircleCheckFilled, IconCircleXFilled, type IconProps, type ReactNode } from "@tabler/icons-react";
 
 export interface BooleanFieldProps {
   value: boolean;

package/src/index.ts

@@ -1,13 +1,18 @@
 // breadcrumbs
 export * from "@/components/breadcrumb/Breadcrumb";
 // buttons
+export * from "@/components/buttons/CloneButton";
 export * from "@/components/buttons/CreateButton";
 export * from "@/components/buttons/DeleteButton";
 export * from "@/components/buttons/EditButton";
+export * from "@/components/buttons/ExportButton";
+export * from "@/components/buttons/ImportButton";
 export * from "@/components/buttons/ListButton";
 export * from "@/components/buttons/RefreshButton";
 export * from "@/components/buttons/SaveButton";
 export * from "@/components/buttons/ShowButton";
+// uncategorized components
+export * from "@/components/ColorSchemeToggle";
 // crud
 export * from "@/components/crud/Create";
 export * from "@/components/crud/Edit";
@@ -23,21 +28,20 @@ export * from "@/components/fields/UrlField";
 // layout
 export * from "@/components/layout/Layout";
 // notification
+export * from "@/components/notification/AutoSaveIndicator";
 export * from "@/components/notification/Message";
 // table
 export * from "@/components/table/ColumnFilter";
 export * from "@/components/table/ColumnSorter";
 export * from "@/components/table/Table";
-// uncategorized components
-export * from "@/components/notification/AutoSaveIndicator";
-export * from "@/components/ColorSchemeToggle";
 // hooks
 export * from "@/hooks/useForm";
 export * from "@/hooks/useOtp";
 // pages
+export * from "@/pages/auth/ForgotPasswordPage";
 export * from "@/pages/auth/LoginPage";
 export * from "@/pages/auth/RegisterPage";
+export * from "@/pages/auth/UpdatePasswordPage";
 // providers
 export type * from "@/providers/authProvider";
 export * from "@/providers/notificationProvider";
-