ezr-antd 1.0.0

package/lib/modal/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/modal/locale.d.ts

@@ -0,0 +1,7 @@
+export interface ModalLocale {
+    okText: string;
+    cancelText: string;
+    justOkText: string;
+}
+export declare function changeConfirmLocale(newLocale?: ModalLocale): (() => void) | undefined;
+export declare function getConfirmLocale(): ModalLocale;

package/lib/modal/locale.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeConfirmLocale = changeConfirmLocale;
+exports.getConfirmLocale = getConfirmLocale;
+var _en_US = _interopRequireDefault(require("../locale/en_US"));
+let runtimeLocale = Object.assign({}, _en_US.default.Modal);
+let localeList = [];
+const generateLocale = () => localeList.reduce((merged, locale) => Object.assign(Object.assign({}, merged), locale), _en_US.default.Modal);
+function changeConfirmLocale(newLocale) {
+  if (newLocale) {
+    const cloneLocale = Object.assign({}, newLocale);
+    localeList.push(cloneLocale);
+    runtimeLocale = generateLocale();
+    return () => {
+      localeList = localeList.filter(locale => locale !== cloneLocale);
+      runtimeLocale = generateLocale();
+    };
+  }
+  runtimeLocale = Object.assign({}, _en_US.default.Modal);
+}
+function getConfirmLocale() {
+  return runtimeLocale;
+}

package/lib/modal/shared.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModalProps } from './interface';
+export declare function renderCloseIcon(prefixCls: string, closeIcon?: React.ReactNode): React.JSX.Element;
+interface FooterProps {
+    onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+}
+export declare const Footer: React.FC<FooterProps & Pick<ModalProps, 'footer' | 'okText' | 'okType' | 'cancelText' | 'confirmLoading' | 'okButtonProps' | 'cancelButtonProps'>>;
+export {};

package/lib/modal/shared.js

@@ -0,0 +1,73 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Footer = void 0;
+exports.renderCloseIcon = renderCloseIcon;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
+var _DisabledContext = require("../config-provider/DisabledContext");
+var _locale = require("../locale");
+var _NormalCancelBtn = _interopRequireDefault(require("./components/NormalCancelBtn"));
+var _NormalOkBtn = _interopRequireDefault(require("./components/NormalOkBtn"));
+var _context = require("./context");
+var _locale2 = require("./locale");
+function renderCloseIcon(prefixCls, closeIcon) {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: `${prefixCls}-close-x`
+  }, closeIcon || /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, {
+    className: `${prefixCls}-close-icon`
+  }));
+}
+const Footer = props => {
+  const {
+    okText,
+    okType = 'primary',
+    cancelText,
+    confirmLoading,
+    onOk,
+    onCancel,
+    okButtonProps,
+    cancelButtonProps,
+    footer
+  } = props;
+  const [locale] = (0, _locale.useLocale)('Modal', (0, _locale2.getConfirmLocale)());
+  // ================== Locale Text ==================
+  const okTextLocale = okText || (locale === null || locale === void 0 ? void 0 : locale.okText);
+  const cancelTextLocale = cancelText || (locale === null || locale === void 0 ? void 0 : locale.cancelText);
+  // ================= Context Value =================
+  const btnCtxValue = {
+    confirmLoading,
+    okButtonProps,
+    cancelButtonProps,
+    okTextLocale,
+    cancelTextLocale,
+    okType,
+    onOk,
+    onCancel
+  };
+  const btnCtxValueMemo = _react.default.useMemo(() => btnCtxValue, (0, _toConsumableArray2.default)(Object.values(btnCtxValue)));
+  let footerNode;
+  if (typeof footer === 'function' || typeof footer === 'undefined') {
+    footerNode = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_NormalCancelBtn.default, null), /*#__PURE__*/_react.default.createElement(_NormalOkBtn.default, null));
+    if (typeof footer === 'function') {
+      footerNode = footer(footerNode, {
+        OkBtn: _NormalOkBtn.default,
+        CancelBtn: _NormalCancelBtn.default
+      });
+    }
+    footerNode = /*#__PURE__*/_react.default.createElement(_context.ModalContextProvider, {
+      value: btnCtxValueMemo
+    }, footerNode);
+  } else {
+    footerNode = footer;
+  }
+  return /*#__PURE__*/_react.default.createElement(_DisabledContext.DisabledContextProvider, {
+    disabled: false
+  }, footerNode);
+};
+exports.Footer = Footer;

package/lib/modal/style/confirm.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").FunctionComponent<import("@ant-design/cssinjs-utils/lib/util/genStyleUtils").SubStyleComponentProps>;
+export default _default;

package/lib/modal/style/confirm.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _ = require(".");
+var _style = require("../../style");
+var _internal = require("../../theme/internal");
+// Style as confirm component
+
+// ============================= Confirm ==============================
+const genModalConfirmStyle = token => {
+  const {
+    componentCls,
+    titleFontSize,
+    titleLineHeight,
+    modalConfirmIconSize,
+    fontSize,
+    lineHeight,
+    modalTitleHeight,
+    fontHeight,
+    confirmBodyPadding
+  } = token;
+  const confirmComponentCls = `${componentCls}-confirm`;
+  return {
+    [confirmComponentCls]: {
+      '&-rtl': {
+        direction: 'rtl'
+      },
+      [`${token.antCls}-modal-header`]: {
+        display: 'none'
+      },
+      [`${confirmComponentCls}-body-wrapper`]: Object.assign({}, (0, _style.clearFix)()),
+      [`&${componentCls} ${componentCls}-body`]: {
+        padding: confirmBodyPadding
+      },
+      // ====================== Body ======================
+      [`${confirmComponentCls}-body`]: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'start',
+        [`> ${token.iconCls}`]: {
+          flex: 'none',
+          fontSize: modalConfirmIconSize,
+          marginInlineEnd: token.confirmIconMarginInlineEnd,
+          marginTop: token.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
+        },
+        [`&-has-title > ${token.iconCls}`]: {
+          marginTop: token.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
+        }
+      },
+      [`${confirmComponentCls}-paragraph`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 'auto',
+        rowGap: token.marginXS
+      },
+      // https://github.com/ant-design/ant-design/issues/48159
+      [`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
+        maxWidth: `calc(100% - ${(0, _cssinjs.unit)(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})`
+      },
+      [`${confirmComponentCls}-title`]: {
+        color: token.colorTextHeading,
+        fontWeight: token.fontWeightStrong,
+        fontSize: titleFontSize,
+        lineHeight: titleLineHeight
+      },
+      [`${confirmComponentCls}-content`]: {
+        color: token.colorText,
+        fontSize,
+        lineHeight
+      },
+      // ===================== Footer =====================
+      [`${confirmComponentCls}-btns`]: {
+        textAlign: 'end',
+        marginTop: token.confirmBtnsMarginTop,
+        [`${token.antCls}-btn + ${token.antCls}-btn`]: {
+          marginBottom: 0,
+          marginInlineStart: token.marginXS
+        }
+      }
+    },
+    [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorError
+    },
+    [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
+        ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorWarning
+    },
+    [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorInfo
+    },
+    [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorSuccess
+    }
+  };
+};
+// ============================== Export ==============================
+var _default = exports.default = (0, _internal.genSubStyleComponent)(['Modal', 'confirm'], token => {
+  const modalToken = (0, _.prepareToken)(token);
+  return [genModalConfirmStyle(modalToken)];
+}, _.prepareComponentToken, {
+  // confirm is weak than modal since no conflict here
+  order: -1000
+});

package/lib/modal/style/index.d.ts

@@ -0,0 +1,110 @@
+import type React from 'react';
+import type { AliasToken, FullToken, GenerateStyle, GenStyleFn, GlobalToken, TokenWithCommonCls } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    /**
+     * @desc 顶部背景色
+     * @descEN Background color of header
+     */
+    headerBg: string;
+    /**
+     * @desc 标题行高
+     * @descEN Line height of title
+     */
+    titleLineHeight: number | string;
+    /**
+     * @desc 标题字体大小
+     * @descEN Font size of title
+     */
+    titleFontSize: number;
+    /**
+     * @desc 标题字体颜色
+     * @descEN Font color of title
+     */
+    titleColor: string;
+    /**
+     * @desc 内容区域背景色
+     * @descEN Background color of content
+     */
+    contentBg: string;
+    /**
+     * @desc 底部区域背景色
+     * @descEN Background color of footer
+     */
+    footerBg: string;
+}
+/**
+ * @desc Modal 组件的 Token
+ * @descEN Token for Modal component
+ */
+export interface ModalToken extends FullToken<'Modal'> {
+    /**
+     * @desc 模态框头部高度
+     * @descEN Height of modal header
+     */
+    modalHeaderHeight: number | string;
+    /**
+     * @desc 模态框底部边框颜色
+     * @descEN Border color of modal footer
+     */
+    modalFooterBorderColorSplit: string;
+    /**
+     * @desc 模态框底部边框样式
+     * @descEN Border style of modal footer
+     */
+    modalFooterBorderStyle: string;
+    /**
+     * @desc 模态框底部边框宽度
+     * @descEN Border width of modal footer
+     */
+    modalFooterBorderWidth: number | string;
+    /**
+     * @desc 模态框关闭图标颜色
+     * @descEN Color of modal close icon
+     */
+    modalCloseIconColor: string;
+    /**
+     * @desc 模态框关闭图标悬停颜色
+     * @descEN Hover color of modal close icon
+     */
+    modalCloseIconHoverColor: string;
+    /**
+     * @desc 模态框关闭按钮尺寸
+     * @descEN Size of modal close button
+     */
+    modalCloseBtnSize: number | string;
+    /**
+     * @desc 模态框确认图标尺寸
+     * @descEN Size of modal confirm icon
+     */
+    modalConfirmIconSize: number | string;
+    /**
+     * @desc 模态框标题高度
+     * @descEN Height of modal title
+     */
+    modalTitleHeight: number | string;
+}
+export declare const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>>;
+export declare const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalToken;
+export declare const prepareComponentToken: (token: GlobalToken) => {
+    footerBg: string;
+    headerBg: string;
+    titleLineHeight: number;
+    titleFontSize: number;
+    contentBg: string;
+    titleColor: string;
+    contentPadding: string | number;
+    headerPadding: string | number;
+    headerBorderBottom: string;
+    headerMarginBottom: number;
+    bodyPadding: number;
+    footerPadding: string | number;
+    footerBorderTop: string;
+    footerBorderRadius: string | number;
+    footerMarginTop: number;
+    confirmBodyPadding: string | number;
+    confirmIconMarginInlineEnd: number;
+    confirmBtnsMarginTop: number;
+};
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

package/lib/modal/style/index.js

@@ -0,0 +1,287 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareToken = exports.prepareComponentToken = exports.genModalMaskStyle = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _style = require("../../style");
+var _motion = require("../../style/motion");
+var _internal = require("../../theme/internal");
+function box(position) {
+  return {
+    position,
+    inset: 0
+  };
+}
+const genModalMaskStyle = token => {
+  const {
+    componentCls,
+    antCls
+  } = token;
+  return [{
+    [`${componentCls}-root`]: {
+      [`${componentCls}${antCls}-zoom-enter, ${componentCls}${antCls}-zoom-appear`]: {
+        // reset scale avoid mousePosition bug
+        transform: 'none',
+        opacity: 0,
+        animationDuration: token.motionDurationSlow,
+        // https://github.com/ant-design/ant-design/issues/11777
+        userSelect: 'none'
+      },
+      // https://github.com/ant-design/ant-design/issues/37329
+      // https://github.com/ant-design/ant-design/issues/40272
+      [`${componentCls}${antCls}-zoom-leave ${componentCls}-content`]: {
+        pointerEvents: 'none'
+      },
+      [`${componentCls}-mask`]: Object.assign(Object.assign({}, box('fixed')), {
+        zIndex: token.zIndexPopupBase,
+        height: '100%',
+        backgroundColor: token.colorBgMask,
+        pointerEvents: 'none',
+        [`${componentCls}-hidden`]: {
+          display: 'none'
+        }
+      }),
+      [`${componentCls}-wrap`]: Object.assign(Object.assign({}, box('fixed')), {
+        zIndex: token.zIndexPopupBase,
+        overflow: 'auto',
+        outline: 0,
+        WebkitOverflowScrolling: 'touch'
+      })
+    }
+  }, {
+    [`${componentCls}-root`]: (0, _motion.initFadeMotion)(token)
+  }];
+};
+exports.genModalMaskStyle = genModalMaskStyle;
+const genModalStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return [
+  // ======================== Root =========================
+  {
+    [`${componentCls}-root`]: {
+      [`${componentCls}-wrap-rtl`]: {
+        direction: 'rtl'
+      },
+      [`${componentCls}-centered`]: {
+        textAlign: 'center',
+        '&::before': {
+          display: 'inline-block',
+          width: 0,
+          height: '100%',
+          verticalAlign: 'middle',
+          content: '""'
+        },
+        [componentCls]: {
+          top: 0,
+          display: 'inline-block',
+          paddingBottom: 0,
+          textAlign: 'start',
+          verticalAlign: 'middle'
+        }
+      },
+      [`@media (max-width: ${token.screenSMMax}px)`]: {
+        [componentCls]: {
+          maxWidth: 'calc(100vw - 16px)',
+          margin: `${(0, _cssinjs.unit)(token.marginXS)} auto`
+        },
+        [`${componentCls}-centered`]: {
+          [componentCls]: {
+            flex: 1
+          }
+        }
+      }
+    }
+  },
+  // ======================== Modal ========================
+  {
+    [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
+      pointerEvents: 'none',
+      position: 'relative',
+      top: 100,
+      width: 'auto',
+      maxWidth: `calc(100vw - ${(0, _cssinjs.unit)(token.calc(token.margin).mul(2).equal())})`,
+      margin: '0 auto',
+      paddingBottom: token.paddingLG,
+      [`${componentCls}-title`]: {
+        margin: 0,
+        color: token.titleColor,
+        fontWeight: token.fontWeightStrong,
+        fontSize: token.titleFontSize,
+        lineHeight: token.titleLineHeight,
+        wordWrap: 'break-word'
+      },
+      [`${componentCls}-content`]: {
+        position: 'relative',
+        backgroundColor: token.contentBg,
+        backgroundClip: 'padding-box',
+        border: 0,
+        borderRadius: token.borderRadiusLG,
+        boxShadow: token.boxShadow,
+        pointerEvents: 'auto',
+        padding: token.contentPadding
+      },
+      [`${componentCls}-close`]: Object.assign({
+        position: 'absolute',
+        top: token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
+        insetInlineEnd: token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
+        zIndex: token.calc(token.zIndexPopupBase).add(10).equal(),
+        padding: 0,
+        color: token.modalCloseIconColor,
+        fontWeight: token.fontWeightStrong,
+        lineHeight: 1,
+        textDecoration: 'none',
+        background: 'transparent',
+        borderRadius: token.borderRadiusSM,
+        width: token.modalCloseBtnSize,
+        height: token.modalCloseBtnSize,
+        border: 0,
+        outline: 0,
+        cursor: 'pointer',
+        transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+        '&-x': {
+          display: 'flex',
+          fontSize: token.fontSizeLG,
+          fontStyle: 'normal',
+          lineHeight: (0, _cssinjs.unit)(token.modalCloseBtnSize),
+          justifyContent: 'center',
+          textTransform: 'none',
+          textRendering: 'auto'
+        },
+        '&:disabled': {
+          pointerEvents: 'none'
+        },
+        '&:hover': {
+          color: token.modalCloseIconHoverColor,
+          backgroundColor: token.colorBgTextHover,
+          textDecoration: 'none'
+        },
+        '&:active': {
+          backgroundColor: token.colorBgTextActive
+        }
+      }, (0, _style.genFocusStyle)(token)),
+      [`${componentCls}-header`]: {
+        color: token.colorText,
+        background: token.headerBg,
+        borderRadius: `${(0, _cssinjs.unit)(token.borderRadiusLG)} ${(0, _cssinjs.unit)(token.borderRadiusLG)} 0 0`,
+        marginBottom: token.headerMarginBottom,
+        padding: token.headerPadding,
+        borderBottom: token.headerBorderBottom
+      },
+      [`${componentCls}-body`]: {
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        wordWrap: 'break-word',
+        padding: token.bodyPadding,
+        [`${componentCls}-body-skeleton`]: {
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          margin: `${(0, _cssinjs.unit)(token.margin)} auto`
+        }
+      },
+      [`${componentCls}-footer`]: {
+        textAlign: 'end',
+        background: token.footerBg,
+        marginTop: token.footerMarginTop,
+        padding: token.footerPadding,
+        borderTop: token.footerBorderTop,
+        borderRadius: token.footerBorderRadius,
+        [`> ${token.antCls}-btn + ${token.antCls}-btn`]: {
+          marginInlineStart: token.marginXS
+        }
+      },
+      [`${componentCls}-open`]: {
+        overflow: 'hidden'
+      }
+    })
+  },
+  // ======================== Pure =========================
+  {
+    [`${componentCls}-pure-panel`]: {
+      top: 'auto',
+      padding: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      [`${componentCls}-content,
+          ${componentCls}-body,
+          ${componentCls}-confirm-body-wrapper`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 'auto'
+      },
+      [`${componentCls}-confirm-body`]: {
+        marginBottom: 'auto'
+      }
+    }
+  }];
+};
+const genRTLStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-root`]: {
+      [`${componentCls}-wrap-rtl`]: {
+        direction: 'rtl',
+        [`${componentCls}-confirm-body`]: {
+          direction: 'rtl'
+        }
+      }
+    }
+  };
+};
+// ============================== Export ==============================
+const prepareToken = token => {
+  const headerPaddingVertical = token.padding;
+  const headerFontSize = token.fontSizeHeading5;
+  const headerLineHeight = token.lineHeightHeading5;
+  const modalToken = (0, _internal.mergeToken)(token, {
+    modalHeaderHeight: token.calc(token.calc(headerLineHeight).mul(headerFontSize).equal()).add(token.calc(headerPaddingVertical).mul(2).equal()).equal(),
+    modalFooterBorderColorSplit: token.colorSplit,
+    modalFooterBorderStyle: token.lineType,
+    modalFooterBorderWidth: token.lineWidth,
+    modalCloseIconColor: token.colorIcon,
+    modalCloseIconHoverColor: token.colorIconHover,
+    modalCloseBtnSize: token.controlHeight,
+    modalConfirmIconSize: token.fontHeight,
+    modalTitleHeight: token.calc(token.titleFontSize).mul(token.titleLineHeight).equal()
+  });
+  return modalToken;
+};
+exports.prepareToken = prepareToken;
+const prepareComponentToken = token => ({
+  footerBg: 'transparent',
+  headerBg: token.colorBgElevated,
+  titleLineHeight: token.lineHeightHeading5,
+  titleFontSize: token.fontSizeHeading5,
+  contentBg: token.colorBgElevated,
+  titleColor: token.colorTextHeading,
+  // internal
+  contentPadding: token.wireframe ? 0 : `${(0, _cssinjs.unit)(token.paddingMD)} ${(0, _cssinjs.unit)(token.paddingContentHorizontalLG)}`,
+  headerPadding: token.wireframe ? `${(0, _cssinjs.unit)(token.padding)} ${(0, _cssinjs.unit)(token.paddingLG)}` : 0,
+  headerBorderBottom: token.wireframe ? `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : 'none',
+  headerMarginBottom: token.wireframe ? 0 : token.marginXS,
+  bodyPadding: token.wireframe ? token.paddingLG : 0,
+  footerPadding: token.wireframe ? `${(0, _cssinjs.unit)(token.paddingXS)} ${(0, _cssinjs.unit)(token.padding)}` : 0,
+  footerBorderTop: token.wireframe ? `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : 'none',
+  footerBorderRadius: token.wireframe ? `0 0 ${(0, _cssinjs.unit)(token.borderRadiusLG)} ${(0, _cssinjs.unit)(token.borderRadiusLG)}` : 0,
+  footerMarginTop: token.wireframe ? 0 : token.marginSM,
+  confirmBodyPadding: token.wireframe ? `${(0, _cssinjs.unit)(token.padding * 2)} ${(0, _cssinjs.unit)(token.padding * 2)} ${(0, _cssinjs.unit)(token.paddingLG)}` : 0,
+  confirmIconMarginInlineEnd: token.wireframe ? token.margin : token.marginSM,
+  confirmBtnsMarginTop: token.wireframe ? token.marginLG : token.marginSM
+});
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Modal', token => {
+  const modalToken = prepareToken(token);
+  return [genModalStyle(modalToken), genRTLStyle(modalToken), genModalMaskStyle(modalToken), (0, _motion.initZoomMotion)(modalToken, 'zoom')];
+}, prepareComponentToken, {
+  unitless: {
+    titleLineHeight: true
+  }
+});

package/lib/modal/useModal/HookModal.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { ModalFuncProps } from '../interface';
+export interface HookModalProps {
+    afterClose: () => void;
+    config: ModalFuncProps;
+    onConfirm?: (confirmed: boolean) => void;
+    /**
+     * Do not throw if is await mode
+     */
+    isSilent?: () => boolean;
+}
+export interface HookModalRef {
+    destroy: () => void;
+    update: (config: ModalFuncProps) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<HookModalProps & React.RefAttributes<HookModalRef>>;
+export default _default;