@ornikar/kitt-universal 31.1.0 → 31.2.0

package/dist/index-node-22.17.cjs.js

@@ -3657,6 +3657,79 @@ function ButtonContent({
   });
 }
 
+function ButtonGauge({
+  duration,
+  running,
+  onEnded
+}) {
+  const [translate, setTranslate] = React.useState(100);
+  const startTimeRef = React.useRef(0);
+  const pauseTimeRef = React.useRef(0);
+  const rafRef = React.useRef(undefined);
+  const distance = 100;
+  const draw = React.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
+  []);
+  React.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]);
+  React.useEffect(() => {
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    overflow: "hidden",
+    alignItems: "flex-end",
+    borderRadius: "kitt.button.borderRadius",
+    children: /*#__PURE__*/jsxRuntime.jsx(View, {
+      width: `${translate}%`,
+      height: "100%",
+      backgroundColor: "kitt.palettes.deepPurple['white-alpha.20']"
+    })
+  });
+}
+
 function ButtonPadding({
   children,
   size,
@@ -3747,6 +3820,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   hrefAttrs,
   withBadge,
   badgeCount,
+  timerAttrs,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3794,7 +3868,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsxRuntime.jsx(AnimatedContainer$2, {
+    }) => /*#__PURE__*/jsxRuntime.jsxs(AnimatedContainer$2, {
       animatedStyles: animatedStyles,
       type: type,
       isHovered: isHovered || isHoveredInternal,
@@ -3804,7 +3878,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
       size: size,
       isIconOnly: isIconOnly,
       isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsxs(ButtonPadding, {
+      children: [timerAttrs ? /*#__PURE__*/jsxRuntime.jsx(ButtonGauge, {
+        ...timerAttrs
+      }) : null, /*#__PURE__*/jsxRuntime.jsxs(ButtonPadding, {
         size: size,
         isIconOnly: isIconOnly,
         children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
@@ -3826,7 +3902,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
           isHovered: isHovered,
           isPressed: isPressed
         })]
-      })
+      })]
     })
   });
 });
@@ -4343,7 +4419,7 @@ function NativeOpacityAnimation$2({
         Animated.runOnJS(handleAnimationFinished)();
       })
     };
-  }, [visible]);
+  });
   return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
     style: [reactNative.StyleSheet.absoluteFillObject, opacityStyle],
     children: children
@@ -4398,11 +4474,9 @@ function NativeRotationAnimation$1({
         rotateZ: `${rotation.value}deg`
       }]
     };
-  }, [rotation, visible]);
+  });
   return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [{
-      flexShrink: 1
-    }, animatedStyle],
+    style: [animatedStyle],
     children: children
   });
 }
@@ -11710,7 +11784,7 @@ function NavigationBottomSheet({
   snapPoints,
   maxDynamicContentSize,
   isVisible,
-  isExpanded,
+  isExpanded = false,
   onClose
 }) {
   const bottomSheetRef = useBottomSheet();
@@ -11722,7 +11796,8 @@ function NavigationBottomSheet({
     }
   }, [bottomSheetRef, isVisible]);
   React.useEffect(() => {
-    if (isVisible && isExpanded) {
+    if (!isVisible) return;
+    if (isExpanded) {
       bottomSheetRef.current?.expand();
     } else {
       bottomSheetRef.current?.collapse();