@abpjs/theme-shared 0.8.0 → 1.0.0

package/dist/index.js

@@ -35,7 +35,8 @@ __export(index_exports, {
   AbpModalHeader: () => AbpModalHeader,
   Alert: () => Alert,
   Button: () => Button3,
-  ChakraDialog: () => import_react10.Dialog,
+  ChakraDialog: () => import_react11.Dialog,
+  ChangePassword: () => ChangePassword,
   Checkbox: () => Checkbox,
   ConfirmationDialog: () => ConfirmationDialog,
   ConfirmationProvider: () => ConfirmationProvider,
@@ -47,6 +48,7 @@ __export(index_exports, {
   ModalBody: () => AbpModalBody,
   ModalFooter: () => AbpModalFooter,
   ModalHeader: () => AbpModalHeader,
+  Profile: () => Profile,
   THEME_SHARED_STYLES: () => THEME_SHARED_STYLES,
   ThemeSharedProvider: () => ThemeSharedProvider,
   ToastContainer: () => ToastContainer,
@@ -56,7 +58,7 @@ __export(index_exports, {
   createAbpSystem: () => createAbpSystem,
   createErrorInterceptor: () => createErrorInterceptor,
   defaultAbpConfig: () => defaultAbpConfig,
-  defineConfig: () => import_react17.defineConfig,
+  defineConfig: () => import_react22.defineConfig,
   getSeverityBg: () => getSeverityBg,
   getSeverityBorderColor: () => getSeverityBorderColor,
   getSeverityColorScheme: () => getSeverityColorPalette,
@@ -851,7 +853,8 @@ function LoaderBar({
 }
 
 // src/components/modal/Modal.tsx
-var import_react10 = require("@chakra-ui/react");
+var import_react10 = __toESM(require("react"));
+var import_react11 = require("@chakra-ui/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function getSizeWidth(size) {
   switch (size) {
@@ -872,9 +875,12 @@ function getSizeWidth(size) {
 function Modal({
   visible,
   onVisibleChange,
+  busy = false,
   size = "md",
   centered = true,
   modalClass,
+  height,
+  minHeight,
   header,
   children,
   footer,
@@ -884,44 +890,61 @@ function Modal({
   scrollBehavior = "inside",
   motionPreset = "scale",
   trapFocus = true,
-  preventScroll = true
+  preventScroll = true,
+  onInit
 }) {
+  const prevVisibleRef = import_react10.default.useRef(false);
+  const onInitRef = import_react10.default.useRef(onInit);
+  import_react10.default.useEffect(() => {
+    onInitRef.current = onInit;
+  }, [onInit]);
+  import_react10.default.useEffect(() => {
+    if (visible && !prevVisibleRef.current && onInitRef.current) {
+      onInitRef.current();
+    }
+    prevVisibleRef.current = visible;
+  }, [visible]);
   const handleOpenChange = (details) => {
+    if (busy && !details.open) {
+      return;
+    }
     onVisibleChange?.(details.open);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react10.Dialog.Root,
+    import_react11.Dialog.Root,
     {
       open: visible,
       onOpenChange: handleOpenChange,
       placement: centered ? "center" : "top",
-      closeOnInteractOutside: closeOnOverlayClick,
-      closeOnEscape,
+      closeOnInteractOutside: closeOnOverlayClick && !busy,
+      closeOnEscape: closeOnEscape && !busy,
       scrollBehavior,
       motionPreset,
       trapFocus,
       preventScroll,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react10.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Dialog.Backdrop, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          import_react10.Dialog.Content,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react11.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Dialog.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          import_react11.Dialog.Content,
           {
             className: modalClass,
             width: getSizeWidth(size),
             maxWidth: size === "full" ? "100vw" : void 0,
             maxHeight: size === "full" ? "100vh" : void 0,
+            height,
+            minHeight,
             children: [
               (header || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react10.Flex, { justify: "space-between", align: "center", width: "100%", children: [
-                  header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Text, { fontWeight: "bold", fontSize: "lg", children: header }) }),
-                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.CloseButton, { size: "sm" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react11.Flex, { justify: "space-between", align: "center", width: "100%", children: [
+                  header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Text, { fontWeight: "bold", fontSize: "lg", children: header }) }),
+                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.CloseButton, { size: "sm" }) })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Separator, {})
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Separator, {})
               ] }),
-              children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Dialog.Body, { py: 4, children }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Dialog.Body, { py: 4, children }),
               footer && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Separator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Flex, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Separator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Flex, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
               ] })
             ]
           }
@@ -931,17 +954,17 @@ function Modal({
   );
 }
 function AbpModalHeader({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Text, { fontWeight: "bold", fontSize: "lg", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Text, { fontWeight: "bold", fontSize: "lg", className, children });
 }
 function AbpModalBody({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Box, { color: "gray.600", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Box, { color: "gray.600", className, children });
 }
 function AbpModalFooter({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Flex, { gap: 3, justify: "flex-end", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Flex, { gap: 3, justify: "flex-end", className, children });
 }
 
 // src/components/ui/Alert.tsx
-var import_react11 = require("@chakra-ui/react");
+var import_react12 = require("@chakra-ui/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Alert({
   status = "info",
@@ -954,28 +977,28 @@ function Alert({
   borderRadius = "md"
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_react11.Alert.Root,
+    import_react12.Alert.Root,
     {
       status,
       className,
       mb,
       borderRadius,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react11.Alert.Indicator, {}),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react12.Alert.Indicator, {}),
         title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react11.Alert.Title, { children: title }),
-          (description || children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react11.Alert.Description, { children: description || children })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react11.Alert.Title, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react12.Alert.Title, { children: title }),
+          (description || children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react12.Alert.Description, { children: description || children })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react12.Alert.Title, { children })
       ]
     }
   );
 }
 
 // src/components/ui/Button.tsx
-var import_react12 = require("react");
-var import_react13 = require("@chakra-ui/react");
+var import_react13 = require("react");
+var import_react14 = require("@chakra-ui/react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Button3 = (0, import_react12.forwardRef)(
+var Button3 = (0, import_react13.forwardRef)(
   function Button4({
     children,
     type = "button",
@@ -992,7 +1015,7 @@ var Button3 = (0, import_react12.forwardRef)(
     ml
   }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react13.Button,
+      import_react14.Button,
       {
         ref,
         type,
@@ -1014,10 +1037,10 @@ var Button3 = (0, import_react12.forwardRef)(
 );
 
 // src/components/ui/Checkbox.tsx
-var import_react14 = require("react");
-var import_react15 = require("@chakra-ui/react");
+var import_react15 = require("react");
+var import_react16 = require("@chakra-ui/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Checkbox = (0, import_react14.forwardRef)(
+var Checkbox = (0, import_react15.forwardRef)(
   function Checkbox2({
     children,
     checked,
@@ -1035,7 +1058,7 @@ var Checkbox = (0, import_react14.forwardRef)(
     className
   }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      import_react15.Checkbox.Root,
+      import_react16.Checkbox.Root,
       {
         checked,
         defaultChecked,
@@ -1048,7 +1071,7 @@ var Checkbox = (0, import_react14.forwardRef)(
         className,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react15.Checkbox.HiddenInput,
+            import_react16.Checkbox.HiddenInput,
             {
               ref,
               id,
@@ -1057,8 +1080,8 @@ var Checkbox = (0, import_react14.forwardRef)(
               onChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react15.Checkbox.Control, {}),
-          children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react15.Checkbox.Label, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react16.Checkbox.Control, {}),
+          children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react16.Checkbox.Label, { children })
         ]
       }
     );
@@ -1066,7 +1089,7 @@ var Checkbox = (0, import_react14.forwardRef)(
 );
 
 // src/components/ui/FormField.tsx
-var import_react16 = require("@chakra-ui/react");
+var import_react17 = require("@chakra-ui/react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function FormField({
   label,
@@ -1079,22 +1102,361 @@ function FormField({
   htmlFor,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react16.Field.Root, { invalid, disabled, className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react16.Field.Label, { htmlFor, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react17.Field.Root, { invalid, disabled, className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react17.Field.Label, { htmlFor, children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react16.Field.RequiredIndicator, {})
+      required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react17.Field.RequiredIndicator, {})
     ] }),
     children,
-    helperText && !invalid && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react16.Field.HelperText, { children: helperText }),
-    invalid && errorText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react16.Field.ErrorText, { children: errorText })
+    helperText && !invalid && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react17.Field.HelperText, { children: helperText }),
+    invalid && errorText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react17.Field.ErrorText, { children: errorText })
   ] });
 }
 
-// src/providers/ThemeSharedProvider.tsx
+// src/components/change-password/ChangePassword.tsx
+var import_react18 = require("react");
 var import_react19 = require("@chakra-ui/react");
+var import_react_hook_form = require("react-hook-form");
+var import_core4 = require("@abpjs/core");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ChangePassword({
+  visible,
+  onVisibleChange
+}) {
+  const { t } = (0, import_core4.useLocalization)();
+  const { changePassword } = (0, import_core4.useProfile)();
+  const toaster = useToaster();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors, isSubmitting }
+  } = (0, import_react_hook_form.useForm)({
+    defaultValues: {
+      password: "",
+      newPassword: "",
+      repeatNewPassword: ""
+    }
+  });
+  const newPassword = watch("newPassword");
+  (0, import_react18.useEffect)(() => {
+    if (visible) {
+      reset();
+    }
+  }, [visible, reset]);
+  const onSubmit = async (data) => {
+    try {
+      await changePassword({
+        currentPassword: data.password,
+        newPassword: data.newPassword
+      });
+      toaster.success(
+        t("AbpIdentity::PasswordChangedMessage") || "Password changed successfully",
+        t("AbpUi::Success") || "Success"
+      );
+      onVisibleChange(false);
+    } catch (error) {
+      toaster.error(
+        error instanceof Error ? error.message : "An error occurred",
+        t("AbpIdentity::PasswordChangeFailed") || "Failed to change password"
+      );
+    }
+  };
+  const handleClose = () => {
+    if (!isSubmitting) {
+      onVisibleChange(false);
+    }
+  };
+  const passwordValidation = {
+    required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+    minLength: {
+      value: 6,
+      message: t("AbpIdentity::PasswordTooShort") || "Password must be at least 6 characters"
+    },
+    validate: {
+      hasLowercase: (value) => /[a-z]/.test(value) || t("AbpIdentity::PasswordRequiresLower") || "Password must contain a lowercase letter",
+      hasUppercase: (value) => /[A-Z]/.test(value) || t("AbpIdentity::PasswordRequiresUpper") || "Password must contain an uppercase letter",
+      hasNumber: (value) => /[0-9]/.test(value) || t("AbpIdentity::PasswordRequiresDigit") || "Password must contain a number",
+      hasSpecial: (value) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || t("AbpIdentity::PasswordRequiresNonAlphanumeric") || "Password must contain a special character"
+    }
+  };
+  const modalFooter = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react19.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: isSubmitting, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      import_react19.Button,
+      {
+        colorPalette: "blue",
+        type: "submit",
+        loading: isSubmitting,
+        form: "change-password-form",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Check, { size: 16 }),
+          t("AbpIdentity::Save") || "Save"
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Modal,
+    {
+      visible,
+      onVisibleChange,
+      busy: isSubmitting,
+      header: t("AbpIdentity::ChangePassword") || "Change Password",
+      footer: modalFooter,
+      centered: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("form", { id: "change-password-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react19.VStack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react19.Field.Root, { invalid: !!errors.password, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react19.Field.Label, { children: [
+            t("AbpIdentity::DisplayName:CurrentPassword") || "Current Password",
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react19.Field.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react19.Input,
+            {
+              type: "password",
+              ...register("password", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required"
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react19.Field.ErrorText, { children: errors.password?.message })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react19.Field.Root, { invalid: !!errors.newPassword, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react19.Field.Label, { children: [
+            t("AbpIdentity::DisplayName:NewPassword") || "New Password",
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react19.Field.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react19.Input,
+            {
+              type: "password",
+              ...register("newPassword", passwordValidation)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react19.Field.ErrorText, { children: errors.newPassword?.message })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react19.Field.Root, { invalid: !!errors.repeatNewPassword, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react19.Field.Label, { children: [
+            t("AbpIdentity::DisplayName:NewPasswordConfirm") || "Confirm New Password",
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react19.Field.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react19.Input,
+            {
+              type: "password",
+              ...register("repeatNewPassword", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+                validate: (value) => value === newPassword || t("AbpIdentity::Identity.PasswordConfirmationFailed") || "Passwords do not match"
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react19.Field.ErrorText, { children: errors.repeatNewPassword?.message })
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/components/profile/Profile.tsx
+var import_react20 = require("react");
+var import_react21 = require("@chakra-ui/react");
+var import_react_hook_form2 = require("react-hook-form");
+var import_core5 = require("@abpjs/core");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Profile({
+  visible,
+  onVisibleChange
+}) {
+  const { t } = (0, import_core5.useLocalization)();
+  const { profile, fetchProfile, updateProfile, loading } = (0, import_core5.useProfile)();
+  const toaster = useToaster();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting }
+  } = (0, import_react_hook_form2.useForm)({
+    defaultValues: {
+      userName: "",
+      email: "",
+      name: "",
+      surname: "",
+      phoneNumber: ""
+    }
+  });
+  const modalBusy = isSubmitting || loading;
+  (0, import_react20.useEffect)(() => {
+    if (visible) {
+      fetchProfile().then(() => {
+      });
+    }
+  }, [visible, fetchProfile]);
+  (0, import_react20.useEffect)(() => {
+    if (profile) {
+      reset({
+        userName: profile.userName || "",
+        email: profile.email || "",
+        name: profile.name || "",
+        surname: profile.surname || "",
+        phoneNumber: profile.phoneNumber || ""
+      });
+    }
+  }, [profile, reset]);
+  const onSubmit = async (data) => {
+    try {
+      await updateProfile(data);
+      toaster.success(
+        t("AbpIdentity::ProfileUpdatedMessage") || "Profile updated successfully",
+        t("AbpUi::Success") || "Success"
+      );
+      onVisibleChange(false);
+    } catch (error) {
+      toaster.error(
+        error instanceof Error ? error.message : "An error occurred",
+        t("AbpIdentity::ProfileUpdateFailed") || "Failed to update profile"
+      );
+    }
+  };
+  const handleClose = () => {
+    if (!modalBusy) {
+      onVisibleChange(false);
+    }
+  };
+  const modalFooter = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: modalBusy, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_react21.Button,
+      {
+        colorPalette: "blue",
+        type: "submit",
+        loading: modalBusy,
+        form: "profile-form",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Check, { size: 16 }),
+          t("AbpIdentity::Save") || "Save"
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Modal,
+    {
+      visible,
+      onVisibleChange,
+      busy: modalBusy,
+      header: t("AbpIdentity::PersonalInfo") || "Personal Info",
+      footer: modalFooter,
+      size: "lg",
+      centered: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("form", { id: "profile-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.VStack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.Field.Root, { invalid: !!errors.userName, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.Field.Label, { children: [
+            t("AbpIdentity::DisplayName:UserName") || "Username",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react21.Input,
+            {
+              type: "text",
+              ...register("userName", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+                maxLength: {
+                  value: 256,
+                  message: "Maximum 256 characters"
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.ErrorText, { children: errors.userName?.message })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.HStack, { gap: 4, w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.Field.Root, { invalid: !!errors.name, flex: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.Label, { children: t("AbpIdentity::DisplayName:Name") || "Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_react21.Input,
+              {
+                type: "text",
+                ...register("name", {
+                  maxLength: {
+                    value: 64,
+                    message: "Maximum 64 characters"
+                  }
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.ErrorText, { children: errors.name?.message })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.Field.Root, { invalid: !!errors.surname, flex: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.Label, { children: t("AbpIdentity::DisplayName:Surname") || "Surname" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_react21.Input,
+              {
+                type: "text",
+                ...register("surname", {
+                  maxLength: {
+                    value: 64,
+                    message: "Maximum 64 characters"
+                  }
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.ErrorText, { children: errors.surname?.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.Field.Root, { invalid: !!errors.email, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.Field.Label, { children: [
+            t("AbpIdentity::DisplayName:EmailAddress") || "Email Address",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react21.Input,
+            {
+              type: "email",
+              ...register("email", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: t("AbpIdentity::InvalidEmail") || "Invalid email address"
+                },
+                maxLength: {
+                  value: 256,
+                  message: "Maximum 256 characters"
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.ErrorText, { children: errors.email?.message })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react21.Field.Root, { invalid: !!errors.phoneNumber, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.Label, { children: t("AbpIdentity::DisplayName:PhoneNumber") || "Phone Number" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react21.Input,
+            {
+              type: "tel",
+              ...register("phoneNumber", {
+                maxLength: {
+                  value: 16,
+                  message: "Maximum 16 characters"
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react21.Field.ErrorText, { children: errors.phoneNumber?.message })
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/providers/ThemeSharedProvider.tsx
+var import_react24 = require("@chakra-ui/react");
 
 // src/theme/index.ts
-var import_react17 = require("@chakra-ui/react");
+var import_react22 = require("@chakra-ui/react");
 var colors = {
   brand: {
     50: { value: "#e3f2fd" },
@@ -1297,7 +1659,7 @@ var semanticTokens = {
   //   },
   // },
 };
-var defaultAbpConfig = (0, import_react17.defineConfig)({
+var defaultAbpConfig = (0, import_react22.defineConfig)({
   theme: {
     tokens: {
       colors,
@@ -1319,20 +1681,20 @@ var defaultAbpConfig = (0, import_react17.defineConfig)({
 });
 function createAbpSystem(overrides) {
   if (overrides) {
-    return (0, import_react17.createSystem)(import_react17.defaultConfig, defaultAbpConfig, overrides);
+    return (0, import_react22.createSystem)(import_react22.defaultConfig, defaultAbpConfig, overrides);
   }
-  return (0, import_react17.createSystem)(import_react17.defaultConfig, defaultAbpConfig);
+  return (0, import_react22.createSystem)(import_react22.defaultConfig, defaultAbpConfig);
 }
 var abpSystem = createAbpSystem();
 
 // src/components/ui/color-mode.tsx
-var import_react18 = require("@chakra-ui/react");
+var import_react23 = require("@chakra-ui/react");
 var import_next_themes = require("next-themes");
-var React8 = __toESM(require("react"));
-var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var React11 = __toESM(require("react"));
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ColorModeProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_next_themes.ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_next_themes.ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
 }
 function useColorMode() {
   const { resolvedTheme, setTheme, forcedTheme } = (0, import_next_themes.useTheme)();
@@ -1348,12 +1710,12 @@ function useColorMode() {
 }
 function ColorModeIcon() {
   const { colorMode } = useColorMode();
-  return colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Moon, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Sun, {});
+  return colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Moon, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Sun, {});
 }
-var ColorModeButton = React8.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react18.ClientOnly, { fallback: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react18.Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react18.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react23.ClientOnly, { fallback: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react23.Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react23.IconButton,
     {
       onClick: toggleColorMode,
       variant: "ghost",
@@ -1367,14 +1729,14 @@ var ColorModeButton = React8.forwardRef(function ColorModeButton2(props, ref) {
           height: "5"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ColorModeIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColorModeIcon, {})
     }
   ) });
 });
-var LightMode = React8.forwardRef(
+var LightMode = React11.forwardRef(
   function LightMode2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react18.Span,
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react23.Span,
       {
         color: "fg",
         display: "contents",
@@ -1387,10 +1749,10 @@ var LightMode = React8.forwardRef(
     );
   }
 );
-var DarkMode = React8.forwardRef(
+var DarkMode = React11.forwardRef(
   function DarkMode2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react18.Span,
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react23.Span,
       {
         color: "fg",
         display: "contents",
@@ -1405,8 +1767,8 @@ var DarkMode = React8.forwardRef(
 );
 
 // src/providers/ThemeSharedProvider.tsx
-var import_core4 = require("@abpjs/core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_core6 = require("@abpjs/core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ThemeSharedProvider({
   children,
   renderToasts = true,
@@ -1418,15 +1780,15 @@ function ThemeSharedProvider({
   locale = "en-US"
 }) {
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
-  const { endSide } = (0, import_core4.useDirection)();
+  const { endSide } = (0, import_core6.useDirection)();
   toastPosition = `bottom-${endSide}`;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ConfirmationProvider, { children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastContainer, { position: toastPosition }),
-    renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConfirmationDialog, {})
+    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToastContainer, { position: toastPosition }),
+    renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react19.ChakraProvider, { value: system, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react19.LocaleProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ColorModeProvider, { ...colorModeProps, children: content }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react24.ChakraProvider, { value: system, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react24.LocaleProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColorModeProvider, { ...colorModeProps, children: content }) }) });
 }
 
 // src/utils/styles.ts
@@ -1507,6 +1869,7 @@ function injectThemeSharedStyles() {
   Alert,
   Button,
   ChakraDialog,
+  ChangePassword,
   Checkbox,
   ConfirmationDialog,
   ConfirmationProvider,
@@ -1518,6 +1881,7 @@ function injectThemeSharedStyles() {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Profile,
   THEME_SHARED_STYLES,
   ThemeSharedProvider,
   ToastContainer,