@hubstr/kit 0.1.4 → 0.1.6

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

@@ -0,0 +1,230 @@
+"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") {
+			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 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: 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/ui/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        const BoundCancelBtn: React.FC = () => cancelBtnNode;\r\n        const BoundOkBtn: React.FC = () => okBtnNode;\r\n        return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\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={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/ui/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/ui/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,KAAK;AAEhE,MAAa,sBAAsB,IAAI,kBAAkB;AACzD,MAAa,qBAAqB,kBAAkB"}

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

@@ -0,0 +1,101 @@
+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/ui/es/base-ui/Modal/atoms.mjs

@@ -0,0 +1,226 @@
+"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);
+	return /* @__PURE__ */ jsx(ModalLayerProvider, {
+		value: useMemo(() => ({
+			popupRef,
+			zIndex
+		}), [zIndex, popupRef]),
+		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;
+		})();
+		return cloneElement(children, {
+			...mergeProps(children.props, resolvedProps),
+			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/ui/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';\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/ui/es/base-ui/Modal/constants.d.mts

@@ -0,0 +1,12 @@
+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