@ornikar/kitt-universal 31.1.1 → 31.2.0

package/dist/index-node-22.17.es.web.css

@@ -1,4 +1,12 @@
 .kitt-u_overflowHidden_otm3u3{overflow:hidden;}
+.kitt-u_contentAnimationEnter_c11xxy4r{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);}
+.kitt-u_contentAnimatioEnterActive_cl52117{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}
+.kitt-u_contentAnimatioExit_cyjczep{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);}
+.kitt-u_contentAnimatioExitActive_cpsy3dt{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}
+.kitt-u_opacityEnter_o1ae40dx{opacity:0;}
+.kitt-u_opacityEnterActive_o1t4vl7b{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
+.kitt-u_opacityExit_ogyytm1{opacity:1;}
+.kitt-u_opacityExitActive_o18xvk52{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_contentAnimationEnter_c1i0gle8{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);}
 .kitt-u_contentAnimatioEnterActive_c1jmfkjw{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}
 .kitt-u_contentAnimatioExit_cwjstxl{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);}

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

@@ -1,12 +1,11 @@
-import { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, useCallback, Fragment as Fragment$1 } from 'react';
+import { 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 } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
-import { Animated, Easing, StyleSheet, Modal, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
+import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
-import Animated$1, { useAnimatedStyle, withTiming, Easing as Easing$1, runOnJS, useSharedValue, withSpring, interpolateColor, useAnimatedProps, withDelay, withRepeat, interpolate, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { CSSTransition } from 'react-transition-group';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
@@ -15,6 +14,7 @@ import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
+import Animated$1, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing as Easing$1, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { useFloating, autoUpdate, offset, autoPlacement, shift, arrow } from '@floating-ui/react-dom';
@@ -3642,6 +3642,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,
@@ -3714,6 +3787,7 @@ const Button = /*#__PURE__*/forwardRef(({
   hrefAttrs,
   withBadge,
   badgeCount,
+  timerAttrs,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3758,7 +3832,7 @@ const Button = /*#__PURE__*/forwardRef(({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsx(AnimatedContainer$2, {
+    }) => /*#__PURE__*/jsxs(AnimatedContainer$2, {
       animatedStyles: animatedStyles,
       type: type,
       isHovered: isHovered || isHoveredInternal,
@@ -3768,7 +3842,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, {
@@ -3790,7 +3866,7 @@ const Button = /*#__PURE__*/forwardRef(({
           isHovered: isHovered,
           isPressed: isPressed
         })]
-      })
+      })]
     })
   });
 });
@@ -4248,161 +4324,85 @@ const CardModalRotationContainer = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 
-function NativeOpacityAnimation({
-  visible,
-  children,
-  onExited
-}) {
-  const theme = useTheme();
-  const hasRunAnimationRef = useRef(false);
-  function handleAnimationFinished() {
-    if (visible) {
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) {
-      onExited();
-    }
-  }
-  const opacityStyle = useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.cardModal.animation.overlay;
-    const {
-      x1,
-      y1,
-      x2,
-      y2
-    } = easing;
-    return {
-      opacity: withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Easing$1.bezier(x1, y1, x2, y2)
-      }, isFinished => {
-        if (!isFinished) return;
-        runOnJS(handleAnimationFinished)();
-      })
-    };
-  }, [visible]);
-  return /*#__PURE__*/jsx(Animated$1.View, {
-    style: [StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeRotationAnimation({
-  visible,
-  children,
-  onEntered,
-  onExited
-}) {
-  const theme = useTheme();
-  const hasRunAnimationRef = useRef(false);
-  const rotation = useSharedValue(0.8);
-  function handleAnimationFinished() {
-    if (visible) {
-      if (onEntered) onEntered();
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) onExited();
-  }
-  const animatedStyle = useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.cardModal.animation.content;
-    const {
-      x1,
-      y1,
-      x2,
-      y2
-    } = easing;
-    rotation.value = withTiming(visible ? 0 : 5, {
-      duration,
-      easing: Easing$1.bezier(x1, y1, x2, y2)
-    }, isFinished => {
-      if (!isFinished) return;
-      runOnJS(handleAnimationFinished)();
-    });
-    return {
-      opacity: withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Easing$1.bezier(x1, y1, x2, y2)
-      }),
-      transform: [{
-        scale: withTiming(visible ? 1 : 0.8, {
-          duration,
-          easing: Easing$1.bezier(x1, y1, x2, y2)
-        })
-      }, {
-        rotateZ: `${rotation.value}deg`
-      }]
-    };
-  }, [rotation, visible]);
-  return /*#__PURE__*/jsx(Animated$1.View, {
-    style: [{
-      flexShrink: 1
-    }, animatedStyle],
-    children: children
-  });
-}
-
+const contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
+const contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
+const contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
+const contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
+const contentAnimationClassNames$1 = {
+  appear: contentAnimationEnter$1,
+  appearActive: contentAnimatioEnterActive$1,
+  enter: contentAnimationEnter$1,
+  enterActive: contentAnimatioEnterActive$1,
+  exit: contentAnimatioExit$1,
+  exitActive: contentAnimatioExitActive$1
+};
+const opacityEnter$2 = "kitt-u_opacityEnter_o1ae40dx";
+const opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
+const opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
+const opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
+const opacityClassNames$2 = {
+  appear: opacityEnter$2,
+  appearActive: opacityEnterActive$2,
+  enter: opacityEnter$2,
+  enterActive: opacityEnterActive$2,
+  exit: opacityExit$2,
+  exitActive: opacityExitActive$2
+};
 function CardModalAnimation({
-  visible,
   children,
+  appear = true,
+  visible,
+  unmountOnExit = true,
+  isAnimationEnabled = true,
   onEnter,
   onEntered,
   onExit,
   onExited,
-  onClose
+  onClose,
+  ...props
 }) {
-  const [isModalVisible, setIsModalVisible] = useState(visible);
-  const [isContentVisible, setIsContentVisible] = useState(false);
-  const handleAnimationExited = () => {
-    setIsModalVisible(false);
-    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  const overlayRef = useRef(null);
+  const contentRef = useRef(null);
+  const theme = useTheme();
+  const {
+    animation
+  } = theme.kitt.cardModal;
+  const sharedProps = {
+    in: visible,
+    appear,
+    unmountOnExit
   };
-  useEffect(() => {
-    if (!(!visible && isContentVisible)) return;
-    if (onExit) onExit();
-    setIsContentVisible(false);
-  }, [visible, isContentVisible, onExit]);
-  return /*#__PURE__*/jsx(Modal, {
-    transparent: true,
-    supportedOrientations: ['landscape', 'portrait'],
-    visible: isModalVisible,
-    onShow: () => {
-      if (onEnter) onEnter();
-      setIsContentVisible(true);
-    },
-    onDismiss: () => {
-      if (onExited) onExited();
-    },
-    children: /*#__PURE__*/jsxs(View
-    // This is an ugly workaround to make the Modal calculate its height correctly on Android.
-    // This ugly workaround is used in FullScreenModalAnimation and DialogModalAnimation as well
-    // TODO [expo@>=53]: Check if still needed
-    , {
-      height: undefined,
-      position: "relative",
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        children: /*#__PURE__*/jsx(Overlay, {
-          onPress: onClose
-        })
-      }), /*#__PURE__*/jsx(CardModalRotationContainer, {
-        children: /*#__PURE__*/jsx(NativeRotationAnimation, {
-          visible: isContentVisible,
-          onExited: handleAnimationExited,
-          onEntered: onEntered,
-          children: children
-        })
-      })]
-    })
+  return /*#__PURE__*/jsxs(View, {
+    ...props,
+    height: "100%",
+    justifyContent: "center",
+    children: [/*#__PURE__*/jsx(CSSTransition, {
+      ...sharedProps,
+      nodeRef: overlayRef,
+      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+      classNames: opacityClassNames$2,
+      children: /*#__PURE__*/jsx(Overlay, {
+        ref: overlayRef,
+        onPress: onClose
+      })
+    }), /*#__PURE__*/jsx(CSSTransition, {
+      ...sharedProps,
+      nodeRef: contentRef,
+      timeout: isAnimationEnabled ? animation.content.duration : 0,
+      classNames: contentAnimationClassNames$1,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(CardModalRotationContainer, {
+        ref: contentRef,
+        alignItems: "center",
+        margin: "auto",
+        children: children
+      })
+    })]
   });
 }