@ornikar/kitt-universal 6.0.0 → 6.1.0

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

@@ -376,6 +376,20 @@ function withTheme(WrappedComponent) {
   });
 }
 
+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;
+}
+
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
@@ -400,10 +414,11 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     "a1vkj3mh-5": [({
       theme,
       $type,
+      $variant,
       $isDisabled
     }) => {
-      if ($isDisabled) return theme.kitt.button.disabled.hoverBackgroundColor;
-      return theme.kitt.button[$type].hoverBackgroundColor;
+      if ($isDisabled) return theme.kitt.button.disabled.default.hoverBackgroundColor;
+      return getVariantValuesIfExist(theme, $type, $variant).hoverBackgroundColor;
     }],
     "a1vkj3mh-6": [({
       theme
@@ -431,11 +446,12 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     }) => `calc(100% - ${theme.kitt.button.borderWidth.disabled * 0.5}px)`],
     "a1vkj3mh-14": [({
       theme
-    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.borderColor}`],
+    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.default.borderColor}`],
     "a1vkj3mh-15": [({
       theme,
-      $type
-    }) => `${theme.kitt.button.borderWidth.focus}px solid ${theme.kitt.button[$type].focusBorderColor}`],
+      $type,
+      $variant
+    }) => `${theme.kitt.button.borderWidth.focus}px solid ${getVariantValuesIfExist(theme, $type, $variant).focusBorderColor}`],
     "a1vkj3mh-16": [({
       theme
     }) => `-${theme.kitt.button.borderWidth.focus}px`],
@@ -445,8 +461,12 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
       $isDisabled
     }) => {
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-      if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].color;
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type].default.color;
+      }
+
+      return 'inherit';
     }],
     "a1vkj3mh-19": [({
       theme,
@@ -454,8 +474,12 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
       $isDisabled
     }) => {
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-      if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].hoverColor;
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type].default.hoverColor;
+      }
+
+      return 'inherit';
     }],
     "a1vkj3mh-20": [({
       theme,
@@ -463,13 +487,18 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
       $isDisabled
     }) => {
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-      if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].activeColor;
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type].default.activeColor;
+      }
+
+      return 'inherit';
     }]
   }
 }));
 const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   $type,
+  $variant,
   $isStretch,
   disabled,
   ...props
@@ -477,6 +506,7 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressableContainer, {
     ref: ref,
     $type: $type,
+    $variant: $variant,
     $isDisabled: !!disabled,
     $isStretch: $isStretch,
     children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, {
@@ -503,10 +533,11 @@ const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyled
 }) => theme.kitt.button.borderRadius, ({
   theme,
   $isDisabled,
-  $type
+  $type,
+  $variant
 }) => {
-  if ($isDisabled) return theme.kitt.button.disabled.backgroundColor;
-  return theme.kitt.button[$type].backgroundColor;
+  if ($isDisabled) return theme.kitt.button.disabled.default.backgroundColor;
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
 }, ({
   theme,
   $isLarge,
@@ -555,10 +586,10 @@ function TypographyIcon({
   });
 }
 
-const getTextColorByType = type => {
+const getTextColorByType = (type, variant) => {
   switch (type) {
     case 'primary':
-      return 'white';
+      return variant === 'ghost' ? 'primary' : 'white';
 
     case 'white':
       return 'white';
@@ -693,13 +724,14 @@ const ButtonContentContainer = /*#__PURE__*/styled__default(BabelPluginStyledCom
 });
 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,
@@ -718,6 +750,7 @@ function ButtonContent({
 const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
+  variant = 'default',
   disabled,
   stretch,
   large,
@@ -729,6 +762,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,
@@ -738,14 +775,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,
@@ -919,47 +959,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
+    }
   }
 };
 
@@ -1235,14 +1296,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
   }
 };