@kdcloudjs/kdesign 1.1.1 → 1.2.0

package/es/_utils/usePopper.js

@@ -123,7 +123,7 @@ function usePopper(locatorElement, popperElement, props) {
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'top' : _props$placement,
       _props$gap = props.gap,
-      defalutGap = _props$gap === void 0 ? 4 : _props$gap,
+      defaultGap = _props$gap === void 0 ? 4 : _props$gap,
       _props$scrollHidden = props.scrollHidden,
       scrollHidden = _props$scrollHidden === void 0 ? false : _props$scrollHidden,
       _props$mouseEnterDela = props.mouseEnterDelay,
@@ -172,7 +172,7 @@ function usePopper(locatorElement, popperElement, props) {
     top: 0,
     left: 0
   };
-  var gap = defalutGap + (arrow ? 10 : 0);
+  var gap = defaultGap + (arrow ? 10 : 0);
 
   var _useState = useState(initPos),
       _useState2 = _slicedToArray(_useState, 2),
@@ -434,8 +434,8 @@ function usePopper(locatorElement, popperElement, props) {
   };
   var popperNode = popperRef.current;
   var locatorNode = locatorRef.current;
-  useResizeObserver(popperNode, alignPopper);
-  useResizeObserver(locatorNode, alignPopper);
+  useResizeObserver(popperNode || document.body, alignPopper);
+  useResizeObserver(locatorNode || document.body, alignPopper);
   var showPopper = useCallback(function (evType) {
     if (!disabled) {
       !exist && setExist(true);
@@ -457,7 +457,6 @@ function usePopper(locatorElement, popperElement, props) {
     }
   }, [disabled, exist, onTrigger, visible]);
   var hidePopper = useCallback(function () {
-    setEvType('');
     props.visible === undefined && setVisible(false);
     onVisibleChange && onVisibleChange(false);
   }, [onVisibleChange, props.visible]);

package/es/anchor/anchor.js

@@ -317,12 +317,6 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var handleVisibleChange = function handleVisibleChange(visible) {
     !isLocked && onVisibleChange && onVisibleChange(visible);
     if (props.visible !== undefined) return;
-
-    if (visible) {
-      setOptionShow(visible);
-      return;
-    }
-
     !isLocked && setOptionShow(visible);
   };
 

package/es/anchor/style/index.css

@@ -180,7 +180,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  padding: 0 6px;
+  padding: 0 4px;
   line-height: 1.5;
   vertical-align: middle;
 }
@@ -194,7 +194,7 @@
 }
 .kd-anchor-advanced-arrows {
   color: var(--kd-c-anchor-advanced-arrows-color-text, #666);
-  font-size: var(--kd-c-anchor-icon-font-size, 16px);
+  font-size: var(--kd-c-anchor-advanced-arrows-font-size, 24px);
   cursor: pointer;
 }
 .kd-anchor-advanced-arrows:hover {
@@ -257,6 +257,9 @@
 .kd-anchor-link {
   padding: var(--kd-c-anchor-spacing-padding, 7px 8px);
 }
+.kd-anchor-link > .kd-anchor-link {
+  padding: var(--kd-c-anchor-secondary-spacing-padding, 12px 8px);
+}
 .kd-anchor-link-title {
   text-decoration: none;
   color: var(--kd-c-anchor-color-text-primary, var(--kd-g-color-text-primary, #212121));

package/es/anchor/style/index.less

@@ -72,7 +72,7 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        padding: 0 6px;
+        padding: 0 4px;
         line-height: 1.5;
         vertical-align: middle;
       }
@@ -90,7 +90,7 @@
 
   &-advanced-arrows {
     color: @anchor-advanced-arrows-color;
-    font-size: @anchor-icon-font-size;
+    font-size: @anchor-advanced-arrows-font-size;
     cursor: pointer;
     &:hover {
       color: @anchor-color-theme;
@@ -154,6 +154,10 @@
   &-link {
     padding: @anchor-link-padding;
 
+    &>.@{anchor-prefix-cls}-link {
+      padding: @anchor-link-secondary-padding;
+    }
+
     &-title {
       text-decoration: none;
       color: @anchor-primary-text-color;

package/es/anchor/style/token.less

@@ -19,6 +19,7 @@
 @anchor-link-top: var(~'@{anchor-prefix}-spacing-vertical', 7px);
 @anchor-link-left: var(~'@{anchor-prefix}-spacing-horizontal', 7px);
 @anchor-link-padding: var(~'@{anchor-prefix}-spacing-padding', 7px 8px);
+@anchor-link-secondary-padding: var(~'@{anchor-prefix}-secondary-spacing-padding', 12px 8px);
 @anchor-advanced-padding-top: var(~'@{anchor-prefix}-advanced-spacing-padding-top', 8px);
 @anchor-advanced-padding-bottom: var(~'@{anchor-prefix}-advanced-spacing-padding-bottom', 7px);
 @anchor-ink-line-width: var(~'@{anchor-prefix}-ink-line-spacing-width', 1px);
@@ -28,6 +29,6 @@
 @anchor-advanced-lock-size: var(~'@{anchor-prefix}-advanced-lock-font-size', 16px);
 @anchor-font-size: var(~'@{anchor-prefix}-font-size', @font-size-small);
 @anchor-icon-font-size: var(~'@{anchor-prefix}-icon-font-size', 16px);
-
+@anchor-advanced-arrows-font-size: var(~'@{anchor-prefix}-advanced-arrows-font-size', 24px);
 // motion
 @anchor-transition-duration: var(~'@{anchor-prefix}-duration-duration', @duration-promptly);

package/es/button/button.d.ts

@@ -3,7 +3,7 @@ export declare const ButtonTypes: ["second", "primary", "ghost", "text"];
 export declare type ButtonType = typeof ButtonTypes[number];
 export declare const ButtonSizes: ["large", "middle", "small"];
 export declare type ButtonSize = typeof ButtonSizes[number];
-export declare const ButtonShapes: ["circle", "round"];
+export declare const ButtonShapes: ["circle", "round", "none"];
 export declare type ButtonShape = typeof ButtonShapes[number];
 export declare const ButtonIconPlaces: ["left", "right"];
 export declare type ButtonIconPlace = typeof ButtonIconPlaces[number];

package/es/button/button.js

@@ -25,7 +25,7 @@ import { tuple } from '../_utils/type';
 import devWarning from '../_utils/devwarning';
 export var ButtonTypes = tuple('second', 'primary', 'ghost', 'text');
 export var ButtonSizes = tuple('large', 'middle', 'small');
-export var ButtonShapes = tuple('circle', 'round');
+export var ButtonShapes = tuple('circle', 'round', 'none');
 export var ButtonIconPlaces = tuple('left', 'right');
 export var ButtonHTMLTypes = tuple('submit', 'button', 'reset');
 
@@ -107,7 +107,7 @@ var InternalButton = function InternalButton(props, ref) {
 
   var isTextBtn = type === 'text'; // 判断按钮是否文本类型。这些类型下有部分样式不适用
 
-  var btnClasses = classNames(btnPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), _defineProperty(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), _defineProperty(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), _classNames));
+  var btnClasses = classNames(btnPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), _defineProperty(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), _defineProperty(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), _defineProperty(_classNames, "".concat(btnPrefixCls, "-icon-only"), !children && children !== 0 && icon), _classNames));
 
   var iconWrapperClassName = _concatInstanceProperty(_context4 = "".concat(btnPrefixCls, "-iconWrapper-")).call(_context4, iconPlace === 'left' ? 'left' : 'right');
 

package/es/button/group.d.ts

@@ -0,0 +1,21 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { ButtonType } from './button';
+export declare const ButtonGroupTypes: ["basic", "similar"];
+export declare type ButtonGroupType = typeof ButtonGroupTypes[number];
+export interface OverlayType {
+    value?: string;
+    label?: React.ReactNode;
+}
+export interface ButtonGroupProps {
+    style?: CSSProperties;
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    overlay?: Array<OverlayType>;
+    icon?: [ReactNode, ReactNode];
+    type?: ButtonGroupType;
+    buttonType?: ButtonType;
+    disabled?: boolean;
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default ButtonGroup;

package/es/button/group.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext, useState, useCallback } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import { Button, Icon } from '../index';
+import usePopper from '../_utils/usePopper';
+import { toArray } from '../_utils/react-children';
+import { tuple } from '../_utils/type';
+export var ButtonGroupTypes = tuple('basic', 'similar');
+
+var InternalButtonGroup = function InternalButtonGroup(props, ref) {
+  var _context;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var buttonGoupProps = getCompProps('ButtonGroup', userDefaultProps, props);
+  var style = buttonGoupProps.style,
+      className = buttonGoupProps.className,
+      children = buttonGoupProps.children,
+      customPrefixcls = buttonGoupProps.prefixCls,
+      onClick = buttonGoupProps.onClick,
+      onItemClick = buttonGoupProps.onItemClick,
+      overlay = buttonGoupProps.overlay,
+      icon = buttonGoupProps.icon,
+      type = buttonGoupProps.type,
+      buttonType = buttonGoupProps.buttonType,
+      disabled = buttonGoupProps.disabled,
+      onVisibleChange = buttonGoupProps.onVisibleChange;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      optionShow = _useState2[0],
+      setOptionShow = _useState2[1]; // 下拉列表是否展示
+
+
+  var refBtnGroup = React.useRef(null) || ref;
+  var triggerRef = React.useRef(null);
+  var isBsicType = type === 'basic';
+  var btnGroupPrefixCls = getPrefixCls(prefixCls, 'btn-group', customPrefixcls);
+  var btnGroupClasses = classNames("".concat(btnGroupPrefixCls), className, _defineProperty({}, _concatInstanceProperty(_context = "".concat(btnGroupPrefixCls, "-")).call(_context, type), type));
+  var renderTriggerButton = useCallback(function () {
+    var _toArray = toArray(icon),
+        _toArray2 = _slicedToArray(_toArray, 2),
+        _toArray2$ = _toArray2[0],
+        iconUp = _toArray2$ === void 0 ? /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-up"
+    }) : _toArray2$,
+        _toArray2$2 = _toArray2[1],
+        iconDown = _toArray2$2 === void 0 ? /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    }) : _toArray2$2;
+
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: btnGroupClasses,
+      ref: refBtnGroup
+    }, isBsicType && /*#__PURE__*/React.createElement(Button, {
+      type: buttonType,
+      disabled: disabled
+    }, children, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(btnGroupPrefixCls, "-basic-icon")
+    }, optionShow ? iconUp : iconDown)), !isBsicType && /*#__PURE__*/React.createElement(Button, {
+      type: buttonType,
+      disabled: disabled,
+      onClick: onClick
+    }, children), !isBsicType && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(btnGroupPrefixCls, "-trigger"),
+      ref: triggerRef
+    }, optionShow ? /*#__PURE__*/React.createElement(Button, {
+      icon: iconUp,
+      type: buttonType,
+      disabled: disabled
+    }) : /*#__PURE__*/React.createElement(Button, {
+      icon: iconDown,
+      type: buttonType,
+      disabled: disabled
+    })));
+  }, [icon, btnGroupPrefixCls, style, btnGroupClasses, refBtnGroup, isBsicType, buttonType, disabled, children, optionShow, onClick]);
+  var handleItemClick = useCallback(function (data) {
+    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(data);
+    setOptionShow(false);
+  }, [onItemClick]);
+  var renderContent = useCallback(function () {
+    var _context2;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(btnGroupPrefixCls, "-dropdown")
+    }, _mapInstanceProperty(_context2 = overlay || []).call(_context2, function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.value,
+        className: "".concat(btnGroupPrefixCls, "-dropdown-item"),
+        onClick: function onClick() {
+          return handleItemClick === null || handleItemClick === void 0 ? void 0 : handleItemClick(item);
+        }
+      }, item.label);
+    }));
+  }, [btnGroupPrefixCls, overlay, handleItemClick]);
+
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setOptionShow(visible);
+    onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
+  };
+
+  var popperProps = _extends(_extends({
+    placement: 'bottomLeft',
+    trigger: 'click'
+  }, buttonGoupProps), {
+    prefixCls: btnGroupPrefixCls,
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    getTriggerElement: function getTriggerElement(locatorNode) {
+      return isBsicType ? locatorNode : triggerRef.current;
+    }
+  });
+
+  return usePopper(renderTriggerButton(), renderContent(), popperProps);
+};
+
+var ButtonGroup = /*#__PURE__*/React.forwardRef(InternalButtonGroup);
+ButtonGroup.displayName = 'ButtonGroup';
+export default ButtonGroup;

package/es/button/index.d.ts

@@ -1,3 +1,7 @@
-import Button from './button';
+/// <reference types="react" />
+import Dropdown from './group';
+declare const Button: import("react").ForwardRefExoticComponent<import("./button").IButtonProps & import("react").RefAttributes<unknown>> & {
+    Dropdown: typeof Dropdown;
+};
 export { ButtonType, IButtonProps } from './button';
 export default Button;

package/es/button/index.js

@@ -1,2 +1,5 @@
-import Button from './button';
+import InternalButton from './button';
+import Dropdown from './group';
+var Button = InternalButton;
+Button.Dropdown = Dropdown;
 export default Button;

package/es/button/style/index.css

@@ -145,24 +145,24 @@
           animation: fadeEffect var(--kd-c-button-motion-duration-fade, var(--kd-g-duration-slowly, 0.4s)) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect var(--kd-c-button-motion-duration-wave, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
 }
 .kd-btn-second {
-  border-color: var(--kd-c-button-second-color-border, var(--kd-g-color-border-strong-3, rgba(217, 217, 217, 0.65)));
-  background-color: var(--kd-c-button-second-color-background, var(--kd-g-color-background-3, rgba(255, 255, 255, 0.65)));
-  color: var(--kd-c-button-second-color-text, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65)));
+  border-color: var(--kd-c-button-second-color-border, #D9D9D9);
+  background-color: var(--kd-c-button-second-color-background, transparent);
+  color: var(--kd-c-button-second-color-text, #212121);
 }
 .kd-btn-second:hover:not(.kd-btn-loading) {
   background-color: var(--kd-c-button-second-color-background-hover, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-button-second-color-border-hover, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-button-second-color-text-hover, var(--kd-g-color-text-secondary, #666));
+  border-color: var(--kd-c-button-second-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-button-second-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-btn-second:active:not(.kd-btn-loading) {
   background-color: var(--kd-c-button-second-color-background-active, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-button-second-color-border-active, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-button-second-color-text-active, var(--kd-g-color-text-secondary, #666));
+  border-color: var(--kd-c-button-second-color-border-active, var(--kd-g-color-theme-7, #375cca));
+  color: var(--kd-c-button-second-color-text-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-btn-second:disabled {
-  border-color: var(--kd-c-button-second-color-border-disabled, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65))) !important;
-  background-color: var(--kd-c-button-second-color-background-disabled, var(--kd-g-color-background-3, rgba(255, 255, 255, 0.65))) !important;
-  color: var(--kd-c-button-second-color-text-disabled, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65))) !important;
+  border-color: var(--kd-c-button-second-color-border-disabled, #D9D9D9) !important;
+  background-color: var(--kd-c-button-second-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  color: var(--kd-c-button-second-color-text-disabled, #B2B2B2) !important;
 }
 .kd-btn-primary {
   border-color: var(--kd-c-button-primary-color-border, var(--kd-g-color-theme, #5582f3));
@@ -182,22 +182,24 @@
   border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-3, #e3eeff)) !important;
 }
 .kd-btn-ghost {
-  border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-theme-6, #5582f3));
   background-color: var(--kd-c-button-ghost-color-background, transparent);
-  color: var(--kd-c-button-ghost-color-text, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-button-ghost-color-text, #5582F3);
 }
 .kd-btn-ghost:hover:not(.kd-btn-loading) {
-  border-color: var(--kd-c-button-ghost-color-border-hover, var(--kd-g-color-theme, #5582f3));
-  color: var(--kd-c-button-ghost-color-text-hover, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-button-ghost-color-background-hover, var(--kd-g-color-theme-5, #87adff));
+  border-color: var(--kd-c-button-ghost-color-border-hover, transparent);
+  color: var(--kd-c-button-ghost-color-text-hover, #ffffff);
 }
 .kd-btn-ghost:active:not(.kd-btn-loading) {
-  border-color: var(--kd-c-button-ghost-color-border-hover, var(--kd-g-color-theme, #5582f3));
-  color: var(--kd-c-button-ghost-color-text-active, var(--kd-g-color-theme-7, #375cca));
+  background-color: var(--kd-c-button-ghost-color-background-active, var(--kd-g-color-theme-7, #375cca));
+  border-color: var(--kd-c-button-ghost-color-border-hover, transparent);
+  color: var(--kd-c-button-ghost-color-text-active, #ffffff);
 }
 .kd-btn-ghost:disabled {
   background-color: var(--kd-c-button-ghost-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
-  border-color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  border-color: var(--kd-c-button-ghost-color-border-disabled, #D9D9D9) !important;
+  color: var(--kd-c-button-ghost-color-text-disabled, #B2B2B2) !important;
 }
 .kd-btn-iconWrapper-left {
   display: -webkit-box;
@@ -236,6 +238,13 @@
   font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
 }
+.kd-btn-size-small.kd-btn-icon-only {
+  font-size: var(--kd-c-button-icon-font-size-small, 14px);
+  padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+}
+.kd-btn-size-small .kd-btn-group-basic-icon {
+  font-size: var(--kd-c-button-icon-font-size-small, 14px);
+}
 .kd-btn-size-middle {
   height: var(--kd-c-button-sizing-height-middle, 28px);
   min-width: var(--kd-c-button-sizing-min-width-middle, 60px);
@@ -243,6 +252,13 @@
   font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
 }
+.kd-btn-size-middle.kd-btn-icon-only {
+  font-size: var(--kd-c-button-icon-font-size-middle, 16px);
+  padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+}
+.kd-btn-size-middle .kd-btn-group-basic-icon {
+  font-size: var(--kd-c-button-icon-font-size-middle, 16px);
+}
 .kd-btn-size-large {
   height: var(--kd-c-button-sizing-height-large, 32px);
   min-width: var(--kd-c-button-sizing-min-width-large, 80px);
@@ -250,6 +266,13 @@
   font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
   padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
 }
+.kd-btn-size-large.kd-btn-icon-only {
+  font-size: var(--kd-c-button-icon-font-size-large, 18px);
+  padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+}
+.kd-btn-size-large .kd-btn-group-basic-icon {
+  font-size: var(--kd-c-button-icon-font-size-large, 18px);
+}
 .kd-btn-shape-circle {
   border-radius: 50%;
   min-width: auto;
@@ -275,10 +298,13 @@
 .kd-btn-shape-round.kd-btn-size-large {
   border-radius: var(--kd-c-button-sizing-height-large, 32px);
 }
+.kd-btn-shape-none {
+  border-radius: 0;
+}
 .kd-btn-text {
   height: auto;
   width: auto;
-  color: var(--kd-c-button-text-color-text, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-button-text-color-text, var(--kd-g-color-theme-6, #5582f3));
   padding: 0;
   min-width: auto;
 }
@@ -289,7 +315,7 @@
   color: var(--kd-c-button-text-color-text-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-btn-text[disabled] {
-  color: var(--kd-c-button-text-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  color: var(--kd-c-button-text-color-text-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
 }
 .kd-btn-no-border {
   border: none;
@@ -316,5 +342,75 @@
   width: 100%;
 }
 .kd-btn .btn-space {
-  margin-left: 5px;
+  margin-left: 4px;
+}
+.kd-btn-group {
+  display: inline-block;
+}
+.kd-btn-group-basic .kd-btn {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.kd-btn-group-basic-icon {
+  margin-left: 4px;
+}
+.kd-btn-group-trigger .kd-btn-primary {
+  background: var(--kd-c-button-group-trigger-color-background, #4367c1);
+}
+.kd-btn-group-trigger .kd-btn-primary:hover {
+  background: var(--kd-c-button-group-trigger-color-background-hover, #4c74da);
+  border-color: var(--kd-c-button-group-trigger-color-background-hover, #4c74da);
+}
+.kd-btn-group-trigger .kd-btn-primary:active {
+  background: var(--kd-c-button-group-trigger-color-background-active, #3B5AA9);
+}
+.kd-btn-group-trigger .kd-btn-primary:disabled {
+  background: var(--kd-c-button-group-trigger-color-background-disabled, #95a4c8) !important;
+}
+.kd-btn-group-trigger .kd-btn {
+  margin-left: -1px;
+}
+.kd-btn-group .kd-btn-size-small,
+.kd-btn-group .kd-btn-size-middle,
+.kd-btn-group .kd-btn-size-large {
+  min-width: unset;
+}
+.kd-btn-group .kd-btn:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.kd-btn-group .kd-btn:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.kd-btn-group .kd-dropdown-menu {
+  padding: 0;
+}
+.kd-btn-group-dropdown {
+  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  background: var(--kd-c-button-group-dropdown-color-background, #fff);
+  color: #333333;
+  min-width: var(--kd-c-button-group-dropdown-min-width, 80px);
+}
+.kd-btn-group-dropdown-item {
+  height: var(--kd-c-button--group-dropdown-item-height, 30px);
+  line-height: var(--kd-c-button--group-dropdown-item-height, 30px);
+  cursor: pointer;
+  padding: 0 var(--kd-c-button-group-dropdown-item-horizonta, 12px);
+}
+.kd-btn-group-dropdown-item:hover {
+  background: var(--kd-c-button-group-dropdown-item-color-background-hover, #F5F5F5);
+}
+.kd-btn-group-dropdown-item:not(:last-child) {
+  border-bottom: 1px solid var(--kd-c-button-group-dropdown-item-border-color, #E5E5E5);
+}
+.kd-btn-group.topLeft.hidden,
+.kd-btn-group.bottomLeft.hidden,
+.kd-btn-group.topRight.hidden,
+.kd-btn-group.bottomRight.hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }