@ornikar/kitt-universal 29.2.0 → 29.3.0

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

@@ -29,7 +29,5 @@
 .kitt-u_enterActive_e1jmsjrm{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
 .kitt-u_exit_e1mwnccz{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
 .kitt-u_exitActive_e1004d1h{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
-.kitt-u_skeleton_sc3upcl{background-color:#F1ECE4;position:relative;overflow:hidden;height:100%;width:100%;}@-webkit-keyframes flareTranslate-kitt-u_skeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes flareTranslate-kitt-u_skeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}.kitt-u_skeleton_sc3upcl::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-image:linear-gradient( -90deg, #F1ECE4, #EAE3D6 50%, #F1ECE4 100% );-webkit-animation:1s ease-in-out infinite;animation:1s ease-in-out infinite;-webkit-animation-name:flareTranslate-kitt-u_skeleton_sc3upcl;animation-name:flareTranslate-kitt-u_skeleton_sc3upcl;}
-.kitt-u_skeletonWithoutAnimation_s12gop2o::after{background-image:none;-webkit-animation:none;animation:none;}
 .kitt-u_displayUnderline_dch42t > *{-webkit-text-decoration:underline;text-decoration:underline;}.kitt-u_displayUnderline_dch42t > *:hover,.kitt-u_displayUnderline_dch42t > *:active,.kitt-hover .kitt-u_displayUnderline_dch42t > *{-webkit-text-decoration:none;text-decoration:none;}
 .kitt-u_displayUnderlineWhenHovered_d80w0t7 > *{-webkit-text-decoration:none;text-decoration:none;}.kitt-u_displayUnderlineWhenHovered_d80w0t7 > *:hover,.kitt-u_displayUnderlineWhenHovered_d80w0t7 > *:active,.kitt-hover .kitt-u_displayUnderlineWhenHovered_d80w0t7 > *{-webkit-text-decoration:underline;text-decoration:underline;}

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

@@ -14,10 +14,11 @@ 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, runOnJS, interpolate } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing, 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';
+import { LinearGradient } from 'expo-linear-gradient';
 import { makeDecorator } from '@storybook/addons';
 
 const View = View$1;
@@ -2295,7 +2296,7 @@ const shadows = {
 
 const skeletonBackgroundColor = deepPurpleColorPalette['beige.2'];
 const skeletonFlareColor = deepPurpleColorPalette['beige.3'];
-const skeleton$1 = {
+const skeleton = {
   backgroundColor: skeletonBackgroundColor,
   flareColor: skeletonFlareColor,
   animationDuration: 1000,
@@ -2635,7 +2636,7 @@ const theme = {
   pageLoader,
   picker,
   shadows,
-  skeleton: skeleton$1,
+  skeleton,
   tabBar,
   tag,
   sticker,
@@ -11432,13 +11433,48 @@ function SegmentedProgressBar({
   });
 }
 
-const skeleton = "kitt-u_skeleton_sc3upcl";
-const skeletonWithoutAnimation = "kitt-u_skeletonWithoutAnimation_s12gop2o";
 function SkeletonContent({
-  isLoading
+  isLoading,
+  width
 }) {
-  return /*#__PURE__*/jsx("div", {
-    className: (skeleton ) + " " + ((!isLoading ? skeletonWithoutAnimation : undefined) || "")
+  const theme = useTheme();
+  const sharedX = useSharedValue(0);
+  useEffect(() => {
+    if (isLoading) {
+      sharedX.value = withRepeat(withTiming(1, {
+        duration: theme.kitt.skeleton.animationDuration,
+        easing: Easing.inOut(Easing.ease)
+      }), -1);
+    }
+  }, [sharedX, width, isLoading, theme]);
+  const linearGradientStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateX: interpolate(sharedX.value, [0, 1], [-width, width])
+      }]
+    };
+  }, [sharedX, width]);
+  return /*#__PURE__*/jsx(View, {
+    height: "100%",
+    width: "100%",
+    backgroundColor: "kitt.skeleton.backgroundColor",
+    borderColor: "kitt.skeleton.flareColor",
+    children: /*#__PURE__*/jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, linearGradientStyle],
+      children: /*#__PURE__*/jsx(LinearGradient, {
+        colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
+        locations: [0.1, 0.5, 0.9],
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 1,
+          y: 0
+        },
+        style: StyleSheet.absoluteFill
+      })
+    })
   });
 }