@mirai/ui 2.0.36 → 2.0.37

package/README.md

@@ -1101,6 +1101,7 @@ A Slider component receiving the following props:
 - `auto:bool` if you want auto slide feature (default is false).
 - `behavior:string` type of scroll animation
 - `captions:arrayOf:string` if you want show a determinate caption for a determinate image.
+- `counter:bool` show counter
 - `fullScreen:boolean` if you want start in fullScreen mode.
 - `height:number` Height of component (required).
 - `images:arrayOf:string` images to show (required).

package/build/components/Slider/Slider.js

@@ -15,7 +15,7 @@ var _Progress = require("../Progress");
 var _Slider = require("./Slider.constants");
 var _Slider2 = require("./Slider.Item");
 var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
-var _excluded = ["auto", "behavior", "captions", "children", "height", "images", "index", "indicator", "preloadImages", "visibleItems", "width", "onChange", "onCounter"];
+var _excluded = ["auto", "behavior", "captions", "children", "counter", "height", "images", "index", "indicator", "preloadImages", "visibleItems", "width", "onChange", "onCounter"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,6 +43,8 @@ var Slider = function Slider(_ref) {
     _ref$captions = _ref.captions,
     captions = _ref$captions === void 0 ? [] : _ref$captions,
     children = _ref.children,
+    _ref$counter = _ref.counter,
+    counter = _ref$counter === void 0 ? false : _ref$counter,
     _ref$height = _ref.height,
     propHeight = _ref$height === void 0 ? 240 : _ref$height,
     _ref$images = _ref.images,
@@ -171,16 +173,17 @@ var Slider = function Slider(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: replay && defaultDirection && index === items - 1 ? _primitives.ICON.REPLAY : _primitives.ICON.RIGHT,
     className: _SliderModule.default.icon
-  })), hasItems && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    onPress: onCounter,
+  })), hasItems && (onCounter || counter) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(onCounter ? _primitives.Pressable : _primitives.View, _objectSpread(_objectSpread({}, onCounter ? {
+    onPress: onCounter
+  } : undefined), {}, {
     className: (0, _helpers.styles)(_SliderModule.default.overlay, _SliderModule.default.counter, !defaultDirection && _SliderModule.default.reverse)
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     action: true,
     value: _primitives.ICON.PHOTO_LIBRARY
   }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     bold: true,
     small: true
-  }, items)), indicator && /*#__PURE__*/_react.default.createElement(_Progress.Progress, {
+  }, items)))), indicator && /*#__PURE__*/_react.default.createElement(_Progress.Progress, {
     value: index * 100 / (items - 1),
     className: (0, _helpers.styles)(_SliderModule.default.progress, index > 0 && _SliderModule.default.visible)
   }));
@@ -192,6 +195,7 @@ Slider.propTypes = {
   behavior: _propTypes.default.string,
   captions: _propTypes.default.arrayOf(_propTypes.default.string),
   children: _propTypes.default.node,
+  counter: _propTypes.default.bool,
   height: _propTypes.default.number.isRequired,
   images: _propTypes.default.arrayOf(_propTypes.default.string),
   index: _propTypes.default.number,

package/build/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","children","height","propHeight","images","index","propIndex","indicator","preloadImages","PRELOAD_IMAGES","visibleItems","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","replay","setReplay","useEffect","setInterval","items","clearInterval","setTimeout","SCROLL_DELAY","clearTimeout","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","length","React","Children","count","hasChildren","hasItems","isEnd","Math","abs","handleIndex","nextIndex","handleScroll","x","Number","isInteger","undefined","styles","style","slider","className","button","hide","first","ICON","REPLAY","icon","floor","scrollView","map","image","imageIndex","item","caption","overlay","text","second","RIGHT","counter","reverse","PHOTO_LIBRARY","progress","visible","displayName","propTypes","PropTypes","bool","string","arrayOf","node","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Progress } from '../Progress';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport { Item } from './Slider.Item';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  behavior = 'smooth',\n  captions = [],\n  children,\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  indicator = false,\n  preloadImages = PRELOAD_IMAGES,\n  visibleItems = 1,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(true);\n  const [focus, setFocus] = useState(false);\n  const [index, setIndex] = useState(propIndex);\n  const [replay, setReplay] = useState(false);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < items - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  useEffect(() => {\n    timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n    if (!replay && index + 1 === items) setReplay(true);\n\n    onChange(index);\n\n    return () => clearTimeout(timeout);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const height = propHeight;\n  const width = propWidth;\n  const items = images.length || React.Children.count(children);\n  const hasChildren = !!children;\n  const hasItems = items > 1;\n  const isEnd = Math.abs(index) >= items - 1;\n\n  const handleIndex = (nextIndex) => {\n    setDisabledScroll(true);\n    setIndex(Math.abs(nextIndex) === items ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n  };\n\n  const handleScroll = ({ x = 0 } = {}) => {\n    const nextIndex = x / width;\n    if (Number.isInteger(nextIndex) && nextIndex !== index) setIndex(nextIndex);\n  };\n\n  return (\n    <View\n      {...others}\n      tag=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.slider, others.className)}\n      style={{ ...others.style, width: width * visibleItems }}\n    >\n      {hasItems && (\n        <Pressable\n          onPress={() => handleIndex(index - 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? index <= 0 : replay ? false : isEnd) || (isDesktop && !focus)) && style.hide,\n            style.first,\n          )}\n        >\n          <Icon value={replay && !defaultDirection && isEnd ? ICON.REPLAY : ICON.LEFT} className={style.icon} />\n        </Pressable>\n      )}\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\n        scrollEventThrottle={SCROLL_DELAY}\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width * visibleItems}\n        onScroll={disabledScroll ? undefined : handleScroll}\n        className={style.scrollView}\n      >\n        {hasChildren\n          ? children\n          : images.map((image, imageIndex) => (\n              <View key={imageIndex} tag=\"images\" className={style.item}>\n                <Item\n                  {...{ height, width }}\n                  image={\n                    replay ||\n                    (imageIndex >= Math.abs(index) - preloadImages && imageIndex <= Math.abs(index) + preloadImages)\n                      ? image\n                      : undefined\n                  }\n                />\n                {captions[imageIndex] && (\n                  <View tag=\"image-caption\" className={style.caption}>\n                    <Text bold small className={[style.overlay, style.text]}>\n                      {captions[imageIndex]}\n                    </Text>\n                  </View>\n                )}\n              </View>\n            ))}\n      </ScrollView>\n\n      {hasItems && (\n        <Pressable\n          onPress={() => handleIndex(index + 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? (replay ? false : isEnd) : index === 0) || (isDesktop && !focus)) && style.hide,\n            style.second,\n          )}\n        >\n          <Icon\n            value={replay && defaultDirection && index === items - 1 ? ICON.REPLAY : ICON.RIGHT}\n            className={style.icon}\n          />\n        </Pressable>\n      )}\n\n      {hasItems && onCounter && (\n        <Pressable\n          onPress={onCounter}\n          className={styles(style.overlay, style.counter, !defaultDirection && style.reverse)}\n        >\n          <Icon action value={ICON.PHOTO_LIBRARY} />\n          <Text bold small>\n            {items}\n          </Text>\n        </Pressable>\n      )}\n\n      {indicator && (\n        <Progress value={(index * 100) / (items - 1)} className={styles(style.progress, index > 0 && style.visible)} />\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  behavior: PropTypes.string,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  children: PropTypes.node,\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string),\n  index: PropTypes.number,\n  indicator: PropTypes.bool,\n  preloadImages: PropTypes.number,\n  replay: PropTypes.bool,\n  visibleItems: PropTypes.number,\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","children","counter","height","propHeight","images","index","propIndex","indicator","preloadImages","PRELOAD_IMAGES","visibleItems","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","replay","setReplay","useEffect","setInterval","items","clearInterval","setTimeout","SCROLL_DELAY","clearTimeout","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","length","React","Children","count","hasChildren","hasItems","isEnd","Math","abs","handleIndex","nextIndex","handleScroll","x","Number","isInteger","undefined","styles","style","slider","className","button","hide","first","ICON","REPLAY","icon","floor","scrollView","map","image","imageIndex","item","caption","overlay","text","second","RIGHT","createElement","Pressable","View","onPress","reverse","PHOTO_LIBRARY","progress","visible","displayName","propTypes","PropTypes","bool","string","arrayOf","node","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Progress } from '../Progress';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport { Item } from './Slider.Item';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  behavior = 'smooth',\n  captions = [],\n  children,\n  counter = false,\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  indicator = false,\n  preloadImages = PRELOAD_IMAGES,\n  visibleItems = 1,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(true);\n  const [focus, setFocus] = useState(false);\n  const [index, setIndex] = useState(propIndex);\n  const [replay, setReplay] = useState(false);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < items - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  useEffect(() => {\n    timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n    if (!replay && index + 1 === items) setReplay(true);\n\n    onChange(index);\n\n    return () => clearTimeout(timeout);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const height = propHeight;\n  const width = propWidth;\n  const items = images.length || React.Children.count(children);\n  const hasChildren = !!children;\n  const hasItems = items > 1;\n  const isEnd = Math.abs(index) >= items - 1;\n\n  const handleIndex = (nextIndex) => {\n    setDisabledScroll(true);\n    setIndex(Math.abs(nextIndex) === items ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n  };\n\n  const handleScroll = ({ x = 0 } = {}) => {\n    const nextIndex = x / width;\n    if (Number.isInteger(nextIndex) && nextIndex !== index) setIndex(nextIndex);\n  };\n\n  return (\n    <View\n      {...others}\n      tag=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.slider, others.className)}\n      style={{ ...others.style, width: width * visibleItems }}\n    >\n      {hasItems && (\n        <Pressable\n          onPress={() => handleIndex(index - 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? index <= 0 : replay ? false : isEnd) || (isDesktop && !focus)) && style.hide,\n            style.first,\n          )}\n        >\n          <Icon value={replay && !defaultDirection && isEnd ? ICON.REPLAY : ICON.LEFT} className={style.icon} />\n        </Pressable>\n      )}\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\n        scrollEventThrottle={SCROLL_DELAY}\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width * visibleItems}\n        onScroll={disabledScroll ? undefined : handleScroll}\n        className={style.scrollView}\n      >\n        {hasChildren\n          ? children\n          : images.map((image, imageIndex) => (\n              <View key={imageIndex} tag=\"images\" className={style.item}>\n                <Item\n                  {...{ height, width }}\n                  image={\n                    replay ||\n                    (imageIndex >= Math.abs(index) - preloadImages && imageIndex <= Math.abs(index) + preloadImages)\n                      ? image\n                      : undefined\n                  }\n                />\n                {captions[imageIndex] && (\n                  <View tag=\"image-caption\" className={style.caption}>\n                    <Text bold small className={[style.overlay, style.text]}>\n                      {captions[imageIndex]}\n                    </Text>\n                  </View>\n                )}\n              </View>\n            ))}\n      </ScrollView>\n\n      {hasItems && (\n        <Pressable\n          onPress={() => handleIndex(index + 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? (replay ? false : isEnd) : index === 0) || (isDesktop && !focus)) && style.hide,\n            style.second,\n          )}\n        >\n          <Icon\n            value={replay && defaultDirection && index === items - 1 ? ICON.REPLAY : ICON.RIGHT}\n            className={style.icon}\n          />\n        </Pressable>\n      )}\n\n      {hasItems && (onCounter || counter) && (\n        <>\n          {React.createElement(\n            onCounter ? Pressable : View,\n            {\n              ...(onCounter ? { onPress: onCounter } : undefined),\n              className: styles(style.overlay, style.counter, !defaultDirection && style.reverse),\n            },\n            <>\n              <Icon action value={ICON.PHOTO_LIBRARY} />\n              <Text bold small>\n                {items}\n              </Text>\n            </>,\n          )}\n        </>\n      )}\n\n      {indicator && (\n        <Progress value={(index * 100) / (items - 1)} className={styles(style.progress, index > 0 && style.visible)} />\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  behavior: PropTypes.string,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  children: PropTypes.node,\n  counter: PropTypes.bool,\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string),\n  index: PropTypes.number,\n  indicator: PropTypes.bool,\n  preloadImages: PropTypes.number,\n  replay: PropTypes.bool,\n  visibleItems: PropTypes.number,\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAIA,QAAQ;AACZ,IAAIC,OAAO;AAEX,IAAMC,MAAM,GAAG,SAATA,MAAM,OAgBN;EAAA,qBAfJC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IAAA,qBACZC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAA,qBACnBC,QAAQ;IAARA,QAAQ,8BAAG,EAAE;IACbC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,mBACfC,MAAM;IAAEC,UAAU,4BAAG,GAAG;IAAA,mBACxBC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,kBACXC,KAAK;IAAEC,SAAS,2BAAG,CAAC;IAAA,sBACpBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,0BACjBC,aAAa;IAAbA,aAAa,mCAAGC,sBAAc;IAAA,yBAC9BC,YAAY;IAAZA,YAAY,kCAAG,CAAC;IAAA,kBAChBC,KAAK;IAAEC,SAAS,2BAAG,GAAG;IAAA,qBACtBC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IACnBC,SAAS,QAATA,SAAS;IACNC,MAAM;EAET,iBAAsB,IAAAC,gBAAS,GAAE;IAAzBC,SAAS,cAATA,SAAS;EAEjB,gBAA4C,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAAnDC,cAAc;IAAEC,iBAAiB;EACxC,iBAA0B,IAAAF,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAlCG,KAAK;IAAEC,QAAQ;EACtB,iBAA0B,IAAAJ,eAAQ,EAACZ,SAAS,CAAC;IAAA;IAAtCD,KAAK;IAAEkB,QAAQ;EACtB,iBAA4B,IAAAL,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCM,MAAM;IAAEC,SAAS;EAExB,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAI7B,IAAI,EAAEH,QAAQ,GAAGiC,WAAW,CAAC;MAAA,OAAMJ,QAAQ,CAAClB,KAAK,GAAGuB,KAAK,GAAG,CAAC,GAAGvB,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;IAAA,GAAE,IAAI,CAAC;IACzF,OAAO;MAAA,OAAMwB,aAAa,CAACnC,QAAQ,CAAC;IAAA;IACpC;EACF,CAAC,EAAE,CAACG,IAAI,EAAEQ,KAAK,CAAC,CAAC;EAEjB,IAAAqB,gBAAS,EAAC,YAAM;IACd/B,OAAO,GAAGmC,UAAU,CAAC;MAAA,OAAMV,iBAAiB,CAAC,KAAK,CAAC;IAAA,GAAEW,oBAAY,CAAC;IAElE,IAAI,CAACP,MAAM,IAAInB,KAAK,GAAG,CAAC,KAAKuB,KAAK,EAAEH,SAAS,CAAC,IAAI,CAAC;IAEnDZ,QAAQ,CAACR,KAAK,CAAC;IAEf,OAAO;MAAA,OAAM2B,YAAY,CAACrC,OAAO,CAAC;IAAA;IAClC;EACF,CAAC,EAAE,CAACU,KAAK,CAAC,CAAC;EAEX,IAAM4B,gBAAgB,GAAGC,YAAK,CAACC,YAAY,EAAE,KAAKC,qBAAc,CAACC,IAAI;EACrE,IAAMnC,MAAM,GAAGC,UAAU;EACzB,IAAMQ,KAAK,GAAGC,SAAS;EACvB,IAAMgB,KAAK,GAAGxB,MAAM,CAACkC,MAAM,IAAIC,cAAK,CAACC,QAAQ,CAACC,KAAK,CAACzC,QAAQ,CAAC;EAC7D,IAAM0C,WAAW,GAAG,CAAC,CAAC1C,QAAQ;EAC9B,IAAM2C,QAAQ,GAAGf,KAAK,GAAG,CAAC;EAC1B,IAAMgB,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACzC,KAAK,CAAC,IAAIuB,KAAK,GAAG,CAAC;EAE1C,IAAMmB,WAAW,GAAG,SAAdA,WAAW,CAAIC,SAAS,EAAK;IACjC5B,iBAAiB,CAAC,IAAI,CAAC;IACvBG,QAAQ,CAACsB,IAAI,CAACC,GAAG,CAACE,SAAS,CAAC,KAAKpB,KAAK,GAAG,CAAC,GAAGiB,IAAI,CAACC,GAAG,CAACE,SAAS,CAAC,IAAIf,gBAAgB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EACjG,CAAC;EAED,IAAMgB,YAAY,GAAG,SAAfA,YAAY,GAAuB;IAAA,gFAAP,CAAC,CAAC;MAAA,gBAAZC,CAAC;MAADA,CAAC,wBAAG,CAAC;IAC3B,IAAMF,SAAS,GAAGE,CAAC,GAAGvC,KAAK;IAC3B,IAAIwC,MAAM,CAACC,SAAS,CAACJ,SAAS,CAAC,IAAIA,SAAS,KAAK3C,KAAK,EAAEkB,QAAQ,CAACyB,SAAS,CAAC;EAC7E,CAAC;EAED,oBACE,6BAAC,gBAAI,eACCjC,MAAM;IACV,GAAG,EAAC,QAAQ;IACZ,YAAY,EAAEE,SAAS,GAAG;MAAA,OAAMK,QAAQ,CAAC,IAAI,CAAC;IAAA,IAAG+B,SAAU;IAC3D,YAAY,EAAEpC,SAAS,GAAG;MAAA,OAAMK,QAAQ,CAAC,KAAK,CAAC;IAAA,IAAG+B,SAAU;IAC5D,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEzC,MAAM,CAAC0C,SAAS,CAAE;IAClD,KAAK,kCAAO1C,MAAM,CAACwC,KAAK;MAAE5C,KAAK,EAAEA,KAAK,GAAGD;IAAY;EAAG,IAEvDiC,QAAQ,iBACP,6BAAC,qBAAS;IACR,OAAO,EAAE;MAAA,OAAMI,WAAW,CAAC1C,KAAK,GAAG,CAAC,CAAC;IAAA,CAAC;IACtC,SAAS,EAAE,IAAAiD,eAAM,EACfC,qBAAK,CAACG,MAAM,EACZ,CAAC,CAACzB,gBAAgB,GAAG5B,KAAK,IAAI,CAAC,GAAGmB,MAAM,GAAG,KAAK,GAAGoB,KAAK,KAAM3B,SAAS,IAAI,CAACI,KAAM,KAAKkC,qBAAK,CAACI,IAAI,EACjGJ,qBAAK,CAACK,KAAK;EACX,gBAEF,6BAAC,gBAAI;IAAC,KAAK,EAAEpC,MAAM,IAAI,CAACS,gBAAgB,IAAIW,KAAK,GAAGiB,gBAAI,CAACC,MAAM,GAAGD,gBAAI,CAACxB,IAAK;IAAC,SAAS,EAAEkB,qBAAK,CAACQ;EAAK,EAAG,CAEzG,eAED,6BAAC,sBAAU;IACT,QAAQ,EAAEjE,QAAS;IACnB,UAAU;IACV,mBAAmB,EAAEiC,oBAAa;IAClC,QAAQ,EAAE1B,KAAK,GAAGwC,IAAI,CAACmB,KAAK,CAACrD,KAAK,CAAE;IACpC,IAAI;IACJ,KAAK,EAAEA,KAAK,GAAGD,YAAa;IAC5B,QAAQ,EAAES,cAAc,GAAGkC,SAAS,GAAGJ,YAAa;IACpD,SAAS,EAAEM,qBAAK,CAACU;EAAW,GAE3BvB,WAAW,GACR1C,QAAQ,GACRI,MAAM,CAAC8D,GAAG,CAAC,UAACC,KAAK,EAAEC,UAAU;IAAA,oBAC3B,6BAAC,gBAAI;MAAC,GAAG,EAAEA,UAAW;MAAC,GAAG,EAAC,QAAQ;MAAC,SAAS,EAAEb,qBAAK,CAACc;IAAK,gBACxD,6BAAC,aAAI;MACGnE,MAAM,EAANA,MAAM;MAAES,KAAK,EAALA,KAAK;MACnB,KAAK,EACHa,MAAM,IACL4C,UAAU,IAAIvB,IAAI,CAACC,GAAG,CAACzC,KAAK,CAAC,GAAGG,aAAa,IAAI4D,UAAU,IAAIvB,IAAI,CAACC,GAAG,CAACzC,KAAK,CAAC,GAAGG,aAAc,GAC5F2D,KAAK,GACLd;IACL,EACD,EACDtD,QAAQ,CAACqE,UAAU,CAAC,iBACnB,6BAAC,gBAAI;MAAC,GAAG,EAAC,eAAe;MAAC,SAAS,EAAEb,qBAAK,CAACe;IAAQ,gBACjD,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;MAAC,SAAS,EAAE,CAACf,qBAAK,CAACgB,OAAO,EAAEhB,qBAAK,CAACiB,IAAI;IAAE,GACrDzE,QAAQ,CAACqE,UAAU,CAAC,CAChB,CAEV,CACI;EAAA,CACR,CAAC,CACK,EAEZzB,QAAQ,iBACP,6BAAC,qBAAS;IACR,OAAO,EAAE;MAAA,OAAMI,WAAW,CAAC1C,KAAK,GAAG,CAAC,CAAC;IAAA,CAAC;IACtC,SAAS,EAAE,IAAAiD,eAAM,EACfC,qBAAK,CAACG,MAAM,EACZ,CAAC,CAACzB,gBAAgB,GAAIT,MAAM,GAAG,KAAK,GAAGoB,KAAK,GAAIvC,KAAK,KAAK,CAAC,KAAMY,SAAS,IAAI,CAACI,KAAM,KAAKkC,qBAAK,CAACI,IAAI,EACpGJ,qBAAK,CAACkB,MAAM;EACZ,gBAEF,6BAAC,gBAAI;IACH,KAAK,EAAEjD,MAAM,IAAIS,gBAAgB,IAAI5B,KAAK,KAAKuB,KAAK,GAAG,CAAC,GAAGiC,gBAAI,CAACC,MAAM,GAAGD,gBAAI,CAACa,KAAM;IACpF,SAAS,EAAEnB,qBAAK,CAACQ;EAAK,EACtB,CAEL,EAEApB,QAAQ,KAAK7B,SAAS,IAAIb,OAAO,CAAC,iBACjC,yEACGsC,cAAK,CAACoC,aAAa,CAClB7D,SAAS,GAAG8D,qBAAS,GAAGC,gBAAI,kCAEtB/D,SAAS,GAAG;IAAEgE,OAAO,EAAEhE;EAAU,CAAC,GAAGuC,SAAS;IAClDI,SAAS,EAAE,IAAAH,eAAM,EAACC,qBAAK,CAACgB,OAAO,EAAEhB,qBAAK,CAACtD,OAAO,EAAE,CAACgC,gBAAgB,IAAIsB,qBAAK,CAACwB,OAAO;EAAC,iBAErF,yEACE,6BAAC,gBAAI;IAAC,MAAM;IAAC,KAAK,EAAElB,gBAAI,CAACmB;EAAc,EAAG,eAC1C,6BAAC,gBAAI;IAAC,IAAI;IAAC,KAAK;EAAA,GACbpD,KAAK,CACD,CACN,CACJ,CAEJ,EAEArB,SAAS,iBACR,6BAAC,kBAAQ;IAAC,KAAK,EAAGF,KAAK,GAAG,GAAG,IAAKuB,KAAK,GAAG,CAAC,CAAE;IAAC,SAAS,EAAE,IAAA0B,eAAM,EAACC,qBAAK,CAAC0B,QAAQ,EAAE5E,KAAK,GAAG,CAAC,IAAIkD,qBAAK,CAAC2B,OAAO;EAAE,EAC7G,CACI;AAEX,CAAC;AAAC;AAEFtF,MAAM,CAACuF,WAAW,GAAG,kBAAkB;AAEvCvF,MAAM,CAACwF,SAAS,GAAG;EACjBvF,IAAI,EAAEwF,kBAAS,CAACC,IAAI;EACpBxF,QAAQ,EAAEuF,kBAAS,CAACE,MAAM;EAC1BxF,QAAQ,EAAEsF,kBAAS,CAACG,OAAO,CAACH,kBAAS,CAACE,MAAM,CAAC;EAC7CvF,QAAQ,EAAEqF,kBAAS,CAACI,IAAI;EACxBxF,OAAO,EAAEoF,kBAAS,CAACC,IAAI;EACvBpF,MAAM,EAAEmF,kBAAS,CAACK,MAAM,CAACC,UAAU;EACnCvF,MAAM,EAAEiF,kBAAS,CAACG,OAAO,CAACH,kBAAS,CAACE,MAAM,CAAC;EAC3ClF,KAAK,EAAEgF,kBAAS,CAACK,MAAM;EACvBnF,SAAS,EAAE8E,kBAAS,CAACC,IAAI;EACzB9E,aAAa,EAAE6E,kBAAS,CAACK,MAAM;EAC/BlE,MAAM,EAAE6D,kBAAS,CAACC,IAAI;EACtB5E,YAAY,EAAE2E,kBAAS,CAACK,MAAM;EAC9B/E,KAAK,EAAE0E,kBAAS,CAACK,MAAM,CAACC,UAAU;EAClC9E,QAAQ,EAAEwE,kBAAS,CAACO,IAAI;EACxB9E,SAAS,EAAEuE,kBAAS,CAACO;AACvB,CAAC"}

package/build/components/Slider/Slider.stories.js

@@ -55,6 +55,7 @@ Story.args = {
   auto: false,
   behavior: 'smooth',
   captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],
+  counter: false,
   height: 208,
   images: ['https://picsum.photos/seed/@soyjavi/1024/768', 'https://picsum.photos/seed/@jose/768/1024', 'https://picsum.photos/seed/@mario1/1024/768', 'https://picsum.photos/seed/@victor/1024/768', 'https://picsum.photos/seed/@svet/1024/768', 'https://picsum.photos/seed/@mario2/1024/768', 'https://picsum.photos/seed/1/1024/768', 'https://picsum.photos/seed/2/1024/768', 'https://picsum.photos/seed/3/1024/768', 'https://picsum.photos/seed/4/1024/768', 'https://picsum.photos/seed/5/1024/768', 'https://picsum.photos/seed/6/1024/768', 'https://picsum.photos/seed/7/1024/768', 'https://picsum.photos/seed/8/1024/768', 'https://picsum.photos/seed/9/1024/768', 'https://picsum.photos/seed/10/1024/768', 'https://picsum.photos/seed/11/1024/768', 'https://picsum.photos/seed/12/1024/768'],
   index: 0,

package/build/components/Slider/Slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","names":["title","ITEM_WIDTH","itemProps","style","backgroundColor","height","marginRight","minWidth","padding","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","images","index","indicator","preloadImages","replay","visibleItems","width","testId","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { View, Text } from '../../primitives';\n\nexport default { title: 'Components' };\n\nconst ITEM_WIDTH = 320;\nconst itemProps = {\n  style: { backgroundColor: 'red', height: 208, marginRight: 16, minWidth: ITEM_WIDTH, padding: 16 },\n};\n\nexport const Story = (props) => (\n  <>\n    <Text>Default</Text>\n    <Slider\n      {...props}\n      onChange={(...params) => console.log('onChange', ...params)}\n      onCounter={(...params) => console.log('onCounter', ...params)}\n    />\n    <Text>w/ children</Text>\n\n    <Slider\n      {...props}\n      height={240}\n      index={0}\n      visibleItems={1.2}\n      width={ITEM_WIDTH}\n      style={{ backgroundColor: 'green' }}\n    >\n      <View {...itemProps}>\n        <Text>1</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>2</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>3</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>4</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>5</Text>\n      </View>\n    </Slider>\n  </>\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n  auto: false,\n  behavior: 'smooth',\n  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  height: 208,\n  images: [\n    'https://picsum.photos/seed/@soyjavi/1024/768',\n    'https://picsum.photos/seed/@jose/768/1024',\n    'https://picsum.photos/seed/@mario1/1024/768',\n    'https://picsum.photos/seed/@victor/1024/768',\n    'https://picsum.photos/seed/@svet/1024/768',\n    'https://picsum.photos/seed/@mario2/1024/768',\n    'https://picsum.photos/seed/1/1024/768',\n    'https://picsum.photos/seed/2/1024/768',\n    'https://picsum.photos/seed/3/1024/768',\n    'https://picsum.photos/seed/4/1024/768',\n    'https://picsum.photos/seed/5/1024/768',\n    'https://picsum.photos/seed/6/1024/768',\n    'https://picsum.photos/seed/7/1024/768',\n    'https://picsum.photos/seed/8/1024/768',\n    'https://picsum.photos/seed/9/1024/768',\n    'https://picsum.photos/seed/10/1024/768',\n    'https://picsum.photos/seed/11/1024/768',\n    'https://picsum.photos/seed/12/1024/768',\n  ],\n  index: 0,\n  indicator: true,\n  preloadImages: 1,\n  replay: false,\n  visibleItems: 1,\n  width: 408,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 2 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAEtC,IAAMC,UAAU,GAAG,GAAG;AACtB,IAAMC,SAAS,GAAG;EAChBC,KAAK,EAAE;IAAEC,eAAe,EAAE,KAAK;IAAEC,MAAM,EAAE,GAAG;IAAEC,WAAW,EAAE,EAAE;IAAEC,QAAQ,EAAEN,UAAU;IAAEO,OAAO,EAAE;EAAG;AACnG,CAAC;AAEM,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,yEACE,6BAAC,gBAAI,kBAAe,eACpB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D,eACF,6BAAC,gBAAI,sBAAmB,eAExB,6BAAC,cAAM,eACDD,KAAK;IACT,MAAM,EAAE,GAAI;IACZ,KAAK,EAAE,CAAE;IACT,YAAY,EAAE,GAAI;IAClB,KAAK,EAAET,UAAW;IAClB,KAAK,EAAE;MAAEG,eAAe,EAAE;IAAQ;EAAE,iBAEpC,6BAAC,gBAAI,EAAKF,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,CACA,CACR;AAAA,CACJ;AAAC;AAEFO,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEd,MAAM,EAAE,GAAG;EACXe,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,IAAI;EACfC,aAAa,EAAE,CAAC;EAChBC,MAAM,EAAE,KAAK;EACbC,YAAY,EAAE,CAAC;EACfC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBxB,KAAK,EAAE;IAAEyB,YAAY,EAAE;EAAE;AAC3B,CAAC;AAEDnB,KAAK,CAACoB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Slider.stories.js","names":["title","ITEM_WIDTH","itemProps","style","backgroundColor","height","marginRight","minWidth","padding","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","counter","images","index","indicator","preloadImages","replay","visibleItems","width","testId","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { View, Text } from '../../primitives';\n\nexport default { title: 'Components' };\n\nconst ITEM_WIDTH = 320;\nconst itemProps = {\n  style: { backgroundColor: 'red', height: 208, marginRight: 16, minWidth: ITEM_WIDTH, padding: 16 },\n};\n\nexport const Story = (props) => (\n  <>\n    <Text>Default</Text>\n    <Slider\n      {...props}\n      onChange={(...params) => console.log('onChange', ...params)}\n      onCounter={(...params) => console.log('onCounter', ...params)}\n    />\n    <Text>w/ children</Text>\n\n    <Slider\n      {...props}\n      height={240}\n      index={0}\n      visibleItems={1.2}\n      width={ITEM_WIDTH}\n      style={{ backgroundColor: 'green' }}\n    >\n      <View {...itemProps}>\n        <Text>1</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>2</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>3</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>4</Text>\n      </View>\n      <View {...itemProps}>\n        <Text>5</Text>\n      </View>\n    </Slider>\n  </>\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n  auto: false,\n  behavior: 'smooth',\n  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  counter: false,\n  height: 208,\n  images: [\n    'https://picsum.photos/seed/@soyjavi/1024/768',\n    'https://picsum.photos/seed/@jose/768/1024',\n    'https://picsum.photos/seed/@mario1/1024/768',\n    'https://picsum.photos/seed/@victor/1024/768',\n    'https://picsum.photos/seed/@svet/1024/768',\n    'https://picsum.photos/seed/@mario2/1024/768',\n    'https://picsum.photos/seed/1/1024/768',\n    'https://picsum.photos/seed/2/1024/768',\n    'https://picsum.photos/seed/3/1024/768',\n    'https://picsum.photos/seed/4/1024/768',\n    'https://picsum.photos/seed/5/1024/768',\n    'https://picsum.photos/seed/6/1024/768',\n    'https://picsum.photos/seed/7/1024/768',\n    'https://picsum.photos/seed/8/1024/768',\n    'https://picsum.photos/seed/9/1024/768',\n    'https://picsum.photos/seed/10/1024/768',\n    'https://picsum.photos/seed/11/1024/768',\n    'https://picsum.photos/seed/12/1024/768',\n  ],\n  index: 0,\n  indicator: true,\n  preloadImages: 1,\n  replay: false,\n  visibleItems: 1,\n  width: 408,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 2 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAEtC,IAAMC,UAAU,GAAG,GAAG;AACtB,IAAMC,SAAS,GAAG;EAChBC,KAAK,EAAE;IAAEC,eAAe,EAAE,KAAK;IAAEC,MAAM,EAAE,GAAG;IAAEC,WAAW,EAAE,EAAE;IAAEC,QAAQ,EAAEN,UAAU;IAAEO,OAAO,EAAE;EAAG;AACnG,CAAC;AAEM,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,yEACE,6BAAC,gBAAI,kBAAe,eACpB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D,eACF,6BAAC,gBAAI,sBAAmB,eAExB,6BAAC,cAAM,eACDD,KAAK;IACT,MAAM,EAAE,GAAI;IACZ,KAAK,EAAE,CAAE;IACT,YAAY,EAAE,GAAI;IAClB,KAAK,EAAET,UAAW;IAClB,KAAK,EAAE;MAAEG,eAAe,EAAE;IAAQ;EAAE,iBAEpC,6BAAC,gBAAI,EAAKF,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,eACP,6BAAC,gBAAI,EAAKA,SAAS,eACjB,6BAAC,gBAAI,YAAS,CACT,CACA,CACR;AAAA,CACJ;AAAC;AAEFO,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,OAAO,EAAE,KAAK;EACdf,MAAM,EAAE,GAAG;EACXgB,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,IAAI;EACfC,aAAa,EAAE,CAAC;EAChBC,MAAM,EAAE,KAAK;EACbC,YAAY,EAAE,CAAC;EACfC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBzB,KAAK,EAAE;IAAE0B,YAAY,EAAE;EAAE;AAC3B,CAAC;AAEDpB,KAAK,CAACqB,QAAQ,GAAG,CAAC,CAAC"}

package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap

@@ -505,6 +505,151 @@ exports[`component:<Slider> prop:captions 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Slider> prop:counter 1`] = `
+<DocumentFragment>
+  <ui-slider
+    class="view slider"
+    style="width: 360px;"
+  >
+    <ui-pressable
+      class="pressable button hide first"
+      tabindex="0"
+    >
+      <ui-icon
+        class="icon headline-3 icon"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+          />
+        </svg>
+      </ui-icon>
+    </ui-pressable>
+    <ui-scrollview
+      class="scrollview snap horizontal notIndicator scrollView"
+      style="width: 360px;"
+    >
+      <ui-images
+        class="view item"
+      >
+        <ui-image
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
+        />
+      </ui-images>
+      <ui-images
+        class="view item"
+      >
+        <ui-image
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
+        />
+      </ui-images>
+      <ui-images
+        class="view item"
+      >
+        <ui-image
+          class="view image"
+          style="height: 230px; width: 360px;"
+        />
+      </ui-images>
+      <ui-images
+        class="view item"
+      >
+        <ui-image
+          class="view image"
+          style="height: 230px; width: 360px;"
+        />
+      </ui-images>
+      <ui-images
+        class="view item"
+      >
+        <ui-image
+          class="view image"
+          style="height: 230px; width: 360px;"
+        />
+      </ui-images>
+      <ui-images
+        class="view item"
+      >
+        <ui-image
+          class="view image"
+          style="height: 230px; width: 360px;"
+        />
+      </ui-images>
+    </ui-scrollview>
+    <ui-pressable
+      class="pressable button second"
+      tabindex="0"
+    >
+      <ui-icon
+        class="icon headline-3 icon"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+          />
+        </svg>
+      </ui-icon>
+    </ui-pressable>
+    <ui-view
+      class="view overlay counter"
+    >
+      <ui-icon
+        class="icon action"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
+          />
+        </svg>
+      </ui-icon>
+      <ui-text
+        class="text bold small"
+      >
+        6
+      </ui-text>
+    </ui-view>
+  </ui-slider>
+</DocumentFragment>
+`;
+
 exports[`component:<Slider> prop:index 1`] = `
 <DocumentFragment>
   <ui-slider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "2.0.36",
+  "version": "2.0.37",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",