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

package/lib/tree-select/index.js

@@ -41,6 +41,7 @@ var import_config_provider = __toESM(require("../config-provider"));
 var import_en_US = __toESM(require("../locale/en-US"));
 var import_style = __toESM(require("./style"));
 __reExport(tree_select_exports, require("antd/es/tree-select"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var InternalTreeSelect = import_react.default.forwardRef(
   ({ locale: customLocale, prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
     const { locale: contextLocale, getPrefixCls } = (0, import_react.useContext)(
@@ -54,10 +55,10 @@ var InternalTreeSelect = import_react.default.forwardRef(
       ...customLocale
     };
     const prefixCls = getPrefixCls("tree-select", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const treeSelectCls = (0, import_classnames.default)(className);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_antd.TreeSelect,
         {
           ref,

package/lib/tree-select/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 TreeSelectToken = FullToken<'TreeSelect'>;
 export declare const genTreeSelectStyle: GenerateStyle<TreeSelectToken>;
-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/tree-select/style/index.js

@@ -27,12 +27,9 @@ var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTreeSelectStyle = (token) => {
   return {};
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("TreeSelect", (token) => {
-    return [genTreeSelectStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("TreeSelect", (token) => {
+  return [genTreeSelectStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genTreeSelectStyle

package/lib/typography/Link.js

@@ -39,24 +39,25 @@ var import_config_provider = __toESM(require("../config-provider"));
 var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Link_exports, require("antd/es/typography/Link"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var { Link: AntLink } = import_antd.Typography;
 var Link = import_react.default.forwardRef(
   ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         AntLink,
         {
           ref,
           editable,
           prefixCls: customizePrefixCls,
           className: typographyCls,
-          ...restProps
-        },
-        children
+          ...restProps,
+          children
+        }
       )
     );
   }

package/lib/typography/Paragraph.js

@@ -39,24 +39,25 @@ var import_config_provider = __toESM(require("../config-provider"));
 var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Paragraph_exports, require("antd/es/typography/Paragraph"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var { Paragraph: AntParagraph } = import_antd.Typography;
 var Paragraph = import_react.default.forwardRef(
   ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         AntParagraph,
         {
           ref,
           editable,
           prefixCls: customizePrefixCls,
           className: typographyCls,
-          ...restProps
-        },
-        children
+          ...restProps,
+          children
+        }
       )
     );
   }

package/lib/typography/Text.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { TextProps as AntTextProps } from 'antd/es/typography/Text';
 export * from 'antd/es/typography/Text';
 export interface TextProps extends AntTextProps {
+    caption?: boolean;
 }
 type CompoundedComponent = React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>> & {
     /** @internal */

package/lib/typography/Text.js

@@ -39,24 +39,25 @@ var import_config_provider = __toESM(require("../config-provider"));
 var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Text_exports, require("antd/es/typography/Text"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var { Text: AntText } = import_antd.Typography;
 var Text = import_react.default.forwardRef(
-  ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
+  ({ editable, caption, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
-    const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
+    const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable, caption);
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         AntText,
         {
           ref,
           editable,
           prefixCls: customizePrefixCls,
           className: typographyCls,
-          ...restProps
-        },
-        children
+          ...restProps,
+          children
+        }
       )
     );
   }

package/lib/typography/Title.js

@@ -39,24 +39,25 @@ var import_config_provider = __toESM(require("../config-provider"));
 var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Title_exports, require("antd/es/typography/Title"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var { Title: AntTitle } = import_antd.Typography;
 var Title = import_react.default.forwardRef(
   ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         AntTitle,
         {
           ref,
           editable,
           prefixCls: customizePrefixCls,
           className: typographyCls,
-          ...restProps
-        },
-        children
+          ...restProps,
+          children
+        }
       )
     );
   }

package/lib/typography/hooks/useClassName.d.ts

@@ -1,3 +1,3 @@
 import type { BlockProps } from 'antd/es/typography/Base';
-declare const useClassName: (prefixCls: string, className: string, editable?: BlockProps['editable']) => string;
+declare const useClassName: (prefixCls: string, className: string, editable?: BlockProps['editable'], caption?: boolean) => string;
 export default useClassName;

package/lib/typography/hooks/useClassName.js

@@ -33,11 +33,12 @@ __export(useClassName_exports, {
 });
 module.exports = __toCommonJS(useClassName_exports);
 var import_classnames = __toESM(require("classnames"));
-var useClassName = (prefixCls, className, editable) => {
+var useClassName = (prefixCls, className, editable, caption) => {
   var _a;
   const typographyCls = (0, import_classnames.default)(
     {
-      [`${prefixCls}-editable-text`]: typeof editable === "object" && ((_a = editable == null ? void 0 : editable.triggerType) == null ? void 0 : _a.includes("text"))
+      [`${prefixCls}-editable-text`]: typeof editable === "object" && ((_a = editable == null ? void 0 : editable.triggerType) == null ? void 0 : _a.includes("text")),
+      [`${prefixCls}-caption`]: caption
     },
     className
   );

package/lib/typography/index.d.ts

@@ -1,8 +1,19 @@
-import { Typography } from 'antd';
+import { Typography as OriginTypography } from 'antd';
+import Text from './Text';
+import Link from './Link';
+import Title from './Title';
+import Paragraph from './Paragraph';
 export * from 'antd/es/typography';
 export * from 'antd/es/typography/Base';
 export * from 'antd/es/typography/Text';
 export * from 'antd/es/typography/Paragraph';
 export * from 'antd/es/typography/Link';
 export * from 'antd/es/typography/Title';
+export type TypographyType = typeof OriginTypography & {
+    Text: typeof Text;
+    Link: typeof Link;
+    Title: typeof Title;
+    Paragraph: typeof Paragraph;
+};
+declare const Typography: TypographyType;
 export default Typography;

package/lib/typography/index.js

@@ -44,11 +44,12 @@ __reExport(typography_exports, require("antd/es/typography/Text"), module.export
 __reExport(typography_exports, require("antd/es/typography/Paragraph"), module.exports);
 __reExport(typography_exports, require("antd/es/typography/Link"), module.exports);
 __reExport(typography_exports, require("antd/es/typography/Title"), module.exports);
-import_antd.Typography.Text = import_Text.default;
-import_antd.Typography.Link = import_Link.default;
-import_antd.Typography.Title = import_Title.default;
-import_antd.Typography.Paragraph = import_Paragraph.default;
-var typography_default = import_antd.Typography;
+var Typography = import_antd.Typography;
+Typography.Text = import_Text.default;
+Typography.Link = import_Link.default;
+Typography.Title = import_Title.default;
+Typography.Paragraph = import_Paragraph.default;
+var typography_default = Typography;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("antd/es/typography"),

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/lib/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type TypographyToken = FullToken<'Typography'>;
 export declare const genTypographyStyle: GenerateStyle<TypographyToken>;
-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/typography/style/index.js

@@ -23,10 +23,14 @@ __export(style_exports, {
   genTypographyStyle: () => genTypographyStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTypographyStyle = (token) => {
-  const { componentCls, controlHeight, fontSize, lineHeight } = token;
-  const marginOffset = (controlHeight - fontSize * lineHeight) / 2;
+  const { componentCls, controlHeight, fontSize, lineHeight, calc } = token;
+  const marginOffset = calc(controlHeight).sub(calc(fontSize).mul(lineHeight).equal()).div(2).equal();
+  const paddingTop = calc(marginOffset).sub(token.lineWidth).equal();
+  const paddingInline = calc(token.paddingSM).sub(token.lineWidth).equal();
+  const negativeMarginOffset = calc(marginOffset).mul(-1).equal();
   return {
     // inherit color and lineHeight from parent instead of fixed colorText
     [`${componentCls}`]: {
@@ -37,56 +41,60 @@ var genTypographyStyle = (token) => {
         fontSize: token.fontSize
       }
     },
+    [`${componentCls}-caption`]: {
+      fontSize: token.fontSizeSM,
+      fontWeight: token.fontWeightWeak
+    },
     [`${componentCls}${componentCls}-editable-text:not(${componentCls}-edit-content)`]: {
       "&:hover": {
         background: token.colorBgContainer,
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+        border: `${(0, import_cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
         borderRadius: token.borderRadius,
         position: "relative",
-        insetInlineStart: -token.paddingSM,
-        padding: `${marginOffset - token.lineWidth}px ${token.paddingSM - token.lineWidth}px`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        padding: `${paddingTop} ${paddingInline}`
       },
       "div&:hover": {
         height: token.controlHeight,
-        marginTop: -marginOffset,
-        marginBottom: `calc(1em - ${marginOffset}px)`
+        marginTop: negativeMarginOffset,
+        marginBottom: calc("1em").sub(marginOffset).equal()
       },
       "span&:hover": {
         display: "inline-block",
         height: token.controlHeight,
-        marginTop: -marginOffset,
-        marginBottom: -marginOffset
+        marginTop: negativeMarginOffset,
+        marginBottom: negativeMarginOffset
       },
       "h1&:hover, h2&:hover, h3&:hover, h4&:hover, h5&:hover": {
-        marginTop: `${-marginOffset}px !important`,
-        marginBottom: `${-marginOffset}px !important`
+        marginTop: `${negativeMarginOffset} !important`,
+        marginBottom: `${negativeMarginOffset} !important`
       }
     },
     [`${componentCls}${componentCls}-edit-content`]: {
       [`${componentCls}-div&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: -marginOffset,
-        marginBottom: `calc(1em - ${marginOffset}px)`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        insetBlockStart: 0,
+        marginTop: negativeMarginOffset,
+        marginBottom: calc("1em").sub(marginOffset).equal()
       },
       [`${componentCls}-span&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: -marginOffset,
-        marginBottom: -marginOffset
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        insetBlockStart: 0,
+        marginTop: negativeMarginOffset,
+        marginBottom: negativeMarginOffset
       },
       [`${componentCls}-h1&, ${componentCls}-h2&, ${componentCls}-h3&, ${componentCls}-h4&, ${componentCls}-h5&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: `${-marginOffset}px !important`,
-        marginBottom: `${-marginOffset}px !important`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        insetBlockStart: 0,
+        marginTop: `${negativeMarginOffset} !important`,
+        marginBottom: `${negativeMarginOffset} !important`
       }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Typography", (token) => {
-    return [genTypographyStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Typography", (token) => {
+  return [genTypographyStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genTypographyStyle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -31,7 +31,6 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "**/*.less",
     "**/*.css"
   ],
   "scripts": {
@@ -39,13 +38,13 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.24.0",
-    "@ctrl/tinycolor": "^4.1.0",
+    "@ctrl/tinycolor": "^4.2.0",
     "@inline-svg-unique-id/react": "^1.2.3",
     "@oceanbase/aliyun-theme": "^0.1.6",
     "@oceanbase/icons": "^1.0.0-alpha.0",
-    "@oceanbase/util": "^1.0.0-alpha.0",
+    "@oceanbase/util": "^1.0.0-alpha.2",
     "ahooks": "^2.10.14",
-    "antd": "^5.27.3",
+    "antd": "^5.29.2",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
@@ -53,17 +52,19 @@
     "rc-util": "^5.44.4"
   },
   "devDependencies": {
+    "@ant-design/cssinjs-utils": "^1.1.3",
     "@babel/cli": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-env": "^7.28.5",
     "antd-token-previewer": "^2.0.8",
+    "rc-input": "^1.8.0",
     "rc-select": "^14.16.8",
-    "rc-slider": "^11.1.8",
-    "rc-table": "^7.53.0",
+    "rc-slider": "^11.1.9",
+    "rc-table": "^7.55.1",
     "rc-tree-select": "^5.27.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "47b1ebfa75581585b83252085dddd33fc2c072a5"
+  "gitHead": "06757770d5ede2d3bc2ea0409e45d2e6dea5012c"
 }

package/es/_util/genStyle.d.ts

@@ -1,2 +0,0 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-export declare const genCompactStyle: (componentCls: string, subComponentCls?: string) => CSSObject;

package/es/_util/getWeakenBorderColor.d.ts

@@ -1 +0,0 @@
-export declare function getWeakenBorderColor(color: string): string;

package/es/_util/getWeakenBorderColor.js

@@ -1,4 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-export function getWeakenBorderColor(color) {
-  return new TinyColor(color).setAlpha(0.4).toHex8String();
-}

package/es/global.css

@@ -1,48 +0,0 @@
-@import '~antd/dist/reset.css';
-
-@font-face {
-  font-family: 'Inter';
-  /* load priority: local font > self-hosting font > remote font */
-  src:
-    local('Inter'),
-    url('./fonts/Inter.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2')
-      format('woff2');
-  /* load strategy: use default font as fallback */
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Consolas';
-  src:
-    local('Consolas'),
-    url('./fonts/Consolas.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Helvetica Neue';
-  src:
-    local('Helvetica Neue'),
-    url('./fonts/HelveticaNeue.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-* {
-  scrollbar-color: #e2e8f3 transparent;
-}
-
-.rc-virtual-list-scrollbar-thumb {
-  background: #e2e8f3 !important;
-}

package/lib/_util/genStyle.d.ts

@@ -1,2 +0,0 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-export declare const genCompactStyle: (componentCls: string, subComponentCls?: string) => CSSObject;

package/lib/_util/getWeakenBorderColor.d.ts

@@ -1 +0,0 @@
-export declare function getWeakenBorderColor(color: string): string;

package/lib/global.css

@@ -1,48 +0,0 @@
-@import '~antd/dist/reset.css';
-
-@font-face {
-  font-family: 'Inter';
-  /* load priority: local font > self-hosting font > remote font */
-  src:
-    local('Inter'),
-    url('./fonts/Inter.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2')
-      format('woff2');
-  /* load strategy: use default font as fallback */
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Consolas';
-  src:
-    local('Consolas'),
-    url('./fonts/Consolas.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Helvetica Neue';
-  src:
-    local('Helvetica Neue'),
-    url('./fonts/HelveticaNeue.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-* {
-  scrollbar-color: #e2e8f3 transparent;
-}
-
-.rc-virtual-list-scrollbar-thumb {
-  background: #e2e8f3 !important;
-}