@mirai/ui 1.0.174 → 1.0.176

package/build/components/Slider/Slider.constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PRELOAD_IMAGES = void 0;
+var PRELOAD_IMAGES = 2;
+exports.PRELOAD_IMAGES = PRELOAD_IMAGES;
+//# sourceMappingURL=Slider.constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.js","names":["PRELOAD_IMAGES"],"sources":["../../../src/components/Slider/Slider.constants.js"],"sourcesContent":["const PRELOAD_IMAGES = 2;\n\nexport { PRELOAD_IMAGES };\n"],"mappings":";;;;;;AAAA,IAAMA,cAAc,GAAG,CAAC;AAAC"}

package/build/components/Slider/Slider.js

@@ -0,0 +1,190 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("../../helpers");
+var _hooks = require("../../hooks");
+var _primitives = require("../../primitives");
+var _helpers2 = require("./helpers");
+var _Slider = require("./Slider.constants");
+var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
+var _excluded = ["auto", "captions", "fullScreen", "height", "images", "index", "thumbnails", "width", "onChange", "onFullScreen"];
+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 }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var interval;
+var timeout;
+var Slider = function Slider(_ref) {
+  var _ref$auto = _ref.auto,
+    auto = _ref$auto === void 0 ? false : _ref$auto,
+    _ref$captions = _ref.captions,
+    captions = _ref$captions === void 0 ? [] : _ref$captions,
+    _ref$fullScreen = _ref.fullScreen,
+    propFullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
+    _ref$height = _ref.height,
+    propHeight = _ref$height === void 0 ? 240 : _ref$height,
+    _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$index = _ref.index,
+    propIndex = _ref$index === void 0 ? 0 : _ref$index,
+    _ref$thumbnails = _ref.thumbnails,
+    thumbnails = _ref$thumbnails === void 0 ? [] : _ref$thumbnails,
+    _ref$width = _ref.width,
+    propWidth = _ref$width === void 0 ? 320 : _ref$width,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$onFullScreen = _ref.onFullScreen,
+    onFullScreen = _ref$onFullScreen === void 0 ? function () {} : _ref$onFullScreen,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var _useDevice = (0, _hooks.useDevice)(),
+    screenHeight = _useDevice.height,
+    isDesktop = _useDevice.isDesktop,
+    isLandscape = _useDevice.isLandscape,
+    screenWidth = _useDevice.width;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  var _useState3 = (0, _react.useState)(propFullScreen),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fullScreen = _useState4[0],
+    setFullScreen = _useState4[1];
+  var _useState5 = (0, _react.useState)(propIndex),
+    _useState6 = _slicedToArray(_useState5, 2),
+    index = _useState6[0],
+    setIndex = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (auto) interval = setInterval(function () {
+      return setIndex(index < images.length - 1 ? index + 1 : 0);
+    }, 2000);
+    return function () {
+      return clearInterval(interval);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [auto, index]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useEffect)(function () {
+    return onChange(index);
+  }, [index]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useEffect)(function () {
+    return onFullScreen(fullScreen);
+  }, [fullScreen]);
+  var height = fullScreen ? screenHeight * (isLandscape ? 0.9 : 0.4) : propHeight;
+  var width = fullScreen ? screenWidth * (isLandscape ? 0.85 : 0.9) : propWidth;
+  var handleScroll = function handleScroll() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      x = _ref2.x;
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      setIndex(x < width ? 0 : Math.round(x / width));
+    }, (0, _helpers2.getMotionExpand)());
+  };
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
+    role: "slider",
+    onMouseEnter: isDesktop ? function () {
+      return setFocus(true);
+    } : undefined,
+    onMouseLeave: isDesktop ? function () {
+      return setFocus(false);
+    } : undefined,
+    className: (0, _helpers.styles)(_SliderModule.default.container, fullScreen && _SliderModule.default.fullScreen, others.className),
+    style: _objectSpread(_objectSpread({}, !fullScreen ? others.style : undefined), {}, {
+      width: fullScreen ? screenWidth : width
+    })
+  }), !fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: function onPress() {
+      return setIndex(index - 1);
+    },
+    className: (0, _helpers.styles)(_SliderModule.default.button, (index <= 0 || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.back)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: _primitives.ICON.LEFT
+  })), /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
+    horizontal: true,
+    scrollTo: index * Math.floor(width),
+    snap: true,
+    width: width,
+    onScroll: handleScroll,
+    className: _SliderModule.default.scrollView
+  }, images.map(function (image, imageIndex) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      key: imageIndex,
+      className: _SliderModule.default.item
+    }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      role: "image",
+      onClick: function onClick() {
+        return setFullScreen(!fullScreen);
+      },
+      className: _SliderModule.default.image,
+      style: {
+        backgroundImage: fullScreen || imageIndex >= index - _Slider.PRELOAD_IMAGES && imageIndex <= index + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
+        height: height,
+        width: width
+      }
+    }), captions[imageIndex] && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      className: _SliderModule.default.caption
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true,
+      className: _SliderModule.default.text
+    }, captions[imageIndex])));
+  })), !fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: function onPress() {
+      return setIndex(index + 1);
+    },
+    className: (0, _helpers.styles)(_SliderModule.default.button, (index >= images.length - 1 || isDesktop && !focus) && _SliderModule.default.hide && _SliderModule.default.hide, _SliderModule.default.forward)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: _primitives.ICON.RIGHT
+  })), fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
+    horizontal: true,
+    snap: true,
+    className: _SliderModule.default.thumbnails
+  }, images.map(function (image, imageIndex) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      key: imageIndex,
+      onPress: function onPress() {
+        return setIndex(imageIndex);
+      },
+      className: (0, _helpers.styles)(_SliderModule.default.thumbnail, index === imageIndex && _SliderModule.default.active),
+      style: {
+        backgroundImage: "url(".concat(thumbnails[imageIndex] || image, ")")
+      }
+    });
+  })));
+};
+exports.Slider = Slider;
+Slider.displayName = 'Component:Slider';
+Slider.propTypes = {
+  auto: _propTypes.default.bool,
+  captions: _propTypes.default.arrayOf(_propTypes.default.string),
+  fullScreen: _propTypes.default.bool,
+  height: _propTypes.default.number.isRequired,
+  images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  index: _propTypes.default.number,
+  thumbnails: _propTypes.default.arrayOf(_propTypes.default.string),
+  width: _propTypes.default.number.isRequired,
+  onChange: _propTypes.default.func,
+  onFullScreen: _propTypes.default.func
+};
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","fullScreen","propFullScreen","height","propHeight","images","index","propIndex","thumbnails","width","propWidth","onChange","onFullScreen","others","useDevice","screenHeight","isDesktop","isLandscape","screenWidth","useState","focus","setFocus","setFullScreen","setIndex","useEffect","setInterval","length","clearInterval","handleScroll","x","clearTimeout","setTimeout","Math","round","getMotionExpand","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","text","forward","RIGHT","thumbnail","active","displayName","propTypes","PropTypes","bool","arrayOf","string","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 { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  captions = [],\n  fullScreen: propFullScreen = false,\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  thumbnails = [],\n  width: propWidth = 320,\n  onChange = () => {},\n  onFullScreen = () => {},\n  ...others\n}) => {\n  const { height: screenHeight, isDesktop, isLandscape, width: screenWidth } = useDevice();\n\n  const [focus, setFocus] = useState(false);\n  const [fullScreen, setFullScreen] = useState(propFullScreen);\n  const [index, setIndex] = useState(propIndex);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => onChange(index), [index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => onFullScreen(fullScreen), [fullScreen]);\n\n  const height = fullScreen ? screenHeight * (isLandscape ? 0.9 : 0.4) : propHeight;\n\n  const width = fullScreen ? screenWidth * (isLandscape ? 0.85 : 0.9) : propWidth;\n\n  const handleScroll = ({ x } = {}) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      setIndex(x < width ? 0 : Math.round(x / width));\n    }, getMotionExpand());\n  };\n\n  return (\n    <View\n      {...others}\n      role=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.container, fullScreen && style.fullScreen, others.className)}\n      style={{ ...(!fullScreen ? others.style : undefined), width: fullScreen ? screenWidth : width }}\n    >\n      {!fullScreen && (\n        <Pressable\n          onPress={() => setIndex(index - 1)}\n          className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n        >\n          <Icon value={ICON.LEFT} />\n        </Pressable>\n      )}\n\n      <ScrollView\n        horizontal\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} className={style.item}>\n            <View\n              role=\"image\"\n              onClick={() => setFullScreen(!fullScreen)}\n              className={style.image}\n              style={{\n                backgroundImage:\n                  fullScreen || (imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES)\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View className={style.caption}>\n                <Text bold small className={style.text}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n      </ScrollView>\n\n      {!fullScreen && (\n        <Pressable\n          onPress={() => setIndex(index + 1)}\n          className={styles(\n            style.button,\n            (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n            style.forward,\n          )}\n        >\n          <Icon value={ICON.RIGHT} />\n        </Pressable>\n      )}\n\n      {fullScreen && (\n        <ScrollView horizontal snap className={style.thumbnails}>\n          {images.map((image, imageIndex) => (\n            <Pressable\n              key={imageIndex}\n              onPress={() => setIndex(imageIndex)}\n              className={styles(style.thumbnail, index === imageIndex && style.active)}\n              style={{ backgroundImage: `url(${thumbnails[imageIndex] || image})` }}\n            />\n          ))}\n        </ScrollView>\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  fullScreen: PropTypes.bool,\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  thumbnails: PropTypes.arrayOf(PropTypes.string),\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onFullScreen: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}

package/build/components/Slider/Slider.module.css

@@ -0,0 +1,121 @@
+.container {
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.container.fullScreen {
+  background-color: var(--mirai-ui-slider-background);
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+}
+
+.button {
+  align-items: center;
+  background-color: var(--mirai-ui-slider-overlay);
+  border-radius: 50%;
+  display: flex;
+  height: var(--mirai-ui-button-squared);
+  justify-content: center;
+  position: absolute;
+  top: calc(50% - calc(var(--mirai-ui-button-squared) / 2));
+  transition: transform var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: var(--mirai-ui-button-squared);
+  z-index: var(--mirai-ui-layer-M);
+}
+
+.button.hide {
+  transform: scale(0);
+}
+
+.button > * {
+  color: var(--mirai-ui-slider-color);
+}
+
+.button.back {
+  left: var(--mirai-ui-space-M);
+}
+
+.button.forward {
+  right: var(--mirai-ui-space-M);
+}
+
+.scrollView {
+}
+
+.fullScreen .scrollView {
+  gap: var(--mirai-ui-space-M);
+}
+
+.item {
+  position: relative;
+}
+
+.item .image {
+  background-color: var(--mirai-ui-content-background);
+  background-size: cover;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+}
+
+.fullScreen .item .image {
+  border-radius: var(--mirai-ui-slider-border-radius);
+}
+
+.item .caption {
+  align-items: center;
+  bottom: var(--mirai-ui-space-S);
+  left: var(--mirai-ui-space-S);
+  position: absolute;
+  right: var(--mirai-ui-space-S);
+}
+
+.item .caption .text {
+  background-color: var(--mirai-ui-slider-overlay);
+  border-radius: var(--mirai-ui-slider-border-radius);
+  color: var(--mirai-ui-slider-color);
+  padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
+}
+
+.thumbnails {
+  margin-top: var(--mirai-ui-space-S);
+  gap: var(--mirai-ui-space-S);
+  max-width: 90vw;
+}
+
+.thumbnail {
+  background-size: cover;
+  border-radius: var(--mirai-ui-slider-border-radius);
+  min-height: var(--mirai-ui-space-XL);
+  opacity: 0.66;
+  transition: all var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: var(--mirai-ui-space-XXL);
+  min-width: var(--mirai-ui-space-XXL);
+}
+
+.thumbnail:hover {
+  opacity: 1;
+}
+
+.thumbnail.active {
+  box-shadow: inset 0 0 0 2px var(--mirai-ui-slider-color);
+  opacity: 1;
+}
+
+/* S */
+@media only screen and (max-width: 430px) {
+  .thumbnails {
+    position: absolute;
+    bottom: var(--mirai-ui-space-M);
+  }
+}
+
+/* M & L */
+@media only screen and (min-width: 431px) {
+}

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Story = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Slider = require("./Slider");
+var _Icon = require("../../primitives/Icon");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _default = {
+  title: 'Components'
+};
+exports.default = _default;
+var Story = function Story(props) {
+  return /*#__PURE__*/_react.default.createElement(_Slider.Slider, _extends({}, props, {
+    onChange: function onChange() {
+      var _console;
+      for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+        params[_key] = arguments[_key];
+      }
+      return (_console = console).log.apply(_console, ['onChange'].concat(params));
+    },
+    onFullScreen: function onFullScreen() {
+      var _console2;
+      for (var _len2 = arguments.length, params = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        params[_key2] = arguments[_key2];
+      }
+      return (_console2 = console).log.apply(_console2, ['onFullScreen'].concat(params));
+    }
+  }));
+};
+exports.Story = Story;
+Story.storyName = 'Slider';
+Story.args = {
+  auto: false,
+  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],
+  height: 200,
+  index: 1,
+  images: ['https://picsum.photos/seed/@soyjavi/1024/768', 'https://picsum.photos/seed/@jose/1024/768', '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'],
+  fullScreen: false,
+  thumbnails: ['https://picsum.photos/seed/@soyjavi/128/128', 'https://picsum.photos/seed/@jose/128/128', 'https://picsum.photos/seed/@mario1/128/128', 'https://picsum.photos/seed/@victor/128/128', 'https://picsum.photos/seed/@svet/128/128', 'https://picsum.photos/seed/@mario2/128/128', 'https://picsum.photos/seed/1/128/128', 'https://picsum.photos/seed/2/128/128', 'https://picsum.photos/seed/3/128/128', 'https://picsum.photos/seed/4/128/128', 'https://picsum.photos/seed/5/128/128', 'https://picsum.photos/seed/6/128/128', 'https://picsum.photos/seed/7/128/128', 'https://picsum.photos/seed/8/128/128', 'https://picsum.photos/seed/9/128/128', 'https://picsum.photos/seed/10/128/128', 'https://picsum.photos/seed/11/128/128', 'https://picsum.photos/seed/12/128/128'],
+  width: 320,
+  // inherited properties
+  testId: 'test-story',
+  style: {
+    borderRadius: 16
+  }
+};
+Story.argTypes = {};
+//# sourceMappingURL=Slider.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Slider\n    {...props}\n    onChange={(...params) => console.log('onChange', ...params)}\n    onFullScreen={(...params) => console.log('onFullScreen', ...params)}\n  />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n  auto: false,\n  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  height: 200,\n  index: 1,\n  images: [\n    'https://picsum.photos/seed/@soyjavi/1024/768',\n    'https://picsum.photos/seed/@jose/1024/768',\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  fullScreen: false,\n  thumbnails: [\n    'https://picsum.photos/seed/@soyjavi/128/128',\n    'https://picsum.photos/seed/@jose/128/128',\n    'https://picsum.photos/seed/@mario1/128/128',\n    'https://picsum.photos/seed/@victor/128/128',\n    'https://picsum.photos/seed/@svet/128/128',\n    'https://picsum.photos/seed/@mario2/128/128',\n    'https://picsum.photos/seed/1/128/128',\n    'https://picsum.photos/seed/2/128/128',\n    'https://picsum.photos/seed/3/128/128',\n    'https://picsum.photos/seed/4/128/128',\n    'https://picsum.photos/seed/5/128/128',\n    'https://picsum.photos/seed/6/128/128',\n    'https://picsum.photos/seed/7/128/128',\n    'https://picsum.photos/seed/8/128/128',\n    'https://picsum.photos/seed/9/128/128',\n    'https://picsum.photos/seed/10/128/128',\n    'https://picsum.photos/seed/11/128/128',\n    'https://picsum.photos/seed/12/128/128',\n  ],\n  width: 320,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 16 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,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,YAAY,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,cAAc,SAAKF,MAAM,EAAC;IAAA;EAAC,GACpE;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACRC,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,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG,CAAC,CAAC"}