@dtjoy/dt-design 1.0.0 → 1.0.1

package/esm/blockHeader/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
+import './style';
 import { LabelTooltipType } from '../_util';
-import './style.less';
 export declare type SizeType = 'small' | 'middle' | 'large';
 export interface IBlockHeaderProps {
     /** 标题 */

package/esm/blockHeader/index.js

@@ -15,9 +15,11 @@ import { QuestionOutlined, UpOutlined } from '@dtinsight/react-icons';
 import { Tooltip } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
 import classNames from 'classnames';
-import { toTooltipProps } from "../_util";
 // import useLocale from '../locale/useLocale';
-import "./style.less";
+import "./style";
+import stles from "./style/index.less";
+console.log(stles);
+import { toTooltipProps } from "../_util";
 function isControlled(props) {
   return props.expand !== undefined;
 }

package/esm/blockHeader/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/esm/blockHeader/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";

package/esm/blockHeader/{style.less → style/index.less}

@@ -1,141 +1,142 @@
-// @card_prefix: ~'dt-block-header';
-@card_prefix: ~'@{ant-prefix}-block-header';
-
-.@{card_prefix} {
-    &__title {
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        &--large {
-            .title__box {
-                line-height: 24px;
-                .title__text {
-                    font-size: 16px;
-                }
-            }
-        }
-        &--middle {
-            .title__box {
-                line-height: 22px;
-                .title__text {
-                    font-size: 14px;
-                }
-            }
-        }
-        &--small {
-            .title__box {
-                line-height: 20px;
-                .title__text {
-                    font-size: 12px;
-                }
-            }
-        }
-        &--background {
-            padding: 0 12px;
-            background-color: #f9f9fa;
-            &.@{card_prefix}__title {
-                &--middle,
-                &--large {
-                    height: 40px;
-                }
-                &--small {
-                    height: 32px;
-                }
-            }
-        }
-        &--pointer {
-            cursor: pointer;
-        }
-        .title {
-            &__box {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
-            &__addon-before {
-                margin-right: 8px;
-                color: @primary-color;
-                &--middle {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 20px;
-                }
-                &--small {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 16px;
-                }
-                &--large {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 20px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 24px;
-                }
-            }
-            &__tooltip {
-                display: flex;
-                margin-right: 4px;
-                font-size: 16px;
-                color: #b1b4c5;
-                cursor: pointer;
-            }
-            &__text {
-                color: @text-color;
-                font-weight: 500;
-                margin-right: 4px;
-            }
-            &__description {
-                display: flex;
-                align-items: center;
-                color: @label-color;
-                font-size: 12px;
-            }
-            &__addon-after {
-                color: @label-color;
-            }
-            &__collapse {
-                color: @label-color;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                user-select: none;
-                .collapse {
-                    &__text {
-                        font-size: 12px;
-                        margin: 0 4px;
-                    }
-                    &__icon {
-                        font-size: 16px;
-                        transition: transform 0.4s;
-                        &--down {
-                            transform: rotate(-180deg);
-                        }
-                        &--up {
-                            transform: rotate(0deg);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    &__content {
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-        transition: opacity 0.5s ease, height 0.5s ease;
-        &--active {
-            opacity: 1;
-            padding: 16px 24px;
-            height: auto;
-        }
-    }
-}
+@import '../../style/themes/index.less';
+
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &--large {
+            .title__box {
+                line-height: 24px;
+                .title__text {
+                    font-size: 16px;
+                }
+            }
+        }
+        &--middle {
+            .title__box {
+                line-height: 22px;
+                .title__text {
+                    font-size: 14px;
+                }
+            }
+        }
+        &--small {
+            .title__box {
+                line-height: 20px;
+                .title__text {
+                    font-size: 12px;
+                }
+            }
+        }
+        &--background {
+            padding: 0 12px;
+            background-color: #f9f9fa;
+            &.@{card_prefix}__title {
+                &--middle,
+                &--large {
+                    height: 40px;
+                }
+                &--small {
+                    height: 32px;
+                }
+            }
+        }
+        &--pointer {
+            cursor: pointer;
+        }
+        .title {
+            &__box {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            &__addon-before {
+                margin-right: 8px;
+                color: @primary-color;
+                &--middle {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 20px;
+                }
+                &--small {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 16px;
+                }
+                &--large {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 20px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 24px;
+                }
+            }
+            &__tooltip {
+                display: flex;
+                margin-right: 4px;
+                font-size: 16px;
+                color: #b1b4c5;
+                cursor: pointer;
+            }
+            &__text {
+                color: @text-color;
+                font-weight: 500;
+                margin-right: 4px;
+            }
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+            &__addon-after {
+                color: @label-color;
+            }
+            &__collapse {
+                color: @label-color;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
+                    }
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__content {
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.5s ease, height 0.5s ease;
+        &--active {
+            opacity: 1;
+            padding: 16px 24px;
+            height: auto;
+        }
+    }
+}

package/esm/button/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonProps as AntdButtonProps } from 'antd';
+import { ButtonType as AntdButtonType } from 'antd/es/button';
+import './style';
+declare type ButtonType = AntdButtonType | 'secondary' | 'tertiary';
+export interface ButtonProps extends Omit<AntdButtonProps, 'type'> {
+    type?: ButtonType;
+}
+export default function Button({ className, icon, children, size, type, ...rest }: ButtonProps): React.JSX.Element;
+export {};

package/esm/button/index.js

@@ -0,0 +1,29 @@
+var _excluded = ["className", "icon", "children", "size", "type"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { Button as AntdButton } from 'antd';
+import { globalConfig } from 'antd/es/config-provider';
+import classNames from 'classnames';
+import "./style";
+export default function Button(_ref) {
+  var className = _ref.className,
+    icon = _ref.icon,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    type = _ref.type,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var prefixCls = globalConfig().getPrefixCls('btn');
+  var typeClassName = type ? "".concat(prefixCls, "--").concat(type) : '';
+  return /*#__PURE__*/React.createElement(AntdButton, _extends({
+    className: classNames(prefixCls, className, typeClassName),
+    size: size,
+    type: type
+  }, rest), icon && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "__icon ").concat(prefixCls, "__icon--").concat(size)
+  }, icon), children && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "__text ").concat(prefixCls, "__text--").concat(size)
+  }, children));
+}

package/esm/button/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/esm/button/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";

package/esm/button/style/index.less

@@ -0,0 +1,120 @@
+@import '../../style/themes/index.less';
+
+@prefix-cls: ~'@{ant-prefix}-btn';
+
+.@{prefix-cls} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 16px;
+
+    &__icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: inherit;
+        line-height: 0;
+        // 因为 dtstack-icon 组件的 font-size 是 16px，现在需要继承 Button 组件的 font-size
+        .dtstack-icon {
+            font-size: inherit;
+        }
+
+        &--small {
+            font-size: 12px;
+        }
+
+        &--middle {
+            font-size: 16px;
+        }
+
+        &--large {
+            font-size: 18px;
+        }
+
+        & + .@{prefix-cls}__text {
+            &--small {
+                margin-left: 2px;
+            }
+
+            &--middle {
+                margin-left: 8px;
+            }
+
+            &--large {
+                margin-left: 8px;
+            }
+        }
+    }
+
+    &__text {
+        display: inline-block;
+
+        &--small {
+            font-size: 12px;
+        }
+
+        &--middle {
+            font-size: 14px;
+        }
+
+        &--large {
+            font-size: 14px;
+        }
+    }
+
+    &-sm {
+        padding: 2px 12px;
+    }
+
+    &-lg {
+        padding: 3px 40px;
+    }
+
+    &-primary[disabled],
+    &-primary[disabled]:hover {
+        // color: @primary-color-disabled;
+        background: @disabled-color;
+        border-color: @disabled-color;
+    }
+
+    &-secondary {
+        border-color: @primary-color;
+        color: @primary-color;
+
+        &:hover,
+        &:focus {
+            background-color: @item-hover-bg;
+        }
+    }
+
+    &-tertiary {
+        // background-color: @table-title-fill-bg;
+        border-color: @border-color-base;
+
+        &:hover,
+        &:focus {
+            background-color: @item-hover-bg;
+            border-color: @primary-color;
+            color: @primary-color;
+        }
+    }
+
+    &-secondary,
+    &-tertiary {
+        &[disabled],
+        &[disabled]:hover {
+            background: #f3f3f3;
+            color: @disabled-color;
+            border-color: @border-color-base;
+        }
+    }
+
+    &-default {
+        &[disabled],
+        &[disabled]:hover {
+            background: transparent;
+            color: @disabled-color;
+            border-color: @border-color-base;
+        }
+    }
+}

package/esm/index.d.ts

@@ -1,3 +1,3 @@
 import '@dtinsight/react-icons/dist/index.css';
-import './styles/entry.less';
 export { default as BlockHeader } from './blockHeader';
+export { default as Button } from './button';

package/esm/index.js

@@ -1,7 +1,6 @@
 import '@dtinsight/react-icons/dist/index.css';
-import "./styles/entry.less";
 export { default as BlockHeader } from "./blockHeader";
-// export { default as Button } from './button';
+export { default as Button } from "./button";
 // export { default as Catalogue } from './catalogue';
 // export { default as Chat } from './chat';
 // export { default as CollapsibleActionItems } from './collapsibleActionItems';

package/esm/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/esm/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/esm/style/index.less

@@ -0,0 +1 @@
+@import "./themes/index.less";

package/esm/style/themes/index.less

@@ -0,0 +1 @@
+@import "~antd/es/style/themes/default.less";

package/lib/blockHeader/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
+import './style';
 import { LabelTooltipType } from '../_util';
-import './style.less';
 export declare type SizeType = 'small' | 'middle' | 'large';
 export interface IBlockHeaderProps {
     /** 标题 */

package/lib/blockHeader/index.js

@@ -9,13 +9,15 @@ var _reactIcons = require("@dtinsight/react-icons");
 var _antd = require("antd");
 var _configProvider = require("antd/es/config-provider");
 var _classnames = _interopRequireDefault(require("classnames"));
+require("./style");
+var _index = _interopRequireDefault(require("./style/index.less"));
 var _util = require("../_util");
-require("./style.less");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import useLocale from '../locale/useLocale';
 
+console.log(_index.default);
 function isControlled(props) {
   return props.expand !== undefined;
 }

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

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/blockHeader/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/blockHeader/{style.less → style/index.less}

@@ -1,141 +1,142 @@
-// @card_prefix: ~'dt-block-header';
-@card_prefix: ~'@{ant-prefix}-block-header';
-
-.@{card_prefix} {
-    &__title {
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        &--large {
-            .title__box {
-                line-height: 24px;
-                .title__text {
-                    font-size: 16px;
-                }
-            }
-        }
-        &--middle {
-            .title__box {
-                line-height: 22px;
-                .title__text {
-                    font-size: 14px;
-                }
-            }
-        }
-        &--small {
-            .title__box {
-                line-height: 20px;
-                .title__text {
-                    font-size: 12px;
-                }
-            }
-        }
-        &--background {
-            padding: 0 12px;
-            background-color: #f9f9fa;
-            &.@{card_prefix}__title {
-                &--middle,
-                &--large {
-                    height: 40px;
-                }
-                &--small {
-                    height: 32px;
-                }
-            }
-        }
-        &--pointer {
-            cursor: pointer;
-        }
-        .title {
-            &__box {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
-            &__addon-before {
-                margin-right: 8px;
-                color: @primary-color;
-                &--middle {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 20px;
-                }
-                &--small {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 16px;
-                }
-                &--large {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 20px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 24px;
-                }
-            }
-            &__tooltip {
-                display: flex;
-                margin-right: 4px;
-                font-size: 16px;
-                color: #b1b4c5;
-                cursor: pointer;
-            }
-            &__text {
-                color: @text-color;
-                font-weight: 500;
-                margin-right: 4px;
-            }
-            &__description {
-                display: flex;
-                align-items: center;
-                color: @label-color;
-                font-size: 12px;
-            }
-            &__addon-after {
-                color: @label-color;
-            }
-            &__collapse {
-                color: @label-color;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                user-select: none;
-                .collapse {
-                    &__text {
-                        font-size: 12px;
-                        margin: 0 4px;
-                    }
-                    &__icon {
-                        font-size: 16px;
-                        transition: transform 0.4s;
-                        &--down {
-                            transform: rotate(-180deg);
-                        }
-                        &--up {
-                            transform: rotate(0deg);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    &__content {
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-        transition: opacity 0.5s ease, height 0.5s ease;
-        &--active {
-            opacity: 1;
-            padding: 16px 24px;
-            height: auto;
-        }
-    }
-}
+@import '../../style/themes/index.less';
+
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &--large {
+            .title__box {
+                line-height: 24px;
+                .title__text {
+                    font-size: 16px;
+                }
+            }
+        }
+        &--middle {
+            .title__box {
+                line-height: 22px;
+                .title__text {
+                    font-size: 14px;
+                }
+            }
+        }
+        &--small {
+            .title__box {
+                line-height: 20px;
+                .title__text {
+                    font-size: 12px;
+                }
+            }
+        }
+        &--background {
+            padding: 0 12px;
+            background-color: #f9f9fa;
+            &.@{card_prefix}__title {
+                &--middle,
+                &--large {
+                    height: 40px;
+                }
+                &--small {
+                    height: 32px;
+                }
+            }
+        }
+        &--pointer {
+            cursor: pointer;
+        }
+        .title {
+            &__box {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            &__addon-before {
+                margin-right: 8px;
+                color: @primary-color;
+                &--middle {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 20px;
+                }
+                &--small {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 16px;
+                }
+                &--large {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 20px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 24px;
+                }
+            }
+            &__tooltip {
+                display: flex;
+                margin-right: 4px;
+                font-size: 16px;
+                color: #b1b4c5;
+                cursor: pointer;
+            }
+            &__text {
+                color: @text-color;
+                font-weight: 500;
+                margin-right: 4px;
+            }
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+            &__addon-after {
+                color: @label-color;
+            }
+            &__collapse {
+                color: @label-color;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
+                    }
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__content {
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.5s ease, height 0.5s ease;
+        &--active {
+            opacity: 1;
+            padding: 16px 24px;
+            height: auto;
+        }
+    }
+}

package/lib/button/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonProps as AntdButtonProps } from 'antd';
+import { ButtonType as AntdButtonType } from 'antd/es/button';
+import './style';
+declare type ButtonType = AntdButtonType | 'secondary' | 'tertiary';
+export interface ButtonProps extends Omit<AntdButtonProps, 'type'> {
+    type?: ButtonType;
+}
+export default function Button({ className, icon, children, size, type, ...rest }: ButtonProps): React.JSX.Element;
+export {};

package/lib/button/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Button;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function Button({
+  className,
+  icon,
+  children,
+  size = 'middle',
+  type,
+  ...rest
+}) {
+  const prefixCls = (0, _configProvider.globalConfig)().getPrefixCls('btn');
+  const typeClassName = type ? `${prefixCls}--${type}` : '';
+  return /*#__PURE__*/_react.default.createElement(_antd.Button, _extends({
+    className: (0, _classnames.default)(prefixCls, className, typeClassName),
+    size: size,
+    type: type
+  }, rest), icon && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${prefixCls}__icon ${prefixCls}__icon--${size}`
+  }, icon), children && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${prefixCls}__text ${prefixCls}__text--${size}`
+  }, children));
+}

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

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/button/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/button/style/index.less

@@ -0,0 +1,120 @@
+@import '../../style/themes/index.less';
+
+@prefix-cls: ~'@{ant-prefix}-btn';
+
+.@{prefix-cls} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 16px;
+
+    &__icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: inherit;
+        line-height: 0;
+        // 因为 dtstack-icon 组件的 font-size 是 16px，现在需要继承 Button 组件的 font-size
+        .dtstack-icon {
+            font-size: inherit;
+        }
+
+        &--small {
+            font-size: 12px;
+        }
+
+        &--middle {
+            font-size: 16px;
+        }
+
+        &--large {
+            font-size: 18px;
+        }
+
+        & + .@{prefix-cls}__text {
+            &--small {
+                margin-left: 2px;
+            }
+
+            &--middle {
+                margin-left: 8px;
+            }
+
+            &--large {
+                margin-left: 8px;
+            }
+        }
+    }
+
+    &__text {
+        display: inline-block;
+
+        &--small {
+            font-size: 12px;
+        }
+
+        &--middle {
+            font-size: 14px;
+        }
+
+        &--large {
+            font-size: 14px;
+        }
+    }
+
+    &-sm {
+        padding: 2px 12px;
+    }
+
+    &-lg {
+        padding: 3px 40px;
+    }
+
+    &-primary[disabled],
+    &-primary[disabled]:hover {
+        // color: @primary-color-disabled;
+        background: @disabled-color;
+        border-color: @disabled-color;
+    }
+
+    &-secondary {
+        border-color: @primary-color;
+        color: @primary-color;
+
+        &:hover,
+        &:focus {
+            background-color: @item-hover-bg;
+        }
+    }
+
+    &-tertiary {
+        // background-color: @table-title-fill-bg;
+        border-color: @border-color-base;
+
+        &:hover,
+        &:focus {
+            background-color: @item-hover-bg;
+            border-color: @primary-color;
+            color: @primary-color;
+        }
+    }
+
+    &-secondary,
+    &-tertiary {
+        &[disabled],
+        &[disabled]:hover {
+            background: #f3f3f3;
+            color: @disabled-color;
+            border-color: @border-color-base;
+        }
+    }
+
+    &-default {
+        &[disabled],
+        &[disabled]:hover {
+            background: transparent;
+            color: @disabled-color;
+            border-color: @border-color-base;
+        }
+    }
+}

package/lib/index.d.ts

@@ -1,3 +1,3 @@
 import '@dtinsight/react-icons/dist/index.css';
-import './styles/entry.less';
 export { default as BlockHeader } from './blockHeader';
+export { default as Button } from './button';

package/lib/index.js

@@ -9,7 +9,13 @@ Object.defineProperty(exports, "BlockHeader", {
     return _blockHeader.default;
   }
 });
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _button.default;
+  }
+});
 require("@dtinsight/react-icons/dist/index.css");
-require("./styles/entry.less");
 var _blockHeader = _interopRequireDefault(require("./blockHeader"));
+var _button = _interopRequireDefault(require("./button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/lib/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/style/index.less

@@ -0,0 +1 @@
+@import "./themes/index.less";

package/lib/style/themes/index.less

@@ -0,0 +1 @@
+@import "~antd/es/style/themes/default.less";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtjoy/dt-design",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "react-component",
   "repository": "https://github.com/ZhaoFxxkSky/dt-design",
   "main": "lib/index.js",

package/esm/styles/entry.less

@@ -1,6 +0,0 @@
-@import "~antd/es/style/themes/default.less";
-@import "./variables.less";
-
-* {
-    background: red;
-}

package/esm/styles/variables.less

@@ -1 +0,0 @@
-@primary-color: red;

package/lib/styles/entry.less

@@ -1,6 +0,0 @@
-@import "~antd/es/style/themes/default.less";
-@import "./variables.less";
-
-* {
-    background: red;
-}

package/lib/styles/variables.less

@@ -1 +0,0 @@
-@primary-color: red;