@abpjs/theme-shared 0.7.6 → 0.8.0

package/dist/index.js

@@ -34,12 +34,15 @@ __export(index_exports, {
   AbpModalFooter: () => AbpModalFooter,
   AbpModalHeader: () => AbpModalHeader,
   Alert: () => Alert,
-  Button: () => Button2,
-  ChakraDialog: () => import_react8.Dialog,
+  Button: () => Button3,
+  ChakraDialog: () => import_react10.Dialog,
   Checkbox: () => Checkbox,
   ConfirmationDialog: () => ConfirmationDialog,
   ConfirmationProvider: () => ConfirmationProvider,
+  DEFAULT_STYLES: () => DEFAULT_STYLES,
+  ErrorComponent: () => ErrorComponent,
   FormField: () => FormField,
+  LoaderBar: () => LoaderBar,
   Modal: () => Modal,
   ModalBody: () => AbpModalBody,
   ModalFooter: () => AbpModalFooter,
@@ -53,7 +56,7 @@ __export(index_exports, {
   createAbpSystem: () => createAbpSystem,
   createErrorInterceptor: () => createErrorInterceptor,
   defaultAbpConfig: () => defaultAbpConfig,
-  defineConfig: () => import_react15.defineConfig,
+  defineConfig: () => import_react17.defineConfig,
   getSeverityBg: () => getSeverityBg,
   getSeverityBorderColor: () => getSeverityBorderColor,
   getSeverityColorScheme: () => getSeverityColorPalette,
@@ -79,6 +82,94 @@ var Toaster;
   })(Status = Toaster2.Status || (Toaster2.Status = {}));
 })(Toaster || (Toaster = {}));
 
+// src/constants/styles.ts
+var DEFAULT_STYLES = `
+.is-invalid .form-control {
+  border-color: #dc3545;
+  border-style: solid !important;
+}
+
+.is-invalid .invalid-feedback,
+.is-invalid + * .invalid-feedback {
+  display: block;
+}
+
+.data-tables-filter {
+  text-align: right;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.navbar .dropdown-submenu a::after {
+  transform: rotate(-90deg);
+  position: absolute;
+  right: 16px;
+  top: 18px;
+}
+
+.modal {
+  background-color: rgba(0, 0, 0, .6);
+}
+
+.abp-ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* <animations */
+
+.fade-in-top {
+  animation: fadeInTop 0.4s ease-in-out;
+}
+
+.fade-out-top {
+  animation: fadeOutTop 0.4s ease-in-out;
+}
+
+@keyframes fadeInTop {
+  from {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(5px);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutTop {
+  to {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}
+
+/* </animations */
+
+/* Loader bar styles */
+.abp-loader-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.abp-progress {
+  height: 100%;
+  background-color: #3182ce;
+  transition: width 0.3s ease-out;
+}
+`;
+
 // src/contexts/toaster.context.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -309,6 +400,7 @@ var DEFAULT_ERROR_MESSAGES = {
 function useErrorHandler(options = {}) {
   const { navigate, loginPath = "/account/login" } = options;
   const confirmation = useConfirmation();
+  const [errorComponentProps, setErrorComponentProps] = (0, import_react3.useState)(null);
   const navigateToLogin = (0, import_react3.useCallback)(() => {
     if (navigate) {
       navigate(loginPath);
@@ -320,6 +412,22 @@ function useErrorHandler(options = {}) {
     },
     [confirmation]
   );
+  const clearErrorComponent = (0, import_react3.useCallback)(() => {
+    setErrorComponentProps(null);
+  }, []);
+  const createErrorComponent = (0, import_react3.useCallback)(
+    (instance) => {
+      const props = {
+        title: instance.title || "Error",
+        details: instance.details || "An error has occurred.",
+        onDestroy: clearErrorComponent,
+        showCloseButton: true
+      };
+      setErrorComponentProps(props);
+      return props;
+    },
+    [clearErrorComponent]
+  );
   const handleError = (0, import_react3.useCallback)(
     async (error) => {
       if (error.status === 401) {
@@ -343,7 +451,10 @@ function useErrorHandler(options = {}) {
   return {
     handleError,
     showError,
-    navigateToLogin
+    navigateToLogin,
+    createErrorComponent,
+    errorComponentProps,
+    clearErrorComponent
   };
 }
 function createErrorInterceptor(errorHandler) {
@@ -616,9 +727,132 @@ function ConfirmationDialog({ className }) {
   );
 }
 
-// src/components/modal/Modal.tsx
+// src/components/errors/ErrorComponent.tsx
 var import_react8 = require("@chakra-ui/react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function ErrorComponent({
+  title = "Error",
+  details = "An error has occurred.",
+  onDestroy,
+  showCloseButton = true,
+  closeButtonText = "Go Back"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Container, { maxW: "container.md", py: 20, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react8.VStack, { gap: 6, textAlign: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react8.Heading,
+      {
+        size: "4xl",
+        color: "red.500",
+        fontWeight: "bold",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Text, { fontSize: "lg", color: "gray.600", children: details }),
+    showCloseButton && onDestroy && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react8.Button,
+      {
+        colorPalette: "blue",
+        size: "lg",
+        onClick: onDestroy,
+        children: closeButtonText
+      }
+    )
+  ] }) });
+}
+
+// src/components/loader-bar/LoaderBar.tsx
+var import_react9 = require("react");
+var import_core3 = require("@abpjs/core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LoaderBar({
+  containerClass = "abp-loader-bar",
+  progressClass = "abp-progress",
+  filter
+}) {
+  const { loading } = (0, import_core3.useLoader)();
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const [progressLevel, setProgressLevel] = (0, import_react9.useState)(0);
+  const intervalRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (loading) {
+      startLoading();
+    } else {
+      stopLoading();
+    }
+  }, [loading]);
+  (0, import_react9.useEffect)(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+  const startLoading = () => {
+    setIsLoading(true);
+    setProgressLevel(0);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(() => {
+      setProgressLevel((prev) => {
+        if (prev >= 90) {
+          return prev + 0.5;
+        } else if (prev >= 75) {
+          return prev + 2;
+        } else if (prev >= 50) {
+          return prev + 5;
+        }
+        return prev + 10;
+      });
+    }, 300);
+  };
+  const stopLoading = () => {
+    setProgressLevel(100);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setTimeout(() => {
+      setIsLoading(false);
+      setProgressLevel(0);
+    }, 400);
+  };
+  if (!isLoading && progressLevel === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      className: containerClass,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: "3px",
+        zIndex: 9999,
+        backgroundColor: "rgba(0, 0, 0, 0.1)",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          className: progressClass,
+          style: {
+            height: "100%",
+            backgroundColor: "#3182ce",
+            transition: "width 0.3s ease-out",
+            width: `${Math.min(progressLevel, 100)}%`
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/components/modal/Modal.tsx
+var import_react10 = require("@chakra-ui/react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function getSizeWidth(size) {
   switch (size) {
     case "sm":
@@ -655,8 +889,8 @@ function Modal({
   const handleOpenChange = (details) => {
     onVisibleChange?.(details.open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react8.Dialog.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react10.Dialog.Root,
     {
       open: visible,
       onOpenChange: handleOpenChange,
@@ -667,27 +901,27 @@ function Modal({
       motionPreset,
       trapFocus,
       preventScroll,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react8.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Dialog.Backdrop, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          import_react8.Dialog.Content,
+      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,
           {
             className: modalClass,
             width: getSizeWidth(size),
             maxWidth: size === "full" ? "100vw" : void 0,
             maxHeight: size === "full" ? "100vh" : void 0,
             children: [
-              (header || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react8.Flex, { justify: "space-between", align: "center", width: "100%", children: [
-                  header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Text, { fontWeight: "bold", fontSize: "lg", children: header }) }),
-                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.CloseButton, { size: "sm" }) })
+              (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_runtime5.jsx)(import_react8.Separator, {})
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Separator, {})
               ] }),
-              children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Dialog.Body, { py: 4, children }),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Separator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Flex, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
+              children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.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 }) })
               ] })
             ]
           }
@@ -697,18 +931,18 @@ function Modal({
   );
 }
 function AbpModalHeader({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Text, { fontWeight: "bold", fontSize: "lg", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Text, { fontWeight: "bold", fontSize: "lg", className, children });
 }
 function AbpModalBody({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Box, { color: "gray.600", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Box, { color: "gray.600", className, children });
 }
 function AbpModalFooter({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.Flex, { gap: 3, justify: "flex-end", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Flex, { gap: 3, justify: "flex-end", className, children });
 }
 
 // src/components/ui/Alert.tsx
-var import_react9 = require("@chakra-ui/react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react11 = require("@chakra-ui/react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Alert({
   status = "info",
   children,
@@ -719,30 +953,30 @@ function Alert({
   mb,
   borderRadius = "md"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_react9.Alert.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_react11.Alert.Root,
     {
       status,
       className,
       mb,
       borderRadius,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Alert.Indicator, {}),
-        title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Alert.Title, { children: title }),
-          (description || children) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Alert.Description, { children: description || children })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Alert.Title, { children })
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react11.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 })
       ]
     }
   );
 }
 
 // src/components/ui/Button.tsx
-var import_react10 = require("react");
-var import_react11 = require("@chakra-ui/react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Button2 = (0, import_react10.forwardRef)(
-  function Button3({
+var import_react12 = require("react");
+var import_react13 = require("@chakra-ui/react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Button3 = (0, import_react12.forwardRef)(
+  function Button4({
     children,
     type = "button",
     variant = "solid",
@@ -757,8 +991,8 @@ var Button2 = (0, import_react10.forwardRef)(
     mr,
     ml
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react11.Button,
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react13.Button,
       {
         ref,
         type,
@@ -780,10 +1014,10 @@ var Button2 = (0, import_react10.forwardRef)(
 );
 
 // src/components/ui/Checkbox.tsx
-var import_react12 = require("react");
-var import_react13 = require("@chakra-ui/react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Checkbox = (0, import_react12.forwardRef)(
+var import_react14 = require("react");
+var import_react15 = require("@chakra-ui/react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Checkbox = (0, import_react14.forwardRef)(
   function Checkbox2({
     children,
     checked,
@@ -800,8 +1034,8 @@ var Checkbox = (0, import_react12.forwardRef)(
     onChange,
     className
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      import_react13.Checkbox.Root,
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      import_react15.Checkbox.Root,
       {
         checked,
         defaultChecked,
@@ -813,8 +1047,8 @@ var Checkbox = (0, import_react12.forwardRef)(
         size,
         className,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_react13.Checkbox.HiddenInput,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_react15.Checkbox.HiddenInput,
             {
               ref,
               id,
@@ -823,8 +1057,8 @@ var Checkbox = (0, import_react12.forwardRef)(
               onChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Checkbox.Control, {}),
-          children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Checkbox.Label, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react15.Checkbox.Control, {}),
+          children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react15.Checkbox.Label, { children })
         ]
       }
     );
@@ -832,8 +1066,8 @@ var Checkbox = (0, import_react12.forwardRef)(
 );
 
 // src/components/ui/FormField.tsx
-var import_react14 = require("@chakra-ui/react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react16 = require("@chakra-ui/react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function FormField({
   label,
   invalid = false,
@@ -845,22 +1079,22 @@ function FormField({
   htmlFor,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react14.Field.Root, { invalid, disabled, className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react14.Field.Label, { htmlFor, children: [
+  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: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.Field.RequiredIndicator, {})
+      required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react16.Field.RequiredIndicator, {})
     ] }),
     children,
-    helperText && !invalid && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.Field.HelperText, { children: helperText }),
-    invalid && errorText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.Field.ErrorText, { children: errorText })
+    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 })
   ] });
 }
 
 // src/providers/ThemeSharedProvider.tsx
-var import_react17 = require("@chakra-ui/react");
+var import_react19 = require("@chakra-ui/react");
 
 // src/theme/index.ts
-var import_react15 = require("@chakra-ui/react");
+var import_react17 = require("@chakra-ui/react");
 var colors = {
   brand: {
     50: { value: "#e3f2fd" },
@@ -1063,7 +1297,7 @@ var semanticTokens = {
   //   },
   // },
 };
-var defaultAbpConfig = (0, import_react15.defineConfig)({
+var defaultAbpConfig = (0, import_react17.defineConfig)({
   theme: {
     tokens: {
       colors,
@@ -1085,20 +1319,20 @@ var defaultAbpConfig = (0, import_react15.defineConfig)({
 });
 function createAbpSystem(overrides) {
   if (overrides) {
-    return (0, import_react15.createSystem)(import_react15.defaultConfig, defaultAbpConfig, overrides);
+    return (0, import_react17.createSystem)(import_react17.defaultConfig, defaultAbpConfig, overrides);
   }
-  return (0, import_react15.createSystem)(import_react15.defaultConfig, defaultAbpConfig);
+  return (0, import_react17.createSystem)(import_react17.defaultConfig, defaultAbpConfig);
 }
 var abpSystem = createAbpSystem();
 
 // src/components/ui/color-mode.tsx
-var import_react16 = require("@chakra-ui/react");
+var import_react18 = require("@chakra-ui/react");
 var import_next_themes = require("next-themes");
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ColorModeProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_next_themes.ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_next_themes.ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
 }
 function useColorMode() {
   const { resolvedTheme, setTheme, forcedTheme } = (0, import_next_themes.useTheme)();
@@ -1114,12 +1348,12 @@ function useColorMode() {
 }
 function ColorModeIcon() {
   const { colorMode } = useColorMode();
-  return colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Moon, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Sun, {});
+  return colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Moon, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Sun, {});
 }
-var ColorModeButton = React7.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React8.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react16.ClientOnly, { fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react16.Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react16.IconButton,
+  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,
     {
       onClick: toggleColorMode,
       variant: "ghost",
@@ -1133,14 +1367,14 @@ var ColorModeButton = React7.forwardRef(function ColorModeButton2(props, ref) {
           height: "5"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorModeIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ColorModeIcon, {})
     }
   ) });
 });
-var LightMode = React7.forwardRef(
+var LightMode = React8.forwardRef(
   function LightMode2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react16.Span,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react18.Span,
       {
         color: "fg",
         display: "contents",
@@ -1153,10 +1387,10 @@ var LightMode = React7.forwardRef(
     );
   }
 );
-var DarkMode = React7.forwardRef(
+var DarkMode = React8.forwardRef(
   function DarkMode2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react16.Span,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react18.Span,
       {
         color: "fg",
         display: "contents",
@@ -1171,8 +1405,8 @@ var DarkMode = React7.forwardRef(
 );
 
 // src/providers/ThemeSharedProvider.tsx
-var import_core3 = require("@abpjs/core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_core4 = require("@abpjs/core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ThemeSharedProvider({
   children,
   renderToasts = true,
@@ -1184,15 +1418,15 @@ function ThemeSharedProvider({
   locale = "en-US"
 }) {
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
-  const { endSide } = (0, import_core3.useDirection)();
+  const { endSide } = (0, import_core4.useDirection)();
   toastPosition = `bottom-${endSide}`;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ConfirmationProvider, { children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToastContainer, { position: toastPosition }),
-    renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ConfirmationDialog, {})
+    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastContainer, { position: toastPosition }),
+    renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react17.ChakraProvider, { value: system, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react17.LocaleProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorModeProvider, { ...colorModeProps, children: content }) }) });
+  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 }) }) });
 }
 
 // src/utils/styles.ts
@@ -1276,7 +1510,10 @@ function injectThemeSharedStyles() {
   Checkbox,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_STYLES,
+  ErrorComponent,
   FormField,
+  LoaderBar,
   Modal,
   ModalBody,
   ModalFooter,