@ornikar/kitt-universal 29.3.2 → 29.4.0

package/dist/index.es.web.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useContext, createContext, forwardRef, useMemo, cloneElement, useState, useRef, useEffect, Children, useReducer, useCallback, Fragment as Fragment$1 } from 'react';
+import { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, useCallback, 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 _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -11,10 +11,10 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 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, 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 { CSSTransition } from 'react-transition-group';
-import { 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 { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
 import { getDocumentAsync } from 'expo-document-picker';
@@ -22,7 +22,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, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS } from 'react-native-reanimated';
+import Animated$1, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing as Easing$1, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS } 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';
@@ -3698,15 +3698,41 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var spinningIcon = "kitt-u_spinningIcon_ssn8o83";
 function SpinningIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color;
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error("Invalid color passed to SpinningIcon: ".concat(String(color)));
+  }
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/jsx("div", {
-    className: spinningIcon,
+  var animationRef = useRef(new Animated.Value(0));
+  var rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    var animation = Animated.loop(Animated.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: Easing.linear,
+      useNativeDriver: "web" !== 'web'
+    }));
+    animation.start();
+    return function () {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
     children: clonedIcon
   });
 }
@@ -7279,7 +7305,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
         base: "body-s",
         color: deepPurpleColorPalette['grey.5'],
         children: helper
-      }) : null, shouldDisplayLimit ? /*#__PURE__*/jsx(Animated.View, {
+      }) : null, shouldDisplayLimit ? /*#__PURE__*/jsx(Animated$1.View, {
         style: limitContainerAnimatedStyle,
         children: /*#__PURE__*/jsxs(HStack$1, {
           alignItems: "center",
@@ -7289,7 +7315,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
             variant: "bold",
             color: deepPurpleColorPalette['grey.5'],
             children: [((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.length) || 0, "/", limit]
-          }), /*#__PURE__*/jsx(Animated.View, {
+          }), /*#__PURE__*/jsx(Animated$1.View, {
             style: checkIconAnimatedStyle,
             children: /*#__PURE__*/jsx(TypographyIcon, {
               icon: /*#__PURE__*/jsx(CheckCircleFillIcon, {}),
@@ -7360,17 +7386,17 @@ function ToggleAnimated(_ref) {
   useEffect(function () {
     marginLeftAnim.value = withTiming(value ? marginLeft : 0, {
       duration: 200,
-      easing: Easing.ease
+      easing: Easing$1.ease
     });
   }, [value, marginLeftAnim, marginLeft]);
   useEffect(function () {
     hoverAnim.value = withTiming(isHovered ? value ? -1 : 1 : 0, {
       duration: 200,
-      easing: Easing.ease
+      easing: Easing$1.ease
     });
     hoverBackgroundAnim.value = withTiming(isHovered ? 0 : 1, {
       duration: 200,
-      easing: Easing.ease
+      easing: Easing$1.ease
     });
   }, [isHovered, hoverAnim, value, hoverBackgroundAnim]);
   return /*#__PURE__*/jsx(View$1, {
@@ -7378,7 +7404,7 @@ function ToggleAnimated(_ref) {
     borderColor: "kitt.forms.toggle.".concat(variant, ".").concat(disabledState, ".").concat(state, ".wrapperBorder.color"),
     borderWidth: "kitt.forms.toggle.".concat(variant, ".").concat(disabledState, ".").concat(state, ".wrapperBorder.width"),
     borderRadius: "full",
-    children: /*#__PURE__*/jsx(Animated.View, {
+    children: /*#__PURE__*/jsx(Animated$1.View, {
       style: [hoverBackgroundTranslate, {
         borderColor: theme.kitt.forms.toggle[variant][disabledState][state].border.color,
         borderWidth: theme.kitt.forms.toggle[variant][disabledState][state].border.width,
@@ -7387,7 +7413,7 @@ function ToggleAnimated(_ref) {
         height: theme.kitt.forms.toggle[variant][disabledState][state].height[size],
         padding: size === 'medium' ? 3 : 4
       }],
-      children: /*#__PURE__*/jsx(Animated.View, {
+      children: /*#__PURE__*/jsx(Animated$1.View, {
         style: [buttonTranslate, hoverTranslate],
         children: /*#__PURE__*/jsx(View$1, {
           borderRadius: "full",
@@ -8165,7 +8191,7 @@ var useNativeAnimation = function (_ref) {
         transform: [{
           translateY: withTiming(-4, {
             duration: TRANSLATE_Y_DURATION,
-            easing: Easing.linear
+            easing: Easing$1.linear
           })
         }, {
           scale: withTiming(1, {
@@ -8179,7 +8205,7 @@ var useNativeAnimation = function (_ref) {
         transform: [{
           translateY: withTiming(-10, {
             duration: TRANSLATE_Y_DURATION,
-            easing: Easing.linear
+            easing: Easing$1.linear
           })
         }, {
           scale: withTiming(1.3, {
@@ -8192,7 +8218,7 @@ var useNativeAnimation = function (_ref) {
       transform: [{
         translateY: withTiming(0, {
           duration: TRANSLATE_Y_DURATION,
-          easing: Easing.linear
+          easing: Easing$1.linear
         })
       }, {
         scale: withTiming(1, {
@@ -8247,7 +8273,7 @@ function StaticMapMarker$1(_ref) {
     alignItems: "center",
     width: containerWidth,
     height: containerHeight,
-    children: [/*#__PURE__*/jsx(Animated.View, {
+    children: [/*#__PURE__*/jsx(Animated$1.View, {
       style: animatedStyle,
       children: variant === MapMarkerVariantEnum.MEETING_POINT ? /*#__PURE__*/jsx(SvgMeetingPointMarkerinline, {
         width: mpMarkerSvgWidth,
@@ -11140,7 +11166,7 @@ function Notification(_ref) {
   });
 }
 
-var AnimatedCircle = Animated.createAnimatedComponent(Circle$1);
+var AnimatedCircle = Animated$1.createAnimatedComponent(Circle$1);
 function AnimatedLoaderCircle(_ref) {
   var color = _ref.color,
     progress = _ref.progress;
@@ -11187,7 +11213,7 @@ function AnimatedBackgroundCircle() {
       y2 = _fillEasingFunction[3];
     progress.value = withDelay(delay, withTiming(1, {
       duration: circleBackgroundFillDuration,
-      easing: Easing.bezier(x1, y1, x2, y2)
+      easing: Easing$1.bezier(x1, y1, x2, y2)
     }));
   }, [progress, animation]);
   return /*#__PURE__*/jsx(Svg, {
@@ -11212,7 +11238,7 @@ function AnimatedFillCircleContainer(_ref) {
     var delay = animation.delay;
     progress.value = withDelay(delay, withRepeat(withTiming(1, {
       duration: duration,
-      easing: Easing.linear
+      easing: Easing$1.linear
     }), isInfinitAnimation$1));
   }, [progress, animation, duration]);
   var rotationStyles = useAnimatedStyle(function () {
@@ -11222,7 +11248,7 @@ function AnimatedFillCircleContainer(_ref) {
       }]
     };
   }, [progress]);
-  return /*#__PURE__*/jsx(Animated.View, {
+  return /*#__PURE__*/jsx(Animated$1.View, {
     style: [StyleSheet.absoluteFill, rotationStyles],
     children: children
   });
@@ -11248,7 +11274,7 @@ function AnimatedFilledCircle() {
       y2 = _fillEasingFunction[3];
     progress.value = withDelay(delay, withRepeat(withTiming(0.8, {
       duration: filledCircleFillDuration,
-      easing: Easing.bezier(x1, y1, x2, y2)
+      easing: Easing$1.bezier(x1, y1, x2, y2)
     }), isInfinitAnimation, shouldReverse));
   }, [progress, animation]);
   return /*#__PURE__*/jsx(AnimatedFillCircleContainer, {
@@ -11621,7 +11647,7 @@ function SkeletonContent(_ref) {
     if (isLoading) {
       sharedX.value = withRepeat(withTiming(1, {
         duration: theme.kitt.skeleton.animationDuration,
-        easing: Easing.inOut(Easing.ease)
+        easing: Easing$1.inOut(Easing$1.ease)
       }), -1);
     }
   }, [sharedX, width, isLoading, theme]);
@@ -11637,7 +11663,7 @@ function SkeletonContent(_ref) {
     width: "100%",
     backgroundColor: "kitt.skeleton.backgroundColor",
     borderColor: "kitt.skeleton.flareColor",
-    children: /*#__PURE__*/jsx(Animated.View, {
+    children: /*#__PURE__*/jsx(Animated$1.View, {
       style: [StyleSheet.absoluteFill, linearGradientStyle],
       children: /*#__PURE__*/jsx(LinearGradient, {
         colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
@@ -12767,7 +12793,7 @@ var typeToIcon = function (type) {
   }
 };
 
-var AnimatedView$1 = Animated.createAnimatedComponent(View);
+var AnimatedView$1 = Animated$1.createAnimatedComponent(View);
 function ToastComponent(_ref) {
   var title = _ref.title,
     description = _ref.description,
@@ -12802,7 +12828,7 @@ function ToastComponent(_ref) {
       width.value = 100;
       width.value = withTiming(0, {
         duration: toastTimeout,
-        easing: Easing.bezier(0, 0, 0.58, 1)
+        easing: Easing$1.bezier(0, 0, 0.58, 1)
       }, function () {
         runOnJS(handleHideToast)();
       });
@@ -13371,7 +13397,7 @@ function useStepAnimations(_ref) {
   };
 }
 
-var AnimatedView = Animated.createAnimatedComponent(View);
+var AnimatedView = Animated$1.createAnimatedComponent(View);
 function BorderlessStep(_ref) {
   var description = _ref.description,
     title = _ref.title,