@ornikar/kitt-universal 29.0.0 → 29.2.0

package/dist/index-node-22.17.es.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.es.web.mjs

@@ -5,7 +5,7 @@ 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 { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
+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';
@@ -14,8 +14,9 @@ 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, runOnJS, withDelay, interpolate } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing, useAnimatedProps, withDelay, withRepeat, runOnJS, interpolate } 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 { makeDecorator } from '@storybook/addons';
 
@@ -2314,6 +2315,11 @@ const skeleton$1 = {
   }
 };
 
+const sticker = {
+  borderRadius: 2,
+  padding: 4
+};
+
 const tabBar = {
   underline: {
     default: {
@@ -2632,6 +2638,7 @@ const theme = {
   skeleton: skeleton$1,
   tabBar,
   tag,
+  sticker,
   tooltip,
   typography,
   fullscreenModal,
@@ -9181,6 +9188,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         tag: {
           borderRadius: theme.tag.borderRadius
         },
+        sticker: {
+          borderRadius: theme.sticker.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -9973,6 +9983,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        sticker: {
+          padding: theme.sticker.padding
+        },
         toggle: {
           primary: {
             enabled: {
@@ -10940,49 +10953,160 @@ function Notification({
   });
 }
 
-const pageLoaderContainer = "kitt-u_pageLoaderContainer_ptkwz2j";
-function PageLoader() {
+const AnimatedCircle = Animated.createAnimatedComponent(Circle$1);
+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 = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: circlePerimeter - circlePerimeter * progress.value
+    };
+  }, [progress, circlePerimeter]);
+  return /*#__PURE__*/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 = useSharedValue(0);
+  const {
+    animation,
     colors,
+    size
+  } = theme.kitt.pageLoader;
+  useEffect(() => {
+    const {
+      delay,
+      circleBackgroundFillDuration,
+      fillEasingFunction
+    } = animation;
+    const [x1, y1, x2, y2] = fillEasingFunction;
+    progress.value = withDelay(delay, withTiming(1, {
+      duration: circleBackgroundFillDuration,
+      easing: Easing.bezier(x1, y1, x2, y2)
+    }));
+  }, [progress, animation]);
+  return /*#__PURE__*/jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`,
+    children: /*#__PURE__*/jsx(AnimatedLoaderCircle, {
+      color: colors.base,
+      progress: progress
+    })
+  });
+}
+
+const isInfinitAnimation$1 = -1;
+function AnimatedFillCircleContainer({
+  children,
+  duration
+}) {
+  const theme = useTheme();
+  const progress = useSharedValue(0);
+  const {
+    animation
+  } = theme.kitt.pageLoader;
+  useEffect(() => {
+    const {
+      delay
+    } = animation;
+    progress.value = withDelay(delay, withRepeat(withTiming(1, {
+      duration,
+      easing: Easing.linear
+    }), isInfinitAnimation$1));
+  }, [progress, animation, duration]);
+  const rotationStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        rotate: `${360 * progress.value}deg`
+      }]
+    };
+  }, [progress]);
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFill, rotationStyles],
+    children: children
+  });
+}
+
+const isInfinitAnimation = -1;
+const shouldReverse = true;
+function AnimatedFilledCircle() {
+  const theme = useTheme();
+  const progress = 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__*/jsx("div", {
-    className: pageLoaderContainer,
-    children: /*#__PURE__*/jsxs("svg", {
-      width: size,
-      height: size,
-      children: [/*#__PURE__*/jsx("g", {
-        "data-large-loader": "base",
-        children: /*#__PURE__*/jsx("circle", {
-          ...sharedProps,
-          stroke: colors.base
-        })
-      }), /*#__PURE__*/jsx("g", {
-        "data-large-loader": "fill",
-        children: /*#__PURE__*/jsx("circle", {
-          ...sharedProps,
-          stroke: colors.fill
+  useEffect(() => {
+    const {
+      delay,
+      filledCircleFillDuration,
+      fillEasingFunction
+    } = animation;
+    const [x1, y1, x2, y2] = fillEasingFunction;
+    progress.value = withDelay(delay, withRepeat(withTiming(0.8, {
+      duration: filledCircleFillDuration,
+      easing: Easing.bezier(x1, y1, x2, y2)
+    }), isInfinitAnimation, shouldReverse));
+  }, [progress, animation]);
+  return /*#__PURE__*/jsx(AnimatedFillCircleContainer, {
+    duration: animation.groupFilledCircleRotationDuration,
+    children: /*#__PURE__*/jsx(AnimatedFillCircleContainer, {
+      duration: animation.filledCircleRotationDuration,
+      children: /*#__PURE__*/jsx(Svg, {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        children: /*#__PURE__*/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__*/jsxs(View, {
+    position: "relative",
+    height: "kitt.pageLoader.size",
+    width: "kitt.pageLoader.size",
+    _ios: sharedTransformStyle,
+    _android: sharedTransformStyle,
+    children: [/*#__PURE__*/jsx(AnimatedBackgroundCircle, {}), /*#__PURE__*/jsx(AnimatedFilledCircle, {})]
+  });
+}
+
 function getBackgroundColor({
   isSelected,
   isHighlighted,
@@ -11604,6 +11728,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__*/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__*/jsx(View, {
+      flexShrink: 1,
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: getTypographySize(size),
+        color: colorMatching[color].font,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: label
+      })
+    })
+  });
+}
+
 function Flex({
   direction,
   wrap = 'wrap',
@@ -13144,5 +13360,5 @@ function VerticalSteps({
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Sticker, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-node-22.17.es.web.mjs.map