@superrb/react-addons 3.0.0-9 → 3.0.0

package/hooks/use-event-listener.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 // Hook
-const useEventListener = (eventName, handler, options = {}, element, flag = true) => {
+export default function useEventListener(eventName, handler, options = {}, element, flag = true) {
     // Create a ref that stores handler
     const savedHandler = useRef();
     const elementRef = useRef();
@@ -13,7 +13,7 @@ const useEventListener = (eventName, handler, options = {}, element, flag = true
     // ... and potentially cause effect to re-run every render.
     useEffect(() => {
         savedHandler.current = handler;
-    }, [handler, elementRef.current]);
+    }, [handler]);
     useEffect(() => {
         // Make sure element supports addEventListener
         // On
@@ -33,13 +33,5 @@ const useEventListener = (eventName, handler, options = {}, element, flag = true
         return () => {
             elementRef.current.removeEventListener(eventName, eventListener);
         };
-    }, [
-        eventName,
-        handler,
-        savedHandler.current,
-        element,
-        elementRef.current,
-        flag,
-    ]);
-};
-export default useEventListener;
+    }, [eventName, handler, options, element, flag]);
+}

package/hooks/use-hide-on-scroll.d.ts

@@ -1,3 +1,2 @@
-declare const useHideOnScroll: (hiddenOnLoad?: boolean) => boolean;
-export default useHideOnScroll;
+export default function useHideOnScroll(hiddenOnLoad?: boolean): boolean;
 //# sourceMappingURL=use-hide-on-scroll.d.ts.map

package/hooks/use-hide-on-scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-hide-on-scroll.d.ts","sourceRoot":"","sources":["../src/hooks/use-hide-on-scroll.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,eAAe,kBAAkB,OAAO,KAAW,OA+DxD,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"use-hide-on-scroll.d.ts","sourceRoot":"","sources":["../src/hooks/use-hide-on-scroll.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAY,GAAE,OAAe,GAC5B,OAAO,CA+DT"}

package/hooks/use-hide-on-scroll.js

@@ -1,6 +1,6 @@
 import { useEventListener } from '../hooks';
 import { useCallback, useEffect, useState } from 'react';
-const useHideOnScroll = (hiddenOnLoad = false) => {
+export default function useHideOnScroll(hiddenOnLoad = false) {
     const [hidden, setHidden] = useState(hiddenOnLoad);
     const handleScroll = useCallback(() => {
         const previousY = window.scrollY;
@@ -31,5 +31,4 @@ const useHideOnScroll = (hiddenOnLoad = false) => {
     useEventListener('popstate', handleLoad, { passive: true }, typeof window !== 'undefined' ? window : undefined);
     useEventListener('pageshow', handleLoad, { passive: true }, typeof window !== 'undefined' ? window : undefined);
     return hidden;
-};
-export default useHideOnScroll;
+}

package/hooks/use-id.d.ts

@@ -1,3 +1,2 @@
-declare const useId: (prefix: string) => string;
-export default useId;
+export default function useId(prefix: string): string;
 //# sourceMappingURL=use-id.d.ts.map

package/hooks/use-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-id.d.ts","sourceRoot":"","sources":["../src/hooks/use-id.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,KAAK,WAAY,MAAM,WAU5B,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"use-id.d.ts","sourceRoot":"","sources":["../src/hooks/use-id.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,MAAM,EAAE,MAAM,UAU3C"}

package/hooks/use-id.js

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
-const useId = (prefix) => {
+export default function useId(prefix) {
     const [id, setId] = useState(`${prefix}-${Math.random().toString(36).substring(2, 9)}`);
     useEffect(() => {
         setId(`${prefix}-${Math.random().toString(36).substring(2, 9)}`);
     }, [prefix]);
     return id;
-};
-export default useId;
+}

package/hooks/use-is-in-viewport.d.ts

@@ -1,6 +1,5 @@
-declare const useIsInViewport: (initial?: boolean, rootMargin?: string, threshold?: number[]) => {
+export default function useIsInViewport(initial?: boolean, rootMargin?: string, threshold?: number[]): {
     isInViewport: boolean;
-    setRef: (ref: HTMLElement | null) => Promise<void>;
+    setRef: (ref: HTMLElement | null) => void;
 };
-export default useIsInViewport;
 //# sourceMappingURL=use-is-in-viewport.d.ts.map

package/hooks/use-is-in-viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-in-viewport.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-in-viewport.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe;;kBAgEQ,WAAW,GAAG,IAAI;CAe9C,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"use-is-in-viewport.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-in-viewport.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,OAAO,UAAQ,EACf,UAAU,SAAY,EACtB,SAAS,WAA0B;;kBA6Dd,WAAW,GAAG,IAAI;EAiBxC"}

package/hooks/use-is-in-viewport.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-const useIsInViewport = (initial = false, rootMargin = '0px 0px', threshold = [0, 0.25, 0.5, 0.75, 1]) => {
+export default function useIsInViewport(initial = false, rootMargin = '0px 0px', threshold = [0, 0.25, 0.5, 0.75, 1]) {
     const [isInViewport, setIsInViewport] = useState(initial);
     const element = useRef();
     const observer = useRef();
@@ -45,20 +45,22 @@ const useIsInViewport = (initial = false, rootMargin = '0px 0px', threshold = [0
             wait();
         });
     };
-    const setRef = async (ref) => {
-        element.current = ref;
-        if (ref) {
-            try {
-                const observer = await waitForObserver();
-                observer.observe(ref);
-            }
-            catch (error) {
-                // If IntersectionObserver fails, just set isInViewport to true
-                console.error(error);
-                setIsInViewport(true);
+    const setRef = (ref) => {
+        ;
+        (async () => {
+            element.current = ref;
+            if (ref) {
+                try {
+                    const observer = await waitForObserver();
+                    observer.observe(ref);
+                }
+                catch (error) {
+                    // If IntersectionObserver fails, just set isInViewport to true
+                    console.error(error);
+                    setIsInViewport(true);
+                }
             }
-        }
+        })();
     };
     return { isInViewport, setRef };
-};
-export default useIsInViewport;
+}

package/hooks/use-is-mobile.d.ts

@@ -1,3 +1,2 @@
-declare const useIsMobile: (initial?: boolean, size?: string) => boolean;
-export default useIsMobile;
+export default function useIsMobile(initial?: boolean, size?: string): boolean;
 //# sourceMappingURL=use-is-mobile.d.ts.map

package/hooks/use-is-mobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-mobile.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,+CAiBhB,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-mobile.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,UAAO,EAAE,IAAI,SAAY,WAiBnE"}

package/hooks/use-is-mobile.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-const useIsMobile = (initial = true, size = '63.75em') => {
+export default function useIsMobile(initial = true, size = '63.75em') {
     const [isMobile, setIsMobile] = useState(initial);
     const setScreenSize = useCallback(() => {
         setIsMobile(!window.matchMedia(`(min-width: ${size})`).matches);
@@ -12,5 +12,4 @@ const useIsMobile = (initial = true, size = '63.75em') => {
         };
     }, [setScreenSize]);
     return isMobile;
-};
-export default useIsMobile;
+}

package/hooks/use-is-overflowing.d.ts

@@ -1,4 +1,3 @@
 import { MutableRefObject } from 'react';
-declare const useIsOverflowing: ({ current }: MutableRefObject<HTMLElement>) => boolean;
-export default useIsOverflowing;
+export default function useIsOverflowing({ current, }: MutableRefObject<HTMLElement>): boolean;
 //# sourceMappingURL=use-is-overflowing.d.ts.map

package/hooks/use-is-overflowing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-overflowing.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-overflowing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAExC,QAAA,MAAM,gBAAgB,gBAAiB,iBAAiB,WAAW,CAAC,YAGpB,CAAA;AAEhD,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"use-is-overflowing.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-overflowing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAExC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,GACR,EAAE,gBAAgB,CAAC,WAAW,CAAC,WAM/B"}

package/hooks/use-is-overflowing.js

@@ -1,4 +1,5 @@
-const useIsOverflowing = ({ current }) => current &&
-    (current.scrollWidth > current.clientWidth ||
-        current.scrollHeight > current.clientHeight);
-export default useIsOverflowing;
+export default function useIsOverflowing({ current, }) {
+    return (current &&
+        (current.scrollWidth > current.clientWidth ||
+            current.scrollHeight > current.clientHeight));
+}

package/hooks/use-lock-body-scroll.d.ts

@@ -1,3 +1,2 @@
-declare function useLockBodyScroll(toggle: boolean): void;
-export default useLockBodyScroll;
+export default function useLockBodyScroll(toggle: boolean): void;
 //# sourceMappingURL=use-lock-body-scroll.d.ts.map

package/hooks/use-lock-body-scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-lock-body-scroll.d.ts","sourceRoot":"","sources":["../src/hooks/use-lock-body-scroll.ts"],"names":[],"mappings":"AAEA,iBAAS,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAOhD;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"use-lock-body-scroll.d.ts","sourceRoot":"","sources":["../src/hooks/use-lock-body-scroll.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAO/D"}

package/hooks/use-lock-body-scroll.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-function useLockBodyScroll(toggle) {
+export default function useLockBodyScroll(toggle) {
     useEffect(() => {
         document.body.style.overflow = toggle ? 'hidden' : 'unset';
         return () => {
@@ -7,4 +7,3 @@ function useLockBodyScroll(toggle) {
         };
     }, [toggle]);
 }
-export default useLockBodyScroll;

package/hooks/use-modal.d.ts

@@ -1,7 +1,6 @@
-declare const useModal: (name: string) => {
+export default function useModal(name: string): {
     isOpen: boolean;
     openModal: () => void;
     closeModal: () => void;
 };
-export default useModal;
 //# sourceMappingURL=use-modal.d.ts.map

package/hooks/use-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../src/hooks/use-modal.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,QAAQ,SAAU,MAAM;;;;CAU7B,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../src/hooks/use-modal.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,IAAI,EAAE,MAAM;;;;EAU5C"}

package/hooks/use-modal.js

@@ -1,5 +1,5 @@
 import useModalStore from '../store/modal';
-const useModal = (name) => {
+export default function useModal(name) {
     const isOpen = useModalStore((state) => state.openState[name]);
     const openModal = useModalStore((state) => state.openModal);
     const closeModal = useModalStore((state) => state.closeModal);
@@ -8,5 +8,4 @@ const useModal = (name) => {
         openModal: () => openModal(name),
         closeModal: () => closeModal(name),
     };
-};
-export default useModal;
+}

package/hooks/use-motion-allowed.d.ts

@@ -1,3 +1,2 @@
-declare const useMotionAllowed: () => boolean;
-export default useMotionAllowed;
+export default function useMotionAllowed(): boolean;
 //# sourceMappingURL=use-motion-allowed.d.ts.map

package/hooks/use-motion-allowed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-motion-allowed.d.ts","sourceRoot":"","sources":["../src/hooks/use-motion-allowed.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,eAUrB,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"use-motion-allowed.d.ts","sourceRoot":"","sources":["../src/hooks/use-motion-allowed.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,gBAAgB,YAUvC"}

package/hooks/use-motion-allowed.js

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
-const useMotionAllowed = () => {
+export default function useMotionAllowed() {
     const [motionAllowed, setMotionAllowed] = useState(true);
     useEffect(() => {
         setMotionAllowed(!window.matchMedia('(prefers-reduced-motion: reduce)').matches);
     }, [setMotionAllowed]);
     return motionAllowed;
-};
-export default useMotionAllowed;
+}

package/hooks/use-parallax.d.ts

@@ -1,3 +1,2 @@
-declare const useParallax: (items: HTMLElement[], flag?: boolean) => void;
-export default useParallax;
+export default function useParallax(items: HTMLElement[], flag?: boolean): void;
 //# sourceMappingURL=use-parallax.d.ts.map

package/hooks/use-parallax.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-parallax.d.ts","sourceRoot":"","sources":["../src/hooks/use-parallax.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,UAAW,WAAW,EAAE,SAAQ,OAAO,SA6BvD,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"use-parallax.d.ts","sourceRoot":"","sources":["../src/hooks/use-parallax.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,WAAW,CACjC,KAAK,EAAE,WAAW,EAAE,EACpB,IAAI,GAAE,OAAc,QA4BrB"}

package/hooks/use-parallax.js

@@ -1,6 +1,6 @@
 import { useEventListener, useMotionAllowed } from '../hooks';
 import { useCallback } from 'react';
-const useParallax = (items, flag = true) => {
+export default function useParallax(items, flag = true) {
     const isMotionAllowed = useMotionAllowed();
     const onScroll = useCallback((event) => {
         items.forEach((item, index) => {
@@ -14,5 +14,4 @@ const useParallax = (items, flag = true) => {
         });
     }, [items]);
     useEventListener('scroll', onScroll, { passive: true }, undefined, flag && isMotionAllowed);
-};
-export default useParallax;
+}

package/hooks/use-slideshow.d.ts

@@ -10,8 +10,9 @@ export type Slideshow = {
     atStart: boolean;
     atEnd: boolean;
 };
-export declare const getScrollProgress: (target: SlideshowElement) => number;
-export declare const getCurrentSlideIndex: (element: SlideshowElement, currentIndex: number) => number;
-declare const useSlideshow: (slideshow: MutableRefObject<SlideshowElement>) => Slideshow;
-export default useSlideshow;
+export declare function isHorizontal(element: SlideshowElement): boolean;
+export declare function isCentered(element: SlideshowElement): boolean;
+export declare function getScrollProgress(target: SlideshowElement): number;
+export declare function getCurrentSlideIndex(element: SlideshowElement, currentIndex: number): number;
+export default function useSlideshow(slideshow: MutableRefObject<SlideshowElement>): Slideshow;
 //# sourceMappingURL=use-slideshow.d.ts.map

package/hooks/use-slideshow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-slideshow.d.ts","sourceRoot":"","sources":["../src/hooks/use-slideshow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAA;AAE7D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,YAAY,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;IAChD,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,iBAAiB,WAAY,gBAAgB,WAMzD,CAAA;AAED,eAAO,MAAM,oBAAoB,YACtB,gBAAgB,gBACX,MAAM,KACnB,MAyDF,CAAA;AAED,QAAA,MAAM,YAAY,cACL,iBAAiB,gBAAgB,CAAC,KAC5C,SA+CF,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"use-slideshow.d.ts","sourceRoot":"","sources":["../src/hooks/use-slideshow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAA;AAG7D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,YAAY,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;IAChD,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAE/D;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAK7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,gBAAgB,UAMzD;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,gBAAgB,EACzB,YAAY,EAAE,MAAM,GACnB,MAAM,CAkER;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,SAAS,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,GAC5C,SAAS,CAqGX"}

package/hooks/use-slideshow.js

@@ -1,11 +1,19 @@
 import { useEffect, useState } from 'react';
-export const getScrollProgress = (target) => {
+import useEventListener from './use-event-listener';
+export function isHorizontal(element) {
+    return window.getComputedStyle(element).scrollSnapType.startsWith('x');
+}
+export function isCentered(element) {
+    return (window.getComputedStyle(element.firstElementChild)
+        ?.scrollSnapAlign === 'center');
+}
+export function getScrollProgress(target) {
     if (!target || target.scrollWidth === target.clientWidth) {
         return -1;
     }
     return target.scrollLeft / (target.scrollWidth - target.clientWidth);
-};
-export const getCurrentSlideIndex = (element, currentIndex) => {
+}
+export function getCurrentSlideIndex(element, currentIndex) {
     if (!element) {
         return currentIndex;
     }
@@ -13,76 +21,113 @@ export const getCurrentSlideIndex = (element, currentIndex) => {
         element.previousScroll = element.scrollLeft;
         return currentIndex;
     }
-    const direction = element.scrollLeft > element.previousScroll ? 'right' : 'left';
+    const centered = isCentered(element);
+    const horizontal = isHorizontal(element);
+    const direction = element.scrollLeft > (element.previousScroll || 0) ? 'right' : 'left';
+    const offset = 25;
     let gap = parseFloat(window.getComputedStyle(element).gap) || 0;
     if (isNaN(gap)) {
         gap = 0;
     }
-    const horizontal = window
-        .getComputedStyle(element)
-        .scrollSnapType.startsWith('x');
-    const centered = window.getComputedStyle(element.firstElementChild)
-        ?.scrollSnapAlign === 'center';
-    const containerEdge = element.getBoundingClientRect()[horizontal ? 'left' : 'top'];
+    let padding = parseFloat(window.getComputedStyle(element)[horizontal ? 'paddingLeft' : 'paddingTop']) || 0;
+    if (isNaN(padding)) {
+        padding = 0;
+    }
+    const containerEdge = element.getBoundingClientRect()[horizontal ? 'left' : 'top'] + padding;
     let newIndex = currentIndex;
     let i = 0;
     for (const child of element.children) {
         const edge = child.getBoundingClientRect()[horizontal ? 'left' : 'top'] - containerEdge;
         if (centered) {
+            const centeredEdge = edge - child.clientWidth / 2;
             const threshold = horizontal
                 ? element.clientWidth / 2
                 : element.clientHeight / 2;
-            if (edge >= 0 && edge < threshold) {
-                return i;
+            if (centeredEdge >= 0 && centeredEdge < threshold) {
+                newIndex = i;
+                break;
             }
         }
         else {
             const threshold = direction === 'right'
-                ? (horizontal ? child.clientWidth : child.clientHeight) - gap
-                : 0 + gap;
+                ? (horizontal ? child.clientWidth : child.clientHeight) - gap - offset
+                : 0 + gap + offset;
             if (edge >= 0 - threshold) {
-                return i;
+                newIndex = i;
+                break;
             }
         }
         i++;
     }
     element.previousScroll = element.scrollLeft;
     return newIndex;
-};
-const useSlideshow = (slideshow) => {
+}
+export default function useSlideshow(slideshow) {
     const [currentSlide, setCurrentSlide] = useState(0);
+    const [progress, setProgress] = useState(-1);
+    const [ready, setReady] = useState(false);
+    const update = () => {
+        if (!slideshow.current) {
+            return;
+        }
+        setCurrentSlide((current) => getCurrentSlideIndex(slideshow.current, current));
+        setProgress(getScrollProgress(slideshow.current));
+    };
+    useEventListener('scroll', update, { passive: true }, slideshow.current, !!slideshow.current && ready);
+    useEventListener('resize', update, { passive: true }, slideshow.current, !!slideshow.current && ready);
     useEffect(() => {
+        setReady(true);
         if (slideshow.current) {
-            setCurrentSlide((current) => getCurrentSlideIndex(slideshow.current, current));
-            slideshow.current.addEventListener('scroll', () => {
-                setCurrentSlide((current) => getCurrentSlideIndex(slideshow.current, current));
-            });
-            slideshow.current.addEventListener('resize', () => setCurrentSlide((current) => getCurrentSlideIndex(slideshow.current, current)));
+            update();
+            slideshow.current.setAttribute('role', 'region');
+            slideshow.current.setAttribute('aria-label', 'carousel');
+            slideshow.current.setAttribute('aria-live', 'polite');
         }
-    }, [slideshow]);
-    if (!slideshow.current) {
-        return {
-            slideshowRef: slideshow,
-            currentSlide: 0,
-            slideCount: 0,
-            goTo: () => { },
-            atStart: true,
-            atEnd: true,
-        };
-    }
+    }, [slideshow]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        ;
+        [...slideshow.current?.children].forEach((child) => child.setAttribute('aria-hidden', 'true'));
+        slideshow.current?.children[currentSlide].setAttribute('aria-hidden', 'false');
+    }, [currentSlide, slideshow]);
     return {
         slideshowRef: slideshow,
         currentSlide,
         slideCount: slideshow.current?.children.length || 0,
-        goTo: (index) => {
-            slideshow.current?.children[index]?.scrollIntoView({
+        goTo(index) {
+            index = Math.min(slideshow.current?.children.length - 1, Math.max(0, index));
+            const newElement = slideshow.current?.children[index];
+            newElement.scrollIntoView({
                 behavior: 'smooth',
-                block: 'nearest',
-                inline: 'nearest',
+                block: isHorizontal(slideshow.current)
+                    ? 'nearest'
+                    : isCentered(slideshow.current)
+                        ? 'center'
+                        : 'start',
+                inline: isHorizontal(slideshow.current)
+                    ? isCentered(slideshow.current)
+                        ? 'center'
+                        : 'start'
+                    : 'nearest',
             });
+            // const scrollOpts: ScrollToOptions = {
+            //   behavior: 'smooth',
+            // }
+            // if (isHorizontal(slideshow.current)) {
+            //   if (isCentered(slideshow.current)) {
+            //     scrollOpts.left = newElement?.offsetLeft + newElement?.clientWidth / 2
+            //   } else {
+            //     scrollOpts.left = newElement?.offsetLeft
+            //   }
+            // } else {
+            //   if (isCentered(slideshow.current)) {
+            //     scrollOpts.top = newElement?.offsetTop + newElement?.clientHeight / 2
+            //   } else {
+            //     scrollOpts.top = newElement?.offsetTop
+            //   }
+            // }
+            // slideshow.current?.scrollTo(scrollOpts)
         },
-        atStart: getScrollProgress(slideshow.current) <= 0,
-        atEnd: getScrollProgress(slideshow.current) >= 1,
+        atStart: progress <= 0 || progress === -1,
+        atEnd: progress >= 1 || progress === -1,
     };
-};
-export default useSlideshow;
+}

package/hooks.d.ts

@@ -3,6 +3,7 @@
  */
 import useAsync from './hooks/use-async';
 import useDraggableScroll from './hooks/use-draggable-scroll';
+import useEscape from './hooks/use-escape';
 import useEventListener from './hooks/use-event-listener';
 import useHideOnScroll from './hooks/use-hide-on-scroll';
 import useId from './hooks/use-id';
@@ -14,5 +15,5 @@ import useModal from './hooks/use-modal';
 import useMotionAllowed from './hooks/use-motion-allowed';
 import useParallax from './hooks/use-parallax';
 import useSlideshow from './hooks/use-slideshow';
-export { useAsync, useDraggableScroll, useEventListener, useHideOnScroll, useId, useIsOverflowing, useIsInViewport, useIsMobile, useLockBodyScroll, useModal, useMotionAllowed, useParallax, useSlideshow, };
+export { useAsync, useDraggableScroll, useEscape, useEventListener, useHideOnScroll, useId, useIsOverflowing, useIsInViewport, useIsMobile, useLockBodyScroll, useModal, useMotionAllowed, useParallax, useSlideshow, };
 //# sourceMappingURL=hooks.d.ts.map

package/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["src/hooks.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,kBAAkB,MAAM,8BAA8B,CAAA;AAC7D,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,WAAW,MAAM,uBAAuB,CAAA;AAC/C,OAAO,iBAAiB,MAAM,8BAA8B,CAAA;AAC5D,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,WAAW,MAAM,sBAAsB,CAAA;AAC9C,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAEhD,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,YAAY,GACb,CAAA"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["src/hooks.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,kBAAkB,MAAM,8BAA8B,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,WAAW,MAAM,uBAAuB,CAAA;AAC/C,OAAO,iBAAiB,MAAM,8BAA8B,CAAA;AAC5D,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,WAAW,MAAM,sBAAsB,CAAA;AAC9C,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAEhD,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,YAAY,GACb,CAAA"}

package/hooks.js

@@ -3,6 +3,7 @@
  */
 import useAsync from './hooks/use-async';
 import useDraggableScroll from './hooks/use-draggable-scroll';
+import useEscape from './hooks/use-escape';
 import useEventListener from './hooks/use-event-listener';
 import useHideOnScroll from './hooks/use-hide-on-scroll';
 import useId from './hooks/use-id';
@@ -14,4 +15,4 @@ import useModal from './hooks/use-modal';
 import useMotionAllowed from './hooks/use-motion-allowed';
 import useParallax from './hooks/use-parallax';
 import useSlideshow from './hooks/use-slideshow';
-export { useAsync, useDraggableScroll, useEventListener, useHideOnScroll, useId, useIsOverflowing, useIsInViewport, useIsMobile, useLockBodyScroll, useModal, useMotionAllowed, useParallax, useSlideshow, };
+export { useAsync, useDraggableScroll, useEscape, useEventListener, useHideOnScroll, useId, useIsOverflowing, useIsInViewport, useIsMobile, useLockBodyScroll, useModal, useMotionAllowed, useParallax, useSlideshow, };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@superrb/react-addons",
   "type": "module",
-  "version": "3.0.0-9",
+  "version": "3.0.0",
   "main": "index.js",
   "repository": "https://github.com/superrbstudio/react-addons",
   "author": "@molovo",
@@ -14,7 +14,8 @@
     "js-cookie": "^3.0.5",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hook-form": "^7.46.1",
-    "react-use-draggable-scroll": "^0.4.7"
+    "react-use-draggable-scroll": "^0.4.7",
+    "simple-zustand-devtools": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -41,5 +42,6 @@
     "prettier": "^3.2.2",
     "typescript-eslint": "^0.0.1-alpha.0",
     "watch": "^1.0.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

package/store/cookies.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cookies.d.ts","sourceRoot":"","sources":["../src/store/cookies.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B,eAAe,EAAE,OAAO,CAAA;IACxB,uBAAuB,EAAE,OAAO,CAAA;IAChC,kBAAkB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/C,0BAA0B,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,0EAyBlB,CAAA;AAEF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"cookies.d.ts","sourceRoot":"","sources":["../src/store/cookies.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,eAAe,EAAE,OAAO,CAAA;IACxB,uBAAuB,EAAE,OAAO,CAAA;IAChC,kBAAkB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/C,0BAA0B,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,0EAyBlB,CAAA;AAMF,eAAe,cAAc,CAAA"}

package/store/cookies.js

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { mountStoreDevtool } from 'simple-zustand-devtools';
 import Cookies from 'js-cookie';
 const useCookieStore = create()((set) => {
     const cookiesAccepted = !!Cookies.get('accepted-cookies') || false;
@@ -10,19 +11,22 @@ const useCookieStore = create()((set) => {
             Cookies.set('accepted-cookies', accepted.toString(), {
                 expires: 30,
             });
-            return set((state) => ({ cookiesAccepted: accepted }));
+            return set({ cookiesAccepted: accepted });
         },
         setTrackingCookiesAccepted: (accepted) => {
             Cookies.set('accepted-tracking-cookies', accepted.toString(), {
                 expires: 30,
             });
-            return set((state) => ({
+            return set({
                 trackingCookiesAccepted: accepted,
-            }));
+            });
         },
         popupOpen: false,
         openPopup: () => set({ popupOpen: true }),
         closePopup: () => set({ popupOpen: false }),
     };
 });
+if (process.env.NODE_ENV === 'development') {
+    mountStoreDevtool('CookieStore', useCookieStore);
+}
 export default useCookieStore;

package/store/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/store/modal.ts"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAClB,SAAS,EAAE;QACT,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;IACjC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,QAAA,MAAM,aAAa,yEASjB,CAAA;AAEF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/store/modal.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,SAAS,EAAE;QACT,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;IACjC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,QAAA,MAAM,aAAa,yEASjB,CAAA;AAMF,eAAe,aAAa,CAAA"}

package/store/modal.js

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { mountStoreDevtool } from 'simple-zustand-devtools';
 const useModalStore = create()((set, get) => {
     return {
         openState: {},
@@ -7,4 +8,7 @@ const useModalStore = create()((set, get) => {
         closeModal: (name) => set((state) => ({ openState: { ...state.openState, [name]: false } })),
     };
 });
+if (process.env.NODE_ENV === 'development') {
+    mountStoreDevtool('ModalStore', useModalStore);
+}
 export default useModalStore;