@ornikar/kitt-universal 29.0.0 → 29.2.0

package/dist/index.es.web.js

@@ -13,7 +13,7 @@ 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 { 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';
@@ -22,8 +22,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 _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { makeDecorator } from '@storybook/addons';
@@ -2332,6 +2333,11 @@ var skeleton$1 = {
   }
 };
 
+var sticker = {
+  borderRadius: 2,
+  padding: 4
+};
+
 var tabBar = {
   underline: {
     "default": {
@@ -2652,6 +2658,7 @@ var theme = {
   skeleton: skeleton$1,
   tabBar: tabBar,
   tag: tag,
+  sticker: sticker,
   tooltip: tooltip,
   typography: typography,
   fullscreenModal: fullscreenModal,
@@ -9375,6 +9382,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         tag: {
           borderRadius: theme.tag.borderRadius
         },
+        sticker: {
+          borderRadius: theme.sticker.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -10161,6 +10171,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        sticker: {
+          padding: theme.sticker.padding
+        },
         toggle: {
           primary: {
             enabled: {
@@ -11126,46 +11139,155 @@ function Notification(_ref) {
   });
 }
 
-var pageLoaderContainer = "kitt-u_pageLoaderContainer_ptkwz2j";
-function PageLoader() {
+var AnimatedCircle = Animated.createAnimatedComponent(Circle$1);
+function AnimatedLoaderCircle(_ref) {
+  var color = _ref.color,
+    progress = _ref.progress;
   var theme = useTheme();
   var _theme$kitt$pageLoade = theme.kitt.pageLoader,
-    colors = _theme$kitt$pageLoade.colors,
-    size = _theme$kitt$pageLoade.size,
-    strokeWidth = _theme$kitt$pageLoade.strokeWidth;
-  var center = size * 0.5;
-  var radius = center - strokeWidth;
-  var circlePerimeter = 2 * Math.PI * radius;
-  var sharedProps = {
-    cx: center,
-    cy: center,
-    r: radius,
-    fill: 'none',
+    strokeWidth = _theme$kitt$pageLoade.strokeWidth,
+    size = _theme$kitt$pageLoade.size;
+  var centerCoord = size * 0.5;
+  var circlePerimeter = 2 * Math.PI * (size * 0.5 - strokeWidth);
+  var strokeAnimation = useAnimatedProps(function () {
+    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,
-    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", _objectSpread(_objectSpread({}, sharedProps), {}, {
-          stroke: colors.base
-        }))
-      }), /*#__PURE__*/jsx("g", {
-        "data-large-loader": "fill",
-        children: /*#__PURE__*/jsx("circle", _objectSpread(_objectSpread({}, sharedProps), {}, {
-          stroke: colors.fill
-        }))
-      })]
+    animatedProps: strokeAnimation
+  });
+}
+
+function AnimatedBackgroundCircle() {
+  var theme = useTheme();
+  var progress = useSharedValue(0);
+  var _theme$kitt$pageLoade = theme.kitt.pageLoader,
+    animation = _theme$kitt$pageLoade.animation,
+    colors = _theme$kitt$pageLoade.colors,
+    size = _theme$kitt$pageLoade.size;
+  useEffect(function () {
+    var delay = animation.delay,
+      circleBackgroundFillDuration = animation.circleBackgroundFillDuration,
+      fillEasingFunction = animation.fillEasingFunction;
+    var _fillEasingFunction = _slicedToArray(fillEasingFunction, 4),
+      x1 = _fillEasingFunction[0],
+      y1 = _fillEasingFunction[1],
+      x2 = _fillEasingFunction[2],
+      y2 = _fillEasingFunction[3];
+    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 ".concat(size, " ").concat(size),
+    children: /*#__PURE__*/jsx(AnimatedLoaderCircle, {
+      color: colors.base,
+      progress: progress
+    })
+  });
+}
+
+var isInfinitAnimation$1 = -1;
+function AnimatedFillCircleContainer(_ref) {
+  var children = _ref.children,
+    duration = _ref.duration;
+  var theme = useTheme();
+  var progress = useSharedValue(0);
+  var animation = theme.kitt.pageLoader.animation;
+  useEffect(function () {
+    var delay = animation.delay;
+    progress.value = withDelay(delay, withRepeat(withTiming(1, {
+      duration: duration,
+      easing: Easing.linear
+    }), isInfinitAnimation$1));
+  }, [progress, animation, duration]);
+  var rotationStyles = useAnimatedStyle(function () {
+    return {
+      transform: [{
+        rotate: "".concat(360 * progress.value, "deg")
+      }]
+    };
+  }, [progress]);
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFill, rotationStyles],
+    children: children
+  });
+}
+
+var isInfinitAnimation = -1;
+var shouldReverse = true;
+function AnimatedFilledCircle() {
+  var theme = useTheme();
+  var progress = useSharedValue(0);
+  var _theme$kitt$pageLoade = theme.kitt.pageLoader,
+    size = _theme$kitt$pageLoade.size,
+    animation = _theme$kitt$pageLoade.animation,
+    colors = _theme$kitt$pageLoade.colors;
+  useEffect(function () {
+    var delay = animation.delay,
+      filledCircleFillDuration = animation.filledCircleFillDuration,
+      fillEasingFunction = animation.fillEasingFunction;
+    var _fillEasingFunction = _slicedToArray(fillEasingFunction, 4),
+      x1 = _fillEasingFunction[0],
+      y1 = _fillEasingFunction[1],
+      x2 = _fillEasingFunction[2],
+      y2 = _fillEasingFunction[3];
+    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 ".concat(size, " ").concat(size),
+        children: /*#__PURE__*/jsx(AnimatedLoaderCircle, {
+          color: colors.fill,
+          progress: progress
+        })
+      })
     })
   });
 }
 
+function PageLoader() {
+  var 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(_ref) {
   var isSelected = _ref.isSelected,
     isHighlighted = _ref.isHighlighted,
@@ -11797,6 +11919,99 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
+var getTypographySize = function (size) {
+  switch (size) {
+    case 'small':
+      return 'content-caps-xs';
+    case 'medium':
+      return 'content-caps-m';
+    case 'large':
+    default:
+      return 'content-caps-l';
+  }
+};
+function Sticker(_ref) {
+  var label = _ref.label,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'linen' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
+  var kittTheme = useKittTheme();
+  var 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
+      })
+    })
+  });
+}
+
 var _excluded$6 = ["direction", "wrap"];
 function Flex(_ref) {
   var direction = _ref.direction,
@@ -13340,5 +13555,5 @@ function VerticalSteps(_ref) {
 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.es.web.js.map