@kdcloudjs/kdesign 1.0.2

package/es/city-picker/utils/grouping.js

@@ -0,0 +1,28 @@
+/**
+ * 进行分组
+ * @param groups 组别
+ * @param nums 每组个数
+ * @returns 分组结果
+ */
+export default function grouping() {
+  var groups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var nums = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  if (groups.length === 0 || nums <= 1) return groups;
+  var result = [];
+  var str = '';
+
+  for (var i = 0; i < groups.length; i++) {
+    if (str.length === nums) {
+      result.push(str);
+      str = '';
+    }
+
+    str += groups[i];
+
+    if (i === groups.length - 1) {
+      result.push(str);
+    }
+  }
+
+  return result;
+}

package/es/collapse/collapse.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PanelProps } from './panel';
+export declare const IconPositionTypes: ["left", "right"];
+export declare type IconPositionType = typeof IconPositionTypes[number];
+export declare type keyType = string[] | string | number[] | number | NONE_KEY_TYPE;
+export declare type NONE_KEY_TYPE = undefined;
+export interface CollapseProps {
+    accordion?: boolean;
+    activeKey?: keyType;
+    bordered?: boolean;
+    defaultActiveKey?: string[] | string | number[] | number;
+    expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    expandIconPosition?: IconPositionType;
+    onChange?: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const InternalCollapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<unknown>>;
+export default InternalCollapse;

package/es/collapse/collapse.js

@@ -0,0 +1,157 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import classNames from 'classnames';
+import { tuple } from '../_utils/type';
+import isArray from 'lodash/isArray';
+import isBoolean from 'lodash/isBoolean';
+import devwarning from '../_utils/devwarning';
+export var IconPositionTypes = tuple('left', 'right');
+var NONE_KEY = undefined;
+var InternalCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      prefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps;
+
+  var _getCompProps = getCompProps('Collapse', userDefaultProps, props),
+      accordion = _getCompProps.accordion,
+      activeKey = _getCompProps.activeKey,
+      bordered = _getCompProps.bordered,
+      defaultActiveKey = _getCompProps.defaultActiveKey,
+      expandIcon = _getCompProps.expandIcon,
+      expandIconPosition = _getCompProps.expandIconPosition,
+      onChange = _getCompProps.onChange,
+      style = _getCompProps.style,
+      className = _getCompProps.className,
+      children = _getCompProps.children,
+      customPrefixcls = _getCompProps.prefixCls;
+
+  var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls); // 样式前缀
+
+  var getDefaultActivePanelKey = function getDefaultActivePanelKey() {
+    // const _defaultActiveKey =
+    //   defaultActiveKey !== NONE_KEY
+    //     ? defaultActiveKey
+    //     : React.Children.map(children, (item, index) => {
+    //         if (index === 0) return item.props?.panelKey
+    //       })
+    // return isBoolean(activeKey) ? activeKey : _defaultActiveKey
+    return isBoolean(activeKey) ? activeKey : defaultActiveKey;
+  };
+
+  var _React$useState = React.useState(getDefaultActivePanelKey()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      activePanelKey = _React$useState2[0],
+      setActivePanelKey = _React$useState2[1];
+
+  var getPanelExpand = function getPanelExpand(panelKey, accordion, activeKey) {
+    var _activeKey = getActiveKey(accordion, activeKey);
+
+    return isInclude(_activeKey, panelKey);
+  };
+
+  var getActiveKey = function getActiveKey(accordion, activeKey) {
+    var _activeKey = activeKey;
+
+    if (accordion) {
+      if (isArray(activeKey)) {
+        _activeKey = activeKey[0]; // accordion 模式下默认第一个元素
+      }
+    }
+
+    return _activeKey;
+  };
+
+  var isInclude = function isInclude(activePanelKey, key) {
+    if (isArray(activePanelKey)) {
+      return _includesInstanceProperty(activePanelKey).call(activePanelKey, key) || _includesInstanceProperty(activePanelKey).call(activePanelKey, String(key));
+    } else {
+      return String(activePanelKey) === String(key);
+    }
+  };
+
+  var getRemoveKey = function getRemoveKey(key) {
+    if (isArray(activePanelKey)) {
+      return _filterInstanceProperty(activePanelKey).call(activePanelKey, function (element) {
+        return element !== key;
+      });
+    }
+
+    return NONE_KEY;
+  };
+
+  var getAddKey = function getAddKey(key) {
+    if (isArray(activePanelKey)) {
+      var _context;
+
+      return _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(activePanelKey), [key]);
+    }
+
+    return activePanelKey ? [activePanelKey, key] : key;
+  };
+
+  var getNewActiveKey = function getNewActiveKey(key) {
+    if (isInclude(activePanelKey, key)) {
+      if (accordion) {
+        return NONE_KEY;
+      }
+
+      return getRemoveKey(key);
+    } else {
+      if (accordion) {
+        return key;
+      }
+
+      return getAddKey(key);
+    }
+  };
+
+  var onPanelChange = React.useCallback(function (key) {
+    key = getNewActiveKey(key);
+    setActivePanelKey(key);
+    onChange && onChange();
+  }, [onChange, activePanelKey, accordion]);
+
+  var renderPanel = function renderPanel() {
+    var _context2;
+
+    return _mapInstanceProperty(_context2 = React.Children).call(_context2, children, function (item) {
+      var _a, _b, _c;
+
+      if (((_a = item === null || item === void 0 ? void 0 : item.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'Panel') {
+        devwarning(true, 'Collapse', 'children必须为Collapse.Panel');
+        return item;
+      }
+
+      var expand = getPanelExpand((_b = item.props) === null || _b === void 0 ? void 0 : _b.panelKey, accordion, activePanelKey);
+      var defaultExpand = getPanelExpand((_c = item.props) === null || _c === void 0 ? void 0 : _c.panelKey, accordion, defaultActiveKey);
+      return /*#__PURE__*/React.cloneElement(item, _extends({
+        expandIcon: expandIcon,
+        expandIconPosition: expandIconPosition,
+        onChange: onPanelChange,
+        bordered: bordered,
+        expand: expand,
+        defaultExpand: defaultExpand
+      }, item.props));
+    });
+  };
+
+  var rootClassName = classNames(className, _defineProperty({}, "".concat(CollapsePrefixCls), true));
+  var collapseRef = ref || /*#__PURE__*/React.createRef();
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootClassName,
+    style: style,
+    ref: collapseRef
+  }, renderPanel());
+});
+InternalCollapse.displayName = 'Collapse';
+export default InternalCollapse;

package/es/collapse/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CollapseProps } from './collapse';
+import Panel from './panel';
+export { PanelProps } from './panel';
+interface CompoundedComponent extends React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>> {
+    Panel: typeof Panel;
+}
+declare const Collapse: CompoundedComponent;
+export { Panel };
+export default Collapse;

package/es/collapse/index.js

@@ -0,0 +1,6 @@
+import InternalCollapse from './collapse';
+import Panel from './panel';
+var Collapse = InternalCollapse;
+Collapse.Panel = Panel;
+export { Panel };
+export default Collapse;

package/es/collapse/panel.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconPositionType, keyType } from './collapse';
+export interface PanelProps {
+    disabled?: boolean;
+    header?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    bordered?: boolean;
+    expandIconPosition?: IconPositionType;
+    onChange?: (key: keyType) => void;
+    extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    expand?: boolean;
+    defaultExpand?: boolean;
+    children?: React.ReactNode;
+    panelKey?: any;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<unknown>>;
+export default Panel;

package/es/collapse/panel.js

@@ -0,0 +1,157 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import Icon from '../icon';
+import isBoolean from 'lodash/isBoolean';
+var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames5, _classNames6, _classNames7;
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      prefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps;
+
+  var _getCompProps = getCompProps('CollapsePanel', userDefaultProps, props),
+      disabled = _getCompProps.disabled,
+      extra = _getCompProps.extra,
+      header = _getCompProps.header,
+      onChange = _getCompProps.onChange,
+      panelKey = _getCompProps.panelKey,
+      defaultExpand = _getCompProps.defaultExpand,
+      expand = _getCompProps.expand,
+      bordered = _getCompProps.bordered,
+      expandIcon = _getCompProps.expandIcon,
+      expandIconPosition = _getCompProps.expandIconPosition,
+      style = _getCompProps.style,
+      className = _getCompProps.className,
+      children = _getCompProps.children,
+      customPrefixcls = _getCompProps.prefixCls;
+
+  var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
+
+  var childrenRef = useRef();
+  var setHeightTimerRef = useRef(null);
+  var setAutoHeightTimerRef = useRef(null);
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandAnimation = _useState2[0],
+      setExpandAnimation = _useState2[1];
+
+  var getExpand = function getExpand() {
+    return isBoolean(expand) ? expand : defaultExpand;
+  };
+
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    setExpandAnimation(true);
+    onChange && onChange(panelKey);
+  };
+
+  var renderIcon = function renderIcon() {
+    var _classNames;
+
+    var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(panelPrefixCls, "-icon"), true), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !getExpand()), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), getExpand()), _defineProperty(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
+    return /*#__PURE__*/React.createElement("span", {
+      className: iconClassName,
+      onClick: handleClick
+    }, expandIcon ? renderReactNode(expandIcon) : /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-right-solid"
+    }));
+  };
+
+  var renderLeft = function renderLeft() {
+    var _classNames2, _classNames3;
+
+    var className = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(panelPrefixCls, "-left"), true), _defineProperty(_classNames2, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames2));
+    var headerClassName = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(panelPrefixCls, "-header"), true), _defineProperty(_classNames3, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames3));
+    return /*#__PURE__*/React.createElement("span", {
+      className: className,
+      onClick: handleClick
+    }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/React.createElement("span", {
+      className: headerClassName
+    }, renderReactNode(header)));
+  };
+
+  var renderRight = function renderRight() {
+    var _classNames4;
+
+    var className = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(panelPrefixCls, "-right"), true), _defineProperty(_classNames4, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames4));
+    return /*#__PURE__*/React.createElement("span", {
+      className: className
+    }, extra && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(panelPrefixCls, "-extra")
+    }, renderReactNode(extra)), expandIconPosition === 'right' ? renderIcon() : null);
+  };
+
+  var renderReactNode = function renderReactNode(reactNode) {
+    if (typeof reactNode === 'function') {
+      return reactNode();
+    }
+
+    return reactNode;
+  };
+
+  var rootClassName = classNames(className, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(panelPrefixCls), true), _defineProperty(_classNames5, "".concat(panelPrefixCls, "-border"), bordered), _defineProperty(_classNames5, "".concat(panelPrefixCls, "-opened"), expand), _classNames5));
+  var topClassName = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(panelPrefixCls, "-top"), true), _defineProperty(_classNames6, "".concat(panelPrefixCls, "-disabled"), disabled), _defineProperty(_classNames6, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames6));
+  var childrenClassName = classNames((_classNames7 = {}, _defineProperty(_classNames7, "".concat(panelPrefixCls, "-children"), expand), _defineProperty(_classNames7, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames7));
+  var childrenBorderedClassName = classNames(_defineProperty({}, "".concat(panelPrefixCls, "-children-bordered"), bordered));
+
+  var runExpandAnimation = function runExpandAnimation(element) {
+    element.style.height = '0px';
+    element.style.opacity = '0';
+    setHeightTimerRef.current && clearTimeout(setHeightTimerRef.current);
+    setHeightTimerRef.current = setTimeout(function () {
+      element.style.display = 'block';
+      element.style.opacity = '1';
+      element.style.height = "".concat(element.scrollHeight, "px");
+    }, 10);
+    setAutoHeightTimerRef.current && clearTimeout(setAutoHeightTimerRef.current);
+    setAutoHeightTimerRef.current = setTimeout(function () {
+      element.style.height = 'auto';
+    }, 350);
+  };
+
+  var runCollapseAnimation = function runCollapseAnimation(element) {
+    setAutoHeightTimerRef.current && clearTimeout(setAutoHeightTimerRef.current);
+    element.style.height = "".concat(element.scrollHeight, "px");
+    setAutoHeightTimerRef.current = setTimeout(function () {
+      element.style.height = '0px';
+      element.style.opacity = '0';
+    }, 0);
+  };
+
+  var expandWidthoutAnimation = function expandWidthoutAnimation(element) {
+    element.style.height = 'auto';
+    element.style.opacity = '1';
+  };
+
+  var panelPrefixClsRef = ref || /*#__PURE__*/React.createRef();
+  React.useLayoutEffect(function () {
+    if (!childrenRef.current) return;
+
+    if (expandAnimation) {
+      expand ? runExpandAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
+      setExpandAnimation(false);
+    } else if (!expandAnimation) {
+      expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
+    }
+  }, [childrenRef.current, expandAnimation, expand]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootClassName,
+    style: style,
+    ref: panelPrefixClsRef
+  }, /*#__PURE__*/React.createElement("span", {
+    className: topClassName
+  }, renderLeft(), renderRight()), /*#__PURE__*/React.createElement("div", {
+    className: childrenClassName,
+    ref: childrenRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: childrenBorderedClassName
+  }, children)));
+});
+Panel.displayName = 'Panel';
+export default Panel;

package/es/collapse/style/css.js

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

package/es/collapse/style/index.css

@@ -0,0 +1,214 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+.kd-collapse {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+}
+.kd-collapse-panel:last-child {
+  border-top: none;
+}
+.kd-collapse-panel {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.kd-collapse-panel-border {
+  border: 1px solid #d9d9d9;
+}
+.kd-collapse-panel-top {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 12px;
+}
+.kd-collapse-panel-top-border {
+  border-bottom: 1px solid #d9d9d9;
+}
+.kd-collapse-panel-left {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+.kd-collapse-panel-right {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-collapse-panel-extra,
+.kd-collapse-panel-header {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: #212121;
+  font-size: 14px;
+}
+.kd-collapse-panel-icon {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin-right: 6px;
+}
+.kd-collapse-panel-icon:hover,
+.kd-collapse-panel-left:hover {
+  cursor: pointer;
+}
+.kd-collapse-panel-animation-expand {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+.kd-collapse-panel-animation-collapse {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+.kd-collapse-panel-children {
+  overflow: hidden;
+  opacity: 0;
+  padding: 0 16px;
+  color: #212121;
+  font-size: 14px;
+  -webkit-transition: height 0.3s, opacity 0.3s;
+  transition: height 0.3s, opacity 0.3s;
+}
+.kd-collapse-panel-children-hide {
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  padding: 0 16px;
+  color: #212121;
+  font-size: 14px;
+  -webkit-transition: height 0.3s, opacity calc(0.3s / 2);
+  transition: height 0.3s, opacity calc(0.3s / 2);
+}
+.kd-collapse-panel-children-bordered {
+  padding: 12px;
+  overflow: hidden;
+}
+.kd-collapse-panel-disabled {
+  cursor: not-allowed !important;
+  color: #b2b2b2;
+}

package/es/collapse/style/index.d.ts

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

package/es/collapse/style/index.js

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