@ornikar/kitt-universal 5.0.1 → 6.1.0

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

@@ -24,55 +24,22 @@ const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
 
-function SpinningIcon({
-  children
-}) {
-  const animationRef = react.useRef(new reactNative.Animated.Value(0));
-  const rotation = animationRef.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
-  });
-  react.useEffect(() => {
-    if (process.env.TESTS) return undefined;
-    const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
-      toValue: 1,
-      duration: 1100,
-      easing: reactNative.Easing.linear,
-      useNativeDriver: true
-    }));
-    animation.start();
-    return () => {
-      if (process.env.TESTS) return undefined;
-      animation.stop();
-      return undefined;
-    };
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
-    style: {
-      transform: [{
-        rotate: rotation
-      }]
-    },
-    children: children
-  });
-}
-
+const defaultIconSize = 20;
 const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
-  color
-}) => color, ({
-  size
-}) => size, ({
-  size
-}) => size, ({
-  align = 'auto'
-}) => align);
+  $color
+}) => $color, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size, ({
+  $align = 'auto'
+}) => $align);
 function Icon({
   icon,
-  size = 20,
-  spin,
+  size = defaultIconSize,
   align,
   color
 }) {
@@ -80,12 +47,10 @@ function Icon({
     color
   });
   return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    align: align,
-    size: size,
-    color: color,
-    children: spin ? /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
-      children: clonedIcon
-    }) : clonedIcon
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
   });
 }
 
@@ -396,6 +361,20 @@ function Avatar({
   });
 }
 
+const hasVariant = (button, variant) => {
+  return variant in button;
+};
+
+function getVariantValuesIfExist(theme, type, variant) {
+  const button = theme.kitt.button[type];
+
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type].default;
+}
+
 const StyledPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "AnimatedButtonPressable__StyledPressable",
   componentId: "kitt-universal__sc-175vyve-0"
@@ -416,6 +395,7 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   disabled,
   accessibilityRole,
   $type,
+  $variant,
   $isStretch,
   href,
   hrefAttrs,
@@ -428,7 +408,7 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   const {
     backgroundColor,
     pressedBackgroundColor
-  } = theme.kitt.button[$type];
+  } = getVariantValuesIfExist(theme, $type, $variant);
   const {
     scale
   } = theme.kitt.button;
@@ -458,7 +438,7 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
     };
     _f.asString = "function _f(){const{interpolateColor,color,backgroundColor,pressedBackgroundColor,withSpring,pressed,scale}=jsThis._closure;{return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),transform:[{scale:withSpring(pressed.value?scale.base.active:scale.base.default)}]};}}";
     _f.__workletHash = 5368461229978;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (53:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (56:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -515,11 +495,12 @@ const BaseStyledButtonPressable = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.button.borderRadius, ({
   theme,
   $isDisabled,
-  $type
+  $type,
+  $variant
 }) => {
-  if ($isDisabled) return theme.kitt.button.disabled.backgroundColor;
+  if ($isDisabled) return theme.kitt.button.disabled.default.backgroundColor;
   if (reactNative.Platform.OS !== 'web') return 'transparent';
-  return theme.kitt.button[$type].backgroundColor;
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
 }, ({
   theme,
   $isLarge,
@@ -572,10 +553,10 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-const getTextColorByType = type => {
+const getTextColorByType = (type, variant) => {
   switch (type) {
     case 'primary':
-      return 'white';
+      return variant === 'ghost' ? 'primary' : 'white';
 
     case 'white':
       return 'white';
@@ -631,7 +612,6 @@ const StyledIconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
 function ButtonIcon({
   icon,
   color,
-  spin,
   iconPosition,
   testID
 }) {
@@ -639,7 +619,6 @@ function ButtonIcon({
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
-      spin: spin,
       testID: testID,
       color: color
     })
@@ -654,7 +633,6 @@ function ButtonContentChildren({
   type,
   icon,
   iconPosition,
-  iconSpin,
   isDisabled,
   color,
   children
@@ -668,9 +646,8 @@ function ButtonContentChildren({
   const isWebSubtle = isSubtle(type) && reactNative.Platform.OS === 'web' && !isDisabled;
 
   if (!children) {
-    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ,
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , {
       icon: icon,
       color: isWebSubtle ? 'inherit' : color
     });
@@ -678,7 +655,6 @@ function ButtonContentChildren({
 
   const buttonIconSharedProps = {
     type,
-    spin: iconSpin,
     iconPosition,
     color: isWebSubtle ? 'inherit' : color
   };
@@ -721,13 +697,14 @@ const ButtonContentContainer = /*#__PURE__*/styled__default.View.withConfig({
 });
 function ButtonContent({
   type,
+  variant,
   isDisabled,
   $isStretch,
   icon,
   children,
   ...props
 }) {
-  const color = isDisabled ? 'black-light' : getTextColorByType(type);
+  const color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsxRuntime.jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
@@ -753,7 +730,7 @@ const StyledDisabled = /*#__PURE__*/styled__default.View.withConfig({
     borderWidth,
     disabled
   } = theme.kitt.button;
-  return `${borderWidth.disabled}px solid ${disabled.borderColor}`;
+  return `${borderWidth.disabled}px solid ${disabled.default.borderColor}`;
 }, ({
   theme
 }) => theme.kitt.button.borderRadius);
@@ -761,18 +738,22 @@ const StyledDisabled = /*#__PURE__*/styled__default.View.withConfig({
 const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
+  variant = 'default',
   disabled,
   stretch,
   large,
   icon,
   iconPosition = 'left',
-  iconSpin,
   testID,
   href,
   hrefAttrs,
   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');
+  }
+
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
     ref: ref,
     accessibilityRole: accessibilityRole,
@@ -782,19 +763,21 @@ const Button = /*#__PURE__*/react.forwardRef(({
     disabled: disabled,
     $isStretch: stretch,
     $type: type,
+    $variant: variant,
     onPress: onPress,
     children: /*#__PURE__*/jsxRuntime.jsxs(BaseStyledButtonPressable, {
       $type: type,
+      $variant: variant,
       $isStretch: stretch,
       $isLarge: large,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
         type: type,
+        variant: variant,
         $isStretch: stretch,
         isDisabled: disabled,
         icon: icon,
         iconPosition: iconPosition,
-        iconSpin: iconSpin,
         children: children
       }), reactNative.Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsxRuntime.jsx(StyledDisabled, {}) : null]
     })
@@ -868,8 +851,12 @@ function ExternalLink({
   ...rest
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Component, { ...rest,
-    onPress: () => {
-      if (onPress) onPress();
+    onPress: e => {
+      if (onPress) {
+        onPress(e);
+        if (e?.defaultPrevented) return;
+      }
+
       if (!href) return;
 
       switch (openLinkBehavior.native) {
@@ -974,56 +961,77 @@ const button = {
     }
   },
   contentPadding: {
-    default: '8px 16px 7px',
-    large: '12px 24px 11px',
-    disabled: '6px 14px 5px'
+    default: '7px 16px 7px',
+    large: '11px 24px 11px',
+    disabled: '5px 14px 5px'
   },
   transition: {
     duration: '200ms',
     timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
   },
   default: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+    default: {
+      backgroundColor: 'rgba(0, 0, 0, 0.05)',
+      pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+      hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+      focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+    }
   },
   primary: {
-    backgroundColor: colors.primary,
-    pressedBackgroundColor: colors.primaryLight,
-    hoverBackgroundColor: colors.primaryLight,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+    default: {
+      backgroundColor: colors.primary,
+      pressedBackgroundColor: colors.primaryLight,
+      hoverBackgroundColor: colors.primaryLight,
+      focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+    },
+    ghost: {
+      backgroundColor: colors.uiBackgroundLight,
+      pressedBackgroundColor: colors.uiBackground,
+      hoverBackgroundColor: colors.hover,
+      focusBorderColor: 'rgba(255,255,255, 0.4)',
+      color: colors.primary,
+      hoverColor: colors.hover,
+      activeColor: colors.hover
+    }
   },
   white: {
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-    pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    focusBorderColor: 'rgba(255, 255, 255, 0.1)'
+    default: {
+      backgroundColor: 'rgba(255, 255, 255, 0.05)',
+      pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+      hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+      focusBorderColor: 'rgba(255, 255, 255, 0.1)'
+    }
   },
   subtle: {
-    backgroundColor: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-    color: colors.primary,
-    hoverColor: 'rgba(76, 52, 224, 0.8)',
-    activeColor: 'rgba(76, 52, 224, 0.8)'
+    default: {
+      backgroundColor: colors.transparent,
+      pressedBackgroundColor: colors.transparent,
+      hoverBackgroundColor: colors.transparent,
+      focusBorderColor: 'rgba(76, 52, 224, 0.2)',
+      color: colors.primary,
+      hoverColor: 'rgba(76, 52, 224, 0.8)',
+      activeColor: 'rgba(76, 52, 224, 0.8)'
+    }
   },
   'subtle-dark': {
-    backgroundColor: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-    color: colors.black,
-    hoverColor: 'rgba(0, 0, 0, 0.8)',
-    activeColor: 'rgba(0, 0, 0, 0.8)'
+    default: {
+      backgroundColor: colors.transparent,
+      pressedBackgroundColor: colors.transparent,
+      hoverBackgroundColor: colors.transparent,
+      focusBorderColor: 'rgba(0, 0, 0, 0.1)',
+      color: colors.black,
+      hoverColor: 'rgba(0, 0, 0, 0.8)',
+      activeColor: 'rgba(0, 0, 0, 0.8)'
+    }
   },
   disabled: {
-    backgroundColor: colors.disabled,
-    pressedBackgroundColor: colors.disabled,
-    hoverBackgroundColor: colors.disabled,
-    focusBorderColor: lateOceanColorPalette.black100,
-    borderColor: lateOceanColorPalette.black100
+    default: {
+      backgroundColor: colors.disabled,
+      pressedBackgroundColor: colors.disabled,
+      hoverBackgroundColor: colors.disabled,
+      focusBorderColor: lateOceanColorPalette.black100,
+      borderColor: lateOceanColorPalette.black100
+    }
   }
 };
 
@@ -1299,14 +1307,14 @@ const iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: button.disabled.backgroundColor,
-    borderColor: button.disabled.borderColor
+    backgroundColor: button.disabled.default.backgroundColor,
+    borderColor: button.disabled.default.borderColor
   },
   default: {
-    pressedBackgroundColor: button.default.pressedBackgroundColor
+    pressedBackgroundColor: button.default.default.pressedBackgroundColor
   },
   white: {
-    pressedBackgroundColor: button.white.hoverBackgroundColor
+    pressedBackgroundColor: button.white.default.hoverBackgroundColor
   }
 };
 
@@ -1484,7 +1492,7 @@ function useKittTheme() {
 const CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
-})(["display:flex;flex-direction:row;align-items:center;"]);
+})(["display:flex;flex-direction:row;"]);
 const CheckboxContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
@@ -2868,6 +2876,50 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
+function SpinningIcon({
+  icon,
+  size = defaultIconSize,
+  align,
+  color
+}) {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+    color
+  });
+  const animationRef = react.useRef(new reactNative.Animated.Value(0));
+  const rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  react.useEffect(() => {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: reactNative.Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return () => {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
+      style: {
+        transform: [{
+          rotate: rotation
+        }]
+      },
+      children: clonedIcon
+    })
+  });
+}
+
 const ContentView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
@@ -2995,9 +3047,10 @@ function getActivityIndicatorSize(size) {
   return size < 36 ? 'small' : 'large';
 }
 
+const defaultLoaderSize = defaultIconSize;
 function Loader({
   color = 'primary',
-  size = 20
+  size = defaultLoaderSize
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
   const colorHex = theme.kitt.typography.colors[color];
@@ -4114,6 +4167,39 @@ function TypographyLink({
   });
 }
 
+function TypographySpinningIconSpecifiedColor({
+  color,
+  ...props
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, { ...props,
+    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
+  });
+}
+
+function TypographySpinningIconInheritColor(props) {
+  const color = useTypographyColor();
+  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconSpecifiedColor, {
+    color: color,
+    ...props
+  });
+}
+
+function TypographySpinningIcon({
+  color,
+  ...props
+}) {
+  if (color) {
+    return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconSpecifiedColor, {
+      color: color,
+      ...props
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconInheritColor, { ...props
+  });
+}
+
 const hex2rgba = (hex, alpha = 1) => {
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
@@ -4188,6 +4274,7 @@ exports.Notification = Notification;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;
+exports.SpinningIcon = SpinningIcon;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;
@@ -4204,6 +4291,7 @@ exports.Typography = Typography;
 exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
+exports.TypographySpinningIcon = TypographySpinningIcon;
 exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;