app-studio 0.5.21 → 0.5.26

package/dist/app-studio.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, forwardRef, useMemo, useEffect, useState } from 'react';
+import React, { createContext, useContext, forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import Color from 'color-convert';
 
 const palette = {
@@ -2492,12 +2492,130 @@ function isMobile() {
   return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
 }
 
+function useActive() {
+  const [active, setActive] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handleMouseDown = () => setActive(true);
+    const handleMouseUp = () => setActive(false);
+    const handleTouchStart = () => setActive(true);
+    const handleTouchEnd = () => setActive(false);
+    node.addEventListener('mousedown', handleMouseDown);
+    node.addEventListener('mouseup', handleMouseUp);
+    node.addEventListener('mouseleave', handleMouseUp);
+    node.addEventListener('touchstart', handleTouchStart);
+    node.addEventListener('touchend', handleTouchEnd);
+    return () => {
+      node.removeEventListener('mousedown', handleMouseDown);
+      node.removeEventListener('mouseup', handleMouseUp);
+      node.removeEventListener('mouseleave', handleMouseUp);
+      node.removeEventListener('touchstart', handleTouchStart);
+      node.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, []);
+  return [ref, active];
+}
+
+function useClickOutside() {
+  const [clickedOutside, setClickedOutside] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const handleClick = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setClickedOutside(true);
+      } else {
+        setClickedOutside(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, []);
+  return [ref, clickedOutside];
+}
+
+function useFocus() {
+  const [focused, setFocused] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handleFocus = () => setFocused(true);
+    const handleBlur = () => setFocused(false);
+    node.addEventListener('focus', handleFocus);
+    node.addEventListener('blur', handleBlur);
+    return () => {
+      node.removeEventListener('focus', handleFocus);
+      node.removeEventListener('blur', handleBlur);
+    };
+  }, []);
+  return [ref, focused];
+}
+
+function useHover() {
+  const [hover, setHover] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handleMouseEnter = () => setHover(true);
+    const handleMouseLeave = () => setHover(false);
+    node.addEventListener('mouseenter', handleMouseEnter);
+    node.addEventListener('mouseleave', handleMouseLeave);
+    return () => {
+      node.removeEventListener('mouseenter', handleMouseEnter);
+      node.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, []);
+  return [ref, hover];
+}
+
+function useKeyPress(targetKey) {
+  const [keyPressed, setKeyPressed] = useState(false);
+  useEffect(() => {
+    const downHandler = e => {
+      if (e.key === targetKey) setKeyPressed(true);
+    };
+    const upHandler = e => {
+      if (e.key === targetKey) setKeyPressed(false);
+    };
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, [targetKey]);
+  return keyPressed;
+}
+
 const useMount = callback => {
   useEffect(() => {
     callback();
   }, []);
 };
 
+function useOnScreen(options) {
+  const ref = useRef(null);
+  const [isOnScreen, setOnScreen] = useState(false);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(_ref => {
+      let [entry] = _ref;
+      setOnScreen(entry.isIntersecting);
+    }, options);
+    observer.observe(node);
+    return () => {
+      observer.unobserve(node);
+    };
+  }, [options]);
+  return [ref, isOnScreen];
+}
+
 const createQuery = (keyScreen, query, set) => {
   const mql = window.matchMedia(query);
   const onChange = () => {
@@ -2544,5 +2662,182 @@ const useResponsive = () => {
   };
 };
 
-export { Animation, Button, Div, Element, Form, Image, ImageBackground, Input, ResponsiveContext, ResponsiveProvider, SafeArea, Scroll, Shadows, Skeleton, Span, Text, ThemeContext, ThemeProvider, Typography, View, createQuery, defaultColors, defaultThemeMain, getWindowInitialProps, isBrowser, isDev, isMobile, isProd, isSSR, palette, useMount, useResponsive, useResponsiveContext, useTheme };
+const getScrollDimensions = element => {
+  if (element instanceof Window) {
+    return {
+      scrollHeight: document.documentElement.scrollHeight,
+      scrollWidth: document.documentElement.scrollWidth,
+      clientHeight: window.innerHeight,
+      clientWidth: window.innerWidth,
+      scrollTop: window.scrollY,
+      scrollLeft: window.scrollX
+    };
+  }
+  return {
+    scrollHeight: element.scrollHeight,
+    scrollWidth: element.scrollWidth,
+    clientHeight: element.clientHeight,
+    clientWidth: element.clientWidth,
+    scrollTop: element.scrollTop,
+    scrollLeft: element.scrollLeft
+  };
+};
+const useScroll = function (_temp) {
+  let {
+    container,
+    offset = [0, 0]
+  } = _temp === void 0 ? {} : _temp;
+  const [scrollPosition, setScrollPosition] = useState({
+    x: 0,
+    y: 0,
+    xProgress: 0,
+    yProgress: 0
+  });
+  const handleScroll = useCallback(() => {
+    if (!container || !container.current) return;
+    const element = container.current;
+    const {
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+      scrollTop,
+      scrollLeft
+    } = getScrollDimensions(element);
+    const x = scrollLeft + offset[0];
+    const y = scrollTop + offset[1];
+    const maxScrollX = scrollWidth - clientWidth;
+    const maxScrollY = scrollHeight - clientHeight;
+    const xProgress = maxScrollX > 0 ? x / maxScrollX : 1;
+    const yProgress = maxScrollY > 0 ? y / maxScrollY : 1;
+    setScrollPosition(prev => {
+      if (prev.x !== x || prev.y !== y || prev.xProgress !== xProgress || prev.yProgress !== yProgress) {
+        return {
+          x,
+          y,
+          xProgress,
+          yProgress
+        };
+      }
+      return prev;
+    });
+  }, [container, offset]);
+  useEffect(() => {
+    if (!container || container.current) return;
+    const element = container.current || window;
+    element.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    window.addEventListener('resize', handleScroll, {
+      passive: true
+    });
+    handleScroll();
+    return () => {
+      element.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [handleScroll, container]);
+  return scrollPosition;
+};
+const useScrollAnimation = function (ref, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const [isInView, setIsInView] = useState(false);
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        setIsInView(entry.isIntersecting);
+        setProgress(entry.intersectionRatio);
+      });
+    }, {
+      threshold: options.threshold || 0,
+      rootMargin: options.rootMargin || '0px'
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, options.threshold, options.rootMargin]);
+  return {
+    isInView,
+    progress
+  };
+};
+const useSmoothScroll = () => {
+  return useCallback(function (element, offset) {
+    if (offset === void 0) {
+      offset = 0;
+    }
+    if (!element) return;
+    const targetPosition = element.getBoundingClientRect().top + window.scrollY - offset;
+    window.scrollTo({
+      top: targetPosition,
+      behavior: 'smooth'
+    });
+  }, []);
+};
+const useInfiniteScroll = function (callback, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const [sentinel, setSentinel] = useState(null);
+  useEffect(() => {
+    if (!sentinel || options.isLoading) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) callback();
+    }, {
+      threshold: options.threshold || 0
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [sentinel, callback, options.threshold, options.isLoading]);
+  return {
+    sentinelRef: setSentinel
+  };
+};
+const useScrollDirection = function (threshold) {
+  if (threshold === void 0) {
+    threshold = 0;
+  }
+  const [scrollDirection, setScrollDirection] = useState('up');
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const updateScrollDirection = useCallback(() => {
+    const scrollY = window.scrollY;
+    const direction = scrollY > lastScrollY ? 'down' : 'up';
+    if (Math.abs(scrollY - lastScrollY) > threshold && direction !== scrollDirection) {
+      setScrollDirection(direction);
+    }
+    setLastScrollY(scrollY > 0 ? scrollY : 0);
+  }, [scrollDirection, lastScrollY, threshold]);
+  useEffect(() => {
+    window.addEventListener('scroll', updateScrollDirection, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener('scroll', updateScrollDirection);
+    };
+  }, [updateScrollDirection]);
+  return scrollDirection;
+};
+
+function useWindowSize() {
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return size;
+}
+
+export { Animation, Button, Div, Element, Form, Image, ImageBackground, Input, ResponsiveContext, ResponsiveProvider, SafeArea, Scroll, Shadows, Skeleton, Span, Text, ThemeContext, ThemeProvider, Typography, View, createQuery, defaultColors, defaultThemeMain, getWindowInitialProps, isBrowser, isDev, isMobile, isProd, isSSR, palette, useActive, useClickOutside, useFocus, useHover, useInfiniteScroll, useKeyPress, useMount, useOnScreen, useResponsive, useResponsiveContext, useScroll, useScrollAnimation, useScrollDirection, useSmoothScroll, useTheme, useWindowSize };
 //# sourceMappingURL=app-studio.esm.js.map

package/dist/app-studio.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-studio.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"app-studio.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/app-studio.umd.development.js

@@ -2498,12 +2498,130 @@
     return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
   }
 
+  function useActive() {
+    const [active, setActive] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const handleMouseDown = () => setActive(true);
+      const handleMouseUp = () => setActive(false);
+      const handleTouchStart = () => setActive(true);
+      const handleTouchEnd = () => setActive(false);
+      node.addEventListener('mousedown', handleMouseDown);
+      node.addEventListener('mouseup', handleMouseUp);
+      node.addEventListener('mouseleave', handleMouseUp);
+      node.addEventListener('touchstart', handleTouchStart);
+      node.addEventListener('touchend', handleTouchEnd);
+      return () => {
+        node.removeEventListener('mousedown', handleMouseDown);
+        node.removeEventListener('mouseup', handleMouseUp);
+        node.removeEventListener('mouseleave', handleMouseUp);
+        node.removeEventListener('touchstart', handleTouchStart);
+        node.removeEventListener('touchend', handleTouchEnd);
+      };
+    }, []);
+    return [ref, active];
+  }
+
+  function useClickOutside() {
+    const [clickedOutside, setClickedOutside] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const handleClick = e => {
+        if (ref.current && !ref.current.contains(e.target)) {
+          setClickedOutside(true);
+        } else {
+          setClickedOutside(false);
+        }
+      };
+      document.addEventListener('mousedown', handleClick);
+      return () => {
+        document.removeEventListener('mousedown', handleClick);
+      };
+    }, []);
+    return [ref, clickedOutside];
+  }
+
+  function useFocus() {
+    const [focused, setFocused] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const handleFocus = () => setFocused(true);
+      const handleBlur = () => setFocused(false);
+      node.addEventListener('focus', handleFocus);
+      node.addEventListener('blur', handleBlur);
+      return () => {
+        node.removeEventListener('focus', handleFocus);
+        node.removeEventListener('blur', handleBlur);
+      };
+    }, []);
+    return [ref, focused];
+  }
+
+  function useHover() {
+    const [hover, setHover] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const handleMouseEnter = () => setHover(true);
+      const handleMouseLeave = () => setHover(false);
+      node.addEventListener('mouseenter', handleMouseEnter);
+      node.addEventListener('mouseleave', handleMouseLeave);
+      return () => {
+        node.removeEventListener('mouseenter', handleMouseEnter);
+        node.removeEventListener('mouseleave', handleMouseLeave);
+      };
+    }, []);
+    return [ref, hover];
+  }
+
+  function useKeyPress(targetKey) {
+    const [keyPressed, setKeyPressed] = React.useState(false);
+    React.useEffect(() => {
+      const downHandler = e => {
+        if (e.key === targetKey) setKeyPressed(true);
+      };
+      const upHandler = e => {
+        if (e.key === targetKey) setKeyPressed(false);
+      };
+      window.addEventListener('keydown', downHandler);
+      window.addEventListener('keyup', upHandler);
+      return () => {
+        window.removeEventListener('keydown', downHandler);
+        window.removeEventListener('keyup', upHandler);
+      };
+    }, [targetKey]);
+    return keyPressed;
+  }
+
   const useMount = callback => {
     React.useEffect(() => {
       callback();
     }, []);
   };
 
+  function useOnScreen(options) {
+    const ref = React.useRef(null);
+    const [isOnScreen, setOnScreen] = React.useState(false);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const observer = new IntersectionObserver(_ref => {
+        let [entry] = _ref;
+        setOnScreen(entry.isIntersecting);
+      }, options);
+      observer.observe(node);
+      return () => {
+        observer.unobserve(node);
+      };
+    }, [options]);
+    return [ref, isOnScreen];
+  }
+
   const createQuery = (keyScreen, query, set) => {
     const mql = window.matchMedia(query);
     const onChange = () => {
@@ -2550,6 +2668,183 @@
     };
   };
 
+  const getScrollDimensions = element => {
+    if (element instanceof Window) {
+      return {
+        scrollHeight: document.documentElement.scrollHeight,
+        scrollWidth: document.documentElement.scrollWidth,
+        clientHeight: window.innerHeight,
+        clientWidth: window.innerWidth,
+        scrollTop: window.scrollY,
+        scrollLeft: window.scrollX
+      };
+    }
+    return {
+      scrollHeight: element.scrollHeight,
+      scrollWidth: element.scrollWidth,
+      clientHeight: element.clientHeight,
+      clientWidth: element.clientWidth,
+      scrollTop: element.scrollTop,
+      scrollLeft: element.scrollLeft
+    };
+  };
+  const useScroll = function (_temp) {
+    let {
+      container,
+      offset = [0, 0]
+    } = _temp === void 0 ? {} : _temp;
+    const [scrollPosition, setScrollPosition] = React.useState({
+      x: 0,
+      y: 0,
+      xProgress: 0,
+      yProgress: 0
+    });
+    const handleScroll = React.useCallback(() => {
+      if (!container || !container.current) return;
+      const element = container.current;
+      const {
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth,
+        scrollTop,
+        scrollLeft
+      } = getScrollDimensions(element);
+      const x = scrollLeft + offset[0];
+      const y = scrollTop + offset[1];
+      const maxScrollX = scrollWidth - clientWidth;
+      const maxScrollY = scrollHeight - clientHeight;
+      const xProgress = maxScrollX > 0 ? x / maxScrollX : 1;
+      const yProgress = maxScrollY > 0 ? y / maxScrollY : 1;
+      setScrollPosition(prev => {
+        if (prev.x !== x || prev.y !== y || prev.xProgress !== xProgress || prev.yProgress !== yProgress) {
+          return {
+            x,
+            y,
+            xProgress,
+            yProgress
+          };
+        }
+        return prev;
+      });
+    }, [container, offset]);
+    React.useEffect(() => {
+      if (!container || container.current) return;
+      const element = container.current || window;
+      element.addEventListener('scroll', handleScroll, {
+        passive: true
+      });
+      window.addEventListener('resize', handleScroll, {
+        passive: true
+      });
+      handleScroll();
+      return () => {
+        element.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('resize', handleScroll);
+      };
+    }, [handleScroll, container]);
+    return scrollPosition;
+  };
+  const useScrollAnimation = function (ref, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    const [isInView, setIsInView] = React.useState(false);
+    const [progress, setProgress] = React.useState(0);
+    React.useEffect(() => {
+      if (!ref.current) return;
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          setIsInView(entry.isIntersecting);
+          setProgress(entry.intersectionRatio);
+        });
+      }, {
+        threshold: options.threshold || 0,
+        rootMargin: options.rootMargin || '0px'
+      });
+      observer.observe(ref.current);
+      return () => observer.disconnect();
+    }, [ref, options.threshold, options.rootMargin]);
+    return {
+      isInView,
+      progress
+    };
+  };
+  const useSmoothScroll = () => {
+    return React.useCallback(function (element, offset) {
+      if (offset === void 0) {
+        offset = 0;
+      }
+      if (!element) return;
+      const targetPosition = element.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
+      });
+    }, []);
+  };
+  const useInfiniteScroll = function (callback, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    const [sentinel, setSentinel] = React.useState(null);
+    React.useEffect(() => {
+      if (!sentinel || options.isLoading) return;
+      const observer = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) callback();
+      }, {
+        threshold: options.threshold || 0
+      });
+      observer.observe(sentinel);
+      return () => observer.disconnect();
+    }, [sentinel, callback, options.threshold, options.isLoading]);
+    return {
+      sentinelRef: setSentinel
+    };
+  };
+  const useScrollDirection = function (threshold) {
+    if (threshold === void 0) {
+      threshold = 0;
+    }
+    const [scrollDirection, setScrollDirection] = React.useState('up');
+    const [lastScrollY, setLastScrollY] = React.useState(0);
+    const updateScrollDirection = React.useCallback(() => {
+      const scrollY = window.scrollY;
+      const direction = scrollY > lastScrollY ? 'down' : 'up';
+      if (Math.abs(scrollY - lastScrollY) > threshold && direction !== scrollDirection) {
+        setScrollDirection(direction);
+      }
+      setLastScrollY(scrollY > 0 ? scrollY : 0);
+    }, [scrollDirection, lastScrollY, threshold]);
+    React.useEffect(() => {
+      window.addEventListener('scroll', updateScrollDirection, {
+        passive: true
+      });
+      return () => {
+        window.removeEventListener('scroll', updateScrollDirection);
+      };
+    }, [updateScrollDirection]);
+    return scrollDirection;
+  };
+
+  function useWindowSize() {
+    const [size, setSize] = React.useState({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    React.useEffect(() => {
+      const handleResize = () => {
+        setSize({
+          width: window.innerWidth,
+          height: window.innerHeight
+        });
+      };
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return size;
+  }
+
   exports.Animation = Animation;
   exports.Button = Button;
   exports.Div = Div;
@@ -2580,10 +2875,22 @@
   exports.isProd = isProd;
   exports.isSSR = isSSR;
   exports.palette = palette;
+  exports.useActive = useActive;
+  exports.useClickOutside = useClickOutside;
+  exports.useFocus = useFocus;
+  exports.useHover = useHover;
+  exports.useInfiniteScroll = useInfiniteScroll;
+  exports.useKeyPress = useKeyPress;
   exports.useMount = useMount;
+  exports.useOnScreen = useOnScreen;
   exports.useResponsive = useResponsive;
   exports.useResponsiveContext = useResponsiveContext;
+  exports.useScroll = useScroll;
+  exports.useScrollAnimation = useScrollAnimation;
+  exports.useScrollDirection = useScrollDirection;
+  exports.useSmoothScroll = useSmoothScroll;
   exports.useTheme = useTheme;
+  exports.useWindowSize = useWindowSize;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/app-studio.umd.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-studio.umd.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"app-studio.umd.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}