@abpjs/theme-shared 0.7.6

package/dist/index.mjs

@@ -0,0 +1,1281 @@
+// 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
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useState,
+  useRef,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var ToasterContext = 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] = useState([]);
+  const resolversRef = useRef(/* @__PURE__ */ new Map());
+  const remove = 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 = 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 = useCallback(
+    (message, title, options) => show(message, title, "info", options),
+    [show]
+  );
+  const success = useCallback(
+    (message, title, options) => show(message, title, "success", options),
+    [show]
+  );
+  const warn = useCallback(
+    (message, title, options) => show(message, title, "warn", options),
+    [show]
+  );
+  const error = useCallback(
+    (message, title, options) => show(message, title, "error", options),
+    [show]
+  );
+  const addAll = useCallback(
+    (messages) => {
+      messages.forEach((msg) => {
+        show(msg.message, msg.title, msg.severity, msg);
+      });
+    },
+    [show]
+  );
+  const clear = 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 = useMemo(
+    () => ({
+      info,
+      success,
+      warn,
+      error,
+      addAll,
+      clear,
+      remove
+    }),
+    [info, success, warn, error, addAll, clear, remove]
+  );
+  const value = useMemo(
+    () => ({ service, toasts }),
+    [service, toasts]
+  );
+  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value, children });
+}
+function useToaster() {
+  const context = useContext(ToasterContext);
+  if (!context) {
+    throw new Error("useToaster must be used within a ToasterProvider");
+  }
+  return context.service;
+}
+function useToasts() {
+  const context = useContext(ToasterContext);
+  if (!context) {
+    throw new Error("useToasts must be used within a ToasterProvider");
+  }
+  return context.toasts;
+}
+function useToasterContext() {
+  const context = useContext(ToasterContext);
+  if (!context) {
+    throw new Error("useToasterContext must be used within a ToasterProvider");
+  }
+  return context;
+}
+
+// src/contexts/confirmation.context.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useCallback as useCallback2,
+  useState as useState2,
+  useRef as useRef2,
+  useMemo as useMemo2
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ConfirmationContext = createContext2(null);
+function generateId2() {
+  return `confirmation-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function ConfirmationProvider({ children }) {
+  const [confirmation, setConfirmation] = useState2(null);
+  const resolverRef = useRef2(null);
+  const respond = useCallback2((status) => {
+    if (resolverRef.current) {
+      resolverRef.current(status);
+      resolverRef.current = null;
+    }
+    setConfirmation(null);
+  }, []);
+  const show = useCallback2(
+    (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 = useCallback2(
+    (message, title, options) => show(message, title, "info", options),
+    [show]
+  );
+  const success = useCallback2(
+    (message, title, options) => show(message, title, "success", options),
+    [show]
+  );
+  const warn = useCallback2(
+    (message, title, options) => show(message, title, "warn", options),
+    [show]
+  );
+  const error = useCallback2(
+    (message, title, options) => show(message, title, "error", options),
+    [show]
+  );
+  const clear = useCallback2(
+    (status) => {
+      respond(status ?? Toaster.Status.dismiss);
+    },
+    [respond]
+  );
+  const service = useMemo2(
+    () => ({
+      info,
+      success,
+      warn,
+      error,
+      clear
+    }),
+    [info, success, warn, error, clear]
+  );
+  const value = useMemo2(
+    () => ({ service, confirmation, respond }),
+    [service, confirmation, respond]
+  );
+  return /* @__PURE__ */ jsx2(ConfirmationContext.Provider, { value, children });
+}
+function useConfirmation() {
+  const context = useContext2(ConfirmationContext);
+  if (!context) {
+    throw new Error("useConfirmation must be used within a ConfirmationProvider");
+  }
+  return context.service;
+}
+function useConfirmationState() {
+  const context = useContext2(ConfirmationContext);
+  if (!context) {
+    throw new Error("useConfirmationState must be used within a ConfirmationProvider");
+  }
+  return { confirmation: context.confirmation, respond: context.respond };
+}
+function useConfirmationContext() {
+  const context = useContext2(ConfirmationContext);
+  if (!context) {
+    throw new Error("useConfirmationContext must be used within a ConfirmationProvider");
+  }
+  return context;
+}
+
+// src/handlers/error.handler.ts
+import { useCallback as useCallback3 } from "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 = useCallback3(() => {
+    if (navigate) {
+      navigate(loginPath);
+    }
+  }, [navigate, loginPath]);
+  const showError = useCallback3(
+    async (message, title) => {
+      return confirmation.error(message, title || "AbpUi::Error");
+    },
+    [confirmation]
+  );
+  const handleError = useCallback3(
+    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
+import { useEffect, useRef as useRef3, useMemo as useMemo3 } from "react";
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Stack,
+  Toast,
+  createToaster,
+  Box,
+  Flex,
+  CloseButton
+} from "@chakra-ui/react";
+import { useLocalization } from "@abpjs/core";
+import {
+  CheckCircle,
+  Info,
+  AlertTriangle,
+  XCircle
+} from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function SeverityIcon({ severity }) {
+  const iconProps = { size: 20 };
+  switch (severity) {
+    case "success":
+      return /* @__PURE__ */ jsx3(CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+    case "info":
+      return /* @__PURE__ */ jsx3(Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+    case "warn":
+      return /* @__PURE__ */ jsx3(AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+    case "error":
+      return /* @__PURE__ */ jsx3(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, createToaster({
+      placement,
+      pauseOnPageIdle: true
+    }));
+  }
+  return toasterCache.get(placement);
+}
+function ToastContainer({ position = "bottom-right" }) {
+  const { toasts, service } = useToasterContext();
+  const { t } = useLocalization();
+  const displayedToastsRef = useRef3(/* @__PURE__ */ new Set());
+  const placement = useMemo3(() => getPlacement(position), [position]);
+  const toaster = useMemo3(() => getToaster(placement), [placement]);
+  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__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(ChakraToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
+    const severity = toast.meta?.severity || "info";
+    const closable = toast.meta?.closable !== false;
+    return /* @__PURE__ */ jsx3(
+      Toast.Root,
+      {
+        bg: getSeverityBg(severity),
+        borderWidth: "1px",
+        borderColor: getSeverityBorderColor(severity),
+        borderRadius: "lg",
+        boxShadow: "lg",
+        width: { md: "sm" },
+        children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 3, p: 4, children: [
+          /* @__PURE__ */ jsx3(Box, { flexShrink: 0, pt: "2px", children: /* @__PURE__ */ jsx3(SeverityIcon, { severity }) }),
+          /* @__PURE__ */ jsxs(Stack, { gap: 1, flex: 1, children: [
+            toast.title && /* @__PURE__ */ jsx3(Toast.Title, { fontWeight: "bold", fontSize: "sm", color: "fg", children: toast.title }),
+            toast.description && /* @__PURE__ */ jsx3(Toast.Description, { fontSize: "sm", color: "gray.700", children: toast.description })
+          ] }),
+          closable && /* @__PURE__ */ jsx3(Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(CloseButton, { size: "sm" }) })
+        ] })
+      }
+    );
+  } }) });
+}
+
+// src/components/confirmation/Confirmation.tsx
+import { useRef as useRef4 } from "react";
+import {
+  Dialog,
+  Portal as Portal2,
+  Button,
+  Flex as Flex2,
+  Text
+} from "@chakra-ui/react";
+import { useLocalization as useLocalization2 } from "@abpjs/core";
+import {
+  CheckCircle as CheckCircle2,
+  Info as Info2,
+  AlertTriangle as AlertTriangle2,
+  XCircle as XCircle2
+} from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function SeverityIcon2({ severity }) {
+  const iconProps = { size: 24 };
+  switch (severity) {
+    case "success":
+      return /* @__PURE__ */ jsx4(CheckCircle2, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+    case "info":
+      return /* @__PURE__ */ jsx4(Info2, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+    case "warn":
+      return /* @__PURE__ */ jsx4(AlertTriangle2, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+    case "error":
+      return /* @__PURE__ */ jsx4(XCircle2, { ...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 } = useLocalization2();
+  const cancelRef = useRef4(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__ */ jsx4(
+    Dialog.Root,
+    {
+      open: true,
+      onOpenChange: handleOpenChange,
+      role: "alertdialog",
+      placement: "center",
+      initialFocusEl: () => cancelRef.current,
+      children: /* @__PURE__ */ jsxs2(Portal2, { children: [
+        /* @__PURE__ */ jsx4(Dialog.Backdrop, {}),
+        /* @__PURE__ */ jsx4(Dialog.Positioner, { children: /* @__PURE__ */ jsxs2(Dialog.Content, { className, maxWidth: "md", children: [
+          /* @__PURE__ */ jsx4(Dialog.Header, { children: /* @__PURE__ */ jsxs2(Flex2, { align: "center", gap: 3, children: [
+            /* @__PURE__ */ jsx4(SeverityIcon2, { severity }),
+            localizedTitle && /* @__PURE__ */ jsx4(Dialog.Title, { children: /* @__PURE__ */ jsx4(Text, { fontWeight: "bold", fontSize: "lg", children: localizedTitle }) })
+          ] }) }),
+          /* @__PURE__ */ jsx4(Dialog.Body, { children: /* @__PURE__ */ jsx4(Text, { color: "gray.600", children: localizedMessage }) }),
+          /* @__PURE__ */ jsx4(Dialog.Footer, { children: /* @__PURE__ */ jsxs2(Flex2, { gap: 3, children: [
+            !options.hideCancelBtn && /* @__PURE__ */ jsx4(
+              Button,
+              {
+                ref: cancelRef,
+                variant: "ghost",
+                onClick: handleCancel,
+                children: cancelCopy
+              }
+            ),
+            !options.hideYesBtn && /* @__PURE__ */ jsx4(
+              Button,
+              {
+                colorPalette: getSeverityColorPalette2(severity),
+                onClick: handleConfirm,
+                children: yesCopy
+              }
+            )
+          ] }) })
+        ] }) })
+      ] })
+    }
+  );
+}
+
+// src/components/modal/Modal.tsx
+import {
+  Dialog as Dialog2,
+  Portal as Portal3,
+  Box as Box2,
+  Flex as Flex3,
+  Text as Text2,
+  Separator,
+  CloseButton as CloseButton2
+} from "@chakra-ui/react";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "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__ */ jsx5(
+    Dialog2.Root,
+    {
+      open: visible,
+      onOpenChange: handleOpenChange,
+      placement: centered ? "center" : "top",
+      closeOnInteractOutside: closeOnOverlayClick,
+      closeOnEscape,
+      scrollBehavior,
+      motionPreset,
+      trapFocus,
+      preventScroll,
+      children: /* @__PURE__ */ jsxs3(Portal3, { children: [
+        /* @__PURE__ */ jsx5(Dialog2.Backdrop, {}),
+        /* @__PURE__ */ jsx5(Dialog2.Positioner, { children: /* @__PURE__ */ jsxs3(
+          Dialog2.Content,
+          {
+            className: modalClass,
+            width: getSizeWidth(size),
+            maxWidth: size === "full" ? "100vw" : void 0,
+            maxHeight: size === "full" ? "100vh" : void 0,
+            children: [
+              (header || showCloseButton) && /* @__PURE__ */ jsxs3(Fragment, { children: [
+                /* @__PURE__ */ jsx5(Dialog2.Header, { children: /* @__PURE__ */ jsxs3(Flex3, { justify: "space-between", align: "center", width: "100%", children: [
+                  header && /* @__PURE__ */ jsx5(Dialog2.Title, { children: /* @__PURE__ */ jsx5(Text2, { fontWeight: "bold", fontSize: "lg", children: header }) }),
+                  showCloseButton && /* @__PURE__ */ jsx5(Dialog2.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(CloseButton2, { size: "sm" }) })
+                ] }) }),
+                /* @__PURE__ */ jsx5(Separator, {})
+              ] }),
+              children && /* @__PURE__ */ jsx5(Dialog2.Body, { py: 4, children }),
+              footer && /* @__PURE__ */ jsxs3(Fragment, { children: [
+                /* @__PURE__ */ jsx5(Separator, {}),
+                /* @__PURE__ */ jsx5(Dialog2.Footer, { children: /* @__PURE__ */ jsx5(Flex3, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
+              ] })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function AbpModalHeader({ children, className }) {
+  return /* @__PURE__ */ jsx5(Text2, { fontWeight: "bold", fontSize: "lg", className, children });
+}
+function AbpModalBody({ children, className }) {
+  return /* @__PURE__ */ jsx5(Box2, { color: "gray.600", className, children });
+}
+function AbpModalFooter({ children, className }) {
+  return /* @__PURE__ */ jsx5(Flex3, { gap: 3, justify: "flex-end", className, children });
+}
+
+// src/components/ui/Alert.tsx
+import { Alert as ChakraAlert } from "@chakra-ui/react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Alert({
+  status = "info",
+  children,
+  title,
+  description,
+  showIcon = true,
+  className,
+  mb,
+  borderRadius = "md"
+}) {
+  return /* @__PURE__ */ jsxs4(
+    ChakraAlert.Root,
+    {
+      status,
+      className,
+      mb,
+      borderRadius,
+      children: [
+        showIcon && /* @__PURE__ */ jsx6(ChakraAlert.Indicator, {}),
+        title ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(ChakraAlert.Title, { children: title }),
+          (description || children) && /* @__PURE__ */ jsx6(ChakraAlert.Description, { children: description || children })
+        ] }) : /* @__PURE__ */ jsx6(ChakraAlert.Title, { children })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Button.tsx
+import { forwardRef } from "react";
+import { Button as ChakraButton } from "@chakra-ui/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Button2 = 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__ */ jsx7(
+      ChakraButton,
+      {
+        ref,
+        type,
+        variant,
+        colorPalette,
+        size,
+        disabled,
+        loading,
+        loadingText,
+        onClick,
+        className,
+        width,
+        mr,
+        ml,
+        children
+      }
+    );
+  }
+);
+
+// src/components/ui/Checkbox.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var Checkbox = forwardRef2(
+  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__ */ jsxs5(
+      ChakraCheckbox.Root,
+      {
+        checked,
+        defaultChecked,
+        disabled,
+        invalid,
+        required,
+        readOnly,
+        colorPalette,
+        size,
+        className,
+        children: [
+          /* @__PURE__ */ jsx8(
+            ChakraCheckbox.HiddenInput,
+            {
+              ref,
+              id,
+              name,
+              value,
+              onChange
+            }
+          ),
+          /* @__PURE__ */ jsx8(ChakraCheckbox.Control, {}),
+          children && /* @__PURE__ */ jsx8(ChakraCheckbox.Label, { children })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/ui/FormField.tsx
+import { Field } from "@chakra-ui/react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function FormField({
+  label,
+  invalid = false,
+  required = false,
+  disabled = false,
+  errorText,
+  helperText,
+  children,
+  htmlFor,
+  className
+}) {
+  return /* @__PURE__ */ jsxs6(Field.Root, { invalid, disabled, className, children: [
+    label && /* @__PURE__ */ jsxs6(Field.Label, { htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx9(Field.RequiredIndicator, {})
+    ] }),
+    children,
+    helperText && !invalid && /* @__PURE__ */ jsx9(Field.HelperText, { children: helperText }),
+    invalid && errorText && /* @__PURE__ */ jsx9(Field.ErrorText, { children: errorText })
+  ] });
+}
+
+// src/providers/ThemeSharedProvider.tsx
+import { ChakraProvider, LocaleProvider } from "@chakra-ui/react";
+
+// src/theme/index.ts
+import { createSystem, defaultConfig, defineConfig } from "@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 = 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 createSystem(defaultConfig, defaultAbpConfig, overrides);
+  }
+  return createSystem(defaultConfig, defaultAbpConfig);
+}
+var abpSystem = createAbpSystem();
+
+// src/components/ui/color-mode.tsx
+import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
+import { ThemeProvider, useTheme } from "next-themes";
+import * as React7 from "react";
+import { Moon, Sun } from "lucide-react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ColorModeProvider(props) {
+  return /* @__PURE__ */ jsx10(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
+}
+function useColorMode() {
+  const { resolvedTheme, setTheme, forcedTheme } = 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__ */ jsx10(Moon, {}) : /* @__PURE__ */ jsx10(Sun, {});
+}
+var ColorModeButton = React7.forwardRef(function ColorModeButton2(props, ref) {
+  const { toggleColorMode } = useColorMode();
+  return /* @__PURE__ */ jsx10(ClientOnly, { fallback: /* @__PURE__ */ jsx10(Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ jsx10(
+    IconButton,
+    {
+      onClick: toggleColorMode,
+      variant: "ghost",
+      "aria-label": "Toggle color mode",
+      size: "sm",
+      ref,
+      ...props,
+      css: {
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      children: /* @__PURE__ */ jsx10(ColorModeIcon, {})
+    }
+  ) });
+});
+var LightMode = React7.forwardRef(
+  function LightMode2(props, ref) {
+    return /* @__PURE__ */ jsx10(
+      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__ */ jsx10(
+      Span,
+      {
+        color: "fg",
+        display: "contents",
+        className: "chakra-theme dark",
+        colorPalette: "gray",
+        colorScheme: "dark",
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+// src/providers/ThemeSharedProvider.tsx
+import { useDirection } from "@abpjs/core";
+import { jsx as jsx11, jsxs as jsxs7 } from "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 } = useDirection();
+  toastPosition = `bottom-${endSide}`;
+  const content = /* @__PURE__ */ jsx11(ToasterProvider, { children: /* @__PURE__ */ jsxs7(ConfirmationProvider, { children: [
+    children,
+    renderToasts && /* @__PURE__ */ jsx11(ToastContainer, { position: toastPosition }),
+    renderConfirmation && /* @__PURE__ */ jsx11(ConfirmationDialog, {})
+  ] }) });
+  const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
+  return /* @__PURE__ */ jsx11(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx11(LocaleProvider, { locale, children: /* @__PURE__ */ jsx11(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();
+    }
+  };
+}
+export {
+  AbpModalBody,
+  AbpModalFooter,
+  AbpModalHeader,
+  Alert,
+  Button2 as Button,
+  Dialog2 as ChakraDialog,
+  Checkbox,
+  ConfirmationDialog,
+  ConfirmationProvider,
+  FormField,
+  Modal,
+  AbpModalBody as ModalBody,
+  AbpModalFooter as ModalFooter,
+  AbpModalHeader as ModalHeader,
+  THEME_SHARED_STYLES,
+  ThemeSharedProvider,
+  ToastContainer,
+  Toaster,
+  ToasterProvider,
+  abpSystem,
+  createAbpSystem,
+  createErrorInterceptor,
+  defaultAbpConfig,
+  defineConfig,
+  getSeverityBg,
+  getSeverityBorderColor,
+  getSeverityColorPalette as getSeverityColorScheme,
+  injectThemeSharedStyles,
+  useConfirmation,
+  useConfirmationContext,
+  useConfirmationState,
+  useErrorHandler,
+  useToaster,
+  useToasterContext,
+  useToasts
+};