@duskmoon-dev/components 0.1.2

package/dist/components/app/index.js

@@ -0,0 +1,890 @@
+"use client";
+
+// src/components/message/Message.tsx
+import React, { useSyncExternalStore } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/message.ts
+var messageHolderClass = "message-holder";
+var messageBaseClass = "message";
+var messageContentClass = "message-content";
+var messageIconClass = "message-icon";
+var messageCloseClass = "message-close";
+var messageTypeClasses = {
+  info: "message-info alert alert-info",
+  success: "message-success alert alert-success",
+  error: "message-error alert alert-error",
+  warning: "message-warning alert alert-warning",
+  loading: "message-loading alert"
+};
+var messagePlacementClasses = {
+  top: "message-top",
+  bottom: "message-bottom"
+};
+function getMessageHolderClasses({
+  placement = "top",
+  className
+}) {
+  return cn(messageHolderClass, messagePlacementClasses[placement], className);
+}
+function getMessageClasses({
+  type = "info",
+  className
+}) {
+  return cn(messageBaseClass, messageTypeClasses[type], className);
+}
+
+// src/components/message/Message.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var seed = 0;
+var globalConfig = {
+  duration: 3,
+  placement: "top"
+};
+var messages = [];
+var listeners = new Set;
+var timers = new Map;
+var snapshot = { messages, config: globalConfig };
+function emit() {
+  snapshot = { messages, config: globalConfig };
+  for (const listener of listeners) {
+    listener();
+  }
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getSnapshot() {
+  return snapshot;
+}
+function normalizeContent(type, content, duration, onClose) {
+  if (typeof content === "object" && content !== null && !React.isValidElement(content) && (("content" in content) || ("type" in content) || ("key" in content))) {
+    return { type, ...content };
+  }
+  return { type, content, duration, onClose };
+}
+function makeHandle(key) {
+  const promise = Promise.resolve();
+  promise.key = key;
+  promise.close = () => destroy(key);
+  return promise;
+}
+function clearTimer(key) {
+  const timer = timers.get(key);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(key);
+  }
+}
+function destroy(key) {
+  if (key === undefined) {
+    for (const item of messages) {
+      clearTimer(item.key);
+      item.onClose?.();
+    }
+    messages = [];
+    emit();
+    return;
+  }
+  const targetKey = String(key);
+  const target = messages.find((item) => item.key === targetKey);
+  clearTimer(targetKey);
+  messages = messages.filter((item) => item.key !== targetKey);
+  target?.onClose?.();
+  emit();
+}
+function open(config) {
+  const key = String(config.key ?? `message-${seed += 1}`);
+  const duration = config.duration ?? globalConfig.duration;
+  const next = {
+    key,
+    type: config.type ?? "info",
+    content: config.content,
+    duration,
+    className: config.className,
+    icon: config.icon,
+    onClose: config.onClose
+  };
+  clearTimer(key);
+  messages = messages.filter((item) => item.key !== key).concat(next);
+  if (globalConfig.maxCount && messages.length > globalConfig.maxCount) {
+    const overflow = messages.slice(0, messages.length - globalConfig.maxCount);
+    for (const item of overflow) {
+      clearTimer(item.key);
+      item.onClose?.();
+    }
+    messages = messages.slice(-globalConfig.maxCount);
+  }
+  if (duration > 0) {
+    timers.set(key, setTimeout(() => destroy(key), duration * 1000));
+  }
+  emit();
+  return makeHandle(key);
+}
+function typedOpen(type) {
+  return (content, duration, onClose) => open(normalizeContent(type, content, duration, onClose));
+}
+function config(nextConfig) {
+  globalConfig = { ...globalConfig, ...nextConfig };
+  emit();
+}
+function MessageHolder({ className }) {
+  const snapshot2 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return /* @__PURE__ */ jsx("div", {
+    className: getMessageHolderClasses({
+      placement: snapshot2.config.placement,
+      className
+    }),
+    children: snapshot2.messages.map((item) => /* @__PURE__ */ jsxs("div", {
+      className: getMessageClasses({
+        type: item.type,
+        className: item.className
+      }),
+      children: [
+        item.icon ? /* @__PURE__ */ jsx("span", {
+          className: messageIconClass,
+          children: item.icon
+        }) : null,
+        /* @__PURE__ */ jsx("span", {
+          className: messageContentClass,
+          children: item.content
+        }),
+        /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: messageCloseClass,
+          "aria-label": "Close message",
+          onClick: () => destroy(item.key),
+          children: "x"
+        })
+      ]
+    }, item.key))
+  });
+}
+var apiBase = {
+  open,
+  success: typedOpen("success"),
+  error: typedOpen("error"),
+  info: typedOpen("info"),
+  warning: typedOpen("warning"),
+  loading: typedOpen("loading"),
+  destroy,
+  config
+};
+var message = {
+  ...apiBase,
+  useMessage: () => [message, /* @__PURE__ */ jsx(MessageHolder, {}, "message-holder")]
+};
+// src/components/modal/Modal.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/classes/modal.ts
+var modalBackdropClass = "modal-backdrop";
+var modalOpenClass = "modal-open";
+var modalBackdropCenterClass = "modal-backdrop-center";
+var modalClass = "modal";
+var modalHeaderClass = "modal-header";
+var modalTitleClass = "modal-title";
+var modalCloseClass = "modal-close";
+var modalBodyClass = "modal-body";
+var modalFooterClass = "modal-footer";
+function getModalBackdropClasses({
+  open: open2,
+  centered,
+  className
+}) {
+  return cn(modalBackdropClass, open2 && modalOpenClass, centered && modalBackdropCenterClass, className);
+}
+function getModalClasses({ className }) {
+  return cn(modalClass, className);
+}
+
+// src/components/modal/Modal.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+var defaultCloseIcon = "x";
+var serviceHandles = new Set;
+function createServiceHandle(config2) {
+  let currentConfig = config2;
+  const handle = {
+    destroy: () => {
+      serviceHandles.delete(handle);
+    },
+    update: (nextConfig) => {
+      currentConfig = { ...currentConfig, ...nextConfig };
+    }
+  };
+  serviceHandles.add(handle);
+  return handle;
+}
+function getModalStyle({
+  width,
+  style
+}) {
+  return {
+    ...style,
+    ...width !== undefined ? { width } : undefined
+  };
+}
+var ModalBase = forwardRef(({
+  open: open2,
+  defaultOpen = false,
+  title,
+  children,
+  content,
+  footer,
+  onOk,
+  onCancel,
+  okText = "OK",
+  cancelText = "Cancel",
+  confirmLoading,
+  closable = true,
+  maskClosable = true,
+  width,
+  centered,
+  destroyOnClose,
+  afterOpenChange,
+  className,
+  maskClassName,
+  closeIcon = defaultCloseIcon,
+  style,
+  role = "dialog",
+  ...props
+}, ref) => {
+  const controlled = open2 !== undefined;
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const mergedOpen = controlled ? Boolean(open2) : innerOpen;
+  const previousOpen = useRef(mergedOpen);
+  const showClose = closable && closeIcon !== null && closeIcon !== false;
+  const body = children ?? content;
+  useEffect(() => {
+    if (previousOpen.current === mergedOpen) {
+      return;
+    }
+    previousOpen.current = mergedOpen;
+    afterOpenChange?.(mergedOpen);
+  }, [afterOpenChange, mergedOpen]);
+  const close = useCallback((event) => {
+    if (!controlled) {
+      setInnerOpen(false);
+    }
+    onCancel?.(event);
+  }, [controlled, onCancel]);
+  const handleOk = useCallback((event) => {
+    onOk?.(event);
+  }, [onOk]);
+  const handleMaskClick = useCallback((event) => {
+    if (event.target !== event.currentTarget || !maskClosable) {
+      return;
+    }
+    close(event);
+  }, [close, maskClosable]);
+  if (!mergedOpen && destroyOnClose) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2("div", {
+    "aria-hidden": mergedOpen ? undefined : true,
+    role: "presentation",
+    className: getModalBackdropClasses({
+      open: mergedOpen,
+      centered,
+      className: maskClassName
+    }),
+    onMouseDown: handleMaskClick,
+    children: /* @__PURE__ */ jsxs2("div", {
+      ...props,
+      ref,
+      role,
+      "aria-modal": mergedOpen ? true : undefined,
+      className: getModalClasses({ className }),
+      style: getModalStyle({ width, style }),
+      children: [
+        title !== undefined || showClose ? /* @__PURE__ */ jsxs2("div", {
+          className: modalHeaderClass,
+          children: [
+            title !== undefined ? /* @__PURE__ */ jsx2("h2", {
+              className: modalTitleClass,
+              children: title
+            }) : null,
+            showClose ? /* @__PURE__ */ jsx2("button", {
+              type: "button",
+              className: modalCloseClass,
+              "aria-label": "Close",
+              onClick: close,
+              children: closeIcon
+            }) : null
+          ]
+        }) : null,
+        /* @__PURE__ */ jsx2("div", {
+          className: modalBodyClass,
+          children: body
+        }),
+        footer === null ? null : /* @__PURE__ */ jsx2("div", {
+          className: modalFooterClass,
+          children: footer !== undefined ? footer : /* @__PURE__ */ jsxs2(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                onClick: close,
+                children: cancelText
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                "aria-busy": confirmLoading,
+                disabled: confirmLoading,
+                onClick: handleOk,
+                children: okText
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
+});
+ModalBase.displayName = "Modal";
+var Modal = ModalBase;
+Modal.confirm = createServiceHandle;
+Modal.info = createServiceHandle;
+Modal.success = createServiceHandle;
+Modal.error = createServiceHandle;
+Modal.warning = createServiceHandle;
+Modal.destroyAll = () => {
+  for (const handle of Array.from(serviceHandles)) {
+    handle.destroy();
+  }
+};
+// src/components/notification/Notification.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo,
+  useState as useState2
+} from "react";
+import { createRoot } from "react-dom/client";
+
+// src/classes/notification.ts
+var notificationRootClass = "notification-root";
+var notificationHolderClass = "notification-holder";
+var notificationNoticeClass = "notification-notice";
+var notificationNoticeOpenClass = "notification-notice-open";
+var notificationIconClass = "notification-icon";
+var notificationContentClass = "notification-content";
+var notificationMessageClass = "notification-message";
+var notificationDescriptionClass = "notification-description";
+var notificationActionsClass = "notification-actions";
+var notificationCloseClass = "notification-close";
+var notificationPlacementClasses = {
+  top: "notification-top",
+  topLeft: "notification-top-left",
+  topRight: "notification-top-right",
+  bottom: "notification-bottom",
+  bottomLeft: "notification-bottom-left",
+  bottomRight: "notification-bottom-right"
+};
+var notificationTypeClasses = {
+  info: "toast-info alert-info",
+  success: "toast-success alert-success",
+  error: "toast-error alert-error",
+  warning: "toast-warning alert-warning"
+};
+function getNotificationHolderClasses({
+  placement,
+  className
+}) {
+  return cn(notificationHolderClass, notificationPlacementClasses[placement], className);
+}
+function getNotificationNoticeClasses({
+  type = "info",
+  open: open2 = true,
+  className
+}) {
+  return cn("toast", "alert", notificationNoticeClass, notificationTypeClasses[type], open2 && "toast-show", open2 && notificationNoticeOpenClass, className);
+}
+
+// src/components/notification/Notification.tsx
+import { jsx as jsx3, jsxs as jsxs3, Fragment as Fragment2 } from "react/jsx-runtime";
+var defaultConfig = {
+  placement: "topRight",
+  duration: 4.5
+};
+var defaultIcons = {
+  info: "i",
+  success: "✓",
+  warning: "!",
+  error: "!"
+};
+var globalConfig2 = { ...defaultConfig };
+var globalNotices = [];
+var globalCounter = 0;
+var globalContainer = null;
+var globalRoot = null;
+var globalTimers = new Map;
+var listeners2 = new Set;
+function getKey(key) {
+  if (key !== undefined) {
+    return key;
+  }
+  globalCounter += 1;
+  return `notification-${globalCounter}`;
+}
+function getDuration(config2, holderConfig) {
+  return config2.duration ?? holderConfig.duration ?? defaultConfig.duration;
+}
+function getPlacement(config2, holderConfig) {
+  return config2.placement ?? holderConfig.placement ?? defaultConfig.placement;
+}
+function applyMaxCount(notices, maxCount) {
+  if (!maxCount || notices.length <= maxCount) {
+    return notices;
+  }
+  return notices.slice(notices.length - maxCount);
+}
+function groupByPlacement(notices) {
+  return notices.reduce((groups, notice) => {
+    groups[notice.placement].push(notice);
+    return groups;
+  }, {
+    top: [],
+    topLeft: [],
+    topRight: [],
+    bottom: [],
+    bottomLeft: [],
+    bottomRight: []
+  });
+}
+function clearTimer2(key) {
+  const timer = globalTimers.get(key);
+  if (timer) {
+    clearTimeout(timer);
+    globalTimers.delete(key);
+  }
+}
+function emitGlobal() {
+  for (const listener of listeners2) {
+    listener(globalNotices, globalConfig2);
+  }
+  renderGlobalHolder();
+}
+function ensureGlobalRoot() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (globalRoot && globalContainer?.isConnected) {
+    return;
+  }
+  const container = globalConfig2.getContainer?.() ?? document.body;
+  globalContainer = document.createElement("div");
+  globalContainer.className = notificationRootClass;
+  container.appendChild(globalContainer);
+  globalRoot = createRoot(globalContainer);
+}
+function renderGlobalHolder() {
+  if (globalNotices.length === 0 && globalRoot && globalContainer) {
+    globalRoot.render(null);
+    return;
+  }
+  ensureGlobalRoot();
+  globalRoot?.render(/* @__PURE__ */ jsx3(NotificationHolder, {
+    notices: globalNotices,
+    config: globalConfig2,
+    onClose: (key) => globalApi.close(key)
+  }));
+}
+function closeGlobal(key) {
+  const notice = globalNotices.find((item) => item.key === key);
+  clearTimer2(key);
+  globalNotices = globalNotices.filter((item) => item.key !== key);
+  notice?.onClose?.();
+  emitGlobal();
+}
+function destroyGlobal(key) {
+  if (key !== undefined) {
+    closeGlobal(key);
+    return;
+  }
+  for (const notice of globalNotices) {
+    clearTimer2(notice.key);
+    notice.onClose?.();
+  }
+  globalNotices = [];
+  emitGlobal();
+}
+function openGlobal(config2) {
+  const key = getKey(config2.key);
+  const notice = {
+    ...config2,
+    key,
+    placement: getPlacement(config2, globalConfig2),
+    type: config2.type ?? "info"
+  };
+  clearTimer2(key);
+  globalNotices = applyMaxCount([...globalNotices.filter((item) => item.key !== key), notice], globalConfig2.maxCount);
+  const duration = getDuration(config2, globalConfig2);
+  if (duration && duration > 0) {
+    globalTimers.set(key, setTimeout(() => closeGlobal(key), duration * 1000));
+  }
+  emitGlobal();
+}
+function withType(type, config2) {
+  openGlobal({ ...config2, type });
+}
+var globalApi = {
+  open: openGlobal,
+  success: (config2) => withType("success", config2),
+  info: (config2) => withType("info", config2),
+  warning: (config2) => withType("warning", config2),
+  error: (config2) => withType("error", config2),
+  close: closeGlobal,
+  destroy: destroyGlobal,
+  config: (config2) => {
+    globalConfig2 = { ...globalConfig2, ...config2 };
+    emitGlobal();
+  },
+  useNotification
+};
+function NotificationHolder({
+  notices,
+  config: config2,
+  onClose
+}) {
+  const groups = groupByPlacement(notices);
+  return /* @__PURE__ */ jsx3(Fragment2, {
+    children: Object.entries(groups).map(([placement, group]) => {
+      if (group.length === 0) {
+        return null;
+      }
+      const offsetStyle = placement.startsWith("bottom") && config2.bottom !== undefined ? { bottom: config2.bottom } : config2.top !== undefined ? { top: config2.top } : undefined;
+      return /* @__PURE__ */ jsx3("div", {
+        className: getNotificationHolderClasses({
+          placement
+        }),
+        style: offsetStyle,
+        children: group.map((notice) => /* @__PURE__ */ jsx3(NotificationNotice, {
+          notice,
+          fallbackCloseIcon: config2.closeIcon,
+          onClose
+        }, notice.key))
+      }, placement);
+    })
+  });
+}
+function NotificationNotice({
+  notice,
+  fallbackCloseIcon,
+  onClose
+}) {
+  const closeIcon = notice.closeIcon ?? fallbackCloseIcon ?? "x";
+  const icon = notice.icon ?? defaultIcons[notice.type];
+  const clickableProps = notice.onClick ? {
+    tabIndex: 0,
+    onClick: notice.onClick,
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        notice.onClick?.();
+      }
+    }
+  } : undefined;
+  return /* @__PURE__ */ jsxs3("div", {
+    role: notice.role ?? "alert",
+    className: getNotificationNoticeClasses({
+      type: notice.type,
+      className: notice.className
+    }),
+    style: notice.style,
+    ...clickableProps,
+    children: [
+      icon ? /* @__PURE__ */ jsx3("span", {
+        className: notificationIconClass,
+        children: icon
+      }) : null,
+      /* @__PURE__ */ jsxs3("span", {
+        className: notificationContentClass,
+        children: [
+          /* @__PURE__ */ jsx3("span", {
+            className: notificationMessageClass,
+            children: notice.message
+          }),
+          notice.description ? /* @__PURE__ */ jsx3("span", {
+            className: notificationDescriptionClass,
+            children: notice.description
+          }) : null,
+          notice.btn ? /* @__PURE__ */ jsx3("span", {
+            className: notificationActionsClass,
+            children: notice.btn
+          }) : null
+        ]
+      }),
+      closeIcon === null ? null : /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: notificationCloseClass,
+        "aria-label": "Close notification",
+        onClick: (event) => {
+          event.stopPropagation();
+          onClose(notice.key);
+        },
+        children: closeIcon
+      })
+    ]
+  });
+}
+function createScopedApi({
+  holderConfig,
+  setNotices,
+  timerMap
+}) {
+  function clearScopedTimer(key) {
+    const timer = timerMap.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      timerMap.delete(key);
+    }
+  }
+  function close(key) {
+    clearScopedTimer(key);
+    setNotices((current) => {
+      const notice = current.find((item) => item.key === key);
+      notice?.onClose?.();
+      return current.filter((item) => item.key !== key);
+    });
+  }
+  function open2(config2) {
+    const key = getKey(config2.key);
+    const notice = {
+      ...config2,
+      key,
+      placement: getPlacement(config2, holderConfig),
+      type: config2.type ?? "info"
+    };
+    clearScopedTimer(key);
+    setNotices((current) => applyMaxCount([...current.filter((item) => item.key !== key), notice], holderConfig.maxCount));
+    const duration = getDuration(config2, holderConfig);
+    if (duration && duration > 0) {
+      timerMap.set(key, setTimeout(() => close(key), duration * 1000));
+    }
+  }
+  function typed(type, config2) {
+    open2({ ...config2, type });
+  }
+  return {
+    open: open2,
+    success: (config2) => typed("success", config2),
+    info: (config2) => typed("info", config2),
+    warning: (config2) => typed("warning", config2),
+    error: (config2) => typed("error", config2),
+    close,
+    destroy: (key) => {
+      if (key !== undefined) {
+        close(key);
+        return;
+      }
+      for (const timerKey of timerMap.keys()) {
+        clearScopedTimer(timerKey);
+      }
+      setNotices((current) => {
+        for (const notice of current) {
+          notice.onClose?.();
+        }
+        return [];
+      });
+    }
+  };
+}
+function useNotification(config2 = {}) {
+  const holderConfig = useMemo(() => ({
+    ...defaultConfig,
+    bottom: config2.bottom,
+    closeIcon: config2.closeIcon,
+    duration: config2.duration ?? defaultConfig.duration,
+    getContainer: config2.getContainer,
+    maxCount: config2.maxCount,
+    placement: config2.placement ?? defaultConfig.placement,
+    top: config2.top
+  }), [
+    config2.bottom,
+    config2.closeIcon,
+    config2.duration,
+    config2.getContainer,
+    config2.maxCount,
+    config2.placement,
+    config2.top
+  ]);
+  const [notices, setNotices] = useState2([]);
+  const [timerMap] = useState2(() => new Map);
+  const close = useCallback2((key) => {
+    const timer = timerMap.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      timerMap.delete(key);
+    }
+    setNotices((current) => {
+      const notice = current.find((item) => item.key === key);
+      notice?.onClose?.();
+      return current.filter((item) => item.key !== key);
+    });
+  }, [timerMap]);
+  const api = useMemo(() => createScopedApi({ holderConfig, setNotices, timerMap }), [holderConfig, timerMap]);
+  useEffect2(() => {
+    return () => {
+      for (const timer of timerMap.values()) {
+        clearTimeout(timer);
+      }
+      timerMap.clear();
+    };
+  }, [timerMap]);
+  return [
+    api,
+    /* @__PURE__ */ jsx3(NotificationHolder, {
+      notices,
+      config: holderConfig,
+      onClose: close
+    }, "notification-holder")
+  ];
+}
+var notification = globalApi;
+// src/components/app/App.tsx
+import {
+  createContext,
+  forwardRef as forwardRef2,
+  useContext,
+  useEffect as useEffect3,
+  useMemo as useMemo2
+} from "react";
+
+// src/classes/app.ts
+var appClass = "app";
+var appRootClass = "app-root";
+var appHolderClass = "app-holder";
+function getAppClasses({
+  className
+}) {
+  return cn(appClass, className);
+}
+function getAppRootClasses({
+  className
+}) {
+  return cn(appRootClass, className);
+}
+
+// src/components/app/App.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var fallbackContext = {
+  message,
+  notification: {
+    open: () => {
+      return;
+    },
+    success: () => {
+      return;
+    },
+    info: () => {
+      return;
+    },
+    warning: () => {
+      return;
+    },
+    error: () => {
+      return;
+    },
+    close: () => {
+      return;
+    },
+    destroy: () => {
+      return;
+    }
+  },
+  modal: Modal
+};
+var AppContext = createContext(fallbackContext);
+var AppBase = forwardRef2(({
+  children,
+  className,
+  component: Component = "div",
+  message: messageConfig,
+  notification: notificationConfig,
+  ...props
+}, ref) => {
+  const [messageApi, messageHolder] = message.useMessage();
+  const [notificationApi, notificationHolder] = useNotification(notificationConfig);
+  const contextValue = useMemo2(() => ({
+    message: messageApi,
+    notification: notificationApi,
+    modal: Modal
+  }), [messageApi, notificationApi]);
+  useEffect3(() => {
+    if (messageConfig) {
+      messageApi.config(messageConfig);
+    }
+  }, [messageApi, messageConfig]);
+  const content = /* @__PURE__ */ jsxs4(AppContext.Provider, {
+    value: contextValue,
+    children: [
+      children,
+      /* @__PURE__ */ jsxs4("div", {
+        className: appHolderClass,
+        children: [
+          messageHolder,
+          notificationHolder
+        ]
+      })
+    ]
+  });
+  if (Component === false) {
+    return content;
+  }
+  const Root = Component;
+  return /* @__PURE__ */ jsx4(Root, {
+    ...props,
+    ref,
+    className: getAppClasses({ className }),
+    children: content
+  });
+});
+AppBase.displayName = "App";
+var App = AppBase;
+App.Context = AppContext;
+App.useApp = () => useContext(AppContext);
+function AppRoot({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4("div", {
+    ...props,
+    className: getAppRootClasses({ className })
+  });
+}
+export {
+  AppRoot,
+  AppContext,
+  App
+};