@ornikar/kitt-universal 29.0.0 → 29.2.0

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

@@ -25,7 +25,6 @@
 .kitt-u_opacityEnterActive_o2w8t0i{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,1,0,1);transition:opacity 250ms cubic-bezier(0.42,1,0,1);}
 .kitt-u_opacityExit_o14r8iix{opacity:1;}
 .kitt-u_opacityExitActive_oim72y2{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,1,0,1);transition:opacity 250ms cubic-bezier(0.42,1,0,1);}
-.kitt-u_pageLoaderContainer_ptkwz2j{width:60px;height:60px;-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:0;}}@keyframes PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:33.929200658769766px;}}@keyframes PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:33.929200658769766px;}}@-webkit-keyframes PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.kitt-u_pageLoaderContainer_ptkwz2j circle,.kitt-u_pageLoaderContainer_ptkwz2j g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_pageLoaderContainer_ptkwz2j g[data-large-loader='base'] circle{-webkit-animation:1000ms cubic-bezier(0.39,0.575,0.565,1) 500ms forwards;animation:1000ms cubic-bezier(0.39,0.575,0.565,1) 500ms forwards;-webkit-animation-name:PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j;animation-name:PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j;}.kitt-u_pageLoaderContainer_ptkwz2j g[data-large-loader='fill']{-webkit-animation:1800ms linear 500ms infinite;animation:1800ms linear 500ms infinite;-webkit-animation-name:PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;animation-name:PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;}.kitt-u_pageLoaderContainer_ptkwz2j g[data-large-loader='fill'] circle{-webkit-animation:1800ms cubic-bezier(0.39,0.575,0.565,1) 500ms infinite alternate,2160ms linear 500ms infinite;animation:1800ms cubic-bezier(0.39,0.575,0.565,1) 500ms infinite alternate,2160ms linear 500ms infinite;-webkit-animation-name:PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;animation-name:PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;}
 .kitt-u_enter_ereraf{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;}
 .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;}

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

@@ -18,6 +18,7 @@ const jsApiLoader = require('@googlemaps/js-api-loader');
 const libphonenumberJs = require('libphonenumber-js');
 const Animated = require('react-native-reanimated');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
+const Svg = require('react-native-svg');
 const reactDom$1 = require('@floating-ui/react-dom');
 const addons = require('@storybook/addons');
 
@@ -25,6 +26,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
+const Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
 
 const View = nativeBase.View;
 const ScrollView = nativeBase.ScrollView;
@@ -2321,6 +2323,11 @@ const skeleton$1 = {
   }
 };
 
+const sticker = {
+  borderRadius: 2,
+  padding: 4
+};
+
 const tabBar = {
   underline: {
     default: {
@@ -2639,6 +2646,7 @@ const theme = {
   skeleton: skeleton$1,
   tabBar,
   tag,
+  sticker,
   tooltip,
   typography,
   fullscreenModal,
@@ -9188,6 +9196,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         tag: {
           borderRadius: theme.tag.borderRadius
         },
+        sticker: {
+          borderRadius: theme.sticker.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -9980,6 +9991,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        sticker: {
+          padding: theme.sticker.padding
+        },
         toggle: {
           primary: {
             enabled: {
@@ -10947,49 +10961,160 @@ function Notification({
   });
 }
 
-const pageLoaderContainer = "kitt-u_pageLoaderContainer_ptkwz2j";
-function PageLoader() {
+const AnimatedCircle = Animated__default.createAnimatedComponent(Svg.Circle);
+function AnimatedLoaderCircle({
+  color,
+  progress
+}) {
   const theme = useTheme();
   const {
+    strokeWidth,
+    size
+  } = theme.kitt.pageLoader;
+  const centerCoord = size * 0.5;
+  const circlePerimeter = 2 * Math.PI * (size * 0.5 - strokeWidth);
+  const strokeAnimation = Animated.useAnimatedProps(() => {
+    return {
+      strokeDashoffset: circlePerimeter - circlePerimeter * progress.value
+    };
+  }, [progress, circlePerimeter]);
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedCircle, {
+    "transform-origin": "center center",
+    strokeWidth: strokeWidth,
+    stroke: color,
+    strokeLinecap: "round",
+    cx: centerCoord,
+    cy: centerCoord,
+    r: centerCoord - strokeWidth,
+    fill: "none",
+    strokeDasharray: circlePerimeter,
+    animatedProps: strokeAnimation
+  });
+}
+
+function AnimatedBackgroundCircle() {
+  const theme = useTheme();
+  const progress = Animated.useSharedValue(0);
+  const {
+    animation,
     colors,
+    size
+  } = theme.kitt.pageLoader;
+  react.useEffect(() => {
+    const {
+      delay,
+      circleBackgroundFillDuration,
+      fillEasingFunction
+    } = animation;
+    const [x1, y1, x2, y2] = fillEasingFunction;
+    progress.value = Animated.withDelay(delay, Animated.withTiming(1, {
+      duration: circleBackgroundFillDuration,
+      easing: Animated.Easing.bezier(x1, y1, x2, y2)
+    }));
+  }, [progress, animation]);
+  return /*#__PURE__*/jsxRuntime.jsx(Svg__default, {
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`,
+    children: /*#__PURE__*/jsxRuntime.jsx(AnimatedLoaderCircle, {
+      color: colors.base,
+      progress: progress
+    })
+  });
+}
+
+const isInfinitAnimation$1 = -1;
+function AnimatedFillCircleContainer({
+  children,
+  duration
+}) {
+  const theme = useTheme();
+  const progress = Animated.useSharedValue(0);
+  const {
+    animation
+  } = theme.kitt.pageLoader;
+  react.useEffect(() => {
+    const {
+      delay
+    } = animation;
+    progress.value = Animated.withDelay(delay, Animated.withRepeat(Animated.withTiming(1, {
+      duration,
+      easing: Animated.Easing.linear
+    }), isInfinitAnimation$1));
+  }, [progress, animation, duration]);
+  const rotationStyles = Animated.useAnimatedStyle(() => {
+    return {
+      transform: [{
+        rotate: `${360 * progress.value}deg`
+      }]
+    };
+  }, [progress]);
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [reactNative.StyleSheet.absoluteFill, rotationStyles],
+    children: children
+  });
+}
+
+const isInfinitAnimation = -1;
+const shouldReverse = true;
+function AnimatedFilledCircle() {
+  const theme = useTheme();
+  const progress = Animated.useSharedValue(0);
+  const {
     size,
-    strokeWidth
+    animation,
+    colors
   } = theme.kitt.pageLoader;
-  const center = size * 0.5;
-  const radius = center - strokeWidth;
-  const circlePerimeter = 2 * Math.PI * radius;
-  const sharedProps = {
-    cx: center,
-    cy: center,
-    r: radius,
-    fill: 'none',
-    strokeWidth,
-    strokeDasharray: circlePerimeter,
-    strokeDashoffset: circlePerimeter,
-    strokeLinecap: 'round'
-  };
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: pageLoaderContainer,
-    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
-      width: size,
-      height: size,
-      children: [/*#__PURE__*/jsxRuntime.jsx("g", {
-        "data-large-loader": "base",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          ...sharedProps,
-          stroke: colors.base
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx("g", {
-        "data-large-loader": "fill",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          ...sharedProps,
-          stroke: colors.fill
+  react.useEffect(() => {
+    const {
+      delay,
+      filledCircleFillDuration,
+      fillEasingFunction
+    } = animation;
+    const [x1, y1, x2, y2] = fillEasingFunction;
+    progress.value = Animated.withDelay(delay, Animated.withRepeat(Animated.withTiming(0.8, {
+      duration: filledCircleFillDuration,
+      easing: Animated.Easing.bezier(x1, y1, x2, y2)
+    }), isInfinitAnimation, shouldReverse));
+  }, [progress, animation]);
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedFillCircleContainer, {
+    duration: animation.groupFilledCircleRotationDuration,
+    children: /*#__PURE__*/jsxRuntime.jsx(AnimatedFillCircleContainer, {
+      duration: animation.filledCircleRotationDuration,
+      children: /*#__PURE__*/jsxRuntime.jsx(Svg__default, {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        children: /*#__PURE__*/jsxRuntime.jsx(AnimatedLoaderCircle, {
+          color: colors.fill,
+          progress: progress
         })
-      })]
+      })
     })
   });
 }
 
+function PageLoader() {
+  const sharedTransformStyle = {
+    style: {
+      /* Needed to make the animation starting from the top of the circles */
+      transform: [{
+        rotate: '90deg'
+      }, {
+        scale: -1
+      }]
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    position: "relative",
+    height: "kitt.pageLoader.size",
+    width: "kitt.pageLoader.size",
+    _ios: sharedTransformStyle,
+    _android: sharedTransformStyle,
+    children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedBackgroundCircle, {}), /*#__PURE__*/jsxRuntime.jsx(AnimatedFilledCircle, {})]
+  });
+}
+
 function getBackgroundColor({
   isSelected,
   isHighlighted,
@@ -11611,6 +11736,98 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
+const getTypographySize = size => {
+  switch (size) {
+    case 'small':
+      return 'content-caps-xs';
+    case 'medium':
+      return 'content-caps-m';
+    case 'large':
+    default:
+      return 'content-caps-l';
+  }
+};
+function Sticker({
+  label,
+  color = 'linen',
+  size = 'medium'
+}) {
+  const kittTheme = useKittTheme();
+  const colorMatching = {
+    green: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.green-grass'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.green-apple']
+    },
+    darkGreen: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.green-pine'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.blue-sky']
+    },
+    blue: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.blue-sky'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.green-pine']
+    },
+    darkBlue: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.blue-electric'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.3']
+    },
+    red: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.brick'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.sun']
+    },
+    orange: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.orange'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.2']
+    },
+    pink: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.pink'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.brick']
+    },
+    gold: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.gold'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.1']
+    },
+    cream: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.1'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.brick']
+    },
+    linen: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.3'],
+      font: kittTheme.kitt.palettes.deepPurple['deepPurple.8']
+    },
+    promo: {
+      background: kittTheme.kitt.palettes.deepPurple['lightning.5'],
+      font: kittTheme.kitt.palettes.deepPurple['lightning.7']
+    },
+    darkPromo: {
+      background: kittTheme.kitt.palettes.deepPurple['lightning.7'],
+      font: kittTheme.kitt.palettes.deepPurple['lightning.5']
+    },
+    disabled: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.6'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.2']
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(HStack, {
+    alignSelf: "flex-start",
+    borderRadius: "kitt.sticker.borderRadius",
+    padding: "kitt.sticker.padding",
+    backgroundColor: colorMatching[color].background,
+    space: "kitt.1",
+    alignItems: "center",
+    maxWidth: "100%",
+    children: /*#__PURE__*/jsxRuntime.jsx(View, {
+      flexShrink: 1,
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: getTypographySize(size),
+        color: colorMatching[color].font,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: label
+      })
+    })
+  });
+}
+
 function Flex({
   direction,
   wrap = 'wrap',
@@ -13234,6 +13451,7 @@ exports.Skeleton = Skeleton;
 exports.SpinningIcon = SpinningIcon;
 exports.Stack = Stack;
 exports.StaticMap = StaticMap;
+exports.Sticker = Sticker;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;