@jinmi/ui 0.0.0-stage → 6.0.2

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

@@ -0,0 +1,226 @@
+"use client";
+import { stopPropagation } from "../../utils/dom.mjs";
+import Button from "../Button/Button.mjs";
+import { styles } from "./style.mjs";
+import { ModalBackdrop, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
+import { memo, useCallback, useEffect, 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 { onClick: userOnClick, ...restOk } = okButtonProps ?? {};
+	return /* @__PURE__ */ jsx(Button, {
+		loading: confirmLoading,
+		type: "primary",
+		...restOk,
+		onClick: (e) => {
+			onOk(e);
+			userOnClick?.(e);
+		},
+		children: okText
+	});
+};
+const CancelBtn = ({ cancelButtonProps, cancelText, onCancel }) => {
+	const { onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};
+	return /* @__PURE__ */ jsx(Button, {
+		...restCancel,
+		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 [isDenying, setIsDenying] = useState(false);
+	const denyTimerRef = useRef(void 0);
+	useEffect(() => () => clearTimeout(denyTimerRef.current), []);
+	const triggerDeny = useCallback(() => {
+		clearTimeout(denyTimerRef.current);
+		setIsDenying(true);
+		denyTimerRef.current = setTimeout(() => setIsDenying(false), 300);
+	}, []);
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (!open) return;
+		if (!nextOpen && keyboard === false && eventDetails.reason === "escape-key") return;
+		if (!nextOpen && !maskClosable && eventDetails.reason === "outside-press") {
+			triggerDeny();
+			return;
+		}
+		if (!nextOpen) onCancel?.(new MouseEvent("click"));
+	}, [
+		onCancel,
+		keyboard,
+		maskClosable,
+		open,
+		triggerDeny
+	]);
+	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") return footer(defaultFooter, {
+			CancelBtn: () => cancelBtnNode,
+			OkBtn: () => okBtnNode
+		});
+		return footer ?? defaultFooter;
+	}, [
+		footer,
+		cancelButtonProps,
+		cancelText,
+		handleCancel,
+		confirmLoading,
+		okButtonProps,
+		okText,
+		handleOk
+	]);
+	const container = getContainer === false ? void 0 : getContainer ?? 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,
+		zIndex,
+		onExitComplete: handleExitComplete,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(ModalPortal, {
+			container,
+			children: [mask && /* @__PURE__ */ jsx(ModalBackdrop, {
+				className: classNames?.mask,
+				style: semanticStyles?.mask
+			}), /* @__PURE__ */ jsxs(ModalPopup, {
+				className: classNames?.wrapper,
+				popupStyle: semanticStyles?.wrapper,
+				ref: constraintsRef,
+				style: panelStyle,
+				width: isFullscreen ? void 0 : width,
+				motionProps: {
+					...dragProps,
+					onAnimationComplete: handleAnimationComplete
+				},
+				panelClassName: cx(className, isFullscreen && styles.fullscreenPopupInner, isDenying && styles.denyAnimation),
+				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: 16 })
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ModalContent, {
+						className: cx(!showHeader && styles.contentNoHeader, 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";
+//#endregion
+export { Modal as default };
+
+//# sourceMappingURL=Modal.mjs.map

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

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

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

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/base-ui/Modal/ModalLayerContext.tsx
+const ModalLayerContext = createContext(null);
+const useModalLayer = () => use(ModalLayerContext);
+const ModalLayerProvider = ModalLayerContext.Provider;
+//#endregion
+export { ModalLayerProvider, useModalLayer };
+
+//# sourceMappingURL=ModalLayerContext.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalLayerContext.mjs","names":[],"sources":["../../../src/base-ui/Modal/ModalLayerContext.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, use } from 'react';\r\n\r\nexport interface ModalLayer {\r\n  popupRef: (node: HTMLElement | null) => void;\r\n  zIndex: number | undefined;\r\n}\r\n\r\nconst ModalLayerContext = createContext<ModalLayer | null>(null);\r\n\r\nexport const useModalLayer = () => use(ModalLayerContext);\r\nexport const ModalLayerProvider = ModalLayerContext.Provider;\r\n"],"mappings":";;;AASA,MAAM,oBAAoB,cAAiC,IAAI;AAE/D,MAAa,sBAAsB,IAAI,iBAAiB;AACxD,MAAa,qBAAqB,kBAAkB"}

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

@@ -0,0 +1,54 @@
+import React from "react";
+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;
+  zIndex?: number;
+};
+declare const ModalRoot: ({ open, onExitComplete, ...rest }: ModalRootProps) => React.JSX.Element;
+type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {
+  container?: HTMLElement | null;
+};
+declare const ModalPortal: ({ container, ...rest }: ModalPortalProps) => React.JSX.Element;
+type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;
+declare const ModalViewport: ({ className, ...rest }: ModalViewportProps) => React.JSX.Element;
+type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;
+declare const ModalBackdrop: ({ className, style, ...rest }: ModalBackdropProps) => React.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, ref: forwardedRef, ...rest }: ModalPopupProps) => React.JSX.Element;
+type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const ModalHeader: ({ className, ...rest }: ModalHeaderProps) => React.JSX.Element;
+type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;
+declare const ModalTitle: ({ className, ...rest }: ModalTitleProps) => React.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.Element;
+type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const ModalFooter: ({ className, ...rest }: ModalFooterProps) => React.JSX.Element;
+type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;
+declare const ModalClose: ({ className, children, ...rest }: ModalCloseProps) => React.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.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

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

@@ -0,0 +1,228 @@
+"use client";
+import { useMotionComponent } from "../../MotionProvider/index.mjs";
+import { useNativeButton } from "../../hooks/useNativeButton.mjs";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
+import { backdropTransition, modalMotionConfig } from "./constants.mjs";
+import { ModalLayerProvider, useModalLayer } from "./ModalLayerContext.mjs";
+import { styles } from "./style.mjs";
+import { cloneElement, createContext, createElement, isValidElement, use, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { AnimatePresence } from "motion/react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { mergeRefs, useMergeRefs } from "react-merge-refs";
+import { X } from "lucide-react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/base-ui/Modal/atoms.tsx
+const mergeStateClassName = (base, className) => {
+	if (typeof className === "function") return (state) => cx(base, className(state));
+	return cx(base, className);
+};
+const ModalOpenContext = createContext(null);
+const ModalActionsContext = createContext(null);
+const useModalOpen = () => use(ModalOpenContext);
+const useModalActions = () => use(ModalActionsContext);
+const AnimatedModalRoot = ({ open, children, onExitComplete: onExitCompleteProp, zIndex: explicitZIndex, ...rest }) => {
+	const [isPresent, setIsPresent] = useState(!!open);
+	useEffect(() => {
+		if (open) setIsPresent(true);
+	}, [open]);
+	const handleExitComplete = useCallback(() => {
+		setIsPresent(false);
+		onExitCompleteProp?.();
+	}, [onExitCompleteProp]);
+	const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);
+	const { zIndex, ref: popupRef } = useLayerZIndex("modal", explicitZIndex);
+	const layer = useMemo(() => ({
+		popupRef,
+		zIndex
+	}), [zIndex, popupRef]);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(ModalOpenContext, {
+		value: open,
+		children: /* @__PURE__ */ jsx(ModalActionsContext, {
+			value: actions,
+			children: /* @__PURE__ */ jsx(ModalLayerProvider, {
+				value: layer,
+				children: /* @__PURE__ */ jsx(Dialog.Root, {
+					modal: true,
+					open: true,
+					...rest,
+					children
+				})
+			})
+		})
+	});
+};
+const NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }) => {
+	const { zIndex, ref: popupRef } = useLayerZIndex("modal", explicitZIndex);
+	const layer = useMemo(() => ({
+		popupRef,
+		zIndex
+	}), [zIndex, popupRef]);
+	return /* @__PURE__ */ jsx(ModalLayerProvider, {
+		value: layer,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			modal: true,
+			...rest,
+			children
+		})
+	});
+};
+const ModalRoot = ({ open, onExitComplete, ...rest }) => {
+	if (open !== void 0) return /* @__PURE__ */ jsx(AnimatedModalRoot, {
+		open,
+		onExitComplete,
+		...rest
+	});
+	return /* @__PURE__ */ jsx(NonAnimatedModalRoot, { ...rest });
+};
+const ModalPortal = ({ container, ...rest }) => {
+	const appElement = useAppElement();
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		container: container ?? appElement ?? void 0,
+		...rest
+	});
+};
+const ModalViewport = ({ className, ...rest }) => /* @__PURE__ */ jsx(Dialog.Viewport, {
+	...rest,
+	className: mergeStateClassName(styles.viewport, className)
+});
+const ModalBackdrop = ({ className, style, ...rest }) => {
+	const open = useModalOpen();
+	const layer = useModalLayer();
+	const Motion = useMotionComponent();
+	const layerStyle = layer?.zIndex !== void 0 ? { zIndex: layer.zIndex } : void 0;
+	if (open !== null) return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		...rest,
+		className: cx(styles.backdrop, className),
+		style: {
+			...layerStyle,
+			...style,
+			transition: "none"
+		},
+		render: /* @__PURE__ */ jsx(Motion.div, {
+			animate: { opacity: open ? 1 : 0 },
+			initial: { opacity: 0 },
+			transition: backdropTransition
+		})
+	});
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		...rest,
+		className: mergeStateClassName(styles.backdrop, className),
+		style: {
+			...layerStyle,
+			...style
+		}
+	});
+};
+const ModalPopup = ({ className, children, width, style, motionProps, panelClassName, popupStyle, ref: forwardedRef, ...rest }) => {
+	const open = useModalOpen();
+	const actions = useModalActions();
+	const layer = useModalLayer();
+	const Motion = useMotionComponent();
+	const popupZIndexStyle = layer?.zIndex !== void 0 ? { zIndex: layer.zIndex + 1 } : void 0;
+	const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);
+	if (open !== null && actions) return /* @__PURE__ */ jsx(Dialog.Popup, {
+		...rest,
+		className: cx(styles.popup, className),
+		ref: composedRef,
+		style: {
+			...popupZIndexStyle,
+			...popupStyle
+		},
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			onExitComplete: actions.onExitComplete,
+			children: open ? /* @__PURE__ */ createElement(Motion.div, {
+				...modalMotionConfig,
+				...motionProps,
+				className: cx(styles.popupInner, panelClassName),
+				key: "modal-popup-panel",
+				style: {
+					maxWidth: width ?? void 0,
+					transition: "none",
+					...style
+				}
+			}, children) : null
+		})
+	});
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		...rest,
+		className: mergeStateClassName(styles.popup, className),
+		ref: composedRef,
+		style: {
+			...popupZIndexStyle,
+			...popupStyle
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(styles.popupInner, panelClassName),
+			style: {
+				maxWidth: width ?? void 0,
+				...style
+			},
+			children
+		})
+	});
+};
+const ModalHeader = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cx(styles.header, className)
+});
+const ModalTitle = ({ className, ...rest }) => /* @__PURE__ */ jsx(Dialog.Title, {
+	...rest,
+	className: mergeStateClassName(styles.title, className)
+});
+const ModalDescription = Dialog.Description;
+const ModalContent = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cx(styles.content, className)
+});
+const ModalFooter = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cx(styles.footer, className)
+});
+const ModalClose = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(Dialog.Close, {
+	...rest,
+	className: mergeStateClassName(styles.close, className),
+	children: children ?? /* @__PURE__ */ jsx(X, { size: 16 })
+});
+const ModalTrigger = ({ children, className, nativeButton, ref: refProp, ...rest }) => {
+	const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
+		children,
+		nativeButton
+	});
+	const renderer = (props) => {
+		const resolvedProps = (() => {
+			if (isNativeButtonTriggerElement) return props;
+			const { type, ...restProps } = props;
+			return restProps;
+		})();
+		const mergedProps = mergeProps(children.props, resolvedProps);
+		return cloneElement(children, {
+			...mergedProps,
+			ref: mergeRefs([
+				children.ref,
+				props.ref,
+				refProp
+			])
+		});
+	};
+	if (isValidElement(children)) return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		...rest,
+		className,
+		nativeButton: resolvedNativeButton,
+		render: renderer
+	});
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		...rest,
+		className,
+		nativeButton: resolvedNativeButton,
+		ref: refProp,
+		children
+	});
+};
+//#endregion
+export { ModalBackdrop, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, useModalActions, useModalOpen };
+
+//# sourceMappingURL=atoms.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Dialog } from '@base-ui/react/dialog';\r\nimport { mergeProps } from '@base-ui/react/merge-props';\r\nimport { cx } from 'antd-style';\r\nimport { X } from 'lucide-react';\r\nimport { AnimatePresence } from 'motion/react';\r\nimport type React from 'react';\r\nimport {\r\n  cloneElement,\r\n  createContext,\r\n  isValidElement,\r\n  use,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n} from 'react';\r\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\r\n\r\nimport { useNativeButton } from '@/hooks/useNativeButton';\r\nimport { useMotionComponent } from '@/MotionProvider';\r\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\r\n\r\nimport { useLayerZIndex } from '../zIndex';\r\nimport { backdropTransition, modalMotionConfig } from './constants';\r\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\r\nimport { styles } from './style';\r\n\r\nconst mergeStateClassName = <TState,>(\r\n  base: string,\r\n  className: string | ((state: TState) => string | undefined) | undefined,\r\n) => {\r\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\r\n  return cx(base, className);\r\n};\r\n\r\n// --- Animation Contexts (granular to minimize re-renders) ---\r\n\r\n// State: open boolean, null = non-animated mode\r\nconst ModalOpenContext = createContext<boolean | null>(null);\r\n\r\n// Actions: stable callbacks, null = non-animated mode\r\ninterface ModalAnimationActions {\r\n  onExitComplete: () => void;\r\n}\r\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\r\n\r\nexport const useModalOpen = () => use(ModalOpenContext);\r\nexport const useModalActions = () => use(ModalActionsContext);\r\n\r\n// --- Root ---\r\nexport type ModalRootProps = Dialog.Root.Props & {\r\n  onExitComplete?: () => void;\r\n  zIndex?: number;\r\n};\r\n\r\nconst AnimatedModalRoot = ({\r\n  open,\r\n  children,\r\n  onExitComplete: onExitCompleteProp,\r\n  zIndex: explicitZIndex,\r\n  ...rest\r\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\r\n  const [isPresent, setIsPresent] = useState(!!open);\r\n\r\n  useEffect(() => {\r\n    if (open) setIsPresent(true);\r\n  }, [open]);\r\n\r\n  const handleExitComplete = useCallback(() => {\r\n    setIsPresent(false);\r\n    onExitCompleteProp?.();\r\n  }, [onExitCompleteProp]);\r\n\r\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\r\n\r\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\r\n  const layer = useMemo(\r\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\r\n    [zIndex, popupRef],\r\n  );\r\n\r\n  if (!isPresent) return null;\r\n\r\n  return (\r\n    <ModalOpenContext value={open}>\r\n      <ModalActionsContext value={actions}>\r\n        <ModalLayerProvider value={layer}>\r\n          <Dialog.Root modal open {...rest}>\r\n            {children}\r\n          </Dialog.Root>\r\n        </ModalLayerProvider>\r\n      </ModalActionsContext>\r\n    </ModalOpenContext>\r\n  );\r\n};\r\n\r\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\r\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\r\n  const layer = useMemo(\r\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\r\n    [zIndex, popupRef],\r\n  );\r\n  return (\r\n    <ModalLayerProvider value={layer}>\r\n      <Dialog.Root modal {...rest}>\r\n        {children}\r\n      </Dialog.Root>\r\n    </ModalLayerProvider>\r\n  );\r\n};\r\n\r\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\r\n  if (open !== undefined) {\r\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\r\n  }\r\n  return <NonAnimatedModalRoot {...rest} />;\r\n};\r\n\r\n// --- Portal ---\r\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\r\n  container?: HTMLElement | null;\r\n};\r\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\r\n  const appElement = useAppElement();\r\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\r\n};\r\n\r\n// --- Viewport ---\r\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\r\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\r\n  <Dialog.Viewport\r\n    {...rest}\r\n    className={mergeStateClassName(styles.viewport, className as any) as any}\r\n  />\r\n);\r\n\r\n// --- Backdrop ---\r\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\r\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\r\n  const open = useModalOpen();\r\n  const layer = useModalLayer();\r\n  const Motion = useMotionComponent();\r\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\r\n\r\n  if (open !== null) {\r\n    return (\r\n      <Dialog.Backdrop\r\n        {...rest}\r\n        className={cx(styles.backdrop, className as string)}\r\n        style={{ ...layerStyle, ...style, transition: 'none' }}\r\n        render={\r\n          <Motion.div\r\n            animate={{ opacity: open ? 1 : 0 }}\r\n            initial={{ opacity: 0 }}\r\n            transition={backdropTransition}\r\n          />\r\n        }\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Dialog.Backdrop\r\n      {...rest}\r\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\r\n      style={{ ...layerStyle, ...style }}\r\n    />\r\n  );\r\n};\r\n\r\n// --- Popup ---\r\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\r\n  motionProps?: Record<string, any>;\r\n  panelClassName?: string;\r\n  popupStyle?: React.CSSProperties;\r\n  width?: number | string;\r\n};\r\nexport const ModalPopup = ({\r\n  className,\r\n  children,\r\n  width,\r\n  style,\r\n  motionProps,\r\n  panelClassName,\r\n  popupStyle,\r\n  ref: forwardedRef,\r\n  ...rest\r\n}: ModalPopupProps) => {\r\n  const open = useModalOpen();\r\n  const actions = useModalActions();\r\n  const layer = useModalLayer();\r\n  const Motion = useMotionComponent();\r\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\r\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\r\n\r\n  if (open !== null && actions) {\r\n    return (\r\n      <Dialog.Popup\r\n        {...rest}\r\n        className={cx(styles.popup, className as string)}\r\n        ref={composedRef as any}\r\n        style={{ ...popupZIndexStyle, ...popupStyle }}\r\n      >\r\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\r\n          {open ? (\r\n            <Motion.div\r\n              {...modalMotionConfig}\r\n              {...motionProps}\r\n              className={cx(styles.popupInner, panelClassName)}\r\n              key=\"modal-popup-panel\"\r\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\r\n            >\r\n              {children}\r\n            </Motion.div>\r\n          ) : null}\r\n        </AnimatePresence>\r\n      </Dialog.Popup>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Dialog.Popup\r\n      {...rest}\r\n      className={mergeStateClassName(styles.popup, className as any) as any}\r\n      ref={composedRef as any}\r\n      style={{ ...popupZIndexStyle, ...popupStyle }}\r\n    >\r\n      <div\r\n        className={cx(styles.popupInner, panelClassName)}\r\n        style={{ maxWidth: width ?? undefined, ...style }}\r\n      >\r\n        {children}\r\n      </div>\r\n    </Dialog.Popup>\r\n  );\r\n};\r\n\r\n// --- Header ---\r\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  ref?: React.Ref<HTMLDivElement>;\r\n};\r\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\r\n  <div {...rest} className={cx(styles.header, className)} />\r\n);\r\n\r\n// --- Title ---\r\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\r\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\r\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\r\n);\r\n\r\n// --- Description ---\r\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\r\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\r\n\r\n// --- Content ---\r\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  ref?: React.Ref<HTMLDivElement>;\r\n};\r\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\r\n  <div {...rest} className={cx(styles.content, className)} />\r\n);\r\n\r\n// --- Footer ---\r\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  ref?: React.Ref<HTMLDivElement>;\r\n};\r\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\r\n  <div {...rest} className={cx(styles.footer, className)} />\r\n);\r\n\r\n// --- Close ---\r\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\r\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\r\n  <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\r\n    {children ?? <X size={16} />}\r\n  </Dialog.Close>\r\n);\r\n\r\n// --- Trigger ---\r\nexport type ModalTriggerProps = Omit<\r\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\r\n  'children' | 'render'\r\n> & {\r\n  children?: React.ReactNode;\r\n  nativeButton?: boolean;\r\n};\r\n\r\nexport const ModalTrigger = ({\r\n  children,\r\n  className,\r\n  nativeButton,\r\n  ref: refProp,\r\n  ...rest\r\n}: ModalTriggerProps) => {\r\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\r\n    children,\r\n    nativeButton,\r\n  });\r\n\r\n  const renderer = (props: any) => {\r\n    const resolvedProps = (() => {\r\n      if (isNativeButtonTriggerElement) return props as any;\r\n      // eslint-disable-next-line unused-imports/no-unused-vars\r\n      const { type, ...restProps } = props as any;\r\n      return restProps;\r\n    })();\r\n\r\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\r\n    return cloneElement(children as any, {\r\n      ...mergedProps,\r\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\r\n    });\r\n  };\r\n\r\n  if (isValidElement(children)) {\r\n    return (\r\n      <Dialog.Trigger\r\n        {...rest}\r\n        className={className}\r\n        nativeButton={resolvedNativeButton}\r\n        render={renderer as any}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Dialog.Trigger\r\n      {...rest}\r\n      className={className}\r\n      nativeButton={resolvedNativeButton}\r\n      ref={refProp as any}\r\n    >\r\n      {children}\r\n    </Dialog.Trigger>\r\n  );\r\n};\r\n"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import { MotionProps } from "motion/react";
+//#region src/base-ui/Modal/constants.d.ts
+type CubicBezier = [number, number, number, number];
+declare const modalMotionConfig: MotionProps;
+declare const backdropTransition: {
+  duration: number;
+  ease: CubicBezier;
+};
+//#endregion
+export { backdropTransition, modalMotionConfig };
+//# sourceMappingURL=constants.d.mts.map

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

@@ -0,0 +1,42 @@
+//#region src/base-ui/Modal/constants.ts
+const softEase = [
+	.32,
+	.72,
+	0,
+	1
+];
+const modalMotionConfig = {
+	animate: {
+		opacity: 1,
+		scale: 1
+	},
+	exit: {
+		opacity: 0,
+		scale: .98,
+		transition: {
+			duration: .12,
+			ease: [
+				.4,
+				0,
+				1,
+				1
+			]
+		}
+	},
+	initial: {
+		opacity: 0,
+		scale: .97
+	},
+	transition: {
+		duration: .22,
+		ease: softEase
+	}
+};
+const backdropTransition = {
+	duration: .18,
+	ease: softEase
+};
+//#endregion
+export { backdropTransition, modalMotionConfig };
+
+//# sourceMappingURL=constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","names":[],"sources":["../../../src/base-ui/Modal/constants.ts"],"sourcesContent":["import type { MotionProps } from 'motion/react';\r\n\r\ntype CubicBezier = [number, number, number, number];\r\n\r\nconst softEase: CubicBezier = [0.32, 0.72, 0, 1];\r\nconst exitEase: CubicBezier = [0.4, 0, 1, 1];\r\n\r\nconst initialStyle = { opacity: 0, scale: 0.97 };\r\nconst enterStyle = { opacity: 1, scale: 1 };\r\nconst exitStyle = { opacity: 0, scale: 0.98 };\r\n\r\nexport const modalMotionConfig: MotionProps = {\r\n  animate: enterStyle,\r\n  exit: {\r\n    ...exitStyle,\r\n    transition: { duration: 0.12, ease: exitEase },\r\n  },\r\n  initial: initialStyle,\r\n  transition: {\r\n    duration: 0.22,\r\n    ease: softEase,\r\n  },\r\n};\r\n\r\nexport const backdropTransition = {\r\n  duration: 0.18,\r\n  ease: softEase,\r\n};\r\n"],"mappings":";AAIA,MAAM,WAAwB;CAAC;CAAM;CAAM;CAAG;AAAC;AAO/C,MAAa,oBAAiC;CAC5C,SAAS;EAJU,SAAS;EAAG,OAAO;CAI7B;CACT,MAAM;EAJY,SAAS;EAAG,OAAO;EAMnC,YAAY;GAAE,UAAU;GAAM,MAAM;IAVT;IAAK;IAAG;IAAG;GAUF;EAAS;CAC/C;CACA,SAAS;EAVY,SAAS;EAAG,OAAO;CAU/B;CACT,YAAY;EACV,UAAU;EACV,MAAM;CACR;AACF;AAEA,MAAa,qBAAqB;CAChC,UAAU;CACV,MAAM;AACR"}

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

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