@oceanbase/design 1.0.0-alpha.1 → 1.0.0-alpha.10

package/lib/{_util/genStyle.js → input-number/style/index.js}

@@ -16,28 +16,33 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/_util/genStyle.ts
-var genStyle_exports = {};
-__export(genStyle_exports, {
-  genCompactStyle: () => genCompactStyle
+// src/input-number/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genInputStyle: () => genInputStyle
 });
-module.exports = __toCommonJS(genStyle_exports);
-var genCompactStyle = (componentCls, subComponentCls = "") => {
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genInputStyle = (token) => {
+  const { antCls, componentCls } = token;
+  const selectComponentCls = `${antCls}-select-selector`;
   return {
-    [`&${componentCls}-compact-item:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item ${subComponentCls}`]: {
-      borderStartEndRadius: 0,
-      borderEndEndRadius: 0
-    },
-    [`&${componentCls}-compact-item:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item) ${subComponentCls}`]: {
-      borderRadius: 0
-    },
-    [`&${componentCls}-compact-item:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item ${subComponentCls}`]: {
-      borderStartStartRadius: 0,
-      borderEndStartRadius: 0
+    [`${componentCls}-group-wrapper`]: {
+      [`${componentCls}-group-addon`]: {
+        color: token.colorTextTertiary,
+        fontSize: token.fontSizeSM,
+        [selectComponentCls]: {
+          color: token.colorTextTertiary
+        }
+      }
     }
   };
 };
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("InputNumber", (token) => {
+  return [genInputStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  genCompactStyle
+  genInputStyle
 });

package/lib/list/index.js

@@ -33,14 +33,15 @@ __export(list_exports, {
   default: () => list_default
 });
 module.exports = __toCommonJS(list_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
 __reExport(list_exports, require("antd/es/list"), module.exports);
 __reExport(list_exports, require("antd/es/list/Item"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 function List({ pagination, ...restProps }) {
   const extendedContext = (0, import_react.useContext)(import_config_provider.default.ExtendedConfigContext);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_antd.List,
     {
       ...restProps,

package/lib/locale/en-US.js

@@ -56,5 +56,8 @@ var en_US_default = {
       collapse: "Collapse",
       open: "Open"
     }
+  },
+  Card: {
+    viewDocument: "View Document"
   }
 };

package/lib/locale/index.d.ts

@@ -6,6 +6,7 @@ import type { InputNumberLocale } from '../input-number';
 import type { SelectLocale } from '../select';
 import type { TreeSelectLocale } from '../tree-select';
 import type { TableLocale } from '../table';
+import type { CardLocale } from '../card';
 export * from 'antd/es/locale';
 export type GlobalLocale = AntLocale['global'] & {
     inputPlaceholder?: string;
@@ -22,5 +23,6 @@ export interface Locale extends AntLocale {
     Select?: SelectLocale;
     TreeSelect?: TreeSelectLocale;
     Table?: TableLocale;
+    Card?: CardLocale;
 }
 export { default as useLocale } from './useLocale';

package/lib/locale/ja-JP.d.ts

@@ -0,0 +1,3 @@
+import type { Locale } from '.';
+declare const _default: Locale;
+export default _default;

package/lib/locale/ja-JP.js

@@ -0,0 +1,63 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/locale/ja-JP.ts
+var ja_JP_exports = {};
+__export(ja_JP_exports, {
+  default: () => ja_JP_default
+});
+module.exports = __toCommonJS(ja_JP_exports);
+var import_ja_JP = __toESM(require("antd/es/locale/ja_JP"));
+var ja_JP_default = {
+  ...import_ja_JP.default,
+  global: {
+    ...import_ja_JP.default.global,
+    inputPlaceholder: "入力してください"
+  },
+  Pagination: {
+    ...import_ja_JP.default.Pagination,
+    total: "合計 ${total} 件"
+  },
+  Drawer: {
+    okText: "OK",
+    cancelText: "キャンセル"
+  },
+  Table: {
+    ...import_ja_JP.default.Table,
+    batchOperationBar: {
+      selected: "選択中",
+      object: "件",
+      cancel: "キャンセル",
+      collapse: "折りたたむ",
+      open: "展開"
+    }
+  },
+  Card: {
+    viewDocument: "ドキュメントを見る"
+  }
+};

package/lib/locale/zh-CN.js

@@ -56,5 +56,8 @@ var zh_CN_default = {
       collapse: "收起",
       open: "展开"
     }
+  },
+  Card: {
+    viewDocument: "查看文档"
   }
 };

package/lib/locale/zh-TW.js

@@ -56,5 +56,8 @@ var zh_TW_default = {
       collapse: "收起",
       open: "展開"
     }
+  },
+  Card: {
+    viewDocument: "查看文檔"
   }
 };

package/lib/lottie/index.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_design = require("../index");
 var import_ahooks = require("ahooks");
 var import_classnames = __toESM(require("classnames"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var Lottie = import_react.default.forwardRef(
   ({ mode = "default", loop = true, speed = 1, className, style, ...restProps }, ref) => {
     const { iconPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
@@ -63,7 +64,7 @@ var Lottie = import_react.default.forwardRef(
     (0, import_react.useImperativeHandle)(ref, () => ({
       animation
     }));
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: containerRef,

package/lib/modal/Modal.js

@@ -33,12 +33,14 @@ __export(Modal_exports, {
 });
 module.exports = __toCommonJS(Modal_exports);
 var import_antd = require("antd");
+var import_icons = require("@oceanbase/icons");
 var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_config_provider = __toESM(require("../config-provider"));
 var import_space = __toESM(require("../space"));
 var import_static_function = require("../static-function");
 var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var Modal = ({
   extra,
   footer,
@@ -48,14 +50,17 @@ var Modal = ({
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("modal", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls);
   const modalCls = (0, import_classnames.default)(className);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+  return wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Modal,
       {
         destroyOnClose: true,
-        footer: footer === false ? null : extra ? (originNode) => /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-footer-content` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-footer-extra` }, extra), /* @__PURE__ */ import_react.default.createElement(import_space.default, null, originNode)) : footer,
+        footer: footer === false ? null : extra ? (originNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-footer-content`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-footer-extra`, children: extra }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_space.default, { children: originNode })
+        ] }) : footer,
         prefixCls: customizePrefixCls,
         className: modalCls,
         ...restProps
@@ -63,12 +68,31 @@ var Modal = ({
     )
   );
 };
-Modal.info = (props) => import_static_function.modal.info(props);
-Modal.success = (props) => import_static_function.modal.success(props);
-Modal.error = (props) => import_static_function.modal.error(props);
-Modal.warning = (props) => import_static_function.modal.warning(props);
-Modal.warn = (props) => import_static_function.modal.warning(props);
-Modal.confirm = (props) => import_static_function.modal.confirm(props);
+Modal.info = (props) => import_static_function.modal.info({
+  // use outlined icon
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoCircleOutlined, {}),
+  ...props
+});
+Modal.success = (props) => import_static_function.modal.success({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleOutlined, {}),
+  ...props
+});
+Modal.error = (props) => import_static_function.modal.error({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleOutlined, {}),
+  ...props
+});
+Modal.warning = (props) => import_static_function.modal.warning({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {}),
+  ...props
+});
+Modal.warn = (props) => import_static_function.modal.warning({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {}),
+  ...props
+});
+Modal.confirm = (props) => import_static_function.modal.confirm({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {}),
+  ...props
+});
 Modal.useModal = import_antd.Modal.useModal;
 Modal.destroyAll = import_antd.Modal.destroyAll;
 Modal.config = import_antd.Modal.config;

package/lib/modal/Progress.js

@@ -32,12 +32,13 @@ __export(Progress_exports, {
   default: () => Progress_default
 });
 module.exports = __toCommonJS(Progress_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_Modal = __toESM(require("./Modal"));
 var import_icons = require("@oceanbase/icons");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Progress = ({
   prefixCls: customizePrefixCls,
   className,
@@ -52,7 +53,7 @@ var Progress = ({
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("modal", customizePrefixCls);
   const progressModalCls = (0, import_classnames.default)(`${prefixCls}-progress`, className);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Modal.default,
     {
       prefixCls: customizePrefixCls,
@@ -60,9 +61,12 @@ var Progress = ({
       width,
       maskClosable,
       footer,
-      ...restProps
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, loading ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, { className: `${prefixCls}-progress-loading` }) : /* @__PURE__ */ import_react.default.createElement(import_antd.Progress, { type: "circle", size: 200, ...progress }), description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-progress-description` }, description))
+      ...restProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, { className: `${prefixCls}-progress-loading` }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Progress, { type: "circle", size: 200, ...progress }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-progress-description`, children: description })
+      ] })
+    }
   );
 };
 if (process.env.NODE_ENV !== "production") {

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type ModalToken = FullToken<'Modal'>;
 export declare const genModalStyle: GenerateStyle<ModalToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;

package/lib/modal/style/index.js

@@ -28,25 +28,60 @@ var genModalStyle = (token) => {
   const {
     antCls,
     componentCls,
-    marginXXS,
     marginLG,
-    paddingMD,
-    borderRadius,
-    controlHeight,
     fontSizeHeading5,
-    lineHeightHeading5
+    lineHeightHeading5,
+    fontSizeHeading3,
+    colorSplit,
+    calc
   } = token;
   const top = 100;
   const bottom = 100;
-  const titleHeight = fontSizeHeading5 * lineHeightHeading5;
+  const titleHeight = calc(fontSizeHeading5).mul(lineHeightHeading5).equal();
   return {
     /* Modal */
-    [`${componentCls}:not(${componentCls}-confirm)`]: {
-      [`${componentCls}-header`]: {
-        marginBottom: marginLG
+    [`${componentCls}:not(${componentCls}-confirm):not(${componentCls}-progress)`]: {
+      [`${componentCls}-content`]: {
+        paddingBlock: token.padding,
+        [`${componentCls}-close`]: {
+          marginTop: token.marginXXS,
+          marginRight: token.marginXXS
+        },
+        [`${componentCls}-header`]: {
+          position: "relative",
+          marginBottom: 0,
+          paddingBottom: token.padding,
+          [`${componentCls}-title`]: {
+            fontSize: fontSizeHeading3
+          },
+          // 使用伪元素创建贯通的分割线
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "1px",
+            backgroundColor: colorSplit,
+            // antd Modal content默认padding通常是24px，使用负margin让分割线贯通
+            // 如果antd使用其他padding值，可能需要调整
+            marginLeft: calc(token.paddingLG).mul(-1).equal(),
+            marginRight: calc(token.paddingLG).mul(-1).equal()
+          }
+        },
+        [`${componentCls}-body`]: {
+          paddingTop: token.paddingLG,
+          marginInline: calc(token.marginLG).mul(-1).equal(),
+          paddingInline: token.paddingLG
+        }
       },
       [`${componentCls}-footer`]: {
-        marginTop: marginLG,
+        paddingTop: token.paddingLG,
+        marginTop: 0,
+        [`${antCls}-btn`]: {
+          height: 28,
+          minHeight: 28
+        },
         [`${componentCls}-footer-content`]: {
           display: "flex",
           justifyContent: "space-between",
@@ -62,12 +97,16 @@ var genModalStyle = (token) => {
     /* Modal.Progress */
     [`${componentCls}${componentCls}-progress`]: {
       [`${componentCls}-content`]: {
-        padding: `${token.paddingXL + token.padding}px ${token.paddingLG + token.padding}px`,
+        padding: token.paddingLG,
+        [`${componentCls}-close`]: {
+          marginTop: token.marginSM,
+          marginRight: token.marginXXS
+        },
         [`${componentCls}-header`]: {
           textAlign: "center",
           marginBottom: token.marginXXL,
           [`${componentCls}-title`]: {
-            fontSize: token.fontSizeHeading4
+            fontSize: fontSizeHeading3
           }
         },
         [`${componentCls}-body`]: {
@@ -86,28 +125,46 @@ var genModalStyle = (token) => {
           }
         },
         [`${componentCls}-footer`]: {
-          textAlign: "center"
+          textAlign: "center",
+          [`${antCls}-btn`]: {
+            height: 28,
+            minHeight: 28
+          }
         }
       }
     },
     /* Modal.method() */
     [`${componentCls}-confirm`]: {
-      [`${componentCls}-body ${componentCls}-confirm-title +${componentCls}-confirm-content`]: {
-        marginBlockStart: marginXXS,
-        color: token.colorTextSecondary
+      [`${componentCls}-content`]: {
+        padding: token.paddingLG
       },
-      [`${componentCls}-confirm-btns`]: {
-        marginTop: marginLG
+      [`${componentCls}-body`]: {
+        [`${componentCls}-confirm-title`]: {
+          fontSize: fontSizeHeading3
+        },
+        [`${componentCls}-confirm-body > ${token.iconCls}`]: {
+          height: calc(token.fontSizeHeading3).mul(token.lineHeight).equal()
+        },
+        [`${componentCls}-confirm-paragraph`]: {
+          rowGap: token.marginSM
+        },
+        [`${componentCls}-confirm-content`]: {
+          color: token.colorTextSecondary
+        },
+        [`${componentCls}-confirm-btns`]: {
+          marginTop: marginLG,
+          [`${antCls}-btn`]: {
+            height: 28,
+            minHeight: 28
+          }
+        }
       }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Modal", (token) => {
-    return [genModalStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Modal", (token) => {
+  return [genModalStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genModalStyle

package/lib/radio/index.js

@@ -39,14 +39,15 @@ var import_react = __toESM(require("react"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_style = __toESM(require("./style"));
 __reExport(radio_exports, require("antd/es/radio"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var InternalRadio = import_react.default.forwardRef(
   ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("radio", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const radioCls = (0, import_classnames.default)(className);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { ref, prefixCls: customizePrefixCls, className: radioCls, ...restProps })
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Radio, { ref, prefixCls: customizePrefixCls, className: radioCls, ...restProps })
     );
   }
 );

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type RadioToken = FullToken<'Radio'>;
 export declare const genRadioStyle: GenerateStyle<RadioToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;

package/lib/radio/style/index.js

@@ -25,24 +25,33 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genRadioStyle = (token) => {
-  const { componentCls, radioSize, fontSize, fontSizeLG, lineHeight } = token;
+  const { componentCls, radioSize, fontSize, fontSizeLG, lineHeight, calc } = token;
+  const marginBottom = calc(calc(fontSize).mul(lineHeight).equal()).sub(radioSize || fontSizeLG).div(-2).equal();
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}`]: {
         alignSelf: "baseline",
         [`${componentCls}-inner`]: {
-          marginBottom: -(fontSize * lineHeight - (radioSize || fontSizeLG)) / 2
+          marginBottom
         }
+      },
+      [`&:hover ${componentCls}:not(${componentCls}-disabled):not(${componentCls}-checked) ${componentCls}-inner`]: {
+        borderColor: token.gray7
+      }
+    },
+    [`${componentCls}-group`]: {
+      [`${componentCls}-button-wrapper:not(${componentCls}-button-wrapper-disabled):not(${componentCls}-button-wrapper-checked):hover`]: {
+        // set zIndex to 1 for hover effect to cover checked effect
+        zIndex: 1,
+        borderColor: token.gray7,
+        color: token.colorText
       }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Radio", (token) => {
-    return [genRadioStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Radio", (token) => {
+  return [genRadioStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genRadioStyle