@onepercentio/one-ui 1.3.3 → 1.3.5

package/dist/hooks/ui/useAdaptiveImage.d.ts

@@ -0,0 +1,7 @@
+import { ImageScales } from "../../models/ImageScales";
+/**
+ * This hooks is built over the implementation of this loader https://github.com/Muritavo/webpack-microfrontend-scripts#imageresolutionoptimizer
+ *
+ */
+declare function useAdaptiveImage(): ImageScales;
+export default useAdaptiveImage;

package/dist/hooks/ui/useAdaptiveImage.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ImageScales_1 = require("../../models/ImageScales");
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = require("react");
+/**
+ * This hooks is built over the implementation of this loader https://github.com/Muritavo/webpack-microfrontend-scripts#imageresolutionoptimizer
+ *
+ */
+function useAdaptiveImage() {
+    function ScaleFromCurrentWidth() {
+        if (window.PRERENDER)
+            return ImageScales_1.ImageScales.LARGE;
+        const width = window.visualViewport.width;
+        if (width < 480)
+            return ImageScales_1.ImageScales.SMALL;
+        if (width < 800)
+            return ImageScales_1.ImageScales.NORMAL;
+        if (width < 1280)
+            return ImageScales_1.ImageScales.BIG;
+        if (width < 1920)
+            return ImageScales_1.ImageScales.LARGE;
+        else
+            return ImageScales_1.ImageScales.EXTRA_LARGE;
+    }
+    const [currentScale, setCurrentScale] = (0, react_1.useState)(() => ScaleFromCurrentWidth());
+    (0, react_1.useEffect)(() => {
+        const onResizeThrottle = (0, throttle_1.default)(() => {
+            setCurrentScale(ScaleFromCurrentWidth());
+        }, 1000 / 4);
+        const onResize = () => onResizeThrottle();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    return currentScale;
+}
+exports.default = useAdaptiveImage;
+//# sourceMappingURL=useAdaptiveImage.js.map

package/dist/hooks/ui/useAdaptiveImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAdaptiveImage.js","sourceRoot":"","sources":["../../../src/hooks/ui/useAdaptiveImage.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAuD;AACvD,+DAAuC;AACvC,iCAA4C;AAE5C;;;GAGG;AACH,SAAS,gBAAgB;IACvB,SAAS,qBAAqB;QAC5B,IAAK,MAAc,CAAC,SAAS;YAAE,OAAO,yBAAW,CAAC,KAAK,CAAC;QACxD,MAAM,KAAK,GAAG,MAAM,CAAC,cAAe,CAAC,KAAK,CAAC;QAC3C,IAAI,KAAK,GAAG,GAAG;YAAE,OAAO,yBAAW,CAAC,KAAK,CAAC;QAC1C,IAAI,KAAK,GAAG,GAAG;YAAE,OAAO,yBAAW,CAAC,MAAM,CAAC;QAC3C,IAAI,KAAK,GAAG,IAAI;YAAE,OAAO,yBAAW,CAAC,GAAG,CAAC;QACzC,IAAI,KAAK,GAAG,IAAI;YAAE,OAAO,yBAAW,CAAC,KAAK,CAAC;;YACtC,OAAO,yBAAW,CAAC,WAAW,CAAC;IACtC,CAAC;IAED,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAc,GAAG,EAAE,CACjE,qBAAqB,EAAE,CACxB,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;YACrC,eAAe,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAC3C,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,kBAAe,gBAAgB,CAAA"}

package/dist/hooks/ui/useAlternating.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Receives a list and keeps alternating between the list elements every 5 seconds
+ */
+export default function useAlternating<X>(list: X[]): X;

package/dist/hooks/ui/useAlternating.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Receives a list and keeps alternating between the list elements every 5 seconds
+ */
+function useAlternating(list) {
+    const [current, setCurrent] = (0, react_1.useState)(list[0]);
+    (0, react_1.useEffect)(() => {
+        const interval = setInterval(() => {
+            setCurrent((prev) => {
+                const currentIndex = list.indexOf(prev);
+                if (list[currentIndex + 1])
+                    return list[currentIndex + 1];
+                else
+                    return list[0];
+            });
+        }, 5000);
+        return () => clearInterval(interval);
+    }, []);
+    return current;
+}
+exports.default = useAlternating;
+//# sourceMappingURL=useAlternating.js.map

package/dist/hooks/ui/useAlternating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAlternating.js","sourceRoot":"","sources":["../../../src/hooks/ui/useAlternating.tsx"],"names":[],"mappings":";;AAAA,iCAA4C;AAE5C;;GAEG;AACH,SAAwB,cAAc,CAAI,IAAS;IACjD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACxC,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;oBAAE,OAAO,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;;oBACrD,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CAAC;AACjB,CAAC;AAhBD,iCAgBC"}

package/dist/hooks/ui/useBreakpoint.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A hook to trigger changes when the screen resizes
+ * @returns If the current resolution is lower than the specified width
+ */
+export default function useBreakpoint(breakInto: number): boolean;

package/dist/hooks/ui/useBreakpoint.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = require("react");
+/**
+ * A hook to trigger changes when the screen resizes
+ * @returns If the current resolution is lower than the specified width
+ */
+function useBreakpoint(breakInto) {
+    const [lowerThanBreakpoint, setIsLowerThanBreakpoint] = (0, react_1.useState)(() => window.visualViewport.width < breakInto);
+    (0, react_1.useEffect)(() => {
+        const onResizeThrottle = (0, throttle_1.default)(() => {
+            setIsLowerThanBreakpoint(window.visualViewport.width < breakInto);
+        }, 1000 / 4);
+        const onResize = () => onResizeThrottle();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    return lowerThanBreakpoint;
+}
+exports.default = useBreakpoint;
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/hooks/ui/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/hooks/ui/useBreakpoint.tsx"],"names":[],"mappings":";;;;;AAAA,+DAAuC;AACvC,iCAA4C;AAE5C;;;GAGG;AACH,SAAwB,aAAa,CAAC,SAAiB;IACrD,MAAM,CAAC,mBAAmB,EAAE,wBAAwB,CAAC,GAAG,IAAA,gBAAQ,EAC9D,GAAG,EAAE,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAC/C,CAAC;IACF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;YACrC,wBAAwB,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;QACrE,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAbD,gCAaC"}

package/dist/hooks/ui/useCustomScrollbar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export default function useCustomScrollBar({ color, propagate }?: {
+    color?: string;
+    propagate?: boolean;
+} | undefined): {
+    /** The element that dhould have a custom scrollbar */
+    elRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/dist/hooks/ui/useCustomScrollbar.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useCustomScrollbar_module_scss_1 = __importDefault(require("./useCustomScrollbar.module.scss"));
+function useCustomScrollBar({ color = "", propagate = false } = {}) {
+    const elRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        elRef.current.style.setProperty("--scrollbar-color", color);
+        elRef.current.classList.add(useCustomScrollbar_module_scss_1.default.scrollBarRoot);
+        if (propagate) {
+            elRef.current.classList.add(useCustomScrollbar_module_scss_1.default.propagate);
+        }
+    }, []);
+    return {
+        /** The element that dhould have a custom scrollbar */
+        elRef,
+    };
+}
+exports.default = useCustomScrollBar;
+//# sourceMappingURL=useCustomScrollbar.js.map

package/dist/hooks/ui/useCustomScrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomScrollbar.js","sourceRoot":"","sources":["../../../src/hooks/ui/useCustomScrollbar.tsx"],"names":[],"mappings":";;;;;AAAA,iCAA2D;AAC3D,sGAAsD;AAEtD,SAAwB,kBAAkB,CAAC,EACzC,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,KAAK,KACsC,EAAE;IACzD,MAAM,KAAK,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE3C,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QAC7D,KAAK,CAAC,OAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,wCAAM,CAAC,aAAa,CAAC,CAAC;QACnD,IAAI,SAAS,EAAE,CAAC;YACZ,KAAK,CAAC,OAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,wCAAM,CAAC,SAAS,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,sDAAsD;QACtD,KAAK;KACN,CAAC;AACJ,CAAC;AAlBD,qCAkBC"}

package/dist/hooks/ui/useCustomScrollbar.module.scss

@@ -0,0 +1,20 @@
+@use "../../assets/styles/index.scss" as *;
+
+.scrollBarRoot {
+  &,
+  &.propagate * {
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      height: 8px;
+      width: 8px;
+      z-index: 1000;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-color, $primaryColor);
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+    }
+  }
+}

package/dist/hooks/ui/useEffectIf.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export default function useEffectIf(effect: Parameters<typeof useEffect>[0], depsToCheck: any[]): void;

package/dist/hooks/ui/useEffectIf.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useEffectIf(effect, depsToCheck) {
+    (0, react_1.useEffect)(() => {
+        const someUndefined = depsToCheck.some((dep) => !dep);
+        if (!someUndefined)
+            return effect();
+    }, depsToCheck);
+}
+exports.default = useEffectIf;
+//# sourceMappingURL=useEffectIf.js.map

package/dist/hooks/ui/useEffectIf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEffectIf.js","sourceRoot":"","sources":["../../../src/hooks/ui/useEffectIf.ts"],"names":[],"mappings":";;AAAA,iCAAkC;AAElC,SAAwB,WAAW,CACjC,MAAuC,EACvC,WAAkB;IAElB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACtD,IAAI,CAAC,aAAa;YAAE,OAAO,MAAM,EAAE,CAAC;IACtC,CAAC,EAAE,WAAW,CAAC,CAAC;AAClB,CAAC;AARD,8BAQC"}

package/dist/hooks/ui/useMouseHover.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A small hook for binding the hover control over some HTML element
+ * @returns uiEvents: The events to spread to the html element hovering: the hover state
+ */
+export default function useMouseHover(): {
+    uiEvents: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    hovering: boolean;
+};

package/dist/hooks/ui/useMouseHover.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * A small hook for binding the hover control over some HTML element
+ * @returns uiEvents: The events to spread to the html element hovering: the hover state
+ */
+function useMouseHover() {
+    const [hovering, setHovering] = (0, react_1.useState)(false);
+    // enter/leave (not over/out) so the state tracks the bound element as a whole
+    // and isn't toggled by the pointer moving across its children.
+    const uiEvents = (0, react_1.useMemo)(() => ({
+        onMouseEnter: () => {
+            setHovering(true);
+        },
+        onMouseLeave: () => {
+            setHovering(false);
+        },
+    }), []);
+    return {
+        uiEvents,
+        hovering,
+    };
+}
+exports.default = useMouseHover;
+//# sourceMappingURL=useMouseHover.js.map

package/dist/hooks/ui/useMouseHover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseHover.js","sourceRoot":"","sources":["../../../src/hooks/ui/useMouseHover.tsx"],"names":[],"mappings":";;AAAA,iCAA0C;AAE1C;;;GAGG;AACH,SAAwB,aAAa;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,8EAA8E;IAC9E,+DAA+D;IAC/D,MAAM,QAAQ,GAAG,IAAA,eAAO,EACtB,GAAG,EAAE,CAAC,CAAC;QACL,YAAY,EAAE,GAAG,EAAE;YACjB,WAAW,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,QAAQ;KACT,CAAC;AACJ,CAAC;AApBD,gCAoBC"}

package/dist/hooks/ui/usePaginationControls.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from "react";
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+export default function usePaginationControls(containerRef: RefObject<HTMLDivElement>, { snapToPage, baseWidth, snapToCutElement: _snapToCutElement, ...props }?: {
+    snapToPage?: boolean;
+    baseWidth?: number;
+    /** This will scroll only until the partially visible element is at the border, instead of scrolling all the container */
+    snapToCutElement?: boolean;
+    "data-testid"?: [left: string, right: string];
+}): {
+    controls: import("react/jsx-runtime").JSX.Element[];
+    checkControlsRequirement: () => void;
+};

package/dist/hooks/ui/usePaginationControls.js

@@ -0,0 +1,143 @@
+"use strict";
+var __rest = (this && this.__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 = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = require("react");
+const FadeIn_1 = __importDefault(require("../../components/FadeIn"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const usePaginationControls_module_scss_1 = __importDefault(require("./usePaginationControls.module.scss"));
+const html_utils_1 = require("../../utils/html.utils");
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+function usePaginationControls(containerRef, _a = {}) {
+    var _b, _c;
+    var { snapToPage, baseWidth, snapToCutElement: _snapToCutElement } = _a, props = __rest(_a, ["snapToPage", "baseWidth", "snapToCutElement"]);
+    const [controlsState, setControls] = (0, react_1.useState)([false, false]);
+    const [leftControl, rightControl] = controlsState;
+    const LeftControl = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.LeftControl");
+    const RightControl = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.RightControl");
+    const className = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.className", "");
+    function move(direction, snapToCutElement = _snapToCutElement) {
+        return () => {
+            if (snapToCutElement !== null && snapToCutElement !== void 0 ? snapToCutElement : false) {
+                const childBaseWidth = baseWidth || containerRef.current.firstElementChild.clientWidth;
+                const howMuchDoesTheScrollAddsUpTo = containerRef.current.scrollLeft / childBaseWidth -
+                    Math.floor((containerRef.current.scrollLeft + (direction === "l" ? -1 : 0)) /
+                        childBaseWidth);
+                const howMuchElementsFitOnAPage = containerRef.current.clientWidth / childBaseWidth;
+                const howMuchElementsFullyFitOnAPage = Math.floor(howMuchElementsFitOnAPage) || 1;
+                const directionScale = direction === "l"
+                    ? 1 - howMuchDoesTheScrollAddsUpTo
+                    : howMuchDoesTheScrollAddsUpTo;
+                const howMuchOfTheRemainingElementIsShown = howMuchElementsFitOnAPage +
+                    directionScale -
+                    howMuchElementsFullyFitOnAPage;
+                const howMuchToScroll = (containerRef.current.clientWidth -
+                    childBaseWidth * howMuchOfTheRemainingElementIsShown) *
+                    (direction === "l" ? -1 : 1);
+                containerRef.current.scrollBy({
+                    left: howMuchToScroll,
+                    behavior: "smooth",
+                });
+            }
+            else {
+                const rest = Math.round(containerRef.current.scrollLeft) %
+                    containerRef.current.clientWidth;
+                const snapOffset = snapToPage
+                    ? direction === "l"
+                        ? rest
+                            ? containerRef.current.clientWidth - rest
+                            : 0
+                        : rest
+                    : 0;
+                containerRef.current.scrollBy({
+                    left: (containerRef.current.clientWidth - snapOffset) *
+                        (direction === "l" ? -1 : 1),
+                    behavior: "smooth",
+                });
+            }
+        };
+    }
+    function checkControlsRequirement() {
+        const updateFunc = (next) => (prev) => {
+            if (prev[0] !== next[0] || prev[1] !== next[1])
+                return next;
+            return prev;
+        };
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const shouldHaveAnyControl = el.scrollWidth > el.clientWidth;
+        if (!shouldHaveAnyControl)
+            setControls(updateFunc([false, false]));
+        else {
+            const shouldHaveRightControl = el.scrollLeft < el.scrollWidth - el.clientWidth;
+            const shouldHaveLeftControl = el.scrollLeft > 0;
+            setControls(updateFunc([shouldHaveLeftControl, shouldHaveRightControl]));
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        const throttledCheck = (0, throttle_1.default)(checkControlsRequirement, 1000 / 4);
+        checkControlsRequirement();
+        let startingX;
+        let lastX;
+        const onTouchStart = (_a) => {
+            var { touches } = _a, e = __rest(_a, ["touches"]);
+            if (!(0, html_utils_1.isSameTarget)(e))
+                return;
+            const { pageX } = touches.item(0);
+            startingX = pageX;
+        };
+        const onTouchMove = (_a) => {
+            var { touches } = _a, e = __rest(_a, ["touches"]);
+            if (!(0, html_utils_1.isSameTarget)(e))
+                return;
+            const touch = touches.item(0);
+            lastX = touch.pageX;
+        };
+        const onTouchEnd = (e) => {
+            if (!lastX)
+                return;
+            const dir = lastX > startingX ? "l" : "r";
+            move(dir, true)();
+            startingX = undefined;
+        };
+        el.addEventListener("scroll", throttledCheck, {
+            passive: true,
+        });
+        el.addEventListener("touchstart", onTouchStart);
+        el.addEventListener("touchend", onTouchEnd);
+        el.addEventListener("touchmove", onTouchMove);
+        return () => {
+            el.removeEventListener("scroll", throttledCheck);
+            el.removeEventListener("touchstart", onTouchStart);
+            el.removeEventListener("touchend", onTouchEnd);
+            el.removeEventListener("touchend", onTouchEnd);
+        };
+    }, []);
+    return {
+        controls: [
+            (0, jsx_runtime_1.jsx)(FadeIn_1.default, { active: leftControl, className: `${usePaginationControls_module_scss_1.default.left} ${usePaginationControls_module_scss_1.default.control} ${className}`, "data-testid": (_b = props["data-testid"]) === null || _b === void 0 ? void 0 : _b[0], onClick: move("l"), children: leftControl && (0, jsx_runtime_1.jsx)(LeftControl, {}) }, "l"),
+            (0, jsx_runtime_1.jsx)(FadeIn_1.default, { active: rightControl, className: `${usePaginationControls_module_scss_1.default.right} ${usePaginationControls_module_scss_1.default.control} ${className}`, "data-testid": (_c = props["data-testid"]) === null || _c === void 0 ? void 0 : _c[1], onClick: move("r"), children: rightControl && (0, jsx_runtime_1.jsx)(RightControl, {}) }, "r"),
+        ],
+        checkControlsRequirement,
+    };
+}
+exports.default = usePaginationControls;
+//# sourceMappingURL=usePaginationControls.js.map

package/dist/hooks/ui/usePaginationControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationControls.js","sourceRoot":"","sources":["../../../src/hooks/ui/usePaginationControls.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/ui/usePaginationControls.module.scss

@@ -0,0 +1,16 @@
+.control {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  right: 0px;
+}
+
+.left {
+  left: 0px;
+}

package/dist/hooks/ui/useSnapToViewport.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+export default function useSnapToViewport(defaultPadding: number): import("react").RefObject<HTMLDivElement | null>;

package/dist/hooks/ui/useSnapToViewport.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useSnapToViewport_module_scss_1 = __importDefault(require("./useSnapToViewport.module.scss"));
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+function useSnapToViewport(defaultPadding) {
+    const elRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const diff = window.visualViewport.width - elRef.current.clientWidth;
+        const margin = diff / 2;
+        elRef.current.style.setProperty("--overflow-padding", `${margin}px`);
+        elRef.current.style.setProperty("--overflow-margin", `${-margin}px`);
+        elRef.current.style.setProperty("--default-padding", `${defaultPadding}px`);
+        elRef.current.style.setProperty("--default-margin", `${-defaultPadding}px`);
+        elRef.current.classList.add(useSnapToViewport_module_scss_1.default.applySpacings);
+    }, []);
+    return elRef;
+}
+exports.default = useSnapToViewport;
+//# sourceMappingURL=useSnapToViewport.js.map

package/dist/hooks/ui/useSnapToViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnapToViewport.js","sourceRoot":"","sources":["../../../src/hooks/ui/useSnapToViewport.ts"],"names":[],"mappings":";;;;;AAAA,iCAAgD;AAChD,oGAAqD;AACrD;;GAEG;AACH,SAAwB,iBAAiB,CAAC,cAAsB;IAC9D,MAAM,KAAK,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE3C,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,KAAK,CAAC,OAAQ,CAAC,WAAW,CAAC;QAEvE,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC;QAExB,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;QACtE,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;QACtE,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAC9B,mBAAmB,EACnB,GAAG,cAAc,IAAI,CACtB,CAAC;QACF,KAAK,CAAC,OAAQ,CAAC,KAAK,CAAC,WAAW,CAC9B,kBAAkB,EAClB,GAAG,CAAC,cAAc,IAAI,CACvB,CAAC;QACF,KAAK,CAAC,OAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,uCAAM,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAK,CAAC;AACf,CAAC;AAtBD,oCAsBC"}

package/dist/hooks/ui/useSnapToViewport.module.scss

@@ -0,0 +1,6 @@
+.applySpacings {
+  padding-left: var(--overflow-padding, var(--default-padding));
+  padding-right: var(--overflow-padding, var(--default-padding));
+  margin-left: var(--overflow-margin, var(--default-margin));
+  margin-right: var(--overflow-margin, var(--default-margin));
+}

package/dist/hooks/ui/useTilt.d.ts

@@ -0,0 +1,46 @@
+import { RefObject } from "react";
+type Options = {
+    round?: boolean;
+    gyroEnabled?: boolean;
+};
+export declare function useTiltUpdates(active: boolean, relativeToEl: RefObject<HTMLDivElement | null>, onTilt: (p: {
+    x: number;
+    y: number;
+}) => void, onInverseMatrix?: (updateFunc: (matrix: number[]) => number[]) => void, sensorScale?: number, tiltLimit?: {
+    x: number;
+    y: number;
+}, options?: Options): void;
+/**
+ * This hook binds to two methods for calculating tilt
+ *
+ * When available: The device sensors
+ * When on desktop: The mouse position relative to a ref
+ */
+export default function useTilt(active: boolean, 
+/**
+ * A scale to increase the values from the sensors
+ *
+ * @hack You can set this value to 0 as a way to disable the tilt calc on mobile
+ */
+sensorScale?: number, maxTilt?: {
+    x: number;
+    y: number;
+}, options?: Options): {
+    /** The element to monitor mouse hover relative to */
+    relativeTo: RefObject<HTMLDivElement | null>;
+    /**
+     * The matrix that represents the original tilt, so it can be used with the tilt prop to tilt relative to the user
+     * Use it on css like so transform: matrix3d(tiltResetMatrix.join(",")) rotateX(tilt.x) rotateY(tilt.y)
+     */
+    tiltResetMatrix: number[];
+    /**
+     * How much tilt should be applied based
+     */
+    tilt: {
+        x: number;
+        y: number;
+    };
+};
+export declare function calculateDistanceRelativeToBounds(mousePosition: number, elementInitialPosition: number, elementSizeDimension: number, shouldRound: boolean): number;
+export declare function givenTheRelativePositionHowMuchToRotate(relativePosition: number, maxRotation: number): number;
+export {};