@king-design/react 2.0.0-beta.1 → 2.0.0

package/components/treeSelect/styles.js

@@ -3,6 +3,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
+  get transition() {
+    return theme.transition.middle;
+  },
+
   maxHeight: "400px",
   padding: "3px 6px"
 };
@@ -13,5 +17,5 @@ setDefault(function () {
   }).treeSelect;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("min-width:auto;max-height:", treeSelect.maxHeight, ";padding:", treeSelect.padding, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", theme.transition, ",top ", theme.transition, ";}");
+  return /*#__PURE__*/css("min-width:auto;max-height:", treeSelect.maxHeight, ";padding:", treeSelect.padding, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", treeSelect.transition, ",top ", treeSelect.transition, ";}");
 }

package/components/upload/index.d.ts

@@ -2,7 +2,7 @@ import { Component, TypeDefs } from 'intact-react';
 import { UploadFileStatus } from './useUpload';
 import type { RequestError } from './ajaxUploader';
 import type { Events } from '../types';
-export type { RequestError };
+export type { RequestError, UploadFileStatus };
 export interface UploadProps {
     accept?: string;
     files?: UploadFile[];

package/components/upload/index.spec.js

@@ -89,7 +89,7 @@ describe('Upload', function () {
     };
 
     this.xhr.restore();
-    setTimeout(done, 400);
+    setTimeout(done, 500);
   });
   it('basic', function (done) {
     this.timeout(0);

package/components/upload/index.vdt.js

@@ -28,7 +28,7 @@ var _$tmp5 = {
   'className': 'k-upload-status-icon ion-ios-close-outline'
 };
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj, _$cn2;
+  var _classNameObj, _$cn3;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -91,17 +91,16 @@ export default function ($props, $blocks, $__proto__) {
   var removeFile = this.files.removeFile;
 
   var closeBtn = function closeBtn(value, index, icon) {
-    return _$cc(Button, {
-      'type': 'none',
-      'icon': true,
-      'size': 'mini',
-      'className': 'k-upload-close',
+    var _$cn2;
+
+    return _$cc(Icon, {
+      'className': _$cn((_$cn2 = {
+        "k-upload-close": true
+      }, _$cn2[icon] = true, _$cn2)),
       'ev-click': function evClick() {
         return removeFile(value, index);
       },
-      'children': _$cc(Icon, {
-        'className': _$cn(icon)
-      })
+      'hoverable': true
     });
   };
 
@@ -166,9 +165,9 @@ export default function ($props, $blocks, $__proto__) {
     'key': 'dialog',
     'value': isShow.value,
     'ev-close': close,
-    'className': _$cn((_$cn2 = {
+    'className': _$cn((_$cn3 = {
       "k-upload-dialog": true
-    }, _$cn2[makeUploadDialogStyles()] = true, _$cn2)),
+    }, _$cn3[makeUploadDialogStyles()] = true, _$cn3)),
     'children': image.value ? _$ce(2, 'a', _$ce(2, 'img', null, 1, null, {
       'src': image.value.url
     }), 2, null, {

package/components/upload/styles.js

@@ -5,6 +5,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
+  get transition() {
+    return theme.transition.middle;
+  },
+
   fontSize: '12px',
   tip: {
     gap: '16px',
@@ -140,7 +144,7 @@ setDefault(function () {
   }).upload;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", upload.fontSize, ";position:relative;.k-upload-handle,.k-upload-tip{display:inline-block;vertical-align:middle;}.k-upload-tip{margin-left:", upload.tip.gap, ";color:", upload.tip.color, ";}.k-upload-files{margin-top:", upload.filesGap, ";}.k-upload-file{margin:", upload.file.margin, ";padding:", upload.file.padding, ";border-radius:", upload.file.borderRadius, ";&:hover{background:", upload.file.bgColor, ";.k-upload-close{display:inline-flex;}}}.k-upload-name{display:flex;align-items:center;height:", upload.file.height, ";}.k-upload-file-icon{margin-right:", upload.file.fileIconGap, ";}.k-upload-file-name{flex:1;}.k-upload-status-icon{color:", upload.file.status.color, ";margin-left:", upload.file.status.gap, ";}.k-upload-close{display:none;.k-icon{font-size:", upload.closeFontSize, ";}}.k-upload-file.k-error{color:", upload.file.errorColor, ";.k-upload-status-icon{color:", upload.file.status.errorColor, ";}}.k-upload-progress{.k-progress-text{width:auto!important;}}&.k-drag{.k-upload-handle{color:", upload.drag.color, ";display:block;border:", upload.drag.border, ";border-radius:", upload.drag.borderRadius, ";cursor:pointer;text-align:center;transition:border-color ", theme.transition, ";&:hover{border-color:", upload.drag.hoverBorderColor, ";}}.k-upload-area{padding:", upload.drag.padding, ";.k-icon{font-size:", upload.drag.icon.fontSize, ";color:", upload.drag.icon.color, ";line-height:1;}}&.k-dragover{.k-upload-handle{border-color:", upload.drag.overBorderColor, ";}}}.k-upload-pictures{display:inline-block;vertical-align:middle;}.k-upload-picture{padding:", upload.gallery.padding, ";position:relative;vertical-align:middle;&.k-error{border-color:", upload.gallery.errorBorderColor, ";}&:hover{.k-upload-close{opacity:1;pointer-events:all;}}.k-upload-img{display:inline-block;width:100%;height:100%;}.k-upload-close{position:absolute;top:", upload.gallery.close.top, ";right:", upload.gallery.close.right, ";display:inline-block;opacity:0;transition:opacity ", theme.transition, ";pointer-events:none;.k-icon{font-size:", upload.gallery.close.fontSize, ";}}.k-upload-icons{opacity:0;transition:opacity ", theme.transition, ";}&:hover{.k-upload-icons{opacity:1;}}}.k-upload-picture-card{display:inline-block;width:", upload.gallery.width, ";height:", upload.gallery.height, ";border-radius:", upload.gallery.borderRadius, ";border:", upload.gallery.border, ";text-align:center;cursor:pointer;margin:", upload.gallery.margin, ";background:", upload.gallery.bgColor, ";}.k-upload-add{border:", upload.gallery.add.border, ";font-size:", upload.gallery.add.fontSize, ";line-height:calc(", upload.gallery.height, " - 2px);&:hover{border-color:", upload.gallery.add.hoverBorderColor, ";}}.k-upload-overlap{position:absolute;width:100%;height:100%;left:0;top:0;color:", upload.overlap.color, ";background:", upload.overlap.bgColor, ";.k-upload-progress{position:absolute;width:100%;top:50%;padding:", upload.gallery.padding, ";transform:translateY(-50%);}}.k-upload-zoom{display:inline-block;position:relative;top:50%;transform:translateY(-50%);font-size:", upload.overlap.zoomFontSize, ";}");
+  return /*#__PURE__*/css("font-size:", upload.fontSize, ";position:relative;.k-upload-handle,.k-upload-tip{display:inline-block;vertical-align:middle;}.k-upload-tip{margin-left:", upload.tip.gap, ";color:", upload.tip.color, ";}.k-upload-files{margin-top:", upload.filesGap, ";}.k-upload-file{margin:", upload.file.margin, ";padding:", upload.file.padding, ";border-radius:", upload.file.borderRadius, ";&:hover{background:", upload.file.bgColor, ";.k-upload-close{display:inline-flex;}}}.k-upload-name{display:flex;align-items:center;height:", upload.file.height, ";}.k-upload-file-icon{margin-right:", upload.file.fileIconGap, ";}.k-upload-file-name{flex:1;}.k-upload-status-icon{color:", upload.file.status.color, ";margin-left:", upload.file.status.gap, ";}.k-upload-close{display:none;.k-icon{font-size:", upload.closeFontSize, ";}}.k-upload-file.k-error{color:", upload.file.errorColor, ";.k-upload-status-icon{color:", upload.file.status.errorColor, ";}}.k-upload-progress{.k-progress-text{width:auto!important;}}&.k-drag{.k-upload-handle{color:", upload.drag.color, ";display:block;border:", upload.drag.border, ";border-radius:", upload.drag.borderRadius, ";cursor:pointer;text-align:center;transition:border-color ", upload.transition, ";&:hover{border-color:", upload.drag.hoverBorderColor, ";}}.k-upload-area{padding:", upload.drag.padding, ";.k-icon{font-size:", upload.drag.icon.fontSize, ";color:", upload.drag.icon.color, ";line-height:1;}}&.k-dragover{.k-upload-handle{border-color:", upload.drag.overBorderColor, ";}}}.k-upload-pictures{display:inline-block;vertical-align:middle;}.k-upload-picture{padding:", upload.gallery.padding, ";position:relative;vertical-align:middle;&.k-error{border-color:", upload.gallery.errorBorderColor, ";}&:hover{.k-upload-close{opacity:1;pointer-events:all;}}.k-upload-img{display:inline-block;width:100%;height:100%;}.k-upload-close{position:absolute;top:", upload.gallery.close.top, ";right:", upload.gallery.close.right, ";display:inline-block;opacity:0;transition:opacity ", upload.transition, ";pointer-events:none;.k-icon{font-size:", upload.gallery.close.fontSize, ";}}.k-upload-icons{opacity:0;transition:opacity ", upload.transition, ";}&:hover{.k-upload-icons{opacity:1;}}}.k-upload-picture-card{display:inline-block;width:", upload.gallery.width, ";height:", upload.gallery.height, ";border-radius:", upload.gallery.borderRadius, ";border:", upload.gallery.border, ";text-align:center;cursor:pointer;margin:", upload.gallery.margin, ";background:", upload.gallery.bgColor, ";}.k-upload-add{border:", upload.gallery.add.border, ";font-size:", upload.gallery.add.fontSize, ";line-height:calc(", upload.gallery.height, " - 2px);&:hover{border-color:", upload.gallery.add.hoverBorderColor, ";}}.k-upload-overlap{position:absolute;width:100%;height:100%;left:0;top:0;color:", upload.overlap.color, ";background:", upload.overlap.bgColor, ";.k-upload-progress{position:absolute;width:100%;top:50%;padding:", upload.gallery.padding, ";transform:translateY(-50%);}}.k-upload-zoom{display:inline-block;position:relative;top:50%;transform:translateY(-50%);font-size:", upload.overlap.zoomFontSize, ";}");
 }
 export function makeUploadDialogStyles() {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {

package/components/utils.d.ts

@@ -7,7 +7,7 @@ export declare function isTextVNode(o: VNode): boolean;
 export declare function isTextBlock(o: any): boolean;
 export declare function isStringOrNumberNotEmpty(o: any): o is string | number;
 export declare function getRestProps<T>(component: Component<T>, props?: import("intact").Props<T, Component<T, {}, {}, {}>>): Partial<T>;
-export declare function isExternalLink(to?: string): boolean;
+export declare function isExternalLink(to?: string | object): to is string;
 export declare function clamp(number: number, lower: number, upper: number): number;
 export declare function stopPropagation(e: Event): void;
 export declare type ValidVNode = VNode | string | number;

package/components/wave/index.d.ts

@@ -0,0 +1,19 @@
+import { Component, TypeDefs, VNode } from 'intact-react';
+export interface WaveProps {
+    disabled?: boolean;
+    color?: string;
+    inset?: string;
+}
+export declare class Wave extends Component<WaveProps> {
+    static typeDefs: Required<TypeDefs<WaveProps>>;
+    static defaults: () => Partial<WaveProps>;
+    static template: (this: Wave) => VNode<import("intact").VNodeTag>;
+    private instance;
+    private className;
+    private timer;
+    private initClassName;
+    mounted(): void;
+    beforeUnmount(): void;
+    private onClick;
+    resetAnimation(): void;
+}

package/components/wave/index.js

@@ -0,0 +1,120 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, findDomFromVNode } from 'intact-react';
+import { isArray } from 'intact-shared';
+import { bind } from '../utils';
+import { makeStyles } from './styles';
+import { theme } from '../../styles/theme';
+var typeDefs = {
+  disabled: Boolean,
+  color: String,
+  inset: String
+};
+
+var defaults = function defaults() {
+  return {
+    color: theme.color.primary,
+    inset: '-1px'
+  };
+};
+
+export var Wave = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Wave, _Component);
+
+  function Wave() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.instance = null;
+    _this.className = void 0;
+    _this.timer = 0;
+    return _this;
+  }
+
+  var _proto = Wave.prototype;
+
+  _proto.initClassName = function initClassName() {
+    var _this$get = this.get(),
+        color = _this$get.color,
+        inset = _this$get.inset;
+
+    this.className = makeStyles(color || theme.color.primary, inset);
+  };
+
+  _proto.mounted = function mounted() {
+    var children = this.get('children');
+    var node = findDomFromVNode(children, true);
+
+    if (!node || node.nodeType !== 1) {
+      return;
+    }
+
+    this.instance = node;
+    node.addEventListener('click', this.onClick);
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    if (this.instance) {
+      this.instance.removeEventListener('click', this.onClick);
+    }
+
+    this.resetAnimation();
+  };
+
+  _proto.onClick = function onClick(e) {
+    var _this2 = this;
+
+    this.initClassName();
+    var instance = this.instance;
+
+    var _this$get2 = this.get(),
+        disabled = _this$get2.disabled;
+
+    var node = e.target; // 点击输入框中的icon时，此时输入框不需要动效
+
+    var isInput = instance.classList.contains('k-input-wrapper');
+    if (disabled || isInput && node.classList.contains('k-icon')) return;
+    this.resetAnimation();
+    instance.addEventListener('animationend', this.resetAnimation);
+    this.timer = window.setTimeout(function () {
+      instance.classList.add(_this2.className);
+    });
+  };
+
+  _proto.resetAnimation = function resetAnimation() {
+    var node = this.instance;
+    if (!node) return;
+    node.classList.remove(this.className);
+    node.removeEventListener('animationend', this.resetAnimation);
+    clearTimeout(this.timer);
+  };
+
+  return Wave;
+}(Component);
+Wave.typeDefs = typeDefs;
+Wave.defaults = defaults;
+
+Wave.template = function () {
+  var children = this.get('children');
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!children || isArray(children) && children.length > 1) {
+      throw new Error('Wave must receive only one Element children');
+    }
+  }
+
+  return children;
+};
+
+__decorate([bind], Wave.prototype, "mounted", null);
+
+__decorate([bind], Wave.prototype, "onClick", null);
+
+__decorate([bind], Wave.prototype, "resetAnimation", null);

package/components/wave/styles.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/global';
+export declare function makeStyles(color: string, inset: string): string;

package/components/wave/styles.js

@@ -0,0 +1,17 @@
+import { css, keyframes } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  inset: '-3px'
+};
+var wave;
+setDefault(function () {
+  wave = deepDefaults(theme, {
+    wave: defaults
+  }).wave;
+});
+export function makeStyles(color, inset) {
+  var waveEffect = /*#__PURE__*/keyframes("100%{top:calc(", inset, " + ", wave.inset, ");bottom:calc(", inset, " + ", wave.inset, ");left:calc(", inset, " + ", wave.inset, ");right:calc(", inset, " + ", wave.inset, ");opacity:0.05;}");
+  return /*#__PURE__*/css("position:relative;&::after{display:block;content:'';position:absolute;top:", inset, ";bottom:", inset, ";left:", inset, ";right:", inset, ";opacity:0.4;border-radius:4px;z-index:2;animation:", waveEffect, " .2s ease-in;animation-fill-mode:forwards;border:2px solid ", color, ";}&.k-circle,&.k-radio-wrapper{&:after{border-radius:calc(", theme.large.height, " / 2 + 4px);}}");
+}

package/hooks/useRouter.d.ts

@@ -1 +1,2 @@
 export declare function useRouter(): import('intact-react').RefObject<any>;
+export declare function navigate(router: any, to?: string | object): void;

package/hooks/useRouter.js

@@ -19,6 +19,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * in Vue, find the $router
  */
 import { useInstance, createRef, onMounted } from 'intact-react';
+import { isExternalLink } from '../components/utils';
 export function useRouter() {
   var instance = useInstance();
   var ref = createRef();
@@ -27,6 +28,15 @@ export function useRouter() {
   });
   return ref;
 }
+export function navigate(router, to) {
+  if (to) {
+    if (router && !isExternalLink(to)) {
+      router.push(to);
+    } else {
+      location.href = to;
+    }
+  }
+}
 
 function findRouter(instance) {
   var Component = instance.constructor;

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.0-beta.0
+ * @king-design v2.0.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -55,7 +55,8 @@ export * from './components/transfer';
 export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
-export declare const version = "2.0.0-beta.1";
+export * from './components/wave';
+export declare const version = "2.0.0";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.0-beta.0
+ * @king-design v2.0.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,7 +57,8 @@ export * from './components/transfer';
 export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
-export var version = '2.0.0-beta.1';
+export * from './components/wave';
+export var version = '2.0.0';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -37,7 +37,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "^3.0.0-beta.20",
+    "intact-react": "^3.0.0",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",

package/styles/global.js

@@ -4,6 +4,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
 import { injectGlobal } from '@emotion/css';
 import { theme } from './theme';
+import { palette } from '../styles/utils';
 var slideDirections = {
   down: 'center top 0',
   up: 'center bottom 0',
@@ -11,6 +12,6 @@ var slideDirections = {
   right: 'left center 0'
 }; // TODO: update global when theme changed
 
-injectGlobal("html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,SimSun,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
-  return "\n            .k-slide" + direction + "-enter-from,\n            .k-slide" + direction + "-leave-to {\n                transform-origin: " + slideDirections[direction] + ";\n                opacity: 0;\n                transform: " + (direction === 'down' || direction === 'up' ? "scaleY(.8)" : 'scaleX(.8)') + ";\n            }\n            .k-slide" + direction + "-enter-active,\n            .k-slide" + direction + "-leave-active {\n                transform-origin: " + slideDirections[direction] + ";\n                transition: opacity " + theme.transition + ", transform " + theme.transition + " !important;\n                pointer-events: none;\n            }\n        ";
-}).join(''), " .k-fade-enter-from,.k-fade-leave-to{opacity:0!important;}.k-fade-enter-active,.k-fade-leave-active{transition:opacity ", theme.transition, ";}.k-fade-leave-active:not(tr){position:absolute;}.k-fade-move{transition:transform ", theme.transition, ";}.k-scale-enter-from,.k-scale-leave-to{transform:scale(0);}.k-scale-enter-active,.k-scale-leave-active{transition:transform ", theme.transition, ";}.k-expand-enter-from,.k-expand-leave-to{opacity:0;overflow:hidden;}.k-expand-enter-active,.k-expand-leave-active{transition:all ", theme.transition, "!important;overflow:hidden;}.k-expand-move{transition:transform ", theme.transition, ";}.k-dropdown-enter-from,.k-dropdown-leave-to{opacity:0;transform:translateY(-20px);}.k-dropdown-enter-active,.k-dropdown-leave-active,.k-dropdown-move{transition:all ", theme.transition, ";}.k-dropdown-leave-active{position:absolute!important;}.k-dropdown-move{transition:transform ", theme.transition, ";}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.c-hidden{display:none;}.c-middle{display:inline-block;vertical-align:middle;}");
+injectGlobal("html{--var-wave-color:", theme.color.primary, ";box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,SimSun,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
+  return "\n            .k-slide" + direction + "-enter-from,\n            .k-slide" + direction + "-leave-to {\n                transform-origin: " + slideDirections[direction] + ";\n                opacity: 0;\n                transform: " + (direction === 'down' || direction === 'up' ? "scaleY(.8)" : 'scaleX(.8)') + ";\n            }\n            .k-slide" + direction + "-enter-active,\n            .k-slide" + direction + "-leave-active {\n                transform-origin: " + slideDirections[direction] + ";\n                transition: opacity " + theme.transition.large + ", transform " + theme.transition.large + " !important;\n                pointer-events: none;\n            }\n        ";
+}).join(''), " .k-fade-enter-from,.k-fade-leave-to{opacity:0!important;}.k-fade-enter-active,.k-fade-leave-active{transition:opacity ", theme.transition.large, ";}.k-fade-leave-active:not(tr){position:absolute;}.k-fade-move{transition:transform ", theme.transition.large, ";}.k-scale-enter-from,.k-scale-leave-to{transform:scale(0);}.k-scale-enter-active,.k-scale-leave-active{transition:transform ", theme.transition.large, ";}.k-expand-enter-from,.k-expand-leave-to{opacity:0;overflow:hidden;}.k-expand-enter-active,.k-expand-leave-active{transition:all ", theme.transition.large, "!important;overflow:hidden;}.k-expand-move{transition:transform ", theme.transition.large, ";}.k-dropdown-enter-from,.k-dropdown-leave-to{opacity:0;transform:translateY(-20px);}.k-dropdown-enter-active,.k-dropdown-leave-active,.k-dropdown-move{transition:all ", theme.transition.large, ";}.k-dropdown-leave-active{position:absolute!important;}.k-dropdown-move{transition:transform ", theme.transition.large, ";}.k-fade-in-left-enter-from,.k-fade-in-left-leave-to{opacity:0;transform:translate3d(-15px, 0, 0);}.k-fade-in-left-enter-active,.k-fade-in-left-leave-active{transition:all ", theme.transition.large, ";td{background:", palette(theme.color.primary, -4), "!important;}}.k-fade-in-left-move{transition:transform ", theme.transition.large, ";}.k-fade-expand-enter-from,.k-fade-expand-leave-to{opacity:0;}.k-fade-expand-enter-active,.k-fade-expand-leave-active{transition:all ", theme.transition.large, ";background:", palette(theme.color.primary, -4), "!important;}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.c-hidden{display:none;}.c-middle{display:inline-block;vertical-align:middle;}");

package/styles/theme.d.ts

@@ -1,8 +1,7 @@
-export declare type ThemeValue<T> = T;
 export declare type Theme = {
-    [name: string]: ThemeValue<string> | ThemeValue<number> | Theme;
+    [name: string]: string | number | Theme;
 };
-export declare function defualtTheme(): {
+export declare function defaultTheme(): {
     large: {
         height: string;
         fontSize: string;
@@ -24,7 +23,6 @@ export declare function defualtTheme(): {
         padding: string;
     };
     color: {
-        lightBlack: string;
         primary: string;
         warning: string;
         danger: string;
@@ -38,9 +36,11 @@ export declare function defualtTheme(): {
         placeholder: string;
         readonly link: string;
         readonly linkHover: string;
+        readonly hoverBg: string;
         disabled: string;
         disabledBg: string;
         disabledBorder: string;
+        lightBlack: string;
     };
     borderRadius: string;
     boxShadow: string;
@@ -48,7 +48,11 @@ export declare function defualtTheme(): {
     lineHeight: number;
     maxZIndex: number;
     midZIndex: number;
-    transition: string;
+    transition: {
+        small: string;
+        middle: string;
+        large: string;
+    };
 };
 declare let theme: {
     large: {
@@ -72,7 +76,6 @@ declare let theme: {
         padding: string;
     };
     color: {
-        lightBlack: string;
         primary: string;
         warning: string;
         danger: string;
@@ -86,9 +89,11 @@ declare let theme: {
         placeholder: string;
         readonly link: string;
         readonly linkHover: string;
+        readonly hoverBg: string;
         disabled: string;
         disabledBg: string;
         disabledBorder: string;
+        lightBlack: string;
     };
     borderRadius: string;
     boxShadow: string;
@@ -96,7 +101,11 @@ declare let theme: {
     lineHeight: number;
     maxZIndex: number;
     midZIndex: number;
-    transition: string;
+    transition: {
+        small: string;
+        middle: string;
+        large: string;
+    };
 };
 export declare function resetTheme(): void;
 export { theme };

package/styles/theme.js

@@ -1,5 +1,5 @@
 import { palette, deepExtends } from './utils';
-export function defualtTheme() {
+export function defaultTheme() {
   return {
     large: {
       height: '40px',
@@ -22,7 +22,6 @@ export function defualtTheme() {
       padding: '8px'
     },
     color: {
-      lightBlack: '#737373',
       primary: '#0091ea',
       warning: '#ff9800',
       danger: '#ff4133',
@@ -43,22 +42,31 @@ export function defualtTheme() {
         return palette(theme.color.primary, -1);
       },
 
+      get hoverBg() {
+        return palette(theme.color.primary, -4);
+      },
+
       disabled: '#ccc',
       disabledBg: '#f2f2f2',
-      disabledBorder: '#ccc'
+      disabledBorder: '#ccc',
+      lightBlack: '#737373'
     },
     borderRadius: '2px',
-    boxShadow: '0 0 4px 0 rgba(0, 0, 0, .3)',
+    boxShadow: '0 0 16px 0 rgba(0, 0, 0, .1)',
     fontSize: '12px',
     lineHeight: 1.5,
     maxZIndex: 9999,
     midZIndex: 999,
-    transition: '.25s ease-in-out'
+    transition: {
+      small: '.1s cubic-bezier(0.42, 0, 0.58, 1)',
+      middle: '.2s cubic-bezier(0.25, 0.1, 0.25, 1)',
+      large: '.3s cubic-bezier(0.25, 0.1, 0.25, 1)'
+    }
   };
 }
-var theme = defualtTheme();
+var theme = defaultTheme();
 export function resetTheme() {
-  theme = defualtTheme();
+  theme = defaultTheme();
 }
 export { theme };
 var queue = [];