@helpdice/ui 1.7.7 → 1.7.9

package/dist/breadcrumbs/index.js

@@ -3103,7 +3103,7 @@ var LinkIconComponent = function LinkIconComponent() {
 LinkIconComponent.displayName = 'LinkIcon';
 var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
 
-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,
@@ -3116,8 +3116,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(),
@@ -3132,11 +3133,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/dist/card/index.js

@@ -3296,7 +3296,7 @@ var addColorAlpha = function addColorAlpha(color, alpha) {
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
 };
 
-var _excluded$2 = ["href", "showColor", "underline", "children", "className", "block", "icon"];
+var _excluded$2 = ["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,
@@ -3309,8 +3309,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$2);
   var theme = distExports.useTheme();
   var _useScale = useScale(),
@@ -3325,11 +3326,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/dist/carousal/CSSTranslate.d.ts

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

package/dist/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/dist/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/dist/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/dist/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/dist/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;
+}

package/dist/carousal/component/types.d.ts

@@ -0,0 +1,79 @@
+export interface AnimationHandlerResponse {
+    itemListStyle?: React.CSSProperties;
+    slideStyle?: React.CSSProperties;
+    selectedStyle?: React.CSSProperties;
+    prevStyle?: React.CSSProperties;
+}
+export type AnimationHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
+export type SwipeAnimationHandler = (delta: {
+    x: number;
+    y: number;
+}, props: CarouselProps, state: CarouselState, setState: Function) => AnimationHandlerResponse;
+export type StopSwipingHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
+export interface CarouselProps {
+    ariaLabel?: string | undefined;
+    axis: 'horizontal' | 'vertical';
+    autoFocus?: boolean;
+    autoPlay?: boolean;
+    centerMode?: boolean;
+    centerSlidePercentage: number;
+    children?: React.ReactChild[];
+    className?: string;
+    dynamicHeight?: boolean;
+    emulateTouch?: boolean;
+    infiniteLoop?: boolean;
+    interval: number;
+    labels: {
+        leftArrow: string;
+        rightArrow: string;
+        item: string;
+    };
+    onClickItem: (index: number, item: React.ReactNode) => void;
+    onClickThumb: (index: number, item: React.ReactNode) => void;
+    onChange: (index: number, item: React.ReactNode) => void;
+    onSwipeStart: (event: React.TouchEvent) => void;
+    onSwipeEnd: (event: React.TouchEvent) => void;
+    onSwipeMove: (event: React.TouchEvent) => boolean;
+    preventMovementUntilSwipeScrollTolerance: boolean;
+    renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
+    renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;
+    renderIndicator: (clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void, isSelected: boolean, index: number, label: string) => React.ReactNode;
+    renderItem: (item: React.ReactNode, options?: {
+        isSelected: boolean;
+        isPrevious: boolean;
+    }) => React.ReactNode;
+    renderThumbs: (children: React.ReactChild[]) => React.ReactChild[];
+    selectedItem: number;
+    showArrows: boolean;
+    showStatus: boolean;
+    showIndicators: boolean;
+    showThumbs: boolean;
+    statusFormatter: (currentItem: number, total: number) => string;
+    stopOnHover: boolean;
+    swipeable: boolean;
+    swipeScrollTolerance: number;
+    thumbWidth?: number;
+    transitionTime: number;
+    useKeyboardArrows?: boolean;
+    verticalSwipe: 'natural' | 'standard';
+    width: number | string;
+    animationHandler: 'slide' | 'fade' | AnimationHandler;
+    swipeAnimationHandler: SwipeAnimationHandler;
+    stopSwipingHandler: StopSwipingHandler;
+}
+export interface CarouselState {
+    autoPlay?: boolean;
+    cancelClick: boolean;
+    hasMount: boolean;
+    initialized: boolean;
+    isMouseEntered: boolean;
+    itemSize: number;
+    previousItem: number;
+    selectedItem: number;
+    swiping?: boolean;
+    swipeMovementStarted: boolean;
+    itemListStyle?: React.CSSProperties;
+    slideStyle?: React.CSSProperties;
+    selectedStyle?: React.CSSProperties;
+    prevStyle?: React.CSSProperties;
+}

package/dist/carousal/component/utils.d.ts

@@ -0,0 +1,15 @@
+import { CarouselProps } from './types';
+export declare const noop: () => void;
+export declare const defaultStatusFormatter: (current: number, total: number) => string;
+export declare const isKeyboardEvent: (e?: React.MouseEvent | React.KeyboardEvent) => e is React.KeyboardEvent;
+/**
+ * Gets the list 'position' relative to a current index
+ * @param index
+ */
+export declare const getPosition: (index: number, props: CarouselProps) => number;
+/**
+ * Sets the 'position' transform for sliding animations
+ * @param position
+ * @param forceReflow
+ */
+export declare const setPosition: (position: number, axis: "horizontal" | "vertical") => React.CSSProperties;

package/dist/carousal/cssClasses.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    ROOT: (customClassName?: string) => string;
+    CAROUSEL: (isSlider?: boolean) => string;
+    WRAPPER: (isSlider: boolean, axis?: "horizontal" | "vertical") => string;
+    SLIDER: (isSlider: boolean, isSwiping?: boolean) => string;
+    ITEM: (isSlider: boolean, selected: boolean, previous?: boolean) => string;
+    ARROW_PREV: (disabled?: boolean) => string;
+    ARROW_NEXT: (disabled?: boolean) => string;
+    DOT: (selected?: boolean) => string;
+};
+export default _default;

package/dist/carousal/dimensions.d.ts

@@ -0,0 +1 @@
+export declare const outerWidth: (el: HTMLElement) => number;

package/dist/carousal/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Carousel } from './component';
+export type { CarouselProps } from './component/types';
+export { default as Thumbs } from './component/Thumbs';