@ornikar/kitt-universal 6.0.0 → 7.0.1

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

@@ -290,10 +290,11 @@ const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
 })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
   theme,
   $isRound,
-  $size
+  $size,
+  $sizeVariant
 }) => {
   if ($isRound) return `${$size / 2}px`;
-  return `${theme.kitt.avatar.borderRadius}px`;
+  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
 }, ({
   theme,
   $isLight
@@ -309,8 +310,8 @@ function AvatarContent({
   firstname,
   lastname,
   alt,
-  base,
-  isLight
+  isLight,
+  sizeVariant
 }) {
   if (src) {
     return /*#__PURE__*/jsxRuntime.jsx(reactNative.Image, {
@@ -327,8 +328,8 @@ function AvatarContent({
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: base,
-      variant: "bold",
+      base: sizeVariant === 'large' ? 'body-large' : 'body',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
       color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
@@ -343,24 +344,39 @@ function AvatarContent({
 
 function Avatar({
   size = 40,
-  base = 'body-small',
   round,
   light,
+  sizeVariant,
   ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
+    $sizeVariant: sizeVariant,
     children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
       size: size,
-      base: base,
       isLight: light,
+      sizeVariant: sizeVariant,
       ...props
     })
   });
 }
 
+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"
@@ -381,6 +397,7 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   disabled,
   accessibilityRole,
   $type,
+  $variant,
   $isStretch,
   href,
   hrefAttrs,
@@ -393,7 +410,7 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   const {
     backgroundColor,
     pressedBackgroundColor
-  } = theme.kitt.button[$type];
+  } = getVariantValuesIfExist(theme, $type, $variant);
   const {
     scale
   } = theme.kitt.button;
@@ -423,7 +440,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);
@@ -480,11 +497,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,
@@ -537,10 +555,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';
@@ -681,13 +699,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,
@@ -713,7 +732,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);
@@ -721,6 +740,7 @@ const StyledDisabled = /*#__PURE__*/styled__default.View.withConfig({
 const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
+  variant = 'default',
   disabled,
   stretch,
   large,
@@ -732,6 +752,10 @@ 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');
+  }
+
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
     ref: ref,
     accessibilityRole: accessibilityRole,
@@ -741,14 +765,17 @@ 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,
@@ -826,8 +853,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) {
@@ -909,6 +940,9 @@ const avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -941,47 +975,68 @@ const button = {
     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
+    }
   }
 };
 
@@ -1257,14 +1312,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
   }
 };
 
@@ -1275,6 +1330,10 @@ const listItem = {
   innerMargin: 8
 };
 
+const pageLoader = {
+  size: 60
+};
+
 const shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1365,19 +1424,20 @@ const theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar,
+  breakpoints,
   button,
   card,
   feedbackMessage,
   forms,
-  typography,
-  tag,
-  shadows,
   fullScreenModal,
   iconButton,
   listItem,
-  tooltip,
+  pageLoader,
+  shadows,
   skeleton,
-  breakpoints
+  tag,
+  tooltip,
+  typography
 };
 
 function matchWindowSize({
@@ -1719,8 +1779,7 @@ function Overlay({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
     accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {})
+    onPress: onPress
   });
 }
 
@@ -2828,10 +2887,12 @@ FullScreenModal.Body = FullScreenModalBody;
 
 function SpinningIcon({
   icon,
-  size = defaultIconSize,
-  align,
   color
 }) {
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error(`Invalid color passed to SpinningIcon: ${String(color)}`);
+  }
+
   const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
@@ -2855,18 +2916,13 @@ function SpinningIcon({
       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
-    })
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: clonedIcon
   });
 }
 
@@ -2992,31 +3048,12 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function getActivityIndicatorSize(size) {
-  if (reactNative.Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
-}
-
-const defaultLoaderSize = defaultIconSize;
-function Loader({
-  color = 'primary',
-  size = defaultLoaderSize
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const colorHex = theme.kitt.typography.colors[color];
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.ActivityIndicator, {
-    testID: "ActivityIndicator",
-    color: colorHex,
-    size: getActivityIndicatorSize(size)
-  });
-}
-
-function LargeLoader({
-  color = 'primary'
+function LoaderIcon({
+  color
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Loader, {
+  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
     color: color,
-    size: 60
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArcIcon, {})
   });
 }
 
@@ -3203,6 +3240,24 @@ function Notification({
   });
 }
 
+function getActivityIndicatorSize(size) {
+  if (reactNative.Platform.OS === 'android') return size;
+  return size < 36 ? 'small' : 'large';
+}
+
+function PageLoader() {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const {
+    size
+  } = theme.kitt.pageLoader;
+  const colorHex = theme.kitt.typography.colors.primary;
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.ActivityIndicator, {
+    testID: "ActivityIndicator",
+    color: colorHex,
+    size: getActivityIndicatorSize(size)
+  });
+}
+
 const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "SkeletonContent__Container",
   componentId: "kitt-universal__sc-1u3chjb-0"
@@ -4117,39 +4172,6 @@ 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);
@@ -4214,13 +4236,14 @@ exports.KittBreakpointsMax = KittBreakpointsMax;
 exports.KittThemeDecorator = KittThemeDecorator;
 exports.KittThemeProvider = KittThemeProvider;
 exports.Label = Label;
-exports.LargeLoader = LargeLoader;
 exports.ListItem = ListItem;
-exports.Loader = Loader;
+exports.LoaderIcon = LoaderIcon;
 exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Notification = Notification;
+exports.Overlay = Overlay;
+exports.PageLoader = PageLoader;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;
@@ -4241,7 +4264,6 @@ exports.Typography = Typography;
 exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
-exports.TypographySpinningIcon = TypographySpinningIcon;
 exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;