@abpjs/theme-shared 0.7.6

package/dist/index.js

@@ -0,0 +1,1305 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AbpModalBody: () => AbpModalBody,
+  AbpModalFooter: () => AbpModalFooter,
+  AbpModalHeader: () => AbpModalHeader,
+  Alert: () => Alert,
+  Button: () => Button2,
+  ChakraDialog: () => import_react8.Dialog,
+  Checkbox: () => Checkbox,
+  ConfirmationDialog: () => ConfirmationDialog,
+  ConfirmationProvider: () => ConfirmationProvider,
+  FormField: () => FormField,
+  Modal: () => Modal,
+  ModalBody: () => AbpModalBody,
+  ModalFooter: () => AbpModalFooter,
+  ModalHeader: () => AbpModalHeader,
+  THEME_SHARED_STYLES: () => THEME_SHARED_STYLES,
+  ThemeSharedProvider: () => ThemeSharedProvider,
+  ToastContainer: () => ToastContainer,
+  Toaster: () => Toaster,
+  ToasterProvider: () => ToasterProvider,
+  abpSystem: () => abpSystem,
+  createAbpSystem: () => createAbpSystem,
+  createErrorInterceptor: () => createErrorInterceptor,
+  defaultAbpConfig: () => defaultAbpConfig,
+  defineConfig: () => import_react15.defineConfig,
+  getSeverityBg: () => getSeverityBg,
+  getSeverityBorderColor: () => getSeverityBorderColor,
+  getSeverityColorScheme: () => getSeverityColorPalette,
+  injectThemeSharedStyles: () => injectThemeSharedStyles,
+  useConfirmation: () => useConfirmation,
+  useConfirmationContext: () => useConfirmationContext,
+  useConfirmationState: () => useConfirmationState,
+  useErrorHandler: () => useErrorHandler,
+  useToaster: () => useToaster,
+  useToasterContext: () => useToasterContext,
+  useToasts: () => useToasts
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/models/toaster.ts
+var Toaster;
+((Toaster2) => {
+  let Status;
+  ((Status2) => {
+    Status2["confirm"] = "confirm";
+    Status2["reject"] = "reject";
+    Status2["dismiss"] = "dismiss";
+  })(Status = Toaster2.Status || (Toaster2.Status = {}));
+})(Toaster || (Toaster = {}));
+
+// src/contexts/toaster.context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToasterContext = (0, import_react.createContext)(null);
+var toastCounter = 0;
+function generateId() {
+  toastCounter += 1;
+  return `toast-${Date.now()}-${toastCounter}-${Math.random().toString(36).substring(2, 9)}`;
+}
+var DEFAULT_LIFE = 5e3;
+function ToasterProvider({ children }) {
+  const [toasts, setToasts] = (0, import_react.useState)([]);
+  const resolversRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const remove = (0, import_react.useCallback)((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+    const resolver = resolversRef.current.get(id);
+    if (resolver) {
+      resolver(Toaster.Status.dismiss);
+      resolversRef.current.delete(id);
+    }
+  }, []);
+  const show = (0, import_react.useCallback)(
+    (message, title, severity, options) => {
+      const id = options?.id?.toString() || generateId();
+      const life = options?.sticky ? void 0 : options?.life ?? DEFAULT_LIFE;
+      const toast = {
+        id,
+        message,
+        title,
+        severity,
+        ...options
+      };
+      setToasts((prev) => [...prev, toast]);
+      if (life) {
+        setTimeout(() => {
+          remove(id);
+        }, life);
+      }
+      return new Promise((resolve) => {
+        resolversRef.current.set(id, resolve);
+      });
+    },
+    [remove]
+  );
+  const info = (0, import_react.useCallback)(
+    (message, title, options) => show(message, title, "info", options),
+    [show]
+  );
+  const success = (0, import_react.useCallback)(
+    (message, title, options) => show(message, title, "success", options),
+    [show]
+  );
+  const warn = (0, import_react.useCallback)(
+    (message, title, options) => show(message, title, "warn", options),
+    [show]
+  );
+  const error = (0, import_react.useCallback)(
+    (message, title, options) => show(message, title, "error", options),
+    [show]
+  );
+  const addAll = (0, import_react.useCallback)(
+    (messages) => {
+      messages.forEach((msg) => {
+        show(msg.message, msg.title, msg.severity, msg);
+      });
+    },
+    [show]
+  );
+  const clear = (0, import_react.useCallback)((status) => {
+    setToasts((prev) => {
+      prev.forEach((toast) => {
+        const resolver = resolversRef.current.get(toast.id);
+        if (resolver) {
+          resolver(status ?? Toaster.Status.dismiss);
+          resolversRef.current.delete(toast.id);
+        }
+      });
+      return [];
+    });
+  }, []);
+  const service = (0, import_react.useMemo)(
+    () => ({
+      info,
+      success,
+      warn,
+      error,
+      addAll,
+      clear,
+      remove
+    }),
+    [info, success, warn, error, addAll, clear, remove]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({ service, toasts }),
+    [service, toasts]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToasterContext.Provider, { value, children });
+}
+function useToaster() {
+  const context = (0, import_react.useContext)(ToasterContext);
+  if (!context) {
+    throw new Error("useToaster must be used within a ToasterProvider");
+  }
+  return context.service;
+}
+function useToasts() {
+  const context = (0, import_react.useContext)(ToasterContext);
+  if (!context) {
+    throw new Error("useToasts must be used within a ToasterProvider");
+  }
+  return context.toasts;
+}
+function useToasterContext() {
+  const context = (0, import_react.useContext)(ToasterContext);
+  if (!context) {
+    throw new Error("useToasterContext must be used within a ToasterProvider");
+  }
+  return context;
+}
+
+// src/contexts/confirmation.context.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ConfirmationContext = (0, import_react2.createContext)(null);
+function generateId2() {
+  return `confirmation-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function ConfirmationProvider({ children }) {
+  const [confirmation, setConfirmation] = (0, import_react2.useState)(null);
+  const resolverRef = (0, import_react2.useRef)(null);
+  const respond = (0, import_react2.useCallback)((status) => {
+    if (resolverRef.current) {
+      resolverRef.current(status);
+      resolverRef.current = null;
+    }
+    setConfirmation(null);
+  }, []);
+  const show = (0, import_react2.useCallback)(
+    (message, title, severity, options = {}) => {
+      if (resolverRef.current) {
+        resolverRef.current(Toaster.Status.dismiss);
+      }
+      const id = options.id?.toString() || generateId2();
+      const confirmationMessage = {
+        id,
+        message,
+        title,
+        severity,
+        options
+      };
+      setConfirmation(confirmationMessage);
+      return new Promise((resolve) => {
+        resolverRef.current = resolve;
+      });
+    },
+    []
+  );
+  const info = (0, import_react2.useCallback)(
+    (message, title, options) => show(message, title, "info", options),
+    [show]
+  );
+  const success = (0, import_react2.useCallback)(
+    (message, title, options) => show(message, title, "success", options),
+    [show]
+  );
+  const warn = (0, import_react2.useCallback)(
+    (message, title, options) => show(message, title, "warn", options),
+    [show]
+  );
+  const error = (0, import_react2.useCallback)(
+    (message, title, options) => show(message, title, "error", options),
+    [show]
+  );
+  const clear = (0, import_react2.useCallback)(
+    (status) => {
+      respond(status ?? Toaster.Status.dismiss);
+    },
+    [respond]
+  );
+  const service = (0, import_react2.useMemo)(
+    () => ({
+      info,
+      success,
+      warn,
+      error,
+      clear
+    }),
+    [info, success, warn, error, clear]
+  );
+  const value = (0, import_react2.useMemo)(
+    () => ({ service, confirmation, respond }),
+    [service, confirmation, respond]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConfirmationContext.Provider, { value, children });
+}
+function useConfirmation() {
+  const context = (0, import_react2.useContext)(ConfirmationContext);
+  if (!context) {
+    throw new Error("useConfirmation must be used within a ConfirmationProvider");
+  }
+  return context.service;
+}
+function useConfirmationState() {
+  const context = (0, import_react2.useContext)(ConfirmationContext);
+  if (!context) {
+    throw new Error("useConfirmationState must be used within a ConfirmationProvider");
+  }
+  return { confirmation: context.confirmation, respond: context.respond };
+}
+function useConfirmationContext() {
+  const context = (0, import_react2.useContext)(ConfirmationContext);
+  if (!context) {
+    throw new Error("useConfirmationContext must be used within a ConfirmationProvider");
+  }
+  return context;
+}
+
+// src/handlers/error.handler.ts
+var import_react3 = require("react");
+var DEFAULT_ERROR_MESSAGES = {
+  400: "AbpUi::DefaultErrorMessage400",
+  401: "AbpUi::DefaultErrorMessage401",
+  403: "AbpUi::DefaultErrorMessage403",
+  404: "AbpUi::DefaultErrorMessage404",
+  500: "AbpUi::DefaultErrorMessage500",
+  503: "AbpUi::DefaultErrorMessage503"
+};
+function useErrorHandler(options = {}) {
+  const { navigate, loginPath = "/account/login" } = options;
+  const confirmation = useConfirmation();
+  const navigateToLogin = (0, import_react3.useCallback)(() => {
+    if (navigate) {
+      navigate(loginPath);
+    }
+  }, [navigate, loginPath]);
+  const showError = (0, import_react3.useCallback)(
+    async (message, title) => {
+      return confirmation.error(message, title || "AbpUi::Error");
+    },
+    [confirmation]
+  );
+  const handleError = (0, import_react3.useCallback)(
+    async (error) => {
+      if (error.status === 401) {
+        navigateToLogin();
+        return;
+      }
+      let message = error.error?.error?.message;
+      let title = "AbpUi::Error";
+      if (!message) {
+        message = DEFAULT_ERROR_MESSAGES[error.status] || "AbpUi::DefaultErrorMessage";
+      }
+      const validationErrors = error.error?.error?.validationErrors;
+      if (validationErrors && validationErrors.length > 0) {
+        message = validationErrors.map((e) => e.message).join("\n");
+        title = "AbpUi::ValidationError";
+      }
+      await showError(message, title);
+    },
+    [navigateToLogin, showError]
+  );
+  return {
+    handleError,
+    showError,
+    navigateToLogin
+  };
+}
+function createErrorInterceptor(errorHandler) {
+  return async (error) => {
+    if (isHttpErrorResponse(error)) {
+      await errorHandler.handleError(error);
+    }
+    return Promise.reject(error);
+  };
+}
+function isHttpErrorResponse(error) {
+  return typeof error === "object" && error !== null && "status" in error && typeof error.status === "number";
+}
+
+// src/components/toast/Toast.tsx
+var import_react4 = require("react");
+var import_react5 = require("@chakra-ui/react");
+var import_core = require("@abpjs/core");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SeverityIcon({ severity }) {
+  const iconProps = { size: 20 };
+  switch (severity) {
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+    case "info":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+    case "warn":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+  }
+}
+function getSeverityColorPalette(severity) {
+  switch (severity) {
+    case "success":
+      return "green";
+    case "info":
+      return "blue";
+    case "warn":
+      return "yellow";
+    case "error":
+      return "red";
+  }
+}
+function getSeverityBg(severity) {
+  switch (severity) {
+    case "success":
+      return "green.50";
+    case "info":
+      return "blue.50";
+    case "warn":
+      return "yellow.50";
+    case "error":
+      return "red.50";
+  }
+}
+function getSeverityBorderColor(severity) {
+  switch (severity) {
+    case "success":
+      return "green.200";
+    case "info":
+      return "blue.200";
+    case "warn":
+      return "yellow.200";
+    case "error":
+      return "red.200";
+  }
+}
+function mapSeverityToType(severity) {
+  switch (severity) {
+    case "success":
+      return "success";
+    case "info":
+      return "info";
+    case "warn":
+      return "warning";
+    case "error":
+      return "error";
+  }
+}
+function getPlacement(position) {
+  switch (position) {
+    case "top":
+      return "top";
+    case "top-left":
+      return "top-start";
+    // Logical: start = left in LTR, right in RTL
+    case "top-right":
+      return "top-end";
+    // Logical: end = right in LTR, left in RTL
+    case "bottom":
+      return "bottom";
+    case "bottom-left":
+      return "bottom-start";
+    case "bottom-right":
+    default:
+      return "bottom-end";
+  }
+}
+var toasterCache = /* @__PURE__ */ new Map();
+function getToaster(placement) {
+  if (!toasterCache.has(placement)) {
+    toasterCache.set(placement, (0, import_react5.createToaster)({
+      placement,
+      pauseOnPageIdle: true
+    }));
+  }
+  return toasterCache.get(placement);
+}
+function ToastContainer({ position = "bottom-right" }) {
+  const { toasts, service } = useToasterContext();
+  const { t } = (0, import_core.useLocalization)();
+  const displayedToastsRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
+  const placement = (0, import_react4.useMemo)(() => getPlacement(position), [position]);
+  const toaster = (0, import_react4.useMemo)(() => getToaster(placement), [placement]);
+  (0, import_react4.useEffect)(() => {
+    const newToasts = toasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
+    newToasts.forEach((toast) => {
+      displayedToastsRef.current.add(toast.id);
+      const localizedMessage = t(
+        toast.message,
+        ...toast.messageLocalizationParams || []
+      );
+      const localizedTitle = toast.title ? t(toast.title, ...toast.titleLocalizationParams || []) : void 0;
+      requestAnimationFrame(() => {
+        toaster.create({
+          id: toast.id,
+          title: localizedTitle,
+          description: localizedMessage,
+          type: mapSeverityToType(toast.severity),
+          duration: toast.sticky ? void 0 : toast.life || 5e3,
+          meta: {
+            closable: toast.closable !== false,
+            severity: toast.severity
+          },
+          onStatusChange: (details) => {
+            if (details.status === "unmounted") {
+              displayedToastsRef.current.delete(toast.id);
+              service.remove(toast.id);
+            }
+          }
+        });
+      });
+    });
+  }, [toasts, t, service, toaster]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
+    const severity = toast.meta?.severity || "info";
+    const closable = toast.meta?.closable !== false;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react5.Toast.Root,
+      {
+        bg: getSeverityBg(severity),
+        borderWidth: "1px",
+        borderColor: getSeverityBorderColor(severity),
+        borderRadius: "lg",
+        boxShadow: "lg",
+        width: { md: "sm" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Flex, { align: "flex-start", gap: 3, p: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Box, { flexShrink: 0, pt: "2px", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SeverityIcon, { severity }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Stack, { gap: 1, flex: 1, children: [
+            toast.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Toast.Title, { fontWeight: "bold", fontSize: "sm", color: "fg", children: toast.title }),
+            toast.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Toast.Description, { fontSize: "sm", color: "gray.700", children: toast.description })
+          ] }),
+          closable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.CloseButton, { size: "sm" }) })
+        ] })
+      }
+    );
+  } }) });
+}
+
+// src/components/confirmation/Confirmation.tsx
+var import_react6 = require("react");
+var import_react7 = require("@chakra-ui/react");
+var import_core2 = require("@abpjs/core");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SeverityIcon2({ severity }) {
+  const iconProps = { size: 24 };
+  switch (severity) {
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+    case "info":
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+    case "warn":
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+  }
+}
+function getSeverityColorPalette2(severity) {
+  switch (severity) {
+    case "success":
+      return "green";
+    case "info":
+      return "blue";
+    case "warn":
+      return "yellow";
+    case "error":
+      return "red";
+  }
+}
+function ConfirmationDialog({ className }) {
+  const { confirmation, respond } = useConfirmationState();
+  const { t } = (0, import_core2.useLocalization)();
+  const cancelRef = (0, import_react6.useRef)(null);
+  if (!confirmation) {
+    return null;
+  }
+  const { message, title, severity, options } = confirmation;
+  const localizedMessage = t(
+    message,
+    ...options.messageLocalizationParams || []
+  );
+  const localizedTitle = title ? t(title, ...options.titleLocalizationParams || []) : void 0;
+  const yesCopy = options.yesCopy ? t(options.yesCopy) : t("AbpUi::Yes");
+  const cancelCopy = options.cancelCopy ? t(options.cancelCopy) : t("AbpUi::Cancel");
+  const handleConfirm = () => {
+    respond(Toaster.Status.confirm);
+  };
+  const handleCancel = () => {
+    respond(Toaster.Status.reject);
+  };
+  const handleDismiss = () => {
+    respond(Toaster.Status.dismiss);
+  };
+  const handleOpenChange = (details) => {
+    if (!details.open) {
+      handleDismiss();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react7.Dialog.Root,
+    {
+      open: true,
+      onOpenChange: handleOpenChange,
+      role: "alertdialog",
+      placement: "center",
+      initialFocusEl: () => cancelRef.current,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react7.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react7.Dialog.Content, { className, maxWidth: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react7.Flex, { align: "center", gap: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SeverityIcon2, { severity }),
+            localizedTitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Text, { fontWeight: "bold", fontSize: "lg", children: localizedTitle }) })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Text, { color: "gray.600", children: localizedMessage }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react7.Flex, { gap: 3, children: [
+            !options.hideCancelBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_react7.Button,
+              {
+                ref: cancelRef,
+                variant: "ghost",
+                onClick: handleCancel,
+                children: cancelCopy
+              }
+            ),
+            !options.hideYesBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_react7.Button,
+              {
+                colorPalette: getSeverityColorPalette2(severity),
+                onClick: handleConfirm,
+                children: yesCopy
+              }
+            )
+          ] }) })
+        ] }) })
+      ] })
+    }
+  );
+}
+
+// src/components/modal/Modal.tsx
+var import_react8 = require("@chakra-ui/react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function getSizeWidth(size) {
+  switch (size) {
+    case "sm":
+      return "sm";
+    case "md":
+      return "md";
+    case "lg":
+      return "lg";
+    case "xl":
+      return "xl";
+    case "full":
+      return "full";
+    default:
+      return "md";
+  }
+}
+function Modal({
+  visible,
+  onVisibleChange,
+  size = "md",
+  centered = true,
+  modalClass,
+  header,
+  children,
+  footer,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  scrollBehavior = "inside",
+  motionPreset = "scale",
+  trapFocus = true,
+  preventScroll = true
+}) {
+  const handleOpenChange = (details) => {
+    onVisibleChange?.(details.open);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react8.Dialog.Root,
+    {
+      open: visible,
+      onOpenChange: handleOpenChange,
+      placement: centered ? "center" : "top",
+      closeOnInteractOutside: closeOnOverlayClick,
+      closeOnEscape,
+      scrollBehavior,
+      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,
+          {
+            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" }) })
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.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 }) })
+              ] })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function AbpModalHeader({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.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 });
+}
+function AbpModalFooter({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.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");
+function Alert({
+  status = "info",
+  children,
+  title,
+  description,
+  showIcon = true,
+  className,
+  mb,
+  borderRadius = "md"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react9.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 })
+      ]
+    }
+  );
+}
+
+// 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({
+    children,
+    type = "button",
+    variant = "solid",
+    colorPalette = "gray",
+    size = "md",
+    disabled = false,
+    loading = false,
+    loadingText,
+    onClick,
+    className,
+    width,
+    mr,
+    ml
+  }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react11.Button,
+      {
+        ref,
+        type,
+        variant,
+        colorPalette,
+        size,
+        disabled,
+        loading,
+        loadingText,
+        onClick,
+        className,
+        width,
+        mr,
+        ml,
+        children
+      }
+    );
+  }
+);
+
+// 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)(
+  function Checkbox2({
+    children,
+    checked,
+    defaultChecked,
+    disabled = false,
+    invalid = false,
+    required = false,
+    readOnly = false,
+    colorPalette = "blue",
+    size = "md",
+    id,
+    name,
+    value,
+    onChange,
+    className
+  }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_react13.Checkbox.Root,
+      {
+        checked,
+        defaultChecked,
+        disabled,
+        invalid,
+        required,
+        readOnly,
+        colorPalette,
+        size,
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_react13.Checkbox.HiddenInput,
+            {
+              ref,
+              id,
+              name,
+              value,
+              onChange
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Checkbox.Control, {}),
+          children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Checkbox.Label, { children })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/ui/FormField.tsx
+var import_react14 = require("@chakra-ui/react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function FormField({
+  label,
+  invalid = false,
+  required = false,
+  disabled = false,
+  errorText,
+  helperText,
+  children,
+  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: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.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 })
+  ] });
+}
+
+// src/providers/ThemeSharedProvider.tsx
+var import_react17 = require("@chakra-ui/react");
+
+// src/theme/index.ts
+var import_react15 = require("@chakra-ui/react");
+var colors = {
+  brand: {
+    50: { value: "#e3f2fd" },
+    100: { value: "#bbdefb" },
+    200: { value: "#90caf9" },
+    300: { value: "#64b5f6" },
+    400: { value: "#42a5f5" },
+    500: { value: "#2196f3" },
+    600: { value: "#1e88e5" },
+    700: { value: "#1976d2" },
+    800: { value: "#1565c0" },
+    900: { value: "#0d47a1" },
+    950: { value: "#082f5e" }
+  },
+  success: {
+    50: { value: "#e8f5e9" },
+    100: { value: "#c8e6c9" },
+    200: { value: "#a5d6a7" },
+    300: { value: "#81c784" },
+    400: { value: "#66bb6a" },
+    500: { value: "#4caf50" },
+    600: { value: "#43a047" },
+    700: { value: "#388e3c" },
+    800: { value: "#2e7d32" },
+    900: { value: "#1b5e20" },
+    950: { value: "#0d3010" }
+  },
+  warning: {
+    50: { value: "#fff8e1" },
+    100: { value: "#ffecb3" },
+    200: { value: "#ffe082" },
+    300: { value: "#ffd54f" },
+    400: { value: "#ffca28" },
+    500: { value: "#ffc107" },
+    600: { value: "#ffb300" },
+    700: { value: "#ffa000" },
+    800: { value: "#ff8f00" },
+    900: { value: "#ff6f00" },
+    950: { value: "#cc5900" }
+  },
+  error: {
+    50: { value: "#ffebee" },
+    100: { value: "#ffcdd2" },
+    200: { value: "#ef9a9a" },
+    300: { value: "#e57373" },
+    400: { value: "#ef5350" },
+    500: { value: "#f44336" },
+    600: { value: "#e53935" },
+    700: { value: "#d32f2f" },
+    800: { value: "#c62828" },
+    900: { value: "#b71c1c" },
+    950: { value: "#7f1212" }
+  }
+};
+var semanticTokens = {
+  // colors: {
+  //   // Background colors
+  //   bg: {
+  //     DEFAULT: {
+  //       value: { _light: '{colors.white}', _dark: '#121212' },
+  //     },
+  //     subtle: {
+  //       value: { _light: '{colors.gray.50}', _dark: '#1a1a1a' },
+  //     },
+  //     muted: {
+  //       value: { _light: '{colors.gray.100}', _dark: '#2d2d2d' },
+  //     },
+  //     emphasized: {
+  //       value: { _light: '{colors.gray.200}', _dark: '#3d3d3d' },
+  //     },
+  //     inverted: {
+  //       value: { _light: '{colors.gray.900}', _dark: '{colors.white}' },
+  //     },
+  //   },
+  //   // Foreground (text) colors
+  //   fg: {
+  //     DEFAULT: {
+  //       value: { _light: '{colors.gray.900}', _dark: '#e5e5e5' },
+  //     },
+  //     muted: {
+  //       value: { _light: '{colors.gray.600}', _dark: '#a1a1a1' },
+  //     },
+  //     subtle: {
+  //       value: { _light: '{colors.gray.500}', _dark: '#737373' },
+  //     },
+  //     inverted: {
+  //       value: { _light: '{colors.white}', _dark: '{colors.gray.900}' },
+  //     },
+  //   },
+  //   // Border colors
+  //   border: {
+  //     DEFAULT: {
+  //       value: { _light: '{colors.gray.200}', _dark: '#3d3d3d' },
+  //     },
+  //     muted: {
+  //       value: { _light: '{colors.gray.100}', _dark: '#2d2d2d' },
+  //     },
+  //     subtle: {
+  //       value: { _light: '{colors.gray.50}', _dark: '#1a1a1a' },
+  //     },
+  //     emphasized: {
+  //       value: { _light: '{colors.gray.300}', _dark: '#525252' },
+  //     },
+  //   },
+  //   // Brand colors with light/dark support
+  //   brand: {
+  //     solid: {
+  //       value: { _light: '{colors.brand.500}', _dark: '{colors.brand.400}' },
+  //     },
+  //     contrast: {
+  //       value: { _light: '{colors.white}', _dark: '{colors.white}' },
+  //     },
+  //     fg: {
+  //       value: { _light: '{colors.brand.700}', _dark: '{colors.brand.300}' },
+  //     },
+  //     muted: {
+  //       value: { _light: '{colors.brand.100}', _dark: '{colors.brand.900}' },
+  //     },
+  //     subtle: {
+  //       value: { _light: '{colors.brand.50}', _dark: '{colors.brand.950}' },
+  //     },
+  //     emphasized: {
+  //       value: { _light: '{colors.brand.300}', _dark: '{colors.brand.600}' },
+  //     },
+  //     focusRing: {
+  //       value: { _light: '{colors.brand.500}', _dark: '{colors.brand.400}' },
+  //     },
+  //   },
+  //   // Success colors with light/dark support
+  //   success: {
+  //     solid: {
+  //       value: { _light: '{colors.success.500}', _dark: '{colors.success.400}' },
+  //     },
+  //     contrast: {
+  //       value: { _light: '{colors.white}', _dark: '{colors.white}' },
+  //     },
+  //     fg: {
+  //       value: { _light: '{colors.success.700}', _dark: '{colors.success.300}' },
+  //     },
+  //     muted: {
+  //       value: { _light: '{colors.success.100}', _dark: '{colors.success.900}' },
+  //     },
+  //     subtle: {
+  //       value: { _light: '{colors.success.50}', _dark: '{colors.success.950}' },
+  //     },
+  //     emphasized: {
+  //       value: { _light: '{colors.success.300}', _dark: '{colors.success.600}' },
+  //     },
+  //     focusRing: {
+  //       value: { _light: '{colors.success.500}', _dark: '{colors.success.400}' },
+  //     },
+  //   },
+  //   // Warning colors with light/dark support
+  //   warning: {
+  //     solid: {
+  //       value: { _light: '{colors.warning.500}', _dark: '{colors.warning.400}' },
+  //     },
+  //     contrast: {
+  //       value: { _light: '{colors.black}', _dark: '{colors.black}' },
+  //     },
+  //     fg: {
+  //       value: { _light: '{colors.warning.700}', _dark: '{colors.warning.300}' },
+  //     },
+  //     muted: {
+  //       value: { _light: '{colors.warning.100}', _dark: '{colors.warning.900}' },
+  //     },
+  //     subtle: {
+  //       value: { _light: '{colors.warning.50}', _dark: '{colors.warning.950}' },
+  //     },
+  //     emphasized: {
+  //       value: { _light: '{colors.warning.300}', _dark: '{colors.warning.600}' },
+  //     },
+  //     focusRing: {
+  //       value: { _light: '{colors.warning.500}', _dark: '{colors.warning.400}' },
+  //     },
+  //   },
+  //   // Error colors with light/dark support
+  //   error: {
+  //     solid: {
+  //       value: { _light: '{colors.error.500}', _dark: '{colors.error.400}' },
+  //     },
+  //     contrast: {
+  //       value: { _light: '{colors.white}', _dark: '{colors.white}' },
+  //     },
+  //     fg: {
+  //       value: { _light: '{colors.error.700}', _dark: '{colors.error.300}' },
+  //     },
+  //     muted: {
+  //       value: { _light: '{colors.error.100}', _dark: '{colors.error.900}' },
+  //     },
+  //     subtle: {
+  //       value: { _light: '{colors.error.50}', _dark: '{colors.error.950}' },
+  //     },
+  //     emphasized: {
+  //       value: { _light: '{colors.error.300}', _dark: '{colors.error.600}' },
+  //     },
+  //     focusRing: {
+  //       value: { _light: '{colors.error.500}', _dark: '{colors.error.400}' },
+  //     },
+  //   },
+  // },
+};
+var defaultAbpConfig = (0, import_react15.defineConfig)({
+  theme: {
+    tokens: {
+      colors,
+      fonts: {
+        heading: { value: "system-ui, sans-serif" },
+        body: { value: "system-ui, sans-serif" }
+      }
+    },
+    semanticTokens
+  },
+  // Global styles
+  globalCss: {
+    "html, body": {
+      colorPalette: "brand",
+      bg: "bg",
+      color: "fg"
+    }
+  }
+});
+function createAbpSystem(overrides) {
+  if (overrides) {
+    return (0, import_react15.createSystem)(import_react15.defaultConfig, defaultAbpConfig, overrides);
+  }
+  return (0, import_react15.createSystem)(import_react15.defaultConfig, defaultAbpConfig);
+}
+var abpSystem = createAbpSystem();
+
+// src/components/ui/color-mode.tsx
+var import_react16 = require("@chakra-ui/react");
+var import_next_themes = require("next-themes");
+var React7 = __toESM(require("react"));
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ColorModeProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_next_themes.ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
+}
+function useColorMode() {
+  const { resolvedTheme, setTheme, forcedTheme } = (0, import_next_themes.useTheme)();
+  const colorMode = forcedTheme || resolvedTheme;
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+  return {
+    colorMode,
+    setColorMode: setTheme,
+    toggleColorMode
+  };
+}
+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, {});
+}
+var ColorModeButton = React7.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,
+    {
+      onClick: toggleColorMode,
+      variant: "ghost",
+      "aria-label": "Toggle color mode",
+      size: "sm",
+      ref,
+      ...props,
+      css: {
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorModeIcon, {})
+    }
+  ) });
+});
+var LightMode = React7.forwardRef(
+  function LightMode2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react16.Span,
+      {
+        color: "fg",
+        display: "contents",
+        className: "chakra-theme light",
+        colorPalette: "gray",
+        colorScheme: "light",
+        ref,
+        ...props
+      }
+    );
+  }
+);
+var DarkMode = React7.forwardRef(
+  function DarkMode2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react16.Span,
+      {
+        color: "fg",
+        display: "contents",
+        className: "chakra-theme dark",
+        colorPalette: "gray",
+        colorScheme: "dark",
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+// src/providers/ThemeSharedProvider.tsx
+var import_core3 = require("@abpjs/core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ThemeSharedProvider({
+  children,
+  renderToasts = true,
+  renderConfirmation = true,
+  themeOverrides,
+  toastPosition = "bottom-right",
+  enableColorMode = false,
+  defaultColorMode = "light",
+  locale = "en-US"
+}) {
+  const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
+  const { endSide } = (0, import_core3.useDirection)();
+  toastPosition = `bottom-${endSide}`;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ConfirmationProvider, { children: [
+    children,
+    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToastContainer, { position: toastPosition }),
+    renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime11.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 }) }) });
+}
+
+// src/utils/styles.ts
+var THEME_SHARED_STYLES = `
+/* Form validation styling */
+.is-invalid {
+  border-color: var(--chakra-colors-red-500) !important;
+}
+
+.invalid-feedback {
+  display: block;
+  width: 100%;
+  margin-top: var(--chakra-space-1);
+  font-size: var(--chakra-fontSizes-sm);
+  color: var(--chakra-colors-red-500);
+}
+
+/* Pointer cursor utility */
+.pointer {
+  cursor: pointer;
+}
+
+/* Fade animations */
+@keyframes fadeInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeOutTop {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+.fade-in-top {
+  animation: fadeInTop 0.3s ease-out forwards;
+}
+
+.fade-out-top {
+  animation: fadeOutTop 0.3s ease-out forwards;
+}
+`;
+function injectThemeSharedStyles() {
+  if (typeof document === "undefined") {
+    return void 0;
+  }
+  const styleId = "abp-theme-shared-styles";
+  if (document.getElementById(styleId)) {
+    return void 0;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = styleId;
+  styleElement.textContent = THEME_SHARED_STYLES;
+  document.head.appendChild(styleElement);
+  return () => {
+    const element = document.getElementById(styleId);
+    if (element) {
+      element.remove();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AbpModalBody,
+  AbpModalFooter,
+  AbpModalHeader,
+  Alert,
+  Button,
+  ChakraDialog,
+  Checkbox,
+  ConfirmationDialog,
+  ConfirmationProvider,
+  FormField,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  THEME_SHARED_STYLES,
+  ThemeSharedProvider,
+  ToastContainer,
+  Toaster,
+  ToasterProvider,
+  abpSystem,
+  createAbpSystem,
+  createErrorInterceptor,
+  defaultAbpConfig,
+  defineConfig,
+  getSeverityBg,
+  getSeverityBorderColor,
+  getSeverityColorScheme,
+  injectThemeSharedStyles,
+  useConfirmation,
+  useConfirmationContext,
+  useConfirmationState,
+  useErrorHandler,
+  useToaster,
+  useToasterContext,
+  useToasts
+});