@ornikar/kitt-universal 11.0.0 → 11.2.0

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

@@ -173,6 +173,140 @@ const actionCard = {
       translateY: 3
     }
   },
+  'primary-border-soft': {
+    default: {
+      backgroundColor: colors.uiBackgroundLight,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.moonPurple,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    hovered: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.moonPurple,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    disabled: {
+      backgroundColor: lateOceanColorPalette.white,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 0
+    },
+    focused: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.moonPurple,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    pressed: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 3
+    }
+  },
+  'primary-border-hard': {
+    default: {
+      backgroundColor: colors.uiBackgroundLight,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.lateOcean,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    hovered: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.lateOcean,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    disabled: {
+      backgroundColor: lateOceanColorPalette.white,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 0
+    },
+    focused: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.lateOcean,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    pressed: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 3
+    }
+  },
   secondary: {
     default: {
       backgroundColor: lateOceanColorPalette.black50,
@@ -1294,15 +1428,29 @@ const getStateKey = (isHovered, isPressed, isFocused) => {
   return 'default';
 };
 
+const getThemeName = (variant, borderVariant) => {
+  if (borderVariant === 'soft') {
+    return 'primary-border-soft';
+  }
+  if (borderVariant === 'hard') {
+    return 'primary-border-hard';
+  }
+  return variant;
+};
+
 function ActionCardContentWrapper({
   isHovered,
   isPressed,
   isFocused,
   variant,
+  borderVariant = 'none',
   children
 }) {
   const theme = useTheme();
   const state = getStateKey(isHovered, isPressed, isFocused);
+  if ((process.env.NODE_ENV !== "production") && borderVariant !== 'none' && variant !== 'primary') {
+    throw new Error(`borderVariant=${borderVariant} is only allowed with variant=primary`);
+  }
   const {
     translateY
   } = theme.kitt.actionCard[variant][state];
@@ -1311,6 +1459,7 @@ function ActionCardContentWrapper({
       translateY
     }]
   } : {};
+  const themeName = getThemeName(variant, borderVariant);
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     _ios: {
       style: sharedTransform
@@ -1322,11 +1471,11 @@ function ActionCardContentWrapper({
       style: sharedTransform
     },
     width: "100%",
-    backgroundColor: `kitt.actionCard.${variant}.${state}.backgroundColor`,
+    backgroundColor: `kitt.actionCard.${themeName}.${state}.backgroundColor`,
     borderRadius: "kitt.actionCard.borderRadius",
-    borderColor: `kitt.actionCard.${variant}.${state}.borderColor`,
-    borderWidth: `kitt.actionCard.${variant}.${state}.borderWidth`,
-    shadow: `kitt.actionCard.${variant}.${state}.shadow`,
+    borderColor: `kitt.actionCard.${themeName}.${state}.borderColor`,
+    borderWidth: `kitt.actionCard.${themeName}.${state}.borderWidth`,
+    shadow: `kitt.actionCard.${themeName}.${state}.shadow`,
     children: children
   });
 }
@@ -1348,6 +1497,7 @@ function ActionCardDisabled({
 function ActionCard({
   children,
   variant = 'secondary',
+  borderVariant = 'none',
   disabled,
   testID,
   isHovered,
@@ -1361,6 +1511,7 @@ function ActionCard({
       children: children
     }) : /*#__PURE__*/jsxRuntime.jsx(ActionCardContentWrapper, {
       variant: variant,
+      borderVariant: borderVariant,
       isHovered: isHovered,
       isFocused: isFocused,
       isPressed: isPressed,
@@ -1371,6 +1522,7 @@ function ActionCard({
 const ActionCardPressable = /*#__PURE__*/react.forwardRef(({
   children,
   variant = 'secondary',
+  borderVariant = 'none',
   disabled,
   testID,
   href,
@@ -1396,6 +1548,7 @@ const ActionCardPressable = /*#__PURE__*/react.forwardRef(({
       isFocused
     }) => /*#__PURE__*/jsxRuntime.jsx(ActionCard, {
       variant: variant,
+      borderVariant: borderVariant,
       disabled: disabled,
       isHovered: isHovered || isHoveredInternal,
       isFocused: isFocused || isFocusedInternal,
@@ -1576,6 +1729,32 @@ exports.KittBreakpointNameEnum = void 0;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(exports.KittBreakpointNameEnum || (exports.KittBreakpointNameEnum = {}));
 
+const typographyColors = ['black', 'black-anthracite', 'black-disabled', 'black-light', 'white', 'white-light', 'primary', 'primary-light', 'accent', 'success', 'danger', 'warning'];
+
+function getNBThemeColorFromColorProps(colorName) {
+  return `kitt.typography.${colorName}`;
+}
+
+function isColorTypographyColor(colorName) {
+  if (!colorName || typeof colorName !== 'string') return false;
+  return typographyColors.includes(colorName);
+}
+function getTypographyColorValue(colorName) {
+  if (!colorName) return undefined;
+  if (isColorTypographyColor(colorName)) {
+    return getNBThemeColorFromColorProps(colorName);
+  }
+  return colorName;
+}
+
+const isTypeHeader = type => type.startsWith('header');
+
+const isTypographyHeader = (type, isHeaderTypographyInContext) => {
+  if (type) return isTypeHeader(type);
+  if (isHeaderTypographyInContext != null) return isHeaderTypographyInContext;
+  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
+};
+
 const IsHeaderTypographyContext = /*#__PURE__*/react.createContext(undefined);
 const TypographyColorContext = /*#__PURE__*/react.createContext('black');
 function useTypographyColor() {
@@ -1588,12 +1767,6 @@ function useTypographyDefaultColor() {
 function getTypographyTypeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === 'base' || breakpointName === 'small' ? 'baseAndSmall' : 'mediumAndWide';
 }
-const isTypeHeader = type => type.startsWith('header');
-const isTypographyHeader = (type, isHeaderTypographyInContext) => {
-  if (type) return isTypeHeader(type);
-  if (isHeaderTypographyInContext != null) return isHeaderTypographyInContext;
-  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
-};
 
 // TODO[native-base@>=3.4.19] this currently does not work. Retest when updating native-base.
 // & {
@@ -1614,9 +1787,6 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
-function getNBThemeColorFromColorProps(colorName) {
-  return colorName ? `kitt.typography.${colorName}` : undefined;
-}
 function Typography({
   accessibilityRole,
   base: legacyBase,
@@ -1635,6 +1805,7 @@ function Typography({
   color,
   ...otherProps
 }) {
+  const sx = nativeBase.useSx();
   const isHeaderTypographyInContext = react.useContext(IsHeaderTypographyContext);
   const defaultColor = useTypographyDefaultColor();
   const hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -1645,6 +1816,11 @@ function Typography({
     ...type,
     base: baseOrDefaultToBody
   });
+  const currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
+  const colorStyles = sx({
+    color: getTypographyColorValue(currentColor),
+    textDecorationColor: getTypographyColorValue(currentColor)
+  });
   if (process.env.NODE_ENV !== 'production') {
     Object.entries(type).forEach(([key, value]) => {
       if (value && isTypeHeader(value) !== isHeader) {
@@ -1652,15 +1828,13 @@ function Typography({
       }
     });
   }
-  const currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
   const text = /*#__PURE__*/jsxRuntime.jsx(nativeBase.Text, {
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
     fontWeight: isHeader ? `headers.${nonNullableVariant}` : `bodies.${nonNullableVariant}`,
     fontFamily: isHeader ? `headers.${nonNullableVariant}` : `bodies.${nonNullableVariant}`,
-    color: getNBThemeColorFromColorProps(currentColor),
-    textDecorationColor: getNBThemeColorFromColorProps(currentColor),
+    ...colorStyles,
     ...otherProps
   });
   const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
@@ -1740,10 +1914,13 @@ function TypographyIconSpecifiedColor({
   color,
   ...props
 }) {
-  const theme = useTheme();
+  const sx = nativeBase.useSx();
+  const colorStyle = sx({
+    color: getTypographyColorValue(color)
+  });
   return /*#__PURE__*/jsxRuntime.jsx(Icon, {
     ...props,
-    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
+    ...colorStyle
   });
 }
 function TypographyIconInheritColor(props) {
@@ -5660,6 +5837,50 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               borderColor: theme.actionCard.primary.pressed.borderColor
             }
           },
+          'primary-border-soft': {
+            default: {
+              backgroundColor: theme.actionCard['primary-border-soft'].default.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].default.borderColor
+            },
+            disabled: {
+              backgroundColor: theme.actionCard['primary-border-soft'].disabled.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].disabled.borderColor
+            },
+            hovered: {
+              backgroundColor: theme.actionCard['primary-border-soft'].hovered.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].hovered.borderColor
+            },
+            focused: {
+              backgroundColor: theme.actionCard['primary-border-soft'].focused.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].focused.borderColor
+            },
+            pressed: {
+              backgroundColor: theme.actionCard['primary-border-soft'].pressed.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].pressed.borderColor
+            }
+          },
+          'primary-border-hard': {
+            default: {
+              backgroundColor: theme.actionCard['primary-border-hard'].default.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].default.borderColor
+            },
+            disabled: {
+              backgroundColor: theme.actionCard['primary-border-hard'].disabled.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].disabled.borderColor
+            },
+            hovered: {
+              backgroundColor: theme.actionCard['primary-border-hard'].hovered.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].hovered.borderColor
+            },
+            focused: {
+              backgroundColor: theme.actionCard['primary-border-hard'].focused.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].focused.borderColor
+            },
+            pressed: {
+              backgroundColor: theme.actionCard['primary-border-hard'].pressed.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].pressed.borderColor
+            }
+          },
           highlight: {
             default: {
               backgroundColor: theme.actionCard.highlight.default.backgroundColor,
@@ -5940,6 +6161,40 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               borderWidth: theme.actionCard.primary.pressed.borderWidth
             }
           },
+          'primary-border-soft': {
+            default: {
+              borderWidth: theme.actionCard['primary-border-soft'].default.borderWidth
+            },
+            disabled: {
+              borderWidth: theme.actionCard['primary-border-soft'].disabled.borderWidth
+            },
+            hovered: {
+              borderWidth: theme.actionCard['primary-border-soft'].hovered.borderWidth
+            },
+            focused: {
+              borderWidth: theme.actionCard['primary-border-soft'].focused.borderWidth
+            },
+            pressed: {
+              borderWidth: theme.actionCard['primary-border-soft'].pressed.borderWidth
+            }
+          },
+          'primary-border-hard': {
+            default: {
+              borderWidth: theme.actionCard['primary-border-hard'].default.borderWidth
+            },
+            disabled: {
+              borderWidth: theme.actionCard['primary-border-hard'].disabled.borderWidth
+            },
+            hovered: {
+              borderWidth: theme.actionCard['primary-border-hard'].hovered.borderWidth
+            },
+            focused: {
+              borderWidth: theme.actionCard['primary-border-hard'].focused.borderWidth
+            },
+            pressed: {
+              borderWidth: theme.actionCard['primary-border-hard'].pressed.borderWidth
+            }
+          },
           highlight: {
             default: {
               borderWidth: theme.actionCard.highlight.default.borderWidth
@@ -6404,6 +6659,98 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               }
             }
           },
+          'primary-border-soft': {
+            default: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft'].default.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft'].default.shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft'].default.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft'].default.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft'].default.shadow.radius
+              }
+            },
+            hovered: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft'].hovered.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft'].hovered.shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft'].hovered.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft'].hovered.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft'].hovered.shadow.radius
+              }
+            },
+            focused: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft'].focused.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft'].focused.shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft'].focused.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft'].focused.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft'].focused.shadow.radius
+              }
+            },
+            pressed: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft'].pressed.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft'].pressed.shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft'].pressed.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft'].pressed.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft'].pressed.shadow.radius
+              }
+            }
+          },
+          'primary-border-hard': {
+            default: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard'].default.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard'].default.shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard'].default.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard'].default.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard'].default.shadow.radius
+              }
+            },
+            hovered: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard'].hovered.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard'].hovered.shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard'].hovered.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard'].hovered.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard'].hovered.shadow.radius
+              }
+            },
+            focused: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard'].focused.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard'].focused.shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard'].focused.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard'].focused.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard'].focused.shadow.radius
+              }
+            },
+            pressed: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard'].pressed.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard'].pressed.shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard'].pressed.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard'].pressed.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard'].pressed.shadow.radius
+              }
+            }
+          },
           highlight: {
             default: {
               shadow: {