@king-design/intact 2.0.0-beta.0

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

@@ -0,0 +1,18 @@
+import { Component, VNode, TypeDefs } from 'intact';
+export * from './column';
+export interface CardProps {
+    title?: string | VNode;
+    type?: 'shadow' | 'border' | 'none';
+}
+export interface CardEvents {
+}
+export interface CardBlocks {
+    header: null;
+    title: null;
+    extra: null;
+}
+export declare class Card extends Component<CardProps, CardEvents, CardBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CardProps>>;
+    static defaults: () => Partial<CardProps>;
+}

package/es/components/card/index.js

@@ -0,0 +1,27 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component, VNode } from 'intact';
+import template from './index.vdt';
+export * from './column';
+var typeDefs = {
+  title: [String, VNode],
+  type: ['shadow', 'border', 'none']
+};
+
+var defaults = function defaults() {
+  return {
+    type: 'shadow'
+  };
+};
+
+export var Card = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Card, _Component);
+
+  function Card() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Card;
+}(Component);
+Card.template = template;
+Card.typeDefs = typeDefs;
+Card.defaults = defaults;

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no } from 'intact';
+import { getRestProps } from '../utils';
+import { CardColumn } from './column';
+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(),
+      children = _this$get.children,
+      className = _this$get.className,
+      title = _this$get.title,
+      type = _this$get.type;
+
+  var hasHeader = $blocks.header || $blocks.title || title || $blocks.extra;
+  var hasColumn = false;
+
+  if (children && children.length) {
+    for (var i = 0; i < children.length; i++) {
+      var vNode = children[i];
+
+      if (vNode && vNode.tag === CardColumn) {
+        hasColumn = true;
+        break;
+      }
+    }
+  }
+
+  var classNameObj = (_classNameObj = {
+    'k-card': true,
+    'k-shadow': type === 'shadow',
+    'k-border': type === 'border',
+    'k-none': type === 'none',
+    'k-no-header': !hasHeader,
+    'k-card-grid': hasColumn
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [hasHeader ? _$ce(2, 'div', (_$blocks['header'] = function ($super) {
+    return [_$ce(2, 'div', (_$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-card-title'), $blocks.extra ? _$ce(2, 'div', (_$blocks['extra'] = function ($super) {
+      return null;
+    }, __$blocks['extra'] = function ($super, data) {
+      var block = $blocks['extra'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['extra'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['extra'](_$no)), 0, 'k-card-extra') : undefined];
+  }, __$blocks['header'] = function ($super, data) {
+    var block = $blocks['header'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['header'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['header'](_$no)), 0, 'k-card-header c-clearfix') : undefined, _$ce(2, 'div', children, 0, 'k-card-body')]);
+}
+;

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

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

package/es/components/card/styles.js

@@ -0,0 +1,21 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  border: '1px solid #e5e5e5',
+  padding: '16px',
+  boxShadow: '0 0 20px 0 rgba(0, 0, 0, .06)',
+  headerHeight: '48px',
+  headerFontSize: '14px',
+  bgColor: '#fff'
+};
+var card;
+setDefault(function () {
+  card = deepDefaults(theme, {
+    card: defaults
+  }).card;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("border-radius:", theme.borderRadius, ";background:", card.bgColor, ";.k-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.k-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.k-card-extra{float:right;height:100%;display:flex;align-items:center;}.k-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.k-shadow{box-shadow:", card.boxShadow, ";}&.k-none{box-shadow:none;}&.k-border{border:", card.border, ";.k-card-header{border-bottom:", card.border, ";}.k-card-body{padding-top:", card.padding, ";}}&.k-no-header{.k-card-body{padding-top:", card.padding, ";}}&.k-card-grid{.k-card-body{display:flex;padding:0;}&.k-border{.k-card-column:not(:last-of-type){border-right:", card.border, ";}}}.k-card-column{display:flex;align-items:center;padding:", card.padding, ";&.k-fluid{flex:1;}&.k-center{justify-content:center;}}");
+}

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

@@ -0,0 +1,23 @@
+import { Component, TypeDefs } from 'intact';
+export * from './item';
+export interface CarouselProps {
+    value?: string;
+    autoplay?: number | boolean;
+    arrow?: 'hover' | 'always' | 'never';
+    effect?: 'slide' | 'fade';
+    clonedAmount?: number;
+}
+export declare class Carousel extends Component<CarouselProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CarouselProps>>;
+    static defaults: () => Partial<CarouselProps>;
+    private items;
+    private slide;
+    private autoplay;
+    isActive(value: string): boolean;
+    getIndex(): number;
+    setIndex(index: number): void;
+    prev(): void;
+    next(): void;
+    private setValue;
+}

package/es/components/carousel/index.js

@@ -0,0 +1,104 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import { __decorate } from "tslib";
+import { Component } from 'intact';
+import template from './index.vdt';
+import { useItems } from './useItems';
+import { useSlide } from './useSlide';
+import { bind } from '../utils';
+import { useAutoplay } from './useAutoplay';
+export * from './item';
+var typeDefs = {
+  value: String,
+  autoplay: [Number, Boolean],
+  arrow: ['hover', 'always', 'never'],
+  effect: ['slide', 'fade'],
+  clonedAmount: Number
+};
+
+var defaults = function defaults() {
+  return {
+    arrow: 'hover',
+    effect: 'slide',
+    clonedAmount: 1
+  };
+};
+
+export var Carousel = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Carousel, _Component);
+
+  function Carousel() {
+    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.items = useItems();
+    _this.slide = useSlide(_this.items.getItems, _this.items.getItemsWithCloned);
+    _this.autoplay = useAutoplay(_this.next);
+    return _this;
+  }
+
+  var _proto = Carousel.prototype;
+
+  _proto.isActive = function isActive(value) {
+    return this.get('value') === value;
+  };
+
+  _proto.getIndex = function getIndex() {
+    var _context2,
+        _this2 = this;
+
+    return _findIndexInstanceProperty(_context2 = this.items.getItems()).call(_context2, function (item) {
+      return item.children.get('value') === _this2.get('value');
+    });
+  };
+
+  _proto.setIndex = function setIndex(index) {
+    var item = this.items.getItems()[index];
+    this.setValue(item);
+    this.slide.translateToItem(item, null, null, false);
+  };
+
+  _proto.prev = function prev() {
+    var index = this.getIndex();
+    var items = this.items.getItems();
+    var length = items.length;
+    var newIndex = (index + length - 1) % length;
+    var item = items[newIndex];
+    this.setValue(item);
+    this.slide.translateToItem(item, index, newIndex, true);
+  };
+
+  _proto.next = function next() {
+    var index = this.getIndex();
+    var items = this.items.getItems();
+    var newIndex = (index + 1) % items.length;
+    var item = items[newIndex];
+    this.setValue(item);
+    this.slide.translateToItem(item, index, newIndex, true);
+  };
+
+  _proto.setValue = function setValue(item) {
+    var value = item.children.get('value');
+    this.set({
+      value: value
+    });
+  };
+
+  return Carousel;
+}(Component);
+Carousel.template = template;
+Carousel.typeDefs = typeDefs;
+Carousel.defaults = defaults;
+
+__decorate([bind], Carousel.prototype, "setIndex", null);
+
+__decorate([bind], Carousel.prototype, "prev", null);
+
+__decorate([bind], Carousel.prototype, "next", null);

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

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

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

@@ -0,0 +1,198 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import AutoPlayDemo from '~/components/carousel/demos/autoplay';
+import EffectDemo from '~/components/carousel/demos/effect';
+import { mount, unmount, wait } from '../../test/utils';
+import { Carousel } from './';
+import { CarouselItem } from './item';
+import { Component } from 'intact';
+describe('Carousel', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element, carousel;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            this.timeout(0);
+
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                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.Carousel = Carousel;
+                _this.CarouselItem = CarouselItem;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Carousel, CarouselItem} = this;\n                <Carousel v-model='value' clonedAmount={this.get('clonedAmount')}>\n                    <CarouselItem>1</CarouselItem>\n                    <CarouselItem>2</CarouselItem>\n                    <CarouselItem>3</CarouselItem>\n                    <CarouselItem>4</CarouselItem> \n                </Carousel>\n            ";
+
+            Demo.defaults = function () {
+              return {
+                value: '$0',
+                clonedAmount: 1
+              };
+            };
+
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            carousel = instance.$lastInput.children;
+            expect(element.innerHTML).to.matchSnapshot(); // should change to next item
+
+            carousel.next();
+            _context2.next = 10;
+            return wait();
+
+          case 10:
+            expect(carousel.get('value')).to.eql('$1');
+            expect(element.innerHTML).to.matchSnapshot();
+            carousel.prev();
+            _context2.next = 15;
+            return wait();
+
+          case 15:
+            expect(carousel.get('value')).to.eql('$0');
+            expect(element.innerHTML).to.matchSnapshot();
+            carousel.setIndex(3);
+            _context2.next = 20;
+            return wait();
+
+          case 20:
+            expect(carousel.get('value')).to.eql('$3');
+            expect(element.innerHTML).to.matchSnapshot();
+            carousel.setIndex(0);
+            _context2.next = 25;
+            return wait();
+
+          case 25:
+            expect(carousel.get('value')).to.eql('$0');
+            expect(element.innerHTML).to.matchSnapshot();
+            carousel.prev();
+            _context2.next = 30;
+            return wait();
+
+          case 30:
+            expect(carousel.get('value')).to.eql('$3');
+            expect(element.innerHTML).to.matchSnapshot();
+            carousel.next();
+            _context2.next = 35;
+            return wait();
+
+          case 35:
+            expect(carousel.get('value')).to.eql('$0');
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('value', '$3');
+            _context2.next = 40;
+            return wait();
+
+          case 40:
+            expect(carousel.get('value')).to.eql('$3');
+            expect(element.innerHTML).to.matchSnapshot(); // change clonedAmount
+
+            instance.set('clonedAmount', 2);
+            _context2.next = 45;
+            return wait();
+
+          case 45:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 46:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee, this);
+  })));
+  it('can auto play', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, carousel;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            this.timeout(0);
+            _mount2 = mount(AutoPlayDemo), instance = _mount2[0];
+            carousel = instance.$lastInput.children;
+            instance.set('time', 1000);
+            _context3.next = 6;
+            return wait(1500);
+
+          case 6:
+            expect(carousel.get('value')).to.eql('$1');
+            _context3.next = 9;
+            return wait(1100);
+
+          case 9:
+            expect(carousel.get('value')).to.eql('$2');
+            _context3.next = 12;
+            return wait(1100);
+
+          case 12:
+            expect(carousel.get('value')).to.eql('$3');
+            instance.set('time', false);
+            _context3.next = 16;
+            return wait(1100);
+
+          case 16:
+            expect(carousel.get('value')).to.eql('$3');
+
+          case 17:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee2, this);
+  })));
+  it('fade effect', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, carousel;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount3 = mount(EffectDemo), instance = _mount3[0], element = _mount3[1];
+            carousel = instance.$lastInput.children;
+            carousel.next();
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.innerHTML).to.matchSnapshot(); // change effect
+
+            instance.set('effect', 'slide');
+            _context4.next = 9;
+            return wait();
+
+          case 9:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('effect', 'fade');
+            _context4.next = 13;
+            return wait();
+
+          case 13:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 14:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, map as _$ma } from 'intact';
+import { getRestProps, mapChildren } from '../utils';
+import { CarouselItem } from './item';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { makeStyles } from './styles';
+import { linkEvent } from 'intact';
+var _$tmp0 = {
+  'className': 'ion-ios-arrow-left'
+};
+var _$tmp1 = {
+  'className': 'ion-ios-arrow-right'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      children = _this$get.children,
+      arrow = _this$get.arrow,
+      effect = _this$get.effect;
+
+  var _this$slide = this.slide,
+      translate = _this$slide.translate,
+      shouldTransition = _this$slide.shouldTransition,
+      elementRef = _this$slide.elementRef,
+      isSlide = _this$slide.isSlide;
+  var classNameObj = (_classNameObj = {
+    'k-carousel': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + arrow] = true, _classNameObj['k-stop'] = !shouldTransition.value, _classNameObj["k-" + effect] = true, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$items = this.items,
+      getItems = _this$items.getItems,
+      getItemsWithCloned = _this$items.getItemsWithCloned;
+  var _this$autoplay = this.autoplay,
+      stop = _this$autoplay.stop,
+      play = _this$autoplay.play;
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'ref': elementRef,
+    'ev-mouseenter': stop,
+    'ev-mouseleave': play
+  }), [_$ce(2, 'div', getItemsWithCloned(), 0, 'k-carousel-wrapper', {
+    'style': {
+      transform: isSlide() ? "translate3d(" + translate.value + "px, 0, 0)" : undefined
+    }
+  }), _$cc(Button, {
+    'icon': true,
+    'circle': true,
+    'type': 'none',
+    'size': 'large',
+    'className': 'k-carousel-btn k-prev',
+    'ev-click': this.prev,
+    'children': _$cc(Icon, _$tmp0)
+  }), _$cc(Button, {
+    'icon': true,
+    'circle': true,
+    'type': 'none',
+    'size': 'large',
+    'className': 'k-carousel-btn k-next',
+    'ev-click': this.next,
+    'children': _$cc(Icon, _$tmp1)
+  }), _$ce(2, 'div', _$ma(getItems(), function ($value, $key) {
+    return _$ce(2, 'div', null, 1, _$cn({
+      'k-carousel-dot': true,
+      'k-active': this.isActive($value.props.value)
+    }), {
+      'ev-click': linkEvent($key, this.setIndex)
+    });
+  }, $this), 4, 'k-carousel-indicator c-clearfix')]);
+}
+;

package/es/components/carousel/item.d.ts

@@ -0,0 +1,9 @@
+import { Component, TypeDefs } from 'intact';
+export interface CarouselItemProps {
+    value?: string;
+    cloned?: boolean;
+}
+export declare class CarouselItem extends Component<CarouselItemProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CarouselItemProps>>;
+}

package/es/components/carousel/item.js

@@ -0,0 +1,18 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './item.vdt';
+var typeDefs = {
+  value: String,
+  cloned: null
+};
+export var CarouselItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(CarouselItem, _Component);
+
+  function CarouselItem() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return CarouselItem;
+}(Component);
+CarouselItem.template = template;
+CarouselItem.typeDefs = typeDefs;

package/es/components/carousel/item.vdt.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn } from 'intact';
+import { Transition } from 'intact';
+import { getRestProps } from '../utils';
+import { makeItemStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      children = _this$get.children,
+      value = _this$get.value,
+      cloned = _this$get.cloned;
+
+  var parent = this.$senior;
+  var active = parent.isActive(value);
+  var classNameObj = (_classNameObj = {
+    'k-carousel-item': true
+  }, _classNameObj[className] = className, _classNameObj['k-active'] = active, _classNameObj['k-cloned'] = cloned, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var isSlide = parent.get('effect') === 'slide';
+  return _$cc(Transition, {
+    'show': active || isSlide,
+    'name': 'k-carousel-fade',
+    'children': _$cv('div', _extends({
+      'className': _$cn(classNameObj)
+    }, getRestProps(this)), children)
+  });
+}
+;

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

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

package/es/components/carousel/styles.js

@@ -0,0 +1,44 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  transition: ".5s ease",
+  height: "300px",
+  indicator: {
+    bottom: "8px",
+    height: "20px"
+  },
+  dot: {
+    paddingTop: "8px",
+    margin: "0 2px",
+    height: "3px",
+    width: "16px",
+    opacity: ".3",
+    bgColor: "#fff",
+    active: {
+      opacity: "1",
+      width: "24px"
+    }
+  },
+  arrow: {
+    bgColor: "rgba(0, 0, 0, .5)",
+    color: "#fff",
+    opacity: ".5",
+    hoverOpacity: "1",
+    left: "10px",
+    right: "10px"
+  }
+};
+var carousel;
+setDefault(function () {
+  carousel = deepDefaults(theme, {
+    carousel: defaults
+  }).carousel;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("height:", carousel.height, ";position:relative;overflow:hidden;.k-carousel-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:", carousel.indicator.bottom, ";}.k-carousel-dot{height:", carousel.indicator.height, ";float:left;margin:", carousel.dot.margin, ";cursor:pointer;padding-top:", carousel.dot.paddingTop, ";&:before{content:'';display:block;width:", carousel.dot.width, ";height:", carousel.dot.height, ";background:", carousel.dot.bgColor, ";opacity:", carousel.dot.opacity, ";transition:width ", carousel.transition, ";}&.k-active:before{opacity:", carousel.dot.active.opacity, ";width:", carousel.dot.active.width, ";}}.k-carousel-btn{position:absolute;background:", carousel.arrow.bgColor, "!important;top:50%;transform:translateY(-50%);color:", carousel.arrow.color, ";opacity:", carousel.arrow.opacity, ";&:hover{color:#fff;opacity:", carousel.arrow.hoverOpacity, "!important;background:", carousel.arrow.bgColor, ";}&.k-prev{left:", carousel.arrow.left, ";}&.k-next{right:", carousel.arrow.right, ";}}&.k-hover{.k-carousel-btn{opacity:0;}&:hover{.k-carousel-btn{opacity:", carousel.arrow.opacity, ";}}}&.k-never{.k-carousel-btn{display:none;}}&.k-slide{.k-carousel-wrapper{transition:transform ", carousel.transition, ";white-space:nowrap;}}&.k-stop{.k-carousel-wrapper{transition:none;}}&.k-fade{.k-carousel-item{position:absolute;}}");
+}
+export function makeItemStyles() {
+  return /*#__PURE__*/css("display:inline-block;width:100%;height:100%;&.k-carousel-fade-enter-active,&.k-carousel-fade-leave-active{transition:opacity ", carousel.transition, ";}&.k-carousel-fade-enter-from,&.k-carousel-fade-leave-to{opacity:0;}");
+}

package/es/components/carousel/useAutoplay.d.ts

@@ -0,0 +1,4 @@
+export declare function useAutoplay(next: () => void): {
+    stop: () => void;
+    play: () => void;
+};