@ornikar/kitt-universal 7.1.0 → 7.3.0

package/dist/index-browser-all.es.js

@@ -2,12 +2,12 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { useWindowDimensions, Platform, Image, Linking, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, View, Animated as Animated$1, Easing, ActivityIndicator } from 'react-native';
+import { useWindowDimensions, Platform, Image, Linking, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, View, Animated as Animated$1, Easing } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
+import styled, { css, useTheme, ThemeProvider } from 'styled-components/native';
 import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, useRef, useEffect, Fragment as Fragment$1, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withRepeat, withTiming, Easing as Easing$1, interpolate } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useAnimatedProps, withDelay, withTiming, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
@@ -16,6 +16,7 @@ import { FormattedMessage } from 'react-intl';
 import { styled as styled$1 } from '@linaria/react';
 import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
@@ -146,7 +147,8 @@ var StyledTypography = /*#__PURE__*/styled.Text.withConfig({
 }, function (_ref2) {
   var theme = _ref2.theme,
       $color = _ref2.$color;
-  return !$color ? '' : "\n  color: ".concat(theme.kitt.typography.colors[$color], ";\n  text-decoration-color: ").concat(theme.kitt.typography.colors[$color], ";\n  ");
+  if (!$color) return '';
+  return css(["color:", ";text-decoration-color:", ";"], theme.kitt.typography.colors[$color], theme.kitt.typography.colors[$color]);
 });
 function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   var _useWindowDimensions = useWindowDimensions(),
@@ -494,11 +496,14 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
 }, function (_ref7) {
   var theme = _ref7.theme,
       $isLarge = _ref7.$isLarge,
+      $isXLarge = _ref7.$isXLarge,
       $isDisabled = _ref7.$isDisabled;
   var _theme$kitt$button$co = theme.kitt.button.contentPadding,
       large = _theme$kitt$button$co.large,
       defaultPadding = _theme$kitt$button$co["default"],
-      disabledPadding = _theme$kitt$button$co.disabled;
+      disabledPadding = _theme$kitt$button$co.disabled,
+      xLarge = _theme$kitt$button$co.xLarge;
+  if ($isXLarge) return xLarge;
   if ($isLarge) return large;
   if ($isDisabled) return disabledPadding;
   return defaultPadding;
@@ -557,6 +562,9 @@ var getTextColorByType = function (type, variant) {
     case 'subtle-dark':
       return 'black';
 
+    case 'default':
+      return variant === 'ghost' ? 'white' : 'black';
+
     default:
       return 'black';
   }
@@ -711,6 +719,7 @@ var StyledDisabled = /*#__PURE__*/styled.View.withConfig({
   return theme.kitt.button.borderRadius;
 });
 
+var allowedGhostTypes = ['primary', 'default'];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$type = _ref.type,
@@ -720,6 +729,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       disabled = _ref.disabled,
       stretch = _ref.stretch,
       large = _ref.large,
+      xLarge = _ref.xLarge,
       icon = _ref.icon,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
@@ -730,8 +740,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
       onPress = _ref.onPress;
 
-  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && type !== 'primary') {
-    throw new Error('variant=ghost is only allowed with type=primary');
+  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
+    throw new Error('variant=ghost is only allowed with type=primary or default');
   }
 
   return /*#__PURE__*/jsx(AnimatedButtonPressable, {
@@ -750,6 +760,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       $variant: variant,
       $isStretch: stretch,
       $isLarge: large,
+      $isXLarge: xLarge,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsx(ButtonContent, {
         type: type,
@@ -910,7 +921,9 @@ var colors = {
   warning: lateOceanColorPalette.goldCrayola,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
+  white: lateOceanColorPalette.white,
   black: lateOceanColorPalette.black1000,
+  blackAnthracite: lateOceanColorPalette.black800,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
   transparent: lateOceanColorPalette.transparent,
@@ -957,6 +970,7 @@ var button = {
   contentPadding: {
     "default": '7px 16px 7px',
     large: '11px 24px 11px',
+    xLarge: '15px 24px 15px',
     disabled: '5px 14px 5px'
   },
   transition: {
@@ -969,6 +983,15 @@ var button = {
       pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+    },
+    ghost: {
+      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+      hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
+      color: lateOceanColorPalette.white,
+      hoverColor: lateOceanColorPalette.white,
+      activeColor: lateOceanColorPalette.white
     }
   },
   primary: {
@@ -1103,16 +1126,16 @@ var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFon
 };
 var typography = {
   colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-anthracite': lateOceanColorPalette.black800,
+    black: colors.black,
+    'black-anthracite': colors.blackAnthracite,
     'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
+    white: colors.white,
+    'white-light': colors.white,
+    primary: colors.primary,
+    'primary-light': colors.primaryLight,
+    accent: colors.accent,
+    success: colors.success,
+    danger: colors.danger
   },
   types: {
     headers: {
@@ -1208,8 +1231,8 @@ var input = {
     size: 20
   },
   padding: {
-    "default": '5px 16px',
-    iOSSingleLine: '7px 16px'
+    horizontal: 16,
+    vertical: 5
   },
   transition: {
     property: 'border-color',
@@ -1324,7 +1347,20 @@ var listItem = {
 };
 
 var pageLoader = {
-  size: 60
+  size: 60,
+  strokeWidth: 3,
+  colors: {
+    base: colors.separator,
+    fill: colors.primary
+  },
+  animation: {
+    delay: 500,
+    circleBackgroundFillDuration: 1000,
+    filledCircleFillDuration: 1800,
+    groupFilledCircleRotationDuration: 1800,
+    filledCircleRotationDuration: 2160,
+    fillEasingFunction: [0.39, 0.575, 0.565, 1]
+  }
 };
 
 var shadows = {
@@ -1620,7 +1656,7 @@ var ViewInput = /*#__PURE__*/styled.View.withConfig({
   displayName: "DatePickerInputPart__ViewInput"
 })(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, function (_ref) {
   var theme = _ref.theme;
-  return theme.kitt.forms.input.padding["default"];
+  return "".concat(theme.kitt.forms.input.padding.vertical, "px ").concat(theme.kitt.forms.input.padding.horizontal, "px");
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.input.minHeight;
@@ -2386,20 +2422,18 @@ var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
   var theme = _ref.theme,
       multiline = _ref.multiline;
-
-  if (!multiline && Platform.OS === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
-  }
-
-  return theme.kitt.forms.input.padding["default"];
+  if (!multiline && Platform.OS !== 'web') return "0 ".concat(theme.kitt.forms.input.padding.horizontal, "px");
+  return "".concat(theme.kitt.forms.input.padding.vertical, "px ").concat(theme.kitt.forms.input.padding.horizontal, "px");
 }, function (_ref2) {
   var theme = _ref2.theme,
       multiline = _ref2.multiline;
-  if (!multiline && Platform.OS === 'ios') return 0;
+  if (!multiline && Platform.OS !== 'web') return 0;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
   return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
 }, function (_ref3) {
-  var $minHeight = _ref3.$minHeight;
+  var theme = _ref3.theme,
+      _ref3$$minHeight = _ref3.$minHeight,
+      $minHeight = _ref3$$minHeight === void 0 ? theme.kitt.forms.input.minHeight : _ref3$$minHeight;
   return $minHeight;
 });
 var RightInputContainer = /*#__PURE__*/styled.View.withConfig({
@@ -2408,8 +2442,7 @@ var RightInputContainer = /*#__PURE__*/styled.View.withConfig({
 var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var id = _ref4.id,
       right = _ref4.right,
-      _ref4$minHeight = _ref4.minHeight,
-      minHeight = _ref4$minHeight === void 0 ? 0 : _ref4$minHeight,
+      minHeight = _ref4.minHeight,
       formState = _ref4.state,
       internalForceState = _ref4.internalForceState,
       _ref4$disabled = _ref4.disabled,
@@ -3292,19 +3325,178 @@ function Notification(_ref) {
   });
 }
 
-function getActivityIndicatorSize(size) {
-  if (Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
+var AnimatedCircle = Animated.createAnimatedComponent(Circle$1);
+function AnimatedLoaderCircle(_ref) {
+  var color = _ref.color,
+      progress = _ref.progress;
+  var theme = /*#__PURE__*/useTheme();
+  var _theme$kitt$pageLoade = theme.kitt.pageLoader,
+      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 () {
+    var _f = function () {
+      return {
+        strokeDashoffset: circlePerimeter - circlePerimeter * progress.value
+      };
+    };
+
+    _f._closure = {
+      circlePerimeter: circlePerimeter,
+      progress: progress
+    };
+    _f.asString = "function _f(){const{circlePerimeter,progress}=jsThis._closure;{return{strokeDashoffset:circlePerimeter-circlePerimeter*progress.value};}}";
+    _f.__workletHash = 1345639818356;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/PageLoader/AnimatedLoaderCircle.tsx (23:43)";
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  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 PageLoader() {
+function AnimatedBackgroundCircle() {
+  var theme = /*#__PURE__*/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$1.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 = /*#__PURE__*/useTheme();
-  var size = theme.kitt.pageLoader.size;
-  var colorHex = theme.kitt.typography.colors.primary;
-  return /*#__PURE__*/jsx(ActivityIndicator, {
-    testID: "ActivityIndicator",
-    color: colorHex,
-    size: getActivityIndicatorSize(size)
+  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$1.linear
+    }), isInfinitAnimation$1));
+  }, [progress, animation, duration]);
+  var rotationStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        transform: [{
+          rotate: "".concat(360 * progress.value, "deg")
+        }]
+      };
+    };
+
+    _f._closure = {
+      progress: progress
+    };
+    _f.asString = "function _f(){const{progress}=jsThis._closure;{return{transform:[{rotate:360*progress.value+\"deg\"}]};}}";
+    _f.__workletHash = 16553090406738;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/PageLoader/AnimatedFillCircleContainer.tsx (36:42)";
+    _f.__optimalization = 3;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFill, rotationStyles],
+    children: children
+  });
+}
+
+var isInfinitAnimation = -1;
+var shouldReverse = true;
+function AnimatedFilledCircle() {
+  var theme = /*#__PURE__*/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$1.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
+        })
+      })
+    })
+  });
+}
+
+var PageLoaderContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "PageLoader__PageLoaderContainer"
+})(["transform:scale(-1) rotate(90deg);position:relative;width:", "px;height:", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.pageLoader.size;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.pageLoader.size;
+});
+function PageLoader() {
+  return /*#__PURE__*/jsxs(PageLoaderContainer, {
+    children: [/*#__PURE__*/jsx(AnimatedBackgroundCircle, {}), /*#__PURE__*/jsx(AnimatedFilledCircle, {})]
   });
 }