@snack-uikit/carousel 0.2.21 → 0.2.22-preview-ba12ca94.0

package/dist/cjs/components/Carousel/Carousel.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Carousel = Carousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const pagination_1 = require("@snack-uikit/pagination");
+const utils_1 = require("@snack-uikit/utils");
+const testIds_1 = require("../../testIds");
+const Control_1 = require("../Control");
+const ItemProvider_1 = require("../ItemProvider");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Carousel(_a) {
+  var _b;
+  var {
+      children: items,
+      showItems = 1,
+      scrollBy: scrollByProp,
+      transition = 0.4,
+      swipe = true,
+      arrows = true,
+      pagination = true,
+      className,
+      gap,
+      state,
+      infiniteScroll = false,
+      swipeActivateLength = 48
+    } = _a,
+    rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength"]);
+  const scrollBy = (0, react_1.useMemo)(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
+  const [page, setPage] = (0, uncontrollable_1.useUncontrolledProp)(state === null || state === void 0 ? void 0 : state.page, (_b = state === null || state === void 0 ? void 0 : state.page) !== null && _b !== void 0 ? _b : 0, newPage => {
+    const result = typeof newPage === 'function' ? newPage(page) : newPage;
+    state === null || state === void 0 ? void 0 : state.onChange(result);
+  });
+  const total = (0, react_1.useMemo)(() => Math.trunc(items.length / scrollBy) + (items.length % scrollBy ? 1 : 0), [items.length, scrollBy]);
+  const onLeftArrowClick = (0, react_1.useCallback)(() => {
+    setPage(page => infiniteScroll ? (total + page - 1) % total : Math.max(0, page - 1));
+  }, [infiniteScroll, setPage, total]);
+  const onRightArrowClick = (0, react_1.useCallback)(() => {
+    setPage(page => infiniteScroll ? (page + 1) % total : Math.min(total - 1, page + 1));
+  }, [infiniteScroll, setPage, total]);
+  const slideCallback = (0, react_1.useCallback)(direction => {
+    if (direction < 0) {
+      onRightArrowClick();
+      return;
+    }
+    onLeftArrowClick();
+  }, [onLeftArrowClick, onRightArrowClick]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.carousel, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.carouselBase,
+      children: [(0, jsx_runtime_1.jsx)(ItemProvider_1.ItemProvider, {
+        showItems: showItems,
+        scrollBy: scrollBy,
+        swipe: swipe,
+        transition: transition,
+        items: items,
+        slideCallback: slideCallback,
+        page: page,
+        gap: gap,
+        swipeActivateLength: swipeActivateLength
+      }), arrows && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(infiniteScroll || page > 0) && (0, jsx_runtime_1.jsx)(Control_1.Control, {
+          onClick: onLeftArrowClick,
+          variant: 'prev',
+          "data-test-id": testIds_1.TEST_IDS.arrowPrev
+        }), (infiniteScroll || page + 1 < total) && (0, jsx_runtime_1.jsx)(Control_1.Control, {
+          onClick: onRightArrowClick,
+          variant: 'next',
+          "data-test-id": testIds_1.TEST_IDS.arrowNext
+        })]
+      })]
+    }), pagination && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.pagination,
+      children: (0, jsx_runtime_1.jsx)(pagination_1.PaginationSlider, {
+        "data-test-id": testIds_1.TEST_IDS.pagination,
+        page: page + 1,
+        onChange: page => {
+          setPage(page - 1);
+        },
+        total: total
+      })
+    })]
+  }));
+}

package/dist/cjs/components/Carousel/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Carousel"), exports);

package/dist/cjs/components/Control/Control.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Control = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@snack-uikit/icons");
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.Control = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      onClick,
+      variant
+    } = _a,
+    rest = __rest(_a, ["onClick", "variant"]);
+  return (0, jsx_runtime_1.jsx)("button", Object.assign({
+    ref: ref,
+    className: styles_module_scss_1.default.control,
+    onClick: onClick,
+    type: 'button',
+    "data-variant": variant
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: (0, jsx_runtime_1.jsx)(icons_1.ChevronLeftSVG, {
+      size: 24,
+      className: styles_module_scss_1.default.icon
+    })
+  }));
+});

package/dist/cjs/components/Control/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Control"), exports);

package/dist/cjs/components/ItemProvider/ItemProvider.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemProvider = ItemProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const react_1 = require("react");
+const testIds_1 = require("../../testIds");
+const helpers_1 = require("./helpers");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ItemProvider(_ref) {
+  let {
+    items,
+    showItems,
+    scrollBy,
+    slideCallback,
+    transition,
+    swipe,
+    swipeActivateLength,
+    page,
+    gap
+  } = _ref;
+  const containerRef = (0, react_1.useRef)(null);
+  const [computedValues, setComputedValues] = (0, react_1.useState)({
+    itemWidth: 200,
+    gap: 0
+  });
+  const recalculateItemsSize = (0, react_1.useCallback)(() => {
+    const containerElement = containerRef.current;
+    if (!containerElement) {
+      return;
+    }
+    const styles = getComputedStyle(containerElement);
+    const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
+    const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
+    const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+    const itemWidth = (containerElement.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) / showItems;
+    setComputedValues({
+      itemWidth,
+      gap
+    });
+  }, [showItems]);
+  (0, react_1.useEffect)(() => {
+    const node = containerRef.current;
+    if (!node) {
+      return;
+    }
+    recalculateItemsSize();
+    const observer = new ResizeObserver((0, lodash_debounce_1.default)(recalculateItemsSize, 100));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [recalculateItemsSize]);
+  const itemsTrackerRef = (0, react_1.useRef)(null);
+  const hideNonVisibleItems = () => {
+    var _a;
+    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${testIds_1.TEST_IDS.trackItem}]`).forEach(slide => {
+      slide.setAttribute('aria-hidden', '0');
+      slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(focusableElement => {
+        focusableElement.setAttribute('tabindex', '-5');
+        focusableElement.classList.add(styles_module_scss_1.default.hiddenItem);
+      });
+    });
+  };
+  const showVisibleItems = (slide, page, show) => {
+    var _a;
+    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${testIds_1.TEST_IDS.trackItem}]`).forEach((item, i) => {
+      if (i >= page * slide && i < page * slide + Math.trunc(show)) {
+        item.removeAttribute('aria-hidden');
+        item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(focusableElement => {
+          focusableElement.setAttribute('tabindex', '0');
+          focusableElement.classList.remove(styles_module_scss_1.default.hiddenItem);
+        });
+      }
+    });
+  };
+  const transform = (0, react_1.useMemo)(() => Number(-(page * scrollBy * computedValues.itemWidth + computedValues.gap * page * scrollBy)), [computedValues.gap, computedValues.itemWidth, page, scrollBy]);
+  (0, react_1.useEffect)(() => {
+    hideNonVisibleItems();
+    showVisibleItems(scrollBy, page, showItems);
+  }, [page, scrollBy, showItems]);
+  const [drag, setDrag] = (0, react_1.useState)({
+    initial: transform,
+    start: 0,
+    isDown: false,
+    drag: 0,
+    finished: true,
+    pointers: true
+  });
+  const handleDragStart = e => {
+    e.persist();
+    setDrag(Object.assign(Object.assign({}, drag), {
+      isDown: true,
+      start: (0, helpers_1.getPageX)(e),
+      initial: transform,
+      finished: false
+    }));
+  };
+  const handleDragFinish = e => {
+    e.persist();
+    if (drag.finished) {
+      return;
+    }
+    if (Math.abs(drag.drag) < swipeActivateLength) {
+      return setDrag({
+        initial: transform,
+        start: 0,
+        isDown: false,
+        drag: 0,
+        finished: true,
+        pointers: true
+      });
+    }
+    slideCallback(drag.drag > 0 ? -1 : 1);
+    setDrag(Object.assign(Object.assign({}, drag), {
+      drag: 0,
+      isDown: false,
+      finished: true,
+      pointers: true
+    }));
+    return;
+  };
+  const handleDragMove = e => {
+    e.persist();
+    if (!drag.isDown) {
+      return;
+    }
+    const pos = (0, helpers_1.getPageX)(e);
+    setDrag(Object.assign(Object.assign({}, drag), {
+      drag: drag.start - pos,
+      pointers: Math.abs(drag.start - pos) < Number.MIN_SAFE_INTEGER
+    }));
+  };
+  const swipeProps = swipe ? {
+    onTouchCancel: handleDragFinish,
+    onTouchEnd: handleDragFinish,
+    onTouchMove: handleDragMove,
+    onTouchStart: handleDragStart,
+    onMouseDown: handleDragStart,
+    onMouseLeave: handleDragFinish,
+    onMouseUp: handleDragFinish,
+    onMouseMove: handleDragMove
+  } : {};
+  const handleSlideClick = (0, react_1.useCallback)(e => {
+    var _a, _b;
+    const slideRect = e.currentTarget.getBoundingClientRect();
+    const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const containerViewport = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _b !== void 0 ? _b : 0;
+    const slidePositionDelta = containerViewport - slideRect.right;
+    const minPos = Math.min(slidePositionDelta, slideRect.x);
+    if (minPos < 0) {
+      slideCallback(slidePositionDelta);
+    }
+  }, [slideCallback]);
+  return (0, jsx_runtime_1.jsx)("div", {
+    ref: containerRef,
+    className: styles_module_scss_1.default.itemProvider,
+    "data-pointers": !drag.pointers || undefined,
+    "data-swipe": swipe || undefined,
+    "data-gap": gap,
+    style: Object.assign({}, Boolean(gap) ? {
+      '--gap': gap
+    } : {}),
+    children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, swipeProps, {
+      className: styles_module_scss_1.default.itemTracker,
+      "data-test-id": testIds_1.TEST_IDS.trackLine,
+      style: {
+        transform: `translateX(${transform - drag.drag}px)`,
+        transition: `transform ${transition}s ease 0s`
+      },
+      ref: itemsTrackerRef,
+      children: items.map((item, i) =>
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      (0, jsx_runtime_1.jsx)("div", {
+        style: {
+          width: computedValues.itemWidth
+        },
+        className: styles_module_scss_1.default.itemContainer,
+        role: 'group',
+        "data-test-id": testIds_1.TEST_IDS.trackItem,
+        onClick: handleSlideClick,
+        children: item
+      }, i))
+    }))
+  });
+}

package/dist/cjs/components/ItemProvider/helpers.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPageX = getPageX;
+function getPageX(e) {
+  if (e.nativeEvent instanceof globalThis.MouseEvent) {
+    return e.nativeEvent.pageX;
+  } else if (e.nativeEvent instanceof globalThis.TouchEvent) {
+    return e.nativeEvent.changedTouches[0].pageX;
+  }
+  return 0;
+}

package/dist/cjs/components/ItemProvider/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ItemProvider"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Carousel"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/cjs/testIds.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_IDS = void 0;
+exports.TEST_IDS = {
+  arrowNext: 'carousel__arrow-next',
+  arrowPrev: 'carousel__arrow-prev',
+  pagination: 'carousel__pagination',
+  trackLine: 'carousel__track-line',
+  trackItem: 'carousel__track-item'
+};

package/dist/esm/components/Carousel/Carousel.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CarouselProps = WithSupportProps<{
+    /** CSS - класснейм */
+    className?: string;
+    /** Массив айтемов */
+    children: ReactElement[];
+    /** Кол-во отображаемых единовременно айтемов @default 1 */
+    showItems?: number;
+    /** Сдвиг айтемов при смене 1 страницы @default Math.trunc(show) */
+    scrollBy?: number;
+    /** Время переключения 1 страницы (в s) @default 0.4 */
+    transition?: number;
+    /** Переключение страниц свайпом @default true */
+    swipe?: boolean;
+    /** Минимальная длина в px для активации свайпа @default 48 */
+    swipeActivateLength?: number;
+    /** Использовать стрелки для переключения страниц @default true */
+    arrows?: boolean;
+    /** Использовать пагинацию для переключения страниц @default true */
+    pagination?: boolean;
+    /** Расстояние между айтемами @default var(--dimension-2m)*/
+    gap?: string;
+    /** Управление состоянием извне */
+    state?: {
+        page: number;
+        onChange(page: number): void;
+    };
+    /** Цикличная прокрутка @default false*/
+    infiniteScroll?: boolean;
+}>;
+export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Carousel/styles.module.css

@@ -0,0 +1,21 @@
+.carouselBase{
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  outline:none;
+}
+
+.carousel{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  box-sizing:border-box;
+}
+
+.pagination{
+  padding-top:var(--space-carousel-sliders-wrap-padding-top, 8px);
+  display:flex;
+  justify-content:center;
+  box-sizing:border-box;
+}

package/dist/esm/components/Control/Control.d.ts

@@ -0,0 +1,6 @@
+export declare const Control: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    onClick?(): void;
+    variant: "prev" | "next";
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/Control/index.js

@@ -0,0 +1 @@
+export * from './Control';

package/dist/esm/components/Control/styles.module.css

@@ -0,0 +1,45 @@
+.control{
+  width:var(--size-carousel-control-container, 40px);
+  height:var(--size-carousel-control-container, 40px);
+  border-radius:var(--radius-carousel-control-container, 24px);
+  border-width:var(--border-width-025m, 2px);
+  cursor:pointer;
+  position:absolute;
+  top:50%;
+  left:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
+  transform:translateY(-50%);
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:transparent;
+  border-style:solid;
+  outline-color:transparent;
+  box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
+}
+.control:hover, .control:focus-visible{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.control:hover{
+  box-shadow:var(--box-shadow-elevation-level4, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 16px 16px 0px rgba(0, 0, 0, 0.0784313725));
+}
+.control:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  border-color:var(--sys-available-complementary, #1c1c24);
+  outline-color:var(--sys-available-on-complementary, #ffffff);
+  box-shadow:none;
+}
+.control[data-variant=next]{
+  right:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
+  left:auto;
+}
+.control[data-variant=next]:focus-visible{
+  outline-offset:var(--dimension-025m, 2px);
+}
+.control[data-variant=next] .icon{
+  transform:rotate(180deg);
+}

package/dist/esm/components/ItemProvider/ItemProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export type ItemProviderProps = {
+    items: ReactElement[];
+    showItems: number;
+    scrollBy: number;
+    slideCallback(direction: number): void;
+    transition: number;
+    swipe: boolean;
+    swipeActivateLength: number;
+    page: number;
+    gap?: string;
+};
+export declare function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ItemProvider/helpers.d.ts

@@ -0,0 +1,2 @@
+import { MouseEvent, TouchEvent } from 'react';
+export declare function getPageX(e: TouchEvent | MouseEvent): number;

package/dist/esm/components/ItemProvider/index.js

@@ -0,0 +1 @@
+export * from './ItemProvider';

package/dist/esm/components/ItemProvider/styles.module.css

@@ -0,0 +1,39 @@
+.itemProvider{
+  --gap:var(--dimension-2m, 16px);
+  padding-top:var(--space-carousel-content-layout-padding, 4px);
+  padding-bottom:var(--space-carousel-content-layout-padding, 4px);
+  padding-left:var(--space-carousel-content-layout-padding, 4px);
+  padding-right:var(--space-carousel-content-layout-padding, 4px);
+  overflow:hidden;
+  width:100%;
+  margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+}
+.itemProvider[data-swipe]{
+  cursor:grab;
+}
+.itemProvider[data-swipe][data-pointers]{
+  cursor:grabbing;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  -webkit-user-drag:none;
+}
+
+.itemContainer{
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+
+.itemTracker{
+  display:flex;
+  gap:var(--gap, var(--dimension-2m, 16px));
+  box-sizing:border-box;
+  height:100%;
+}
+
+.hiddenItem{
+  pointer-events:none;
+}
+.hiddenItem *{
+  pointer-events:none;
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Carousel';

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './Carousel';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/testIds.d.ts

@@ -0,0 +1,7 @@
+export declare const TEST_IDS: {
+    arrowNext: string;
+    arrowPrev: string;
+    pagination: string;
+    trackLine: string;
+    trackItem: string;
+};

package/package.json

@@ -4,15 +4,18 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.21",
+  "version": "0.2.22-preview-ba12ca94.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/carousel",
   "repository": {
     "type": "git",
@@ -24,7 +27,8 @@
     "Nikita Ershov <niershov@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,12 +36,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/pagination": "0.7.1",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/icons": "0.22.2-preview-ba12ca94.0",
+    "@snack-uikit/pagination": "0.7.2-preview-ba12ca94.0",
+    "@snack-uikit/utils": "3.4.1-preview-ba12ca94.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "7ba93884d0517aed658a2c9f37f7bf555c95f04b"
+  "gitHead": "9ac0a3e5e530c09fa4dc050f9bc08d1849962129"
 }