@king-design/intact 2.1.1 → 3.0.0-beta.1

package/es/components/popover/content.d.ts

@@ -0,0 +1,19 @@
+import { TooltipContent, TooltipContentProps, TooltipContentEvents, TooltipContentBlocks } from "../tooltip/content";
+import { TypeDefs, Children } from "intact";
+export interface PopoverContentProps extends TooltipContentProps {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: Children;
+    content?: Children;
+}
+export interface PopoverContentEvents extends TooltipContentEvents {
+}
+export interface PopoverContentBlocks extends TooltipContentBlocks {
+    title: null;
+    content: null;
+    footer: null;
+}
+export declare class PopoverContent extends TooltipContent<PopoverContentProps, PopoverContentEvents, PopoverContentBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<PopoverContentProps>>;
+    protected isEmptyChildren: boolean;
+}

package/es/components/popover/content.js

@@ -0,0 +1,31 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { TooltipContent } from "../tooltip/content";
+import { VNode } from "intact";
+import template from "./content.vdt";
+var typeDefs = {
+  type: ['info', 'error', 'success', 'warning'],
+  title: [String, Number, VNode, Array],
+  content: [String, Number, VNode, Array]
+};
+export var PopoverContent = /*#__PURE__*/function (_TooltipContent) {
+  _inheritsLoose(PopoverContent, _TooltipContent);
+
+  function PopoverContent() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _TooltipContent.call.apply(_TooltipContent, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.isEmptyChildren = false;
+    return _this;
+  }
+
+  return PopoverContent;
+}(TooltipContent);
+PopoverContent.template = template;
+PopoverContent.typeDefs = typeDefs;

package/es/components/popover/content.vdt.js

@@ -0,0 +1,68 @@
+import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no } from 'intact';
+import { Icon } from '../icon';
+import makeStyles from "./styles";
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      type = _this$get.type,
+      title = _this$get.title,
+      content = _this$get.content;
+
+  var iconMap = {
+    info: 'information-fill',
+    warning: 'warning-fill',
+    success: 'success-fill',
+    error: 'error-fill'
+  };
+  var classNameObj = (_classNameObj = {}, _classNameObj[makeStyles()] = true, _classNameObj['k-popover'] = true, _classNameObj);
+  return _$su.call($this, {
+    'className': _$cn(classNameObj)
+  }, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['body'] = function ($super) {
+      return [title || $blocks.title ? _$ce(2, 'div', [type ? _$cc(Icon, {
+        'className': _$cn("k-icon-" + iconMap[type] + " k-popover-icon"),
+        'color': type === 'error' ? 'danger' : type,
+        'size': 'large'
+      }) : undefined, (_$blocks['title'] = function ($super) {
+        return title;
+      }, __$blocks['title'] = function ($super, data) {
+        var block = $blocks['title'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['title'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['title'](_$no))], 0, 'k-popover-title') : undefined, content || $blocks.content ? _$ce(2, 'div', (_$blocks['content'] = function ($super) {
+        return content;
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['content'](_$no)), 0, 'k-popover-content') : undefined];
+    }, __$blocks['body'] = function ($super, data) {
+      var block = $blocks['body'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['body'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), __$blocks;
+  }.call($this, $blocks), $__proto__);
+}
+;

package/es/components/popover/index.d.ts

@@ -0,0 +1,16 @@
+import { Tooltip } from "../tooltip/tooltip";
+import { TooltipProps, TooltipEvents, TooltipBlocks } from "../tooltip/tooltip";
+import { PopoverContentProps, PopoverContentBlocks } from './content';
+export interface PopoverProps extends TooltipProps, PopoverContentProps {
+    confirm?: never;
+    theme?: never;
+    hoverable?: never;
+    trigger?: never;
+}
+export interface PopoverEvents extends TooltipEvents {
+}
+export interface PopoverBlocks extends TooltipBlocks, PopoverContentBlocks {
+}
+export declare class _Popover extends Tooltip<PopoverProps, PopoverEvents, PopoverBlocks> {
+}
+export declare const Popover: typeof _Popover;

package/es/components/popover/index.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "type", "title", "content", "$blocks"];
+import { createVNode as h, Component } from "intact";
+import { Tooltip } from "../tooltip/tooltip";
+import { PopoverContent } from './content';
+import { noop } from 'intact-shared';
+
+function Wrapper(props) {
+  var children = props.children,
+      type = props.type,
+      title = props.title,
+      content = props.content,
+      $blocks = props.$blocks,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  if ($blocks) {
+    if ($blocks.title) {
+      title = $blocks.title(noop);
+    }
+
+    if ($blocks.content) {
+      content = $blocks.content(noop);
+    }
+  }
+
+  var contentVNode = h(PopoverContent, {
+    type: type,
+    title: title,
+    content: content,
+    $blocks: $blocks
+  });
+  return h(Tooltip, _extends({
+    children: [children, contentVNode]
+  }, rest, {
+    confirm: true,
+    theme: 'light',
+    hoverable: true,
+    trigger: 'click'
+  }));
+}
+
+var functionalWrapper = Component.functionalWrapper;
+export var Popover = functionalWrapper ? functionalWrapper(Wrapper) : Wrapper;

package/es/components/popover/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/popover/index.spec.js

@@ -0,0 +1,195 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Array$from2 from "@babel/runtime-corejs3/core-js/array/from";
+import BasicDemo from '~/components/popover/demos/basic';
+import ContentDemo from '~/components/popover/demos/content';
+import ButtonDemo from '~/components/popover/demos/button';
+import TextDemo from '~/components/popover/demos/text';
+import TypeDemo from '~/components/popover/demos/type';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+describe("Popover", function () {
+  afterEach(function (done) {
+    unmount();
+    setTimeout(done, 500);
+  });
+  it('should handle popover correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, cancelCb, okCb, content, _Array$from, btn;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            cancelCb = sinon.spy();
+            okCb = sinon.spy();
+            instance.refs.popover1.on('cancel', cancelCb);
+            instance.refs.popover1.on('ok', okCb);
+            dispatchEvent(element.children[0], 'click');
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            content = getElement('.k-tooltip-content');
+            expect(content.innerHTML).to.matchSnapshot();
+            content.querySelector('.k-btn').click();
+            _context.next = 13;
+            return wait(500);
+
+          case 13:
+            expect(content.style.display).eql('none');
+            dispatchEvent(element.firstElementChild, 'click');
+            _context.next = 17;
+            return wait();
+
+          case 17:
+            content = getElement('.k-tooltip-content');
+            _Array$from = _Array$from2(content.querySelectorAll('.k-btn')), btn = _Array$from[1];
+            btn.click();
+            _context.next = 22;
+            return wait(500);
+
+          case 22:
+            expect(content.style.display).eql('none');
+            expect(cancelCb.callCount).eql(1);
+            expect(okCb.callCount).eql(1);
+
+          case 25:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should handle type correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount2, instance, element, _element$querySelecto, info, success, error, warning, test;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount2 = mount(TypeDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto = element.querySelectorAll('.k-btn'), info = _element$querySelecto[0], success = _element$querySelecto[1], error = _element$querySelecto[2], warning = _element$querySelecto[3];
+
+            test = /*#__PURE__*/function () {
+              var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(element, className) {
+                var content;
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        element.click();
+                        _context2.next = 3;
+                        return wait();
+
+                      case 3:
+                        content = getElement('.k-tooltip-content');
+                        expect(content.querySelector('.k-popover-icon').classList.contains(className)).eql(true);
+
+                      case 5:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2);
+              }));
+
+              return function test(_x, _x2) {
+                return _ref3.apply(this, arguments);
+              };
+            }();
+
+            _context3.next = 5;
+            return test(info, 'k-icon-information-fill');
+
+          case 5:
+            _context3.next = 7;
+            return test(success, 'k-icon-success-fill');
+
+          case 7:
+            _context3.next = 9;
+            return test(error, 'k-icon-error-fill');
+
+          case 9:
+            _context3.next = 11;
+            return test(warning, 'k-icon-warning-fill');
+
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should handle title/content slot correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount3, instance, element, content;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount3 = mount(ContentDemo), instance = _mount3[0], element = _mount3[1];
+            dispatchEvent(element.children[0], 'click');
+            _context4.next = 4;
+            return wait();
+
+          case 4:
+            content = getElement('.k-tooltip-content');
+            expect(content.querySelector('.k-popover-title')).to.matchSnapshot();
+            expect(content.querySelector('.k-popover-content')).to.matchSnapshot();
+
+          case 7:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should handle text props correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount4, instance, element, content, btns;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount4 = mount(TextDemo), instance = _mount4[0], element = _mount4[1];
+            dispatchEvent(element.children[0], 'click');
+            _context5.next = 4;
+            return wait();
+
+          case 4:
+            content = getElement('.k-tooltip-content');
+            btns = content.querySelectorAll('.k-btn');
+            expect(btns[0].textContent).eql('cancel');
+            expect(btns[1].textContent).eql('confirm');
+
+          case 8:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should handle footer slot correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount5, instance, element, content;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount5 = mount(ButtonDemo), instance = _mount5[0], element = _mount5[1];
+            dispatchEvent(element.children[0], 'click');
+            _context6.next = 4;
+            return wait();
+
+          case 4:
+            content = getElement('.k-tooltip-content');
+            expect(content.querySelector('.k-tooltip-footer').outerHTML).to.matchSnapshot();
+
+          case 6:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+});

package/es/components/popover/styles.d.ts

@@ -0,0 +1 @@
+export default function makeStyles(): string;

package/es/components/popover/styles.js

@@ -0,0 +1,22 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+var defaults = {
+  width: '240px',
+  padding: '8px 16px',
+  gap: '8px',
+  title: {
+    fontSize: '14px',
+    lineHeight: '20px',
+    fontWeight: 500
+  }
+};
+var popover;
+setDefault(function () {
+  popover = deepDefaults(theme, {
+    popover: defaults
+  }).popover;
+});
+export default function makeStyles() {
+  return /*#__PURE__*/css("&.k-tooltip-content.k-popover{width:", popover.width, ";padding:", popover.padding, ";.k-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.k-popover-icon{margin-right:", popover.gap, ";}.k-popover-content{margin-top:", popover.gap, ";}.k-tooltip-footer{text-align:right;}}");
+}

package/es/components/progress/index.js

@@ -23,7 +23,7 @@ var defaults = function defaults() {
     size: 'default',
     showOuterText: true,
     status: 'active',
-    strokeWidth: 4
+    strokeWidth: 6
   };
 };
 

package/es/components/progress/index.vdt.js

@@ -14,14 +14,8 @@ var _$tmp0 = {
 var _$tmp1 = {
   'viewBox': '0 0 120 120'
 };
-var _$tmp2 = {
-  'className': 'k-progress-icon k-icon-truth'
-};
-var _$tmp3 = {
-  'className': 'k-progress-icon k-icon-fault'
-};
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj, r, circumference;
+  var _classNameObj, r, circumference, icon, _$cn2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -75,6 +69,50 @@ export default function ($props, $blocks, $__proto__) {
     'stroke-width': strokeWidth,
     'stroke-dasharray': circumference,
     'stroke-dashoffset': circumference
-  }) : undefined]), 0, 'k-progress-canvas', _$tmp1) : undefined, children ? _$ce(2, 'div', children, 0, 'k-progress-text') : showOuterText ? _$ce(2, 'div', status !== 'success' && status !== 'error' ? _$ce(2, 'span', [percent, _$ct('%')], 0) : status === 'success' ? _$ce(2, 'span', _$cc(Icon, _$tmp2), 2) : status === 'error' ? _$ce(2, 'span', _$cc(Icon, _$tmp3), 2) : undefined, 0, 'k-progress-text') : undefined]);
+  }) : undefined]), 0, 'k-progress-canvas', _$tmp1) : undefined, children ? _$ce(2, 'div', children, 0, 'k-progress-text') : showOuterText ? _$ce(2, 'div', function () {
+    if (type !== 'circle') {
+      switch (status) {
+        case 'success':
+          icon = 'k-icon-success-fill';
+          break;
+
+        case 'error':
+          icon = 'k-icon-error-fill';
+          break;
+
+        case 'warning':
+          icon = 'k-icon-warning-fill';
+          break;
+
+        default:
+          break;
+      }
+    } else {
+      switch (status) {
+        case 'success':
+          icon = 'k-icon-truth';
+          break;
+
+        case 'error':
+        case 'warning':
+          icon = 'k-icon-close';
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    if (icon) {
+      return _$cc(Icon, {
+        'className': _$cn((_$cn2 = {
+          "k-progress-icon": true
+        }, _$cn2[icon] = true, _$cn2)),
+        'color': status === 'error' ? 'danger' : status
+      });
+    } else {
+      return _$ce(2, 'span', [percent, _$ct('%')], 0);
+    }
+  }(), 0, 'k-progress-text') : undefined]);
 }
 ;

package/es/components/progress/styles.js

@@ -9,11 +9,11 @@ import '../../styles/global';
 export var types = ['active', 'normal', 'error', 'success', 'warning'];
 var sizes = ['small', 'mini'];
 var progressBarAnimation = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
-  name: "ecxna4",
-  styles: "from{opacity:0.2;width:14px;margin-left:14px;}to{opacity:0;width:100%;}"
+  name: "sckwkj",
+  styles: "from{opacity:0.2;width:0;}to{opacity:0;width:100%;}"
 } : {
-  name: "ecxna4",
-  styles: "from{opacity:0.2;width:14px;margin-left:14px;}to{opacity:0;width:100%;}",
+  name: "sckwkj",
+  styles: "from{opacity:0.2;width:0;}to{opacity:0;width:100%;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var defaults = {
@@ -41,15 +41,18 @@ var defaults = {
   },
   bar: {
     fontColor: '#404040',
-    height: '16px',
+    height: '8px',
     textWidth: '40px',
     textMarginLeft: '16px',
     innerText: {
       fontSize: '12px',
       padding: "0 10px 0 3px"
     },
+    outerText: {
+      height: '16px'
+    },
     small: {
-      height: '10px',
+      height: '6px',
       fontSize: '12px'
     },
     mini: {
@@ -60,13 +63,16 @@ var defaults = {
   circle: {
     width: '104px',
     fontSize: '16px',
+    iconFontSize: '50px',
     small: {
       width: '80px',
-      fontSize: '14px'
+      fontSize: '14px',
+      iconFontSize: '30px'
     },
     mini: {
-      width: '40px',
-      fontSize: '12px'
+      width: '24px',
+      fontSize: '10px',
+      iconFontSize: '14px'
     }
   }
 };
@@ -77,10 +83,10 @@ setDefault(function () {
   }).progress;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("position:relative;line-height:1;&.k-bar{display:flex;align-items:center;.k-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.k-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.k-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.k-progress-inner-text{display:inline-block;vertical-align:middle;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.k-success{.k-progress-bg{background:", progress.stokeColor.success, ";}.k-progress-icon{color:", progress.stokeColor.success, ";}}&.k-error{.k-progress-bg{background:", progress.stokeColor.error, ";}.k-progress-icon{color:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-bg{background:", progress.stokeColor.warning, ";}}&.k-active{.k-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("position:relative;line-height:1;&.k-bar{display:flex;align-items:center;.k-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.k-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.k-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.k-progress-inner-text{display:inline-block;vertical-align:top;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.k-success{.k-progress-bg{background:", progress.stokeColor.success, ";}}&.k-error{.k-progress-bg{background:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-bg{background:", progress.stokeColor.warning, ";}}&.k-active{.k-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     return /*#__PURE__*/css("&.k-", size, "{font-size:", progress.bar[size].fontSize, ";.k-progress-container{height:", progress.bar[size].height, ";}}");
-  }), " .k-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";}}&.k-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), " .k-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";line-height:", progress.bar.outerText.height, ";height:", progress.bar.outerText.height, ";}}&.k-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = progress.circle[size];
-    return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";}");
-  }), ";.k-progress-canvas{transform:rotate(-90deg);}.k-progress-meter,.k-progress-value,.k-progress-animate{fill:none;}.k-progress-meter{stroke:", progress.stokeColor.color, ";}.k-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.k-progress-animate{stroke:#fff;stroke-linecap:round;}.k-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}&.k-success{.k-progress-value{stroke:", progress.stokeColor.success, ";}}&.k-error{.k-progress-value{stroke:", progress.stokeColor.error, ";}}}");
+    return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";.k-progress-icon{font-size:", styles.iconFontSize, ";}}");
+  }), ";.k-progress-canvas{transform:rotate(-90deg);}.k-progress-meter,.k-progress-value,.k-progress-animate{fill:none;}.k-progress-meter{stroke:", progress.stokeColor.color, ";}.k-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.k-progress-animate{stroke:#fff;stroke-linecap:round;}.k-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}.k-progress-icon{font-size:", progress.circle.iconFontSize, ";}&.k-success{.k-progress-value{stroke:", progress.stokeColor.success, ";}}&.k-error{.k-progress-value{stroke:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-value{stroke:", progress.stokeColor.warning, ";}}}");
 }

package/es/components/radio/styles.js

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
-import { deepDefaults } from '../../styles/utils';
+import { deepDefaults, palette } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var defaults = {
-  width: '14px',
+  width: '16px',
 
   get transition() {
     return theme.transition.small;
@@ -38,10 +38,20 @@ var defaults = {
       return theme.color.disabledBg;
     },
 
-    get innerColor() {
-      return theme.color.disabledBorder;
-    }
+    checked: {
+      get borderColor() {
+        return palette(theme.color.primary, -2);
+      },
+
+      get bgColor() {
+        return palette(theme.color.primary, -4);
+      },
 
+      get innerColor() {
+        return palette(theme.color.primary, -3);
+      }
+
+    }
   }
 };
 var radio;
@@ -51,5 +61,5 @@ setDefault(function () {
   }).radio;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";&:before{background:", radio.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}&:hover{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
 }

package/es/components/rate/styles.js

@@ -26,5 +26,5 @@ setDefault(function () {
   }).rate;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;.k-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", rate.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.k-full{color:", rate.activeColor, ";}&.k-half{.k-rate-first{color:", rate.activeColor, ";}}}.k-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.k-icon{font-size:", rate.iconFontSize, ";}&.k-disabled{.k-rate-item{cursor:default;&:hover{transform:none;}}}");
+  return /*#__PURE__*/css("display:inline-block;.k-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", rate.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.k-full{color:", rate.activeColor, ";}&.k-half{.k-rate-first{color:", rate.activeColor, ";}}}.k-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.k-icon{font-size:", rate.iconFontSize, ";color:inherit;}&.k-disabled{.k-rate-item{cursor:default;&:hover{transform:none;}}}");
 }

package/es/components/select/base.d.ts

@@ -1,6 +1,5 @@
 import { Component, Children, TypeDefs, RefObject } from 'intact';
 import { Sizes } from '../../styles/utils';
-import type { Input } from '../input';
 import { Dropdown, DropdownProps } from '../dropdown';
 import { State } from '../../hooks/useState';
 import { Container } from '../portal';
@@ -22,6 +21,9 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     width?: string | number;
     show?: boolean;
     position?: DropdownProps['position'];
+    flat?: boolean;
+    nowrap?: boolean;
+    draggable?: boolean;
 }
 export interface BaseSelectEvents {
     keydown: [KeyboardEvent];
@@ -45,9 +47,10 @@ export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSe
     input: {
         onInput: (value: string) => void;
         keywords: State<string>;
-        inputRef: RefObject<Input<string | number>>;
+        inputRef: RefObject<import("../input").Input<string | number>>;
     };
     private focusout;
+    private draggable;
     init(): void;
     protected abstract getPlaceholder(): Children;
     protected abstract getLabel(): Children;