@lobehub/ui 5.0.0 → 5.1.0

package/es/awesome/SpotlightCard/SpotlightCard.d.mts

@@ -1,8 +1,8 @@
 import { SpotlightCardProps } from "./type.mjs";
-import * as react136 from "react";
+import * as react141 from "react";
 
 //#region src/awesome/SpotlightCard/SpotlightCard.d.ts
-declare const SpotlightCard: react136.NamedExoticComponent<SpotlightCardProps<any>>;
+declare const SpotlightCard: react141.NamedExoticComponent<SpotlightCardProps<any>>;
 //#endregion
 export { SpotlightCard };
 //# sourceMappingURL=SpotlightCard.d.mts.map

package/es/awesome/TypewriterEffect/TypewriterEffect.d.mts

@@ -1,8 +1,8 @@
 import { TypewriterEffectProps } from "./type.mjs";
-import * as react135 from "react";
+import * as react132 from "react";
 
 //#region src/awesome/TypewriterEffect/TypewriterEffect.d.ts
-declare const TypewriterEffect: react135.NamedExoticComponent<TypewriterEffectProps>;
+declare const TypewriterEffect: react132.NamedExoticComponent<TypewriterEffectProps>;
 //#endregion
 export { TypewriterEffect };
 //# sourceMappingURL=TypewriterEffect.d.mts.map

package/es/base-ui/ContextMenu/ContextMenuHost.d.mts

@@ -1,8 +1,8 @@
-import * as react156 from "react";
-import * as react_jsx_runtime61 from "react/jsx-runtime";
+import * as react158 from "react";
+import * as react_jsx_runtime72 from "react/jsx-runtime";
 
 //#region src/base-ui/ContextMenu/ContextMenuHost.d.ts
-declare const ContextMenuHost: react156.MemoExoticComponent<() => react_jsx_runtime61.JSX.Element | null>;
+declare const ContextMenuHost: react158.MemoExoticComponent<() => react_jsx_runtime72.JSX.Element | null>;
 //#endregion
 export { ContextMenuHost };
 //# sourceMappingURL=ContextMenuHost.d.mts.map

package/es/base-ui/DropdownMenu/DropdownMenu.d.mts

@@ -1,8 +1,8 @@
 import { DropdownMenuProps } from "./type.mjs";
-import * as react149 from "react";
+import * as react130 from "react";
 
 //#region src/base-ui/DropdownMenu/DropdownMenu.d.ts
-declare const DropdownMenu: react149.NamedExoticComponent<DropdownMenuProps<unknown>>;
+declare const DropdownMenu: react130.NamedExoticComponent<DropdownMenuProps<unknown>>;
 //#endregion
 export { DropdownMenu };
 //# sourceMappingURL=DropdownMenu.d.mts.map

package/es/base-ui/DropdownMenu/atoms.d.mts

@@ -1,6 +1,6 @@
 import { DropdownMenuPlacement } from "./type.mjs";
 import React from "react";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 import * as _base_ui_react_menu0 from "@base-ui/react/menu";
 import { Menu } from "@base-ui/react/menu";
 
@@ -18,7 +18,7 @@ declare const DropdownMenuTrigger: {
     nativeButton,
     ref: refProp,
     ...rest
-  }: DropdownMenuTriggerProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuTriggerProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {
@@ -31,7 +31,7 @@ declare const DropdownMenuPortal: {
   ({
     container,
     ...rest
-  }: DropdownMenuPortalProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuPortalProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {
@@ -48,7 +48,7 @@ declare const DropdownMenuPositioner: {
     sideOffset,
     children,
     ...rest
-  }: DropdownMenuPositionerProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuPositionerProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;
@@ -56,7 +56,7 @@ declare const DropdownMenuPopup: {
   ({
     className,
     ...rest
-  }: DropdownMenuPopupProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuPopupProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & {
@@ -67,7 +67,7 @@ declare const DropdownMenuItem: {
     className,
     danger,
     ...rest
-  }: DropdownMenuItemProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuItemProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {
@@ -78,7 +78,7 @@ declare const DropdownMenuCheckboxItemPrimitive: {
     className,
     danger,
     ...rest
-  }: DropdownMenuCheckboxItemProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuCheckboxItemProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;
@@ -86,7 +86,7 @@ declare const DropdownMenuSeparator: {
   ({
     className,
     ...rest
-  }: DropdownMenuSeparatorProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuSeparatorProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<_base_ui_react_menu0.MenuGroupProps & React.RefAttributes<Element>>;
@@ -95,7 +95,7 @@ declare const DropdownMenuGroupLabel: {
   ({
     className,
     ...rest
-  }: DropdownMenuGroupLabelProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuGroupLabelProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {
@@ -106,7 +106,7 @@ declare const DropdownMenuSubmenuTrigger: {
     className,
     danger,
     ...rest
-  }: DropdownMenuSubmenuTriggerProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuSubmenuTriggerProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;
@@ -114,7 +114,7 @@ declare const DropdownMenuItemContent: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemContentProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuItemContentProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -122,7 +122,7 @@ declare const DropdownMenuItemIcon: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemIconProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuItemIconProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;
@@ -130,7 +130,7 @@ declare const DropdownMenuItemLabelGroup: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemLabelGroupProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuItemLabelGroupProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -138,7 +138,7 @@ declare const DropdownMenuItemLabel: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemLabelProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuItemLabelProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -146,7 +146,7 @@ declare const DropdownMenuItemDesc: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemDescProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuItemDescProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -154,7 +154,7 @@ declare const DropdownMenuItemExtra: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemExtraProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuItemExtraProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -162,7 +162,7 @@ declare const DropdownMenuSubmenuArrow: {
   ({
     className,
     ...rest
-  }: DropdownMenuSubmenuArrowProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuSubmenuArrowProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSwitchItemProps = Omit<React.ComponentProps<typeof Menu.Item>, 'onClick'> & {
@@ -183,7 +183,7 @@ declare const DropdownMenuSwitchItem: {
     onCheckedChange,
     children,
     ...rest
-  }: DropdownMenuSwitchItemProps): react_jsx_runtime26.JSX.Element;
+  }: DropdownMenuSwitchItemProps): react_jsx_runtime20.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -0,0 +1,8 @@
+import { ModalComponentProps } from "./type.mjs";
+import React from "react";
+
+//#region src/base-ui/Modal/Modal.d.ts
+declare const Modal: React.NamedExoticComponent<ModalComponentProps>;
+//#endregion
+export { Modal };
+//# sourceMappingURL=Modal.d.mts.map

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

@@ -0,0 +1,230 @@
+'use client';
+
+import { stopPropagation } from "../../utils/dom.mjs";
+import { styles } from "./style.mjs";
+import { ModalBackdrop, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { useDragControls } from "motion/react";
+import { Maximize2, Minimize2, X } from "lucide-react";
+
+//#region src/base-ui/Modal/Modal.tsx
+const OkBtn = ({ confirmLoading, okButtonProps, okText, onOk }) => {
+	const { className: userCls, danger, disabled: userDisabled, onClick: userOnClick, ...restOk } = okButtonProps ?? {};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		...restOk,
+		className: cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls),
+		disabled: confirmLoading || userDisabled,
+		onClick: (e) => {
+			onOk(e);
+			userOnClick?.(e);
+		},
+		children: [confirmLoading && /* @__PURE__ */ jsx("span", { className: styles.loadingSpinner }), okText]
+	});
+};
+const CancelBtn = ({ cancelButtonProps, cancelText, onCancel }) => {
+	const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...restCancel,
+		className: cx(styles.buttonBase, styles.cancelButton, userCls),
+		onClick: (e) => {
+			onCancel(e);
+			userOnClick?.(e);
+		},
+		children: cancelText
+	});
+};
+const Modal = memo(({ open, title, children, onOk, onCancel, okText = "OK", cancelText = "Cancel", okButtonProps, cancelButtonProps, confirmLoading, footer, width, height, maskClosable = true, closable = true, closeIcon, className, style, classNames, styles: semanticStyles, zIndex, afterClose, afterOpenChange, loading, getContainer, mask = true, keyboard, draggable = true, allowFullscreen = false }) => {
+	const dragControls = useDragControls();
+	const constraintsRef = useRef(null);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	const [isDragging, setIsDragging] = useState(false);
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (!open) return;
+		if (!nextOpen && keyboard === false && eventDetails.reason === "escape-key") return;
+		if (!nextOpen && !maskClosable && eventDetails.reason === "outside-press") return;
+		if (!nextOpen) onCancel?.(new MouseEvent("click"));
+	}, [
+		onCancel,
+		keyboard,
+		maskClosable,
+		open
+	]);
+	const handleExitComplete = useCallback(() => {
+		setIsFullscreen(false);
+		afterClose?.();
+		afterOpenChange?.(false);
+	}, [afterClose, afterOpenChange]);
+	const handleAnimationComplete = useCallback(() => {
+		if (open) afterOpenChange?.(true);
+	}, [open, afterOpenChange]);
+	const handleDragStart = useCallback((e) => {
+		if (draggable && !isFullscreen) {
+			dragControls.start(e);
+			setIsDragging(true);
+		}
+	}, [
+		draggable,
+		dragControls,
+		isFullscreen
+	]);
+	const handleDragEnd = useCallback(() => {
+		setIsDragging(false);
+	}, []);
+	const handleOk = useCallback((e) => {
+		onOk?.(e);
+	}, [onOk]);
+	const handleCancel = useCallback((e) => {
+		onCancel?.(e);
+	}, [onCancel]);
+	const footerNode = useMemo(() => {
+		if (footer === false || footer === null) return null;
+		const cancelBtnNode = /* @__PURE__ */ jsx(CancelBtn, {
+			cancelButtonProps,
+			cancelText,
+			onCancel: handleCancel
+		});
+		const okBtnNode = /* @__PURE__ */ jsx(OkBtn, {
+			confirmLoading,
+			okButtonProps,
+			okText,
+			onOk: handleOk
+		});
+		const defaultFooter = /* @__PURE__ */ jsxs(Fragment$1, { children: [cancelBtnNode, okBtnNode] });
+		if (typeof footer === "function") {
+			const BoundCancelBtn = () => cancelBtnNode;
+			const BoundOkBtn = () => okBtnNode;
+			return footer(defaultFooter, {
+				CancelBtn: BoundCancelBtn,
+				OkBtn: BoundOkBtn
+			});
+		}
+		return footer ?? defaultFooter;
+	}, [
+		footer,
+		cancelButtonProps,
+		cancelText,
+		handleCancel,
+		confirmLoading,
+		okButtonProps,
+		okText,
+		handleOk
+	]);
+	const container = getContainer === false ? void 0 : getContainer ?? void 0;
+	const backdropZIndex = zIndex ? { zIndex } : void 0;
+	const popupZIndex = zIndex ? { zIndex: (zIndex || 1e3) + 1 } : void 0;
+	const shouldDrag = draggable && !isFullscreen;
+	const dragProps = shouldDrag ? {
+		drag: true,
+		dragConstraints: constraintsRef,
+		dragControls,
+		dragElastic: 0,
+		dragListener: false,
+		dragMomentum: false,
+		whileDrag: { cursor: "grabbing" }
+	} : {};
+	const showTitle = title !== void 0 && title !== false && title !== null;
+	const showHeader = showTitle || closable || allowFullscreen;
+	const hasHeight = height !== void 0;
+	const panelStyle = {
+		...hasHeight && !isFullscreen ? { height } : {},
+		...style
+	};
+	return /* @__PURE__ */ jsx(ModalRoot, {
+		open: open ?? false,
+		onExitComplete: handleExitComplete,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(ModalPortal, {
+			container,
+			children: [mask && /* @__PURE__ */ jsx(ModalBackdrop, {
+				className: classNames?.mask,
+				style: {
+					...backdropZIndex,
+					...semanticStyles?.mask
+				}
+			}), /* @__PURE__ */ jsxs(ModalPopup, {
+				className: classNames?.wrapper,
+				panelClassName: cx(className, isFullscreen && styles.fullscreenPopupInner),
+				popupStyle: {
+					...popupZIndex,
+					...semanticStyles?.wrapper
+				},
+				ref: constraintsRef,
+				style: panelStyle,
+				width: isFullscreen ? void 0 : width,
+				motionProps: {
+					...dragProps,
+					onAnimationComplete: handleAnimationComplete
+				},
+				children: [
+					showHeader && /* @__PURE__ */ jsxs(ModalHeader, {
+						className: cx(classNames?.header, shouldDrag && styles.headerDraggable),
+						style: {
+							...isDragging ? { cursor: "grabbing" } : {},
+							...semanticStyles?.header
+						},
+						onPointerCancel: handleDragEnd,
+						onPointerDown: handleDragStart,
+						onPointerUp: handleDragEnd,
+						children: [showTitle ? /* @__PURE__ */ jsx(ModalTitle, {
+							className: classNames?.title,
+							style: semanticStyles?.title,
+							children: title
+						}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+							className: styles.headerActions,
+							onPointerDown: stopPropagation,
+							children: [allowFullscreen && /* @__PURE__ */ jsx("button", {
+								"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
+								className: styles.fullscreenToggle,
+								type: "button",
+								onClick: () => setIsFullscreen((prev) => !prev),
+								children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { size: 14 }) : /* @__PURE__ */ jsx(Maximize2, { size: 14 })
+							}), closable && /* @__PURE__ */ jsx("button", {
+								"aria-label": "Close",
+								className: styles.closeInline,
+								type: "button",
+								onClick: handleCancel,
+								children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 18 })
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ModalContent, {
+						className: classNames?.body,
+						style: {
+							...hasHeight || isFullscreen ? { flex: 1 } : {},
+							...semanticStyles?.body
+						},
+						children: loading ? /* @__PURE__ */ jsx("div", {
+							style: {
+								display: "flex",
+								justifyContent: "center",
+								padding: "32px 0"
+							},
+							children: /* @__PURE__ */ jsx("span", {
+								className: styles.loadingSpinner,
+								style: {
+									height: 24,
+									width: 24
+								}
+							})
+						}) : children
+					}),
+					footerNode !== null && /* @__PURE__ */ jsx(ModalFooter, {
+						className: classNames?.footer,
+						style: semanticStyles?.footer,
+						children: footerNode
+					})
+				]
+			})]
+		})
+	});
+});
+Modal.displayName = "Modal";
+var Modal_default = Modal;
+
+//#endregion
+export { Modal_default as default };
+//# sourceMappingURL=Modal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","names":["OkBtn: React.FC<OkBtnProps>","CancelBtn: React.FC<CancelBtnProps>","BoundCancelBtn: React.FC","BoundOkBtn: React.FC","panelStyle: React.CSSProperties"],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport {\n  ModalBackdrop,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n  confirmLoading?: boolean;\n  okButtonProps?: ModalComponentProps['okButtonProps'];\n  okText?: React.ReactNode;\n  onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n  const {\n    className: userCls,\n    danger,\n    disabled: userDisabled,\n    onClick: userOnClick,\n    ...restOk\n  } = okButtonProps ?? {};\n  return (\n    <button\n      type=\"button\"\n      {...restOk}\n      className={cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls)}\n      disabled={confirmLoading || userDisabled}\n      onClick={(e) => {\n        onOk(e);\n        userOnClick?.(e);\n      }}\n    >\n      {confirmLoading && <span className={styles.loadingSpinner} />}\n      {okText}\n    </button>\n  );\n};\ninterface CancelBtnProps {\n  cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n  cancelText?: React.ReactNode;\n  onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n  const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n  return (\n    <button\n      type=\"button\"\n      {...restCancel}\n      className={cx(styles.buttonBase, styles.cancelButton, userCls)}\n      onClick={(e) => {\n        onCancel(e);\n        userOnClick?.(e);\n      }}\n    >\n      {cancelText}\n    </button>\n  );\n};\n\nconst Modal = memo<ModalComponentProps>(\n  ({\n    open,\n    title,\n    children,\n    onOk,\n    onCancel,\n    okText = 'OK',\n    cancelText = 'Cancel',\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    footer,\n    width,\n    height,\n    maskClosable = true,\n    closable = true,\n    closeIcon,\n    className,\n    style,\n    classNames,\n    styles: semanticStyles,\n    zIndex,\n    afterClose,\n    afterOpenChange,\n    loading,\n    getContainer,\n    mask = true,\n    keyboard,\n    draggable = true,\n    allowFullscreen = false,\n  }) => {\n    const dragControls = useDragControls();\n    const constraintsRef = useRef<HTMLDivElement>(null);\n    const [isFullscreen, setIsFullscreen] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails: { reason: string }) => {\n        if (!open) return;\n        if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n        if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') return;\n        if (!nextOpen) {\n          onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n        }\n      },\n      [onCancel, keyboard, maskClosable, open],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      setIsFullscreen(false);\n      afterClose?.();\n      afterOpenChange?.(false);\n    }, [afterClose, afterOpenChange]);\n\n    const handleAnimationComplete = useCallback(() => {\n      if (open) afterOpenChange?.(true);\n    }, [open, afterOpenChange]);\n\n    const handleDragStart = useCallback(\n      (e: PointerEvent) => {\n        if (draggable && !isFullscreen) {\n          dragControls.start(e);\n          setIsDragging(true);\n        }\n      },\n      [draggable, dragControls, isFullscreen],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      setIsDragging(false);\n    }, []);\n\n    const handleOk = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onOk?.(e);\n      },\n      [onOk],\n    );\n\n    const handleCancel = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onCancel?.(e);\n      },\n      [onCancel],\n    );\n\n    const footerNode = useMemo(() => {\n      if (footer === false || footer === null) return null;\n      const cancelBtnNode = (\n        <CancelBtn\n          cancelButtonProps={cancelButtonProps}\n          cancelText={cancelText}\n          onCancel={handleCancel}\n        />\n      );\n      const okBtnNode = (\n        <OkBtn\n          confirmLoading={confirmLoading}\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onOk={handleOk}\n        />\n      );\n      const defaultFooter = (\n        <>\n          {cancelBtnNode}\n          {okBtnNode}\n        </>\n      );\n\n      if (typeof footer === 'function') {\n        const BoundCancelBtn: React.FC = () => cancelBtnNode;\n        const BoundOkBtn: React.FC = () => okBtnNode;\n        return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n      }\n\n      return footer ?? defaultFooter;\n    }, [\n      footer,\n      cancelButtonProps,\n      cancelText,\n      handleCancel,\n      confirmLoading,\n      okButtonProps,\n      okText,\n      handleOk,\n    ]);\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n    const backdropZIndex = zIndex ? { zIndex } : undefined;\n    const popupZIndex = zIndex ? { zIndex: (zIndex || 1000) + 1 } : undefined;\n\n    const shouldDrag = draggable && !isFullscreen;\n    const dragProps = shouldDrag\n      ? {\n          drag: true as const,\n          dragConstraints: constraintsRef,\n          dragControls,\n          dragElastic: 0,\n          dragListener: false,\n          dragMomentum: false,\n          whileDrag: { cursor: 'grabbing' as const },\n        }\n      : {};\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n    const showHeader = showTitle || closable || allowFullscreen;\n\n    const hasHeight = height !== undefined;\n    const panelStyle: React.CSSProperties = {\n      ...(hasHeight && !isFullscreen ? { height } : {}),\n      ...style,\n    };\n\n    return (\n      <ModalRoot\n        open={open ?? false}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop\n              className={classNames?.mask}\n              style={{ ...backdropZIndex, ...semanticStyles?.mask }}\n            />\n          )}\n          <ModalPopup\n            className={classNames?.wrapper}\n            panelClassName={cx(className, isFullscreen && styles.fullscreenPopupInner)}\n            popupStyle={{ ...popupZIndex, ...semanticStyles?.wrapper }}\n            ref={constraintsRef}\n            style={panelStyle}\n            width={isFullscreen ? undefined : width}\n            motionProps={{\n              ...dragProps,\n              onAnimationComplete: handleAnimationComplete,\n            }}\n          >\n            {showHeader && (\n              <ModalHeader\n                className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n                style={{\n                  ...(isDragging ? { cursor: 'grabbing' } : {}),\n                  ...semanticStyles?.header,\n                }}\n                onPointerCancel={handleDragEnd}\n                onPointerDown={handleDragStart}\n                onPointerUp={handleDragEnd}\n              >\n                {showTitle ? (\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={styles.headerActions} onPointerDown={stopPropagation}>\n                  {allowFullscreen && (\n                    <button\n                      aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n                      className={styles.fullscreenToggle}\n                      type=\"button\"\n                      onClick={() => setIsFullscreen((prev) => !prev)}\n                    >\n                      {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n                    </button>\n                  )}\n                  {closable && (\n                    <button\n                      aria-label=\"Close\"\n                      className={styles.closeInline}\n                      type=\"button\"\n                      onClick={handleCancel}\n                    >\n                      {closeIcon ?? <X size={18} />}\n                    </button>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent\n              className={classNames?.body}\n              style={{\n                ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n                ...semanticStyles?.body,\n              }}\n            >\n              {loading ? (\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    padding: '32px 0',\n                  }}\n                >\n                  <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n                </div>\n              ) : (\n                children\n              )}\n            </ModalContent>\n            {footerNode !== null && (\n              <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                {footerNode}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

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

@@ -0,0 +1,100 @@
+import React from "react";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/base-ui/Modal/atoms.d.ts
+interface ModalAnimationActions {
+  onExitComplete: () => void;
+}
+declare const useModalOpen: () => boolean | null;
+declare const useModalActions: () => ModalAnimationActions | null;
+type ModalRootProps = Dialog.Root.Props & {
+  onExitComplete?: () => void;
+};
+declare const ModalRoot: ({
+  open,
+  onExitComplete,
+  ...rest
+}: ModalRootProps) => react_jsx_runtime46.JSX.Element;
+type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {
+  container?: HTMLElement | null;
+};
+declare const ModalPortal: ({
+  container,
+  ...rest
+}: ModalPortalProps) => react_jsx_runtime46.JSX.Element;
+type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;
+declare const ModalViewport: ({
+  className,
+  ...rest
+}: ModalViewportProps) => react_jsx_runtime46.JSX.Element;
+type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;
+declare const ModalBackdrop: ({
+  className,
+  style,
+  ...rest
+}: ModalBackdropProps) => react_jsx_runtime46.JSX.Element;
+type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {
+  motionProps?: Record<string, any>;
+  panelClassName?: string;
+  popupStyle?: React.CSSProperties;
+  width?: number | string;
+};
+declare const ModalPopup: ({
+  className,
+  children,
+  width,
+  style,
+  motionProps,
+  panelClassName,
+  popupStyle,
+  ...rest
+}: ModalPopupProps) => react_jsx_runtime46.JSX.Element;
+type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const ModalHeader: ({
+  className,
+  ...rest
+}: ModalHeaderProps) => react_jsx_runtime46.JSX.Element;
+type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;
+declare const ModalTitle: ({
+  className,
+  ...rest
+}: ModalTitleProps) => react_jsx_runtime46.JSX.Element;
+type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;
+declare const ModalDescription: React.FC<ModalDescriptionProps>;
+type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const ModalContent: ({
+  className,
+  ...rest
+}: ModalContentProps) => react_jsx_runtime46.JSX.Element;
+type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const ModalFooter: ({
+  className,
+  ...rest
+}: ModalFooterProps) => react_jsx_runtime46.JSX.Element;
+type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;
+declare const ModalClose: ({
+  className,
+  children,
+  ...rest
+}: ModalCloseProps) => react_jsx_runtime46.JSX.Element;
+type ModalTriggerProps = Omit<React.ComponentPropsWithRef<typeof Dialog.Trigger>, 'children' | 'render'> & {
+  children?: React.ReactNode;
+  nativeButton?: boolean;
+};
+declare const ModalTrigger: ({
+  children,
+  className,
+  nativeButton,
+  ref: refProp,
+  ...rest
+}: ModalTriggerProps) => react_jsx_runtime46.JSX.Element;
+//#endregion
+export { 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 };
+//# sourceMappingURL=atoms.d.mts.map