@lobehub/ui 5.0.1 → 5.1.1

package/es/base-ui/Modal/context.d.mts

@@ -0,0 +1,9 @@
+import { ModalContextValue } from "./type.mjs";
+import * as react122 from "react";
+
+//#region src/base-ui/Modal/context.d.ts
+declare const ModalContext: react122.Context<ModalContextValue>;
+declare const useModalContext: () => ModalContextValue;
+//#endregion
+export { ModalContext, useModalContext };
+//# sourceMappingURL=context.d.mts.map

package/es/base-ui/Modal/context.mjs

@@ -0,0 +1,14 @@
+'use client';
+
+import { createContext, use } from "react";
+
+//#region src/base-ui/Modal/context.ts
+const ModalContext = createContext({
+	close: () => void 0,
+	setCanDismissByClickOutside: () => void 0
+});
+const useModalContext = () => use(ModalContext);
+
+//#endregion
+export { ModalContext, useModalContext };
+//# sourceMappingURL=context.mjs.map

package/es/base-ui/Modal/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/base-ui/Modal/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { ModalContextValue } from './type';\n\nexport const ModalContext = createContext<ModalContextValue>({\n  close: () => undefined,\n  setCanDismissByClickOutside: () => undefined,\n});\n\nexport const useModalContext = () => use(ModalContext);\n"],"mappings":";;;;;AAMA,MAAa,eAAe,cAAiC;CAC3D,aAAa;CACb,mCAAmC;CACpC,CAAC;AAEF,MAAa,wBAAwB,IAAI,aAAa"}

package/es/base-ui/Modal/imperative.d.mts

@@ -0,0 +1,25 @@
+import { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from "./type.mjs";
+import * as react123 from "react";
+
+//#region src/base-ui/Modal/imperative.d.ts
+interface ModalHostProps {
+  root?: HTMLElement | ShadowRoot | null;
+}
+interface ModalSystem {
+  confirmModal: (config: ModalConfirmConfig) => {
+    close: () => void;
+    destroy: () => void;
+  };
+  createModal: (props: ImperativeModalProps) => ModalInstance;
+  ModalHost: React.FC<ModalHostProps>;
+}
+declare function createModalSystem(): ModalSystem;
+declare const ModalHost: react123.FC<ModalHostProps>;
+declare const createModal: (props: ImperativeModalProps) => ModalInstance;
+declare const confirmModal: (config: ModalConfirmConfig) => {
+  close: () => void;
+  destroy: () => void;
+};
+//#endregion
+export { ModalHost, ModalHostProps, ModalSystem, confirmModal, createModal, createModalSystem };
+//# sourceMappingURL=imperative.d.mts.map

package/es/base-ui/Modal/imperative.mjs

@@ -0,0 +1,221 @@
+'use client';
+
+import { useIsClient } from "../../hooks/useIsClient.mjs";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { registerDevSingleton } from "../../utils/devSingleton.mjs";
+import { styles } from "./style.mjs";
+import { ModalBackdrop, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
+import { ModalContext, useModalContext } from "./context.mjs";
+import { memo, useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { createPortal } from "react-dom";
+
+//#region src/base-ui/Modal/imperative.tsx
+const ModalPortalWrapper = ({ children, root }) => {
+	const appElement = useAppElement();
+	return createPortal(children, root ?? appElement ?? document.body);
+};
+const ConfirmBody = ({ config }) => {
+	const { close } = useModalContext();
+	const [loading, setLoading] = useState(false);
+	const { cancelText = "Cancel", content, okButtonProps, okText = "OK", onCancel, onOk } = config;
+	const { danger, className: okUserCls, ...restOkProps } = okButtonProps ?? {};
+	const handleCancel = useCallback(() => {
+		close();
+		onCancel?.();
+	}, [close, onCancel]);
+	const handleOk = useCallback(async () => {
+		if (onOk) try {
+			const result = onOk();
+			if (result && typeof result.then === "function") {
+				setLoading(true);
+				await result;
+				setLoading(false);
+			}
+		} catch {
+			setLoading(false);
+			return;
+		}
+		close();
+	}, [close, onOk]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [content && /* @__PURE__ */ jsx("div", {
+		style: { padding: "16px 24px" },
+		children: content
+	}), /* @__PURE__ */ jsxs(ModalFooter, { children: [/* @__PURE__ */ jsx("button", {
+		className: cx(styles.buttonBase, styles.cancelButton),
+		type: "button",
+		onClick: handleCancel,
+		children: cancelText
+	}), /* @__PURE__ */ jsxs("button", {
+		...restOkProps,
+		disabled: loading,
+		type: "button",
+		className: cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, okUserCls),
+		onClick: handleOk,
+		children: [loading && /* @__PURE__ */ jsx("span", { className: styles.loadingSpinner }), okText]
+	})] })] });
+};
+ConfirmBody.displayName = "ConfirmBody";
+let systemSeed = 0;
+function createModalSystem() {
+	const systemId = systemSeed++;
+	const singletonName = systemId === 0 ? "BaseModalHost" : `BaseModalHost-${systemId}`;
+	let modalStack = [];
+	let modalSeed = 0;
+	const listeners = /* @__PURE__ */ new Set();
+	const notify = () => listeners.forEach((l) => l());
+	const subscribe = (l) => {
+		listeners.add(l);
+		return () => listeners.delete(l);
+	};
+	const EMPTY = [];
+	const getSnapshot = () => modalStack;
+	const getServerSnapshot = () => EMPTY;
+	const updateModal = (id, next) => {
+		let changed = false;
+		modalStack = modalStack.map((item) => {
+			if (item.id !== id) return item;
+			changed = true;
+			return {
+				...item,
+				props: {
+					...item.props,
+					...next
+				}
+			};
+		});
+		if (changed) notify();
+	};
+	const closeModal = (id) => {
+		updateModal(id, { open: false });
+	};
+	const destroyModal = (id) => {
+		const next = modalStack.filter((item) => item.id !== id);
+		if (next.length === modalStack.length) return;
+		modalStack = next;
+		notify();
+	};
+	const StackItem = memo(({ entry }) => {
+		const { id, props } = entry;
+		const { children, classNames, content, footer, maskClosable, onOpenChange, onOpenChangeComplete, open, styles: semanticStyles, title, width } = props;
+		const isOpen = open ?? true;
+		const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+			if (!nextOpen && maskClosable === false && eventDetails?.reason === "outside-press") return;
+			if (!nextOpen) closeModal(id);
+			onOpenChange?.(nextOpen);
+		}, [
+			id,
+			maskClosable,
+			onOpenChange
+		]);
+		const handleExitComplete = useCallback(() => {
+			onOpenChangeComplete?.(false);
+			destroyModal(id);
+		}, [id, onOpenChangeComplete]);
+		const close = useCallback(() => closeModal(id), [id]);
+		const setCanDismissByClickOutside = useCallback((value) => updateModal(id, { maskClosable: value }), [id]);
+		const showTitle = title !== void 0 && title !== false && title !== null;
+		return /* @__PURE__ */ jsx(ModalContext, {
+			value: {
+				close,
+				setCanDismissByClickOutside
+			},
+			children: /* @__PURE__ */ jsx(ModalRoot, {
+				open: isOpen,
+				onExitComplete: handleExitComplete,
+				onOpenChange: handleOpenChange,
+				children: /* @__PURE__ */ jsxs(ModalPortal, { children: [/* @__PURE__ */ jsx(ModalBackdrop, {
+					className: classNames?.backdrop,
+					style: semanticStyles?.backdrop
+				}), /* @__PURE__ */ jsxs(ModalPopup, {
+					className: classNames?.popup,
+					popupStyle: semanticStyles?.popup,
+					width,
+					children: [
+						showTitle && /* @__PURE__ */ jsxs(ModalHeader, {
+							className: classNames?.header,
+							style: semanticStyles?.header,
+							children: [/* @__PURE__ */ jsx(ModalTitle, {
+								className: classNames?.title,
+								style: semanticStyles?.title,
+								children: title
+							}), /* @__PURE__ */ jsx(ModalClose, {
+								className: classNames?.close,
+								style: semanticStyles?.close
+							})]
+						}),
+						/* @__PURE__ */ jsx(ModalContent, {
+							className: classNames?.content,
+							style: semanticStyles?.content,
+							children: content ?? children
+						}),
+						footer
+					]
+				})] })
+			})
+		});
+	});
+	StackItem.displayName = "ModalStackItem";
+	const StackRenderer = memo(({ stack }) => {
+		if (!useIsClient()) return null;
+		return stack.map((entry) => /* @__PURE__ */ jsx(StackItem, { entry }, entry.id));
+	});
+	StackRenderer.displayName = "ModalStackRenderer";
+	const Host = ({ root }) => {
+		const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+		const isClient = useIsClient();
+		useEffect(() => {
+			if (!isClient) return;
+			return registerDevSingleton(singletonName, root ?? document.body);
+		}, [isClient, root]);
+		if (!isClient) return null;
+		if (stack.length === 0) return null;
+		return /* @__PURE__ */ jsx(ModalPortalWrapper, {
+			root,
+			children: /* @__PURE__ */ jsx(StackRenderer, { stack })
+		});
+	};
+	const create = (props) => {
+		const id = `base-modal-${Date.now()}-${modalSeed++}`;
+		modalStack = [...modalStack, {
+			id,
+			props: {
+				...props,
+				open: props.open ?? true
+			}
+		}];
+		notify();
+		return {
+			close: () => closeModal(id),
+			destroy: () => destroyModal(id),
+			setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),
+			update: (nextProps) => updateModal(id, nextProps)
+		};
+	};
+	const confirm = (config) => {
+		const instance = create({
+			content: /* @__PURE__ */ jsx(ConfirmBody, { config }),
+			styles: { content: { padding: 0 } },
+			title: config.title,
+			width: 420
+		});
+		return {
+			close: instance.close,
+			destroy: instance.destroy
+		};
+	};
+	return {
+		ModalHost: Host,
+		confirmModal: confirm,
+		createModal: create
+	};
+}
+const defaultSystem = createModalSystem();
+const ModalHost = defaultSystem.ModalHost;
+const createModal = defaultSystem.createModal;
+const confirmModal = defaultSystem.confirmModal;
+
+//#endregion
+export { ModalHost, confirmModal, createModal, createModalSystem };
+//# sourceMappingURL=imperative.mjs.map

package/es/base-ui/Modal/imperative.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"imperative.mjs","names":["modalStack: ModalStackEntry[]","EMPTY: ModalStackEntry[]"],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport { styles } from './style';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n  id: string;\n  props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n  children,\n  root,\n}: {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n}) => {\n  const appElement = useAppElement();\n  const container = root ?? appElement ?? document.body;\n  return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n  const { close } = useModalContext();\n  const [loading, setLoading] = useState(false);\n\n  const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n  const { danger, className: okUserCls, ...restOkProps } = okButtonProps ?? {};\n\n  const handleCancel = useCallback(() => {\n    close();\n    onCancel?.();\n  }, [close, onCancel]);\n\n  const handleOk = useCallback(async () => {\n    if (onOk) {\n      try {\n        const result = onOk();\n        if (result && typeof (result as any).then === 'function') {\n          setLoading(true);\n          await result;\n          setLoading(false);\n        }\n      } catch {\n        setLoading(false);\n        return;\n      }\n    }\n    close();\n  }, [close, onOk]);\n\n  return (\n    <>\n      {content && <div style={{ padding: '16px 24px' }}>{content}</div>}\n      <ModalFooter>\n        <button\n          className={cx(styles.buttonBase, styles.cancelButton)}\n          type=\"button\"\n          onClick={handleCancel}\n        >\n          {cancelText}\n        </button>\n        <button\n          {...restOkProps}\n          disabled={loading}\n          type=\"button\"\n          className={cx(\n            styles.buttonBase,\n            danger ? styles.dangerOkButton : styles.okButton,\n            okUserCls,\n          )}\n          onClick={handleOk}\n        >\n          {loading && <span className={styles.loadingSpinner} />}\n          {okText}\n        </button>\n      </ModalFooter>\n    </>\n  );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n  root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n  confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n  createModal: (props: ImperativeModalProps) => ModalInstance;\n  ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n  const systemId = systemSeed++;\n  const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n  // --- Stack state (isolated per system) ---\n  let modalStack: ModalStackEntry[] = [];\n  let modalSeed = 0;\n  const listeners = new Set<() => void>();\n\n  const notify = () => listeners.forEach((l) => l());\n  const subscribe = (l: () => void) => {\n    listeners.add(l);\n    return () => listeners.delete(l);\n  };\n  const EMPTY: ModalStackEntry[] = [];\n  const getSnapshot = () => modalStack;\n  const getServerSnapshot = () => EMPTY;\n\n  // --- Stack operations ---\n\n  const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n    let changed = false;\n    modalStack = modalStack.map((item) => {\n      if (item.id !== id) return item;\n      changed = true;\n      return { ...item, props: { ...item.props, ...next } };\n    });\n    if (changed) notify();\n  };\n\n  const closeModal = (id: string) => {\n    updateModal(id, { open: false });\n  };\n\n  const destroyModal = (id: string) => {\n    const next = modalStack.filter((item) => item.id !== id);\n    if (next.length === modalStack.length) return;\n    modalStack = next;\n    notify();\n  };\n\n  // --- Stack Item (captures operations via closure) ---\n\n  const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n    const { id, props } = entry;\n    const {\n      children,\n      classNames,\n      content,\n      footer,\n      maskClosable,\n      onOpenChange,\n      onOpenChangeComplete,\n      open,\n      styles: semanticStyles,\n      title,\n      width,\n    } = props;\n\n    const isOpen = open ?? true;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails?: { reason: string }) => {\n        if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n        if (!nextOpen) closeModal(id);\n        onOpenChange?.(nextOpen);\n      },\n      [id, maskClosable, onOpenChange],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      onOpenChangeComplete?.(false);\n      destroyModal(id);\n    }, [id, onOpenChangeComplete]);\n\n    const close = useCallback(() => closeModal(id), [id]);\n    const setCanDismissByClickOutside = useCallback(\n      (value: boolean) => updateModal(id, { maskClosable: value }),\n      [id],\n    );\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n\n    return (\n      <ModalContext value={{ close, setCanDismissByClickOutside }}>\n        <ModalRoot\n          open={isOpen}\n          onExitComplete={handleExitComplete}\n          onOpenChange={handleOpenChange}\n        >\n          <ModalPortal>\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n            <ModalPopup\n              className={classNames?.popup}\n              popupStyle={semanticStyles?.popup}\n              width={width}\n            >\n              {showTitle && (\n                <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                  <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n                </ModalHeader>\n              )}\n              <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n                {content ?? children}\n              </ModalContent>\n              {footer}\n            </ModalPopup>\n          </ModalPortal>\n        </ModalRoot>\n      </ModalContext>\n    );\n  });\n  StackItem.displayName = 'ModalStackItem';\n\n  const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n    const isClient = useIsClient();\n    if (!isClient) return null;\n    return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n  });\n  StackRenderer.displayName = 'ModalStackRenderer';\n\n  // --- ModalHost ---\n\n  const Host = ({ root }: ModalHostProps) => {\n    const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const isClient = useIsClient();\n\n    useEffect(() => {\n      if (!isClient) return;\n      const scope = root ?? document.body;\n      return registerDevSingleton(singletonName, scope);\n    }, [isClient, root]);\n\n    if (!isClient) return null;\n    if (stack.length === 0) return null;\n\n    return (\n      <ModalPortalWrapper root={root}>\n        <StackRenderer stack={stack} />\n      </ModalPortalWrapper>\n    );\n  };\n\n  // --- createModal ---\n\n  const create = (props: ImperativeModalProps): ModalInstance => {\n    const id = `base-modal-${Date.now()}-${modalSeed++}`;\n    modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n    notify();\n\n    return {\n      close: () => closeModal(id),\n      destroy: () => destroyModal(id),\n      setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n      update: (nextProps) => updateModal(id, nextProps),\n    };\n  };\n\n  // --- confirmModal ---\n\n  const confirm = (config: ModalConfirmConfig) => {\n    const instance = create({\n      content: <ConfirmBody config={config} />,\n      styles: { content: { padding: 0 } },\n      title: config.title,\n      width: 420,\n    });\n\n    return {\n      close: instance.close,\n      destroy: instance.destroy,\n    };\n  };\n\n  return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":";;;;;;;;;;;;;;AAmCA,MAAM,sBAAsB,EAC1B,UACA,WAII;CACJ,MAAM,aAAa,eAAe;AAElC,QAAO,aAAa,UADF,QAAQ,cAAc,SAAS,KACT;;AAG1C,MAAM,eAAe,EAAE,aAA6C;CAClE,MAAM,EAAE,UAAU,iBAAiB;CACnC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,EAAE,aAAa,UAAU,SAAS,eAAe,SAAS,MAAM,UAAU,SAAS;CAEzF,MAAM,EAAE,QAAQ,WAAW,WAAW,GAAG,gBAAgB,iBAAiB,EAAE;CAE5E,MAAM,eAAe,kBAAkB;AACrC,SAAO;AACP,cAAY;IACX,CAAC,OAAO,SAAS,CAAC;CAErB,MAAM,WAAW,YAAY,YAAY;AACvC,MAAI,KACF,KAAI;GACF,MAAM,SAAS,MAAM;AACrB,OAAI,UAAU,OAAQ,OAAe,SAAS,YAAY;AACxD,eAAW,KAAK;AAChB,UAAM;AACN,eAAW,MAAM;;UAEb;AACN,cAAW,MAAM;AACjB;;AAGJ,SAAO;IACN,CAAC,OAAO,KAAK,CAAC;AAEjB,QACE,8CACG,WAAW,oBAAC;EAAI,OAAO,EAAE,SAAS,aAAa;YAAG;GAAc,EACjE,qBAAC,0BACC,oBAAC;EACC,WAAW,GAAG,OAAO,YAAY,OAAO,aAAa;EACrD,MAAK;EACL,SAAS;YAER;GACM,EACT,qBAAC;EACC,GAAI;EACJ,UAAU;EACV,MAAK;EACL,WAAW,GACT,OAAO,YACP,SAAS,OAAO,iBAAiB,OAAO,UACxC,UACD;EACD,SAAS;aAER,WAAW,oBAAC,UAAK,WAAW,OAAO,iBAAkB,EACrD;GACM,IACG,IACb;;AAGP,YAAY,cAAc;AAc1B,IAAI,aAAa;AAEjB,SAAgB,oBAAiC;CAC/C,MAAM,WAAW;CACjB,MAAM,gBAAgB,aAAa,IAAI,kBAAkB,iBAAiB;CAG1E,IAAIA,aAAgC,EAAE;CACtC,IAAI,YAAY;CAChB,MAAM,4BAAY,IAAI,KAAiB;CAEvC,MAAM,eAAe,UAAU,SAAS,MAAM,GAAG,CAAC;CAClD,MAAM,aAAa,MAAkB;AACnC,YAAU,IAAI,EAAE;AAChB,eAAa,UAAU,OAAO,EAAE;;CAElC,MAAMC,QAA2B,EAAE;CACnC,MAAM,oBAAoB;CAC1B,MAAM,0BAA0B;CAIhC,MAAM,eAAe,IAAY,SAAwC;EACvE,IAAI,UAAU;AACd,eAAa,WAAW,KAAK,SAAS;AACpC,OAAI,KAAK,OAAO,GAAI,QAAO;AAC3B,aAAU;AACV,UAAO;IAAE,GAAG;IAAM,OAAO;KAAE,GAAG,KAAK;KAAO,GAAG;KAAM;IAAE;IACrD;AACF,MAAI,QAAS,SAAQ;;CAGvB,MAAM,cAAc,OAAe;AACjC,cAAY,IAAI,EAAE,MAAM,OAAO,CAAC;;CAGlC,MAAM,gBAAgB,OAAe;EACnC,MAAM,OAAO,WAAW,QAAQ,SAAS,KAAK,OAAO,GAAG;AACxD,MAAI,KAAK,WAAW,WAAW,OAAQ;AACvC,eAAa;AACb,UAAQ;;CAKV,MAAM,YAAY,MAAM,EAAE,YAAwC;EAChE,MAAM,EAAE,IAAI,UAAU;EACtB,MAAM,EACJ,UACA,YACA,SACA,QACA,cACA,cACA,sBACA,MACA,QAAQ,gBACR,OACA,UACE;EAEJ,MAAM,SAAS,QAAQ;EAEvB,MAAM,mBAAmB,aACtB,UAAmB,iBAAsC;AACxD,OAAI,CAAC,YAAY,iBAAiB,SAAS,cAAc,WAAW,gBAAiB;AACrF,OAAI,CAAC,SAAU,YAAW,GAAG;AAC7B,kBAAe,SAAS;KAE1B;GAAC;GAAI;GAAc;GAAa,CACjC;EAED,MAAM,qBAAqB,kBAAkB;AAC3C,0BAAuB,MAAM;AAC7B,gBAAa,GAAG;KACf,CAAC,IAAI,qBAAqB,CAAC;EAE9B,MAAM,QAAQ,kBAAkB,WAAW,GAAG,EAAE,CAAC,GAAG,CAAC;EACrD,MAAM,8BAA8B,aACjC,UAAmB,YAAY,IAAI,EAAE,cAAc,OAAO,CAAC,EAC5D,CAAC,GAAG,CACL;EAED,MAAM,YAAY,UAAU,UAAa,UAAU,SAAS,UAAU;AAEtE,SACE,oBAAC;GAAa,OAAO;IAAE;IAAO;IAA6B;aACzD,oBAAC;IACC,MAAM;IACN,gBAAgB;IAChB,cAAc;cAEd,qBAAC,0BACC,oBAAC;KAAc,WAAW,YAAY;KAAU,OAAO,gBAAgB;MAAY,EACnF,qBAAC;KACC,WAAW,YAAY;KACvB,YAAY,gBAAgB;KACrB;;MAEN,aACC,qBAAC;OAAY,WAAW,YAAY;OAAQ,OAAO,gBAAgB;kBACjE,oBAAC;QAAW,WAAW,YAAY;QAAO,OAAO,gBAAgB;kBAC9D;SACU,EACb,oBAAC;QAAW,WAAW,YAAY;QAAO,OAAO,gBAAgB;SAAS;QAC9D;MAEhB,oBAAC;OAAa,WAAW,YAAY;OAAS,OAAO,gBAAgB;iBAClE,WAAW;QACC;MACd;;MACU,IACD;KACJ;IACC;GAEjB;AACF,WAAU,cAAc;CAExB,MAAM,gBAAgB,MAAM,EAAE,YAA0C;AAEtE,MAAI,CADa,aAAa,CACf,QAAO;AACtB,SAAO,MAAM,KAAK,UAAU,oBAAC,aAAiB,SAAY,MAAM,GAAM,CAAC;GACvE;AACF,eAAc,cAAc;CAI5B,MAAM,QAAQ,EAAE,WAA2B;EACzC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,kBAAkB;EAC7E,MAAM,WAAW,aAAa;AAE9B,kBAAgB;AACd,OAAI,CAAC,SAAU;AAEf,UAAO,qBAAqB,eADd,QAAQ,SAAS,KACkB;KAChD,CAAC,UAAU,KAAK,CAAC;AAEpB,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,oBAAC;GAAyB;aACxB,oBAAC,iBAAqB,QAAS;IACZ;;CAMzB,MAAM,UAAU,UAA+C;EAC7D,MAAM,KAAK,cAAc,KAAK,KAAK,CAAC,GAAG;AACvC,eAAa,CAAC,GAAG,YAAY;GAAE;GAAI,OAAO;IAAE,GAAG;IAAO,MAAM,MAAM,QAAQ;IAAM;GAAE,CAAC;AACnF,UAAQ;AAER,SAAO;GACL,aAAa,WAAW,GAAG;GAC3B,eAAe,aAAa,GAAG;GAC/B,8BAA8B,UAAU,YAAY,IAAI,EAAE,cAAc,OAAO,CAAC;GAChF,SAAS,cAAc,YAAY,IAAI,UAAU;GAClD;;CAKH,MAAM,WAAW,WAA+B;EAC9C,MAAM,WAAW,OAAO;GACtB,SAAS,oBAAC,eAAoB,SAAU;GACxC,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE;GACnC,OAAO,OAAO;GACd,OAAO;GACR,CAAC;AAEF,SAAO;GACL,OAAO,SAAS;GAChB,SAAS,SAAS;GACnB;;AAGH,QAAO;EAAE,WAAW;EAAM,cAAc;EAAS,aAAa;EAAQ;;AAKxE,MAAM,gBAAgB,mBAAmB;AACzC,MAAa,YAAY,cAAc;AACvC,MAAa,cAAc,cAAc;AACzC,MAAa,eAAe,cAAc"}

package/es/base-ui/Modal/index.d.mts

@@ -0,0 +1,6 @@
+import { ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalContent, ModalContentProps, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, useModalActions, useModalOpen } from "./atoms.mjs";
+import { backdropTransition, modalMotionConfig } from "./constants.mjs";
+import { BaseModalProps, ImperativeModalProps, ModalComponentProps, ModalConfirmConfig, ModalContextValue, ModalInstance } from "./type.mjs";
+import { ModalContext, useModalContext } from "./context.mjs";
+import { ModalHost, ModalHostProps, ModalSystem, confirmModal, createModal, createModalSystem } from "./imperative.mjs";
+import { Modal } from "./Modal.mjs";

package/es/base-ui/Modal/style.mjs

@@ -0,0 +1,295 @@
+import { createStaticStyles } from "antd-style";
+
+//#region src/base-ui/Modal/style.ts
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	backdrop: css$1`
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+
+    background: color-mix(in srgb, ${cssVar$1.colorBgContainer} 60%, transparent);
+
+    transition: opacity 150ms ease-out;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      opacity: 0;
+    }
+  `,
+	close: css$1`
+    cursor: pointer;
+
+    position: absolute;
+    inset-block-start: 12px;
+    inset-inline-end: 12px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: ${cssVar$1.borderRadiusSM};
+
+    color: ${cssVar$1.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 150ms ease-out;
+
+    &:hover {
+      color: ${cssVar$1.colorText};
+      background: ${cssVar$1.colorFillSecondary};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+  `,
+	closeInline: css$1`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: ${cssVar$1.borderRadiusSM};
+
+    color: ${cssVar$1.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 150ms ease-out;
+
+    &:hover {
+      color: ${cssVar$1.colorText};
+      background: ${cssVar$1.colorFillSecondary};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+  `,
+	content: css$1`
+    overflow: hidden auto;
+    padding-block: 12px;
+    padding-inline: 16px;
+  `,
+	footer: css$1`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-block-start: 1px solid ${cssVar$1.colorBorderSecondary};
+  `,
+	header: css$1`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
+  `,
+	headerDraggable: css$1`
+    cursor: default;
+    user-select: none;
+  `,
+	popup: css$1`
+    pointer-events: none;
+
+    position: fixed;
+    z-index: 1001;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+	popupInner: css$1`
+    pointer-events: auto;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    width: calc(100% - 32px);
+    max-width: 520px;
+    max-height: calc(100dvh - 64px);
+    border: 1px solid ${cssVar$1.colorBorderSecondary};
+    border-radius: 12px;
+
+    background: ${cssVar$1.colorBgContainer};
+    box-shadow: ${cssVar$1.boxShadow};
+
+    transition:
+      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 150ms ease-out;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: scale(0.96) translateY(4px);
+      opacity: 0;
+    }
+  `,
+	title: css$1`
+    margin: 0;
+
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.5;
+    color: ${cssVar$1.colorText};
+  `,
+	buttonBase: css$1`
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+
+    height: 36px;
+    padding-block: 0;
+    padding-inline: 16px;
+    border: 1px solid ${cssVar$1.colorBorder};
+    border-radius: ${cssVar$1.borderRadiusSM};
+
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1;
+
+    transition: all 150ms ease-out;
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+	cancelButton: css$1`
+    color: ${cssVar$1.colorText};
+    background: ${cssVar$1.colorBgContainer};
+
+    &:hover:not(:disabled) {
+      border-color: ${cssVar$1.colorPrimaryBorder};
+      color: ${cssVar$1.colorPrimaryText};
+    }
+  `,
+	loadingSpinner: css$1`
+    @keyframes modal-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    display: inline-block;
+
+    width: 14px;
+    height: 14px;
+    border: 2px solid currentcolor;
+    border-block-start-color: transparent;
+    border-radius: 50%;
+
+    animation: modal-spin 0.6s linear infinite;
+  `,
+	dangerOkButton: css$1`
+    border-color: ${cssVar$1.colorError};
+    color: #fff;
+    background: ${cssVar$1.colorError};
+
+    &:hover:not(:disabled) {
+      border-color: ${cssVar$1.colorErrorHover};
+      background: ${cssVar$1.colorErrorHover};
+    }
+
+    &:active:not(:disabled) {
+      border-color: ${cssVar$1.colorErrorActive};
+      background: ${cssVar$1.colorErrorActive};
+    }
+  `,
+	fullscreenPopupInner: css$1`
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100dvh !important;
+    max-height: 100dvh !important;
+    border: none;
+    border-radius: 0;
+  `,
+	fullscreenToggle: css$1`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: ${cssVar$1.borderRadiusSM};
+
+    color: ${cssVar$1.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 150ms ease-out;
+
+    &:hover {
+      color: ${cssVar$1.colorText};
+      background: ${cssVar$1.colorFillSecondary};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+  `,
+	headerActions: css$1`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-inline-end: -4px;
+  `,
+	okButton: css$1`
+    border-color: ${cssVar$1.colorPrimary};
+    color: #fff;
+    background: ${cssVar$1.colorPrimary};
+
+    &:hover:not(:disabled) {
+      border-color: ${cssVar$1.colorPrimaryHover};
+      background: ${cssVar$1.colorPrimaryHover};
+    }
+
+    &:active:not(:disabled) {
+      border-color: ${cssVar$1.colorPrimaryActive};
+      background: ${cssVar$1.colorPrimaryActive};
+    }
+  `,
+	viewport: css$1`
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+    overflow: auto;
+  `
+}));
+
+//#endregion
+export { styles };
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Modal/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1000;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 150ms ease-out;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 12px;\n    inset-inline-end: 12px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  closeInline: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n\n  headerDraggable: css`\n    cursor: default;\n    user-select: none;\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1001;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  popupInner: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    max-width: 520px;\n    max-height: calc(100dvh - 64px);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 12px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadow};\n\n    transition:\n      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 150ms ease-out;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scale(0.96) translateY(4px);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  buttonBase: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    height: 36px;\n    padding-block: 0;\n    padding-inline: 16px;\n    border: 1px solid ${cssVar.colorBorder};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition: all 150ms ease-out;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  cancelButton: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  loadingSpinner: css`\n    @keyframes modal-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 14px;\n    height: 14px;\n    border: 2px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: modal-spin 0.6s linear infinite;\n  `,\n\n  dangerOkButton: css`\n    border-color: ${cssVar.colorError};\n    color: #fff;\n    background: ${cssVar.colorError};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  fullscreenPopupInner: css`\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 100dvh !important;\n    max-height: 100dvh !important;\n    border: none;\n    border-radius: 0;\n  `,\n\n  fullscreenToggle: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  okButton: css`\n    border-color: ${cssVar.colorPrimary};\n    color: #fff;\n    background: ${cssVar.colorPrimary};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1000;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,UAAU,KAAG;;;;;qCAKsBA,SAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,KAAG;;;;;;;;;;;;;;;qBAeSA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,aAAa,KAAG;;;;;;;;;;;qBAWGA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,SAAS,KAAG;;;;;CAMZ,QAAQ,KAAG;;;;;;;;oCAQuBA,SAAO,qBAAqB;;CAG9D,QAAQ,KAAG;;;;;;;kCAOqBA,SAAO,qBAAqB;;CAG5D,iBAAiB,KAAG;;;;CAKpB,OAAO,KAAG;;;;;;;;;;;CAYV,YAAY,KAAG;;;;;;;;;;;;wBAYOA,SAAO,qBAAqB;;;kBAGlCA,SAAO,iBAAiB;kBACxBA,SAAO,UAAU;;;;;;;;;;;;CAajC,OAAO,KAAG;;;;;;aAMCA,SAAO,UAAU;;CAG5B,YAAY,KAAG;;;;;;;;;;;wBAWOA,SAAO,YAAY;qBACtBA,SAAO,eAAe;;;;;;;;;2BAShBA,SAAO,mBAAmB;;;;;;;;;CAUnD,cAAc,KAAG;aACNA,SAAO,UAAU;kBACZA,SAAO,iBAAiB;;;sBAGpBA,SAAO,mBAAmB;eACjCA,SAAO,iBAAiB;;;CAIrC,gBAAgB,KAAG;;;;;;;;;;;;;;;;;CAkBnB,gBAAgB,KAAG;oBACDA,SAAO,WAAW;;kBAEpBA,SAAO,WAAW;;;sBAGdA,SAAO,gBAAgB;oBACzBA,SAAO,gBAAgB;;;;sBAIrBA,SAAO,iBAAiB;oBAC1BA,SAAO,iBAAiB;;;CAI1C,sBAAsB,KAAG;;;;;;;;CASzB,kBAAkB,KAAG;;;;;;;;;;;qBAWFA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,eAAe,KAAG;;;;;;CAOlB,UAAU,KAAG;oBACKA,SAAO,aAAa;;kBAEtBA,SAAO,aAAa;;;sBAGhBA,SAAO,kBAAkB;oBAC3BA,SAAO,kBAAkB;;;;sBAIvBA,SAAO,mBAAmB;oBAC5BA,SAAO,mBAAmB;;;CAI5C,UAAU,KAAG;;;;;;CAMd,EAAE"}