@ornikar/kitt-universal 31.1.0 → 31.2.0

package/dist/index-node-22.17.es.mjs

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
+import React, { useContext, createContext, forwardRef, useMemo, cloneElement, useState, useRef, useCallback, useLayoutEffect, useEffect, Children, useReducer, Fragment as Fragment$1 } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useBreakpointValue as useBreakpointValue$1, useSx, Text, Input, NativeBaseProvider, extendTheme, useMediaQuery } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -3633,6 +3633,79 @@ function ButtonContent({
   });
 }
 
+function ButtonGauge({
+  duration,
+  running,
+  onEnded
+}) {
+  const [translate, setTranslate] = useState(100);
+  const startTimeRef = useRef(0);
+  const pauseTimeRef = useRef(0);
+  const rafRef = useRef(undefined);
+  const distance = 100;
+  const draw = useCallback(timestamp => {
+    const timeElapsedSinceStart = timestamp - startTimeRef.current;
+    // Since the time between frame is not reliable and regular, we have to
+    // limit the progress to prevent overflows
+    const safeProgress = Math.min(distance * timeElapsedSinceStart / duration, distance);
+    setTranslate(safeProgress);
+    if (safeProgress < distance) {
+      if (!rafRef) return;
+      rafRef.current = requestAnimationFrame(draw);
+      return;
+    }
+    onEnded();
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  useLayoutEffect(() => {
+    if (running) {
+      // Resuming from pause
+      if (pauseTimeRef.current > 0) {
+        startTimeRef.current += global.performance.now() - pauseTimeRef.current;
+        draw(global.performance.now());
+        return;
+      }
+
+      // First launch
+      startTimeRef.current = global.performance.now();
+      draw(startTimeRef.current);
+    }
+
+    // On pause
+    if (!running && rafRef.current) {
+      pauseTimeRef.current = global.performance.now();
+      cancelAnimationFrame(rafRef.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [running]);
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsx(View, {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    overflow: "hidden",
+    alignItems: "flex-end",
+    borderRadius: "kitt.button.borderRadius",
+    children: /*#__PURE__*/jsx(View, {
+      width: `${translate}%`,
+      height: "100%",
+      backgroundColor: "kitt.palettes.deepPurple['white-alpha.20']"
+    })
+  });
+}
+
 function ButtonPadding({
   children,
   size,
@@ -3723,6 +3796,7 @@ const Button = /*#__PURE__*/forwardRef(({
   hrefAttrs,
   withBadge,
   badgeCount,
+  timerAttrs,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3770,7 +3844,7 @@ const Button = /*#__PURE__*/forwardRef(({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsx(AnimatedContainer$2, {
+    }) => /*#__PURE__*/jsxs(AnimatedContainer$2, {
       animatedStyles: animatedStyles,
       type: type,
       isHovered: isHovered || isHoveredInternal,
@@ -3780,7 +3854,9 @@ const Button = /*#__PURE__*/forwardRef(({
       size: size,
       isIconOnly: isIconOnly,
       isStretch: stretch,
-      children: /*#__PURE__*/jsxs(ButtonPadding, {
+      children: [timerAttrs ? /*#__PURE__*/jsx(ButtonGauge, {
+        ...timerAttrs
+      }) : null, /*#__PURE__*/jsxs(ButtonPadding, {
         size: size,
         isIconOnly: isIconOnly,
         children: [/*#__PURE__*/jsx(ButtonContent, {
@@ -3802,7 +3878,7 @@ const Button = /*#__PURE__*/forwardRef(({
           isHovered: isHovered,
           isPressed: isPressed
         })]
-      })
+      })]
     })
   });
 });
@@ -4319,7 +4395,7 @@ function NativeOpacityAnimation$2({
         runOnJS(handleAnimationFinished)();
       })
     };
-  }, [visible]);
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [StyleSheet.absoluteFillObject, opacityStyle],
     children: children
@@ -4374,11 +4450,9 @@ function NativeRotationAnimation$1({
         rotateZ: `${rotation.value}deg`
       }]
     };
-  }, [rotation, visible]);
+  });
   return /*#__PURE__*/jsx(Animated.View, {
-    style: [{
-      flexShrink: 1
-    }, animatedStyle],
+    style: [animatedStyle],
     children: children
   });
 }
@@ -11686,7 +11760,7 @@ function NavigationBottomSheet({
   snapPoints,
   maxDynamicContentSize,
   isVisible,
-  isExpanded,
+  isExpanded = false,
   onClose
 }) {
   const bottomSheetRef = useBottomSheet();
@@ -11698,7 +11772,8 @@ function NavigationBottomSheet({
     }
   }, [bottomSheetRef, isVisible]);
   useEffect(() => {
-    if (isVisible && isExpanded) {
+    if (!isVisible) return;
+    if (isExpanded) {
       bottomSheetRef.current?.expand();
     } else {
       bottomSheetRef.current?.collapse();