@ornikar/kitt-universal 7.1.0 → 7.3.0

package/dist/index-node-14.17.cjs.js

@@ -14,6 +14,7 @@ const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
 const react$1 = require('@linaria/react');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
+const Svg = require('react-native-svg');
 const expoLinearGradient = require('expo-linear-gradient');
 const reactNative$1 = require('@floating-ui/react-native');
 const addons = require('@storybook/addons');
@@ -23,6 +24,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
+const Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
 
 const defaultIconSize = 20;
 const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
@@ -157,10 +159,10 @@ const StyledTypography = /*#__PURE__*/styled__default.Text.withConfig({
 }, ({
   theme,
   $color
-}) => !$color ? '' : `
-  color: ${theme.kitt.typography.colors[$color]};
-  text-decoration-color: ${theme.kitt.typography.colors[$color]};
-  `);
+}) => {
+  if (!$color) return '';
+  return styled.css(["color:", ";text-decoration-color:", ";"], theme.kitt.typography.colors[$color], theme.kitt.typography.colors[$color]);
+});
 function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   const {
     width
@@ -507,13 +509,16 @@ const BaseStyledButtonPressable = /*#__PURE__*/styled__default.View.withConfig({
 }, ({
   theme,
   $isLarge,
+  $isXLarge,
   $isDisabled
 }) => {
   const {
     large,
     default: defaultPadding,
-    disabled: disabledPadding
+    disabled: disabledPadding,
+    xLarge
   } = theme.kitt.button.contentPadding;
+  if ($isXLarge) return xLarge;
   if ($isLarge) return large;
   if ($isDisabled) return disabledPadding;
   return defaultPadding;
@@ -570,6 +575,9 @@ const getTextColorByType = (type, variant) => {
     case 'subtle-dark':
       return 'black';
 
+    case 'default':
+      return variant === 'ghost' ? 'white' : 'black';
+
     default:
       return 'black';
   }
@@ -738,6 +746,7 @@ const StyledDisabled = /*#__PURE__*/styled__default.View.withConfig({
   theme
 }) => theme.kitt.button.borderRadius);
 
+const allowedGhostTypes = ['primary', 'default'];
 const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
@@ -745,6 +754,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   disabled,
   stretch,
   large,
+  xLarge,
   icon,
   iconPosition = 'left',
   testID,
@@ -753,8 +763,8 @@ const Button = /*#__PURE__*/react.forwardRef(({
   accessibilityRole = 'button',
   onPress
 }, ref) => {
-  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__*/jsxRuntime.jsx(AnimatedButtonPressable, {
@@ -773,6 +783,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
       $variant: variant,
       $isStretch: stretch,
       $isLarge: large,
+      $isXLarge: xLarge,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
         type: type,
@@ -922,7 +933,9 @@ const 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,
@@ -969,6 +982,7 @@ const button = {
   contentPadding: {
     default: '7px 16px 7px',
     large: '11px 24px 11px',
+    xLarge: '15px 24px 15px',
     disabled: '5px 14px 5px'
   },
   transition: {
@@ -981,6 +995,15 @@ const 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: {
@@ -1111,16 +1134,16 @@ const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize,
 });
 const 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: {
@@ -1216,8 +1239,8 @@ const input = {
     size: 20
   },
   padding: {
-    default: '5px 16px',
-    iOSSingleLine: '7px 16px'
+    horizontal: 16,
+    vertical: 5
   },
   transition: {
     property: 'border-color',
@@ -1332,7 +1355,20 @@ const listItem = {
 };
 
 const 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]
+  }
 };
 
 const shadows = {
@@ -1614,7 +1650,7 @@ const ViewInput = /*#__PURE__*/styled__default.View.withConfig({
   componentId: "kitt-universal__sc-11fmlmi-1"
 })(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, ({
   theme
-}) => theme.kitt.forms.input.padding.default, ({
+}) => `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`, ({
   theme
 }) => theme.kitt.forms.input.minHeight, ({
   theme,
@@ -2369,20 +2405,18 @@ const StyledTextInput = /*#__PURE__*/styled__default(reactNative.TextInput).with
   theme,
   multiline
 }) => {
-  if (!multiline && reactNative.Platform.OS === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
-  }
-
-  return theme.kitt.forms.input.padding.default;
+  if (!multiline && reactNative.Platform.OS !== 'web') return `0 ${theme.kitt.forms.input.padding.horizontal}px`;
+  return `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`;
 }, ({
   theme,
   multiline
 }) => {
-  if (!multiline && reactNative.Platform.OS === 'ios') return 0;
+  if (!multiline && reactNative.Platform.OS !== 'web') return 0;
   const typeConfigKey = getTypographyTypeConfigKey(theme);
   return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
 }, ({
-  $minHeight
+  theme,
+  $minHeight = theme.kitt.forms.input.minHeight
 }) => $minHeight);
 const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputText__RightInputContainer",
@@ -2391,7 +2425,7 @@ const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
 const InputText = /*#__PURE__*/react.forwardRef(({
   id,
   right,
-  minHeight = 0,
+  minHeight,
   state: formState,
   internalForceState,
   disabled = false,
@@ -3245,21 +3279,178 @@ function Notification({
   });
 }
 
-function getActivityIndicatorSize(size) {
-  if (reactNative.Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
+const AnimatedCircle = Animated__default.createAnimatedComponent(Svg.Circle);
+function AnimatedLoaderCircle({
+  color,
+  progress
+}) {
+  const theme = /*#__PURE__*/styled.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(function () {
+    const _f = function () {
+      return {
+        strokeDashoffset: circlePerimeter - circlePerimeter * progress.value
+      };
+    };
+
+    _f._closure = {
+      circlePerimeter,
+      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__*/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 PageLoader() {
+function AnimatedBackgroundCircle() {
   const theme = /*#__PURE__*/styled.useTheme();
+  const progress = Animated.useSharedValue(0);
   const {
+    animation,
+    colors,
     size
   } = theme.kitt.pageLoader;
-  const colorHex = theme.kitt.typography.colors.primary;
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.ActivityIndicator, {
-    testID: "ActivityIndicator",
-    color: colorHex,
-    size: getActivityIndicatorSize(size)
+  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 = /*#__PURE__*/styled.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(function () {
+    const _f = function () {
+      return {
+        transform: [{
+          rotate: `${360 * progress.value}deg`
+        }]
+      };
+    };
+
+    _f._closure = {
+      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__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [reactNative.StyleSheet.absoluteFill, rotationStyles],
+    children: children
+  });
+}
+
+const isInfinitAnimation = -1;
+const shouldReverse = true;
+function AnimatedFilledCircle() {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const progress = Animated.useSharedValue(0);
+  const {
+    size,
+    animation,
+    colors
+  } = theme.kitt.pageLoader;
+  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
+        })
+      })
+    })
+  });
+}
+
+const PageLoaderContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "PageLoader__PageLoaderContainer",
+  componentId: "kitt-universal__sc-1l9zwqg-0"
+})(["transform:scale(-1) rotate(90deg);position:relative;width:", "px;height:", "px;"], ({
+  theme
+}) => theme.kitt.pageLoader.size, ({
+  theme
+}) => theme.kitt.pageLoader.size);
+function PageLoader() {
+  return /*#__PURE__*/jsxRuntime.jsxs(PageLoaderContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedBackgroundCircle, {}), /*#__PURE__*/jsxRuntime.jsx(AnimatedFilledCircle, {})]
   });
 }