@helpdice/ui 1.7.7 → 1.7.9

package/dist/swipe/react-swipe.d.ts

@@ -0,0 +1,58 @@
+export function setHasSupportToCaptureOption(hasSupport: any): void;
+export default ReactSwipe;
+declare class ReactSwipe extends React.Component<any, any, any> {
+    static displayName: string;
+    static propTypes: {
+        tagName: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        allowMouseEvents: PropTypes.Requireable<boolean>;
+        onSwipeUp: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeDown: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeLeft: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeRight: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeMove: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwipeEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        innerRef: PropTypes.Requireable<(...args: any[]) => any>;
+        tolerance: PropTypes.Validator<number>;
+    };
+    static defaultProps: {
+        tagName: string;
+        allowMouseEvents: boolean;
+        onSwipeUp(): void;
+        onSwipeDown(): void;
+        onSwipeLeft(): void;
+        onSwipeRight(): void;
+        onSwipeStart(): void;
+        onSwipeMove(): void;
+        onSwipeEnd(): void;
+        innerRef(): void;
+        tolerance: number;
+    };
+    constructor(...args: any[]);
+    _handleSwipeStart(event: any): void;
+    _handleSwipeMove(event: any): void;
+    _handleSwipeEnd(event: any): void;
+    _onMouseDown(event: any): void;
+    _onMouseMove(event: any): void;
+    _onMouseUp(event: any): void;
+    _setSwiperRef(node: any): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    mouseDown: boolean | undefined;
+    moveStart: {
+        x: any;
+        y: any;
+    } | null | undefined;
+    moving: boolean | undefined;
+    movePosition: {
+        deltaX: number;
+        deltaY: number;
+    } | null | undefined;
+    swiper: any;
+    render(): React.JSX.Element;
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/user/index.js

@@ -3143,7 +3143,7 @@ var addColorAlpha = function addColorAlpha(color, alpha) {
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
 };
 
-var _excluded$1 = ["href", "showColor", "underline", "children", "className", "block", "icon"];
+var _excluded$1 = ["href", "showColor", "underline", "children", "className", "block", "arrow", "icon"];
 var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
     href = _ref$href === void 0 ? '' : _ref$href,
@@ -3156,8 +3156,9 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$block = _ref.block,
     block = _ref$block === void 0 ? false : _ref$block,
-    _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? false : _ref$icon,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var theme = distExports.useTheme();
   var _useScale = useScale(),
@@ -3172,11 +3173,13 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     href: href
   }, props, {
     ref: ref,
-    className: _JSXStyle.dynamic([["442871747", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children, icon && /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "442871747",
+    className: _JSXStyle.dynamic([["1742013413", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), icon && icon, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1742013413", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]])
+  }, children, arrow && /*#__PURE__*/React.createElement(LinkIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1742013413",
     dynamic: [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]
-  }, ".link.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;line-height:inherit;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
+  }, ".link.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:inherit;gap:5px;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
 });
 LinkComponent.displayName = 'Link';
 var Link = withScale(LinkComponent);

package/esm/carousal/CSSTranslate.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (position: number, metric: "px" | "%", axis: "horizontal" | "vertical") => string;
+export default _default;

package/esm/carousal/CSSTranslate.js

@@ -0,0 +1,7 @@
+export default (function (position, metric, axis) {
+  var positionPercent = position === 0 ? position : position + metric;
+  var positionCss = axis === 'horizontal' ? [positionPercent, 0, 0] : [0, positionPercent, 0];
+  var transitionProp = 'translate3d';
+  var translatedPosition = '(' + positionCss.join(',') + ')';
+  return transitionProp + translatedPosition;
+});

package/esm/carousal/component/Arrow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ArrowProps {
+    direction: 'prev' | 'next';
+    onClickHandler: () => void;
+    enabled: boolean;
+    label: string;
+}
+declare const Arrow: React.FC<ArrowProps>;
+export default Arrow;

package/esm/carousal/component/Arrow.js

@@ -0,0 +1,21 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import klass from '../cssClasses'; // Assuming cssClasses.ts is in src/
+
+var Arrow = function Arrow(_ref) {
+  var direction = _ref.direction,
+    onClickHandler = _ref.onClickHandler,
+    enabled = _ref.enabled,
+    label = _ref.label;
+  var isPrev = direction === 'prev';
+  var arrowClassName = isPrev ? klass.ARROW_PREV(!enabled) : klass.ARROW_NEXT(!enabled);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": label,
+    onClick: onClickHandler,
+    className: "jsx-4058608807" + " " + (arrowClassName || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4058608807"
+  }, ".control-arrow.jsx-4058608807{position:absolute;z-index:2;top:0;bottom:0;background:none;border:0;font-size:26px;cursor:pointer;opacity:0.4;-webkit-transition:all 0.25s ease-in;transition:all 0.25s ease-in;margin-top:-13px;padding:5px;color:#fff;}.control-arrow.jsx-4058608807:hover{background:rgba(0,0,0,0.2);opacity:1;}.control-arrow.jsx-4058608807:hover,.control-arrow.jsx-4058608807:focus{opacity:1;}.control-arrow.control-arrow.jsx-4058608807:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:'';}.control-arrow.control-disabled.jsx-4058608807{opacity:0;cursor:inherit;display:none;}.control-arrow.control-prev.jsx-4058608807{left:0;}.control-arrow.control-prev.jsx-4058608807:before{border-right:8px solid #fff;}.control-arrow.control-next.jsx-4058608807{right:0;}.control-arrow.control-next.jsx-4058608807:before{border-left:8px solid #fff;}"));
+};
+export default Arrow;

package/esm/carousal/component/Indicator.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IndicatorProps {
+    onClickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    isSelected: boolean;
+    index: number;
+    label: string;
+}
+declare const Indicator: React.FC<IndicatorProps>;
+export default Indicator;

package/esm/carousal/component/Indicator.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import klass from '../cssClasses'; // Assuming cssClasses.ts is in src/
+
+var Indicator = function Indicator(_ref) {
+  var onClickHandler = _ref.onClickHandler,
+    isSelected = _ref.isSelected,
+    index = _ref.index,
+    label = _ref.label;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
+    onClick: onClickHandler,
+    onKeyDown: onClickHandler,
+    value: index,
+    key: index,
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "".concat(label, " ").concat(index + 1),
+    className: "jsx-3056554148" + " " + (klass.DOT(isSelected) || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3056554148"
+  }, ".dot.jsx-3056554148{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-3056554148,.dot.jsx-3056554148:hover{opacity:1;}"));
+};
+export default Indicator;

package/esm/carousal/component/Thumbs.d.ts

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+export interface Props {
+    axis: 'horizontal' | 'vertical';
+    children: React.ReactChild[];
+    labels: {
+        leftArrow: string;
+        rightArrow: string;
+        item: string;
+    };
+    onSelectItem: (index: number, item: React.ReactNode) => void;
+    selectedItem: number;
+    thumbWidth: number;
+    transitionTime: number;
+    emulateTouch?: boolean;
+}
+interface State {
+    selectedItem: number;
+    firstItem: number;
+    itemSize?: number;
+    visibleItems: number;
+    lastPosition: number;
+    showArrows: boolean;
+    swiping: boolean;
+}
+export default class Thumbs extends Component<Props, State> {
+    private itemsWrapperRef?;
+    private itemsListRef?;
+    private thumbsRef?;
+    static displayName: string;
+    static defaultProps: {
+        axis: string;
+        labels: {
+            leftArrow: string;
+            rightArrow: string;
+            item: string;
+        };
+        selectedItem: number;
+        thumbWidth: number;
+        transitionTime: number;
+    };
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    setItemsWrapperRef: (node: HTMLDivElement) => void;
+    setItemsListRef: (node: HTMLUListElement) => void;
+    setThumbsRef: (node: HTMLLIElement, index: number) => void;
+    setupThumbs(): void;
+    destroyThumbs(): void;
+    updateSizes: () => void;
+    handleClickItem: (index: number, item: React.ReactNode, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onSwipeStart: () => void;
+    onSwipeEnd: () => void;
+    onSwipeMove: (delta: {
+        x: number;
+        y: number;
+    }) => boolean;
+    slideRight: (positions?: number) => void;
+    slideLeft: (positions?: number) => void;
+    moveTo: (position: number) => void;
+    getFirstItem(selectedItem: number): number;
+    renderItems(): React.JSX.Element[];
+    render(): React.JSX.Element | null;
+}
+export {};

package/esm/carousal/{Thumbs.js → component/Thumbs.js}

@@ -5,6 +5,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _JSXStyle from "../styled-jsx.es.js";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component, Children } from 'react';
@@ -12,8 +13,10 @@ import klass from '../cssClasses';
 import { outerWidth } from '../dimensions';
 import CSSTranslate from '../CSSTranslate';
 // @ts-ignore
-import Swipe from 'react-easy-swipe';
+import Swipe from '../../swipe';
 import getWindow from '../shims/window';
+import Button from 'components/button';
+import { ChevronLeft, ChevronRight } from '@helpdice/icons';
 var isKeyboardEvent = function isKeyboardEvent(e) {
   return e.hasOwnProperty('key');
 };
@@ -211,8 +214,11 @@ var Thumbs = /*#__PURE__*/function (_Component) {
         };
         return /*#__PURE__*/React.createElement("li", _extends({}, thumbProps, {
           role: "button",
-          tabIndex: 0
-        }), img);
+          tabIndex: 0,
+          className: "jsx-2129274269" + " " + (thumbProps && thumbProps.className != null && thumbProps.className || "")
+        }), img, /*#__PURE__*/React.createElement(_JSXStyle, {
+          id: "2129274269"
+        }, ".thumb.jsx-2129274269{-webkit-transition:border 0.15s ease-in;transition:border 0.15s ease-in;display:inline-block;margin-right:6px;margin-bottom:0 !important;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px;}.thumb.jsx-2129274269:focus{border:3px solid #ccc;outline:none;}.thumb.selected.jsx-2129274269,.thumb.jsx-2129274269:hover{border:3px solid #0099ff;}.thumb.jsx-2129274269 img.jsx-2129274269{vertical-align:top;}"));
       });
     }
   }, {
@@ -248,12 +254,21 @@ var Thumbs = /*#__PURE__*/function (_Component) {
         msTransitionDuration: transitionTime
       };
       return /*#__PURE__*/React.createElement("div", {
-        className: klass.CAROUSEL(false)
+        className: "jsx-3452014152" + " " + (klass.CAROUSEL(false) || "")
       }, /*#__PURE__*/React.createElement("div", {
-        className: klass.WRAPPER(false),
-        ref: this.setItemsWrapperRef
-      }, /*#__PURE__*/React.createElement("button", {
+        ref: this.setItemsWrapperRef,
+        className: "jsx-3452014152" + " " + (klass.WRAPPER(false) || "")
+      }, /*#__PURE__*/React.createElement(Button, {
+        scale: 2 / 3,
+        auto: true,
+        px: 0.6,
         type: "button",
+        style: {
+          position: 'absolute',
+          zIndex: '2',
+          left: 0
+        },
+        iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null),
         className: klass.ARROW_PREV(!hasPrev),
         onClick: function onClick() {
           return _this3.slideRight();
@@ -267,23 +282,37 @@ var Thumbs = /*#__PURE__*/function (_Component) {
         onSwipeMove: this.onSwipeMove,
         onSwipeStart: this.onSwipeStart,
         onSwipeEnd: this.onSwipeEnd,
-        style: itemListStyles,
+        style: _extends({
+          display: 'flex',
+          margin: '20px 45px'
+        }, itemListStyles),
         innerRef: this.setItemsListRef,
         allowMouseEvents: this.props.emulateTouch
       }, this.renderItems()) : /*#__PURE__*/React.createElement("ul", {
-        className: klass.SLIDER(false, this.state.swiping),
         ref: function ref(node) {
           return _this3.setItemsListRef(node);
         },
-        style: itemListStyles
-      }, this.renderItems()), /*#__PURE__*/React.createElement("button", {
+        style: itemListStyles,
+        className: "jsx-3452014152" + " " + (klass.SLIDER(false, this.state.swiping) || "")
+      }, this.renderItems()), /*#__PURE__*/React.createElement(Button, {
         type: "button",
+        scale: 2 / 3,
+        auto: true,
+        px: 0.6,
+        style: {
+          position: 'absolute',
+          zIndex: '2',
+          right: 0
+        },
+        iconRight: /*#__PURE__*/React.createElement(ChevronRight, null),
         className: klass.ARROW_NEXT(!hasNext),
         onClick: function onClick() {
           return _this3.slideLeft();
         },
         "aria-label": this.props.labels.rightArrow
-      })));
+      })), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "3452014152"
+      }, ".thumbs-wrapper.jsx-3452014152{margin:0;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.thumbs.jsx-3452014152{-webkit-transition:all 0.15s ease-in;transition:all 0.15s ease-in;position:relative;list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;margin:0 !important;}.control-arrow.control-prev.jsx-3452014152{left:0;}.control-arrow.control-prev.jsx-3452014152:before{border-right:8px solid #fff;}.control-arrow.control-next.jsx-3452014152{right:0;}.control-arrow.control-next.jsx-3452014152:before{border-left:8px solid #fff;}"));
     }
   }]);
 }(Component);

package/esm/carousal/component/animations.d.ts

@@ -0,0 +1,27 @@
+import { AnimationHandler, SwipeAnimationHandler, StopSwipingHandler } from './types';
+/**
+ * Main animation handler for the default 'sliding' style animation
+ * @param props
+ * @param state
+ */
+export declare const slideAnimationHandler: AnimationHandler;
+/**
+ * Swiping animation handler for the default 'sliding' style animation
+ * @param delta
+ * @param props
+ * @param state
+ * @param setState
+ */
+export declare const slideSwipeAnimationHandler: SwipeAnimationHandler;
+/**
+ * Default 'sliding' style animination handler for when a swipe action stops.
+ * @param props
+ * @param state
+ */
+export declare const slideStopSwipingHandler: StopSwipingHandler;
+/**
+ * Main animation handler for the default 'fade' style animation
+ * @param props
+ * @param state
+ */
+export declare const fadeAnimationHandler: AnimationHandler;

package/esm/carousal/{animations.js → component/animations.js}

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { Children } from 'react';
-import CSSTranslate from '../../CSSTranslate';
+import CSSTranslate from '../CSSTranslate';
 import { getPosition, setPosition } from './utils';
 /**
  * Main animation handler for the default 'sliding' style animation

package/esm/carousal/component/index.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import Thumbs from './Thumbs';
+import { CarouselProps, CarouselState } from './types';
+export default class Carousel extends React.Component<CarouselProps, CarouselState> {
+    private thumbsRef?;
+    private carouselWrapperRef?;
+    private listRef?;
+    private itemsRef?;
+    private timer?;
+    private animationHandler;
+    static displayName: string;
+    static defaultProps: CarouselProps;
+    constructor(props: CarouselProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CarouselProps, prevState: CarouselState): void;
+    componentWillUnmount(): void;
+    setThumbsRef: (node: Thumbs) => void;
+    setCarouselWrapperRef: (node: HTMLDivElement) => void;
+    setListRef: (node: HTMLElement | HTMLUListElement) => void;
+    setItemsRef: (node: HTMLElement, index: number) => void;
+    setupCarousel(): void;
+    destroyCarousel(): void;
+    setupAutoPlay(): void;
+    destroyAutoPlay(): void;
+    bindEvents(): void;
+    unbindEvents(): void;
+    autoPlay: () => void;
+    clearAutoPlay: () => void;
+    resetAutoPlay: () => void;
+    stopOnHover: () => void;
+    startOnLeave: () => void;
+    forceFocus(): void;
+    isFocusWithinTheCarousel: () => boolean;
+    navigateWithKeyboard: (e: KeyboardEvent) => void;
+    updateSizes: () => void;
+    setMountState: () => void;
+    handleClickItem: (index: number, item: React.ReactNode) => void;
+    /**
+     * On Change handler, Passes the index and React node to the supplied onChange prop
+     * @param index of the carousel item
+     * @param item React node of the item being changed
+     */
+    handleOnChange: (index: number, item: React.ReactNode) => void;
+    handleClickThumb: (index: number, item: React.ReactNode) => void;
+    onSwipeStart: (event: React.TouchEvent) => void;
+    onSwipeEnd: (event: React.TouchEvent) => void;
+    onSwipeMove: (delta: {
+        x: number;
+        y: number;
+    }, event: React.TouchEvent) => boolean;
+    /**
+     * Decrements the selectedItem index a number of positions through the children list
+     * @param positions
+     * @param fromSwipe
+     */
+    decrement: (positions?: number) => void;
+    /**
+     * Increments the selectedItem index a number of positions through the children list
+     * @param positions
+     * @param fromSwipe
+     */
+    increment: (positions?: number) => void;
+    /**
+     * Moves the selected item to the position provided
+     * @param position
+     * @param fromSwipe
+     */
+    moveTo: (position?: number) => void;
+    onClickNext: () => void;
+    onClickPrev: () => void;
+    onSwipeForward: () => void;
+    onSwipeBackwards: () => void;
+    changeItem: (newIndex: number) => (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * This function is called when you want to 'select' a new item, or rather move to a 'selected' item
+     * It also handles the onChange callback wrapper
+     * @param state state object with updated selected item, and swiping bool if relevant
+     */
+    selectItem: (state: Pick<CarouselState, "selectedItem" | "swiping">) => void;
+    getInitialImage: () => HTMLImageElement;
+    getVariableItemHeight: (position: number) => number | null;
+    renderItems(isClone?: boolean): React.JSX.Element[];
+    renderControls(): React.JSX.Element | null;
+    renderStatus(): React.JSX.Element | null;
+    renderThumbs(): React.JSX.Element | null;
+    render(): React.JSX.Element | null;
+}