@ornikar/kitt-universal 9.3.2 → 9.4.0

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

@@ -121,8 +121,14 @@ const TypographyColorContext = /*#__PURE__*/React.createContext('black');
 function useTypographyColor() {
   return React.useContext(TypographyColorContext);
 }
+const TypographyDefaultColorContext = /*#__PURE__*/React.createContext(undefined);
+
+function useTypographyDefaultColor() {
+  return React.useContext(TypographyDefaultColorContext);
+}
 /** @deprecated use native-base instead for SSR compatibility */
 
+
 const getTypographyTypeConfigKey = theme => {
   const isMediumOrAbove = theme.responsive.matchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
@@ -154,6 +160,11 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
+
+function getNBThemeColorFromColorProps(colorName) {
+  return colorName ? `kitt.typography.${colorName}` : undefined;
+}
+
 function Typography({
   accessibilityRole,
   base: legacyBase,
@@ -173,6 +184,7 @@ function Typography({
   ...otherProps
 }) {
   const isHeaderTypographyInContext = React.useContext(IsHeaderTypographyContext);
+  const defaultColor = useTypographyDefaultColor();
   const hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
   const baseOrDefaultToBody = hasTypographyAncestor ? type.base : type.base ?? 'body';
   const isHeader = isTypographyHeader(baseOrDefaultToBody, isHeaderTypographyInContext);
@@ -189,14 +201,16 @@ 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: color ? `kitt.typography.${color}` : undefined,
-    textDecorationColor: color ? `kitt.typography.${color}` : undefined,
+    color: getNBThemeColorFromColorProps(currentColor),
+    textDecorationColor: getNBThemeColorFromColorProps(currentColor),
     ...otherProps
   });
 
@@ -240,6 +254,7 @@ const createHeading = (level, defaultBase) => {
   return TypographyHeading;
 };
 
+Typography.SetDefaultColor = TypographyDefaultColorContext.Provider;
 Typography.Text = TypographyText;
 Typography.Paragraph = TypographyParagraph;
 Typography.Header1 = createHeading(1);
@@ -833,6 +848,321 @@ function Card({
   });
 }
 
+function getCurrentTextColor({
+  isDisabled,
+  isSelected,
+  isPressed,
+  isHovered
+}) {
+  if (isDisabled) return 'black-light';
+  if (isSelected && isHovered) return 'white';
+  if (isSelected || isPressed) return 'white';
+  return 'black';
+}
+
+function getBorderRadius(defaultRadius, variant) {
+  // The clean way to have the rounded effect would have been to know the children height since radius >= height * 0.5
+  // We don't control over the height of the rendered children we just go with a arbitrary really high value
+  if (variant === 'rounded') return 800;
+  return defaultRadius;
+}
+
+const DisabledBorder = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "ChoiceItem__DisabledBorder",
+  componentId: "kitt-universal__sc-wuv3y6-0"
+})(["border-radius:", "px;", ";"], ({
+  theme,
+  $variant
+}) => getBorderRadius(theme.kitt.choices.item.borderRadius, $variant), ({
+  theme
+}) => {
+  const {
+    width,
+    color
+  } = theme.kitt.choices.item.disabled.border;
+  return styled.css(["border:", "px solid ", ";"], width, color);
+});
+const ChoiceItemView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+  displayName: "ChoiceItem__ChoiceItemView",
+  componentId: "kitt-universal__sc-wuv3y6-1"
+})(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], ({
+  theme,
+  $variant
+}) => getBorderRadius(theme.kitt.choices.item.borderRadius, $variant), ({
+  theme,
+  $isHovered,
+  $isPressed,
+  $isDisabled,
+  $isSelected
+}) => {
+  const {
+    hoverWhenSelected,
+    hover,
+    disabled,
+    selected,
+    pressed,
+    default: defaultBackground
+  } = theme.kitt.choices.item.backgroundColor;
+  if ($isDisabled) return disabled;
+  if ($isSelected && $isHovered) return hoverWhenSelected;
+  if ($isPressed) return pressed;
+  if ($isHovered) return hover;
+  if ($isSelected) return selected;
+  return defaultBackground;
+}, ({
+  theme
+}) => {
+  const {
+    base,
+    small
+  } = theme.kitt.choices.item.padding;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.SMALL
+  }, styled.css(["padding:", "px;"], small), styled.css(["padding:", "px;"], base));
+}, ({
+  theme
+}) => {
+  if (reactNative.Platform.OS !== 'web') return undefined;
+  const {
+    property,
+    duration,
+    timingFunction
+  } = theme.kitt.choices.item.transition;
+  return styled.css(["transition:", " ", "ms ", ";"], property, duration, timingFunction);
+});
+function ChoiceItem({
+  type = 'button',
+  value,
+  selected,
+  disabled,
+  variant,
+  children,
+  isPressedInternal,
+  isHoveredInternal,
+  onPress,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const pressed = Animated.useSharedValue(Boolean(isPressedInternal));
+  const progress = Animated.useDerivedValue(function () {
+    const _f = function () {
+      return Animated.withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: Animated.withTiming,
+      pressed,
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              transition: {
+                duration: theme.kitt.choices.item.transition.duration
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
+    _f.__workletHash = 1120030177160;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (180:35)";
+    return _f;
+  }());
+  const backgroundStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      const {
+        default: defaultBg,
+        pressed: pressedBg,
+        selected: selectedBg,
+        disabled: disabledBg
+      } = theme.kitt.choices.item.backgroundColor;
+      if (disabled) return {
+        backgroundColor: disabledBg
+      };
+      if (selected) return {
+        backgroundColor: selectedBg
+      };
+      return {
+        backgroundColor: Animated.interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled,
+      selected,
+      interpolateColor: Animated.interpolateColor,
+      progress
+    };
+    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
+    _f.__workletHash = 15506726129309;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (184:44)";
+    return _f;
+  }());
+
+  const handleChange = () => {
+    if (!onChange) return; // Checkbox can be toggled
+
+    if (type === 'checkbox') {
+      onChange(selected ? undefined : value);
+      return;
+    }
+
+    onChange(value);
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(nativeBase.Pressable, {
+    disabled: disabled,
+    accessibilityRole: type,
+    accessibilityState: {
+      checked: selected
+    },
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onPress: e => {
+      if (onFocus) onFocus(e);
+      if (onPress) onPress();
+      handleChange();
+      if (onBlur) onBlur(e);
+    },
+    onPressIn: () => {
+      pressed.value = true;
+    },
+    onPressOut: () => {
+      pressed.value = false;
+    },
+    children: ({
+      isHovered,
+      isPressed
+    }) => /*#__PURE__*/jsxRuntime.jsxs(ChoiceItemView, {
+      style: reactNative.Platform.OS !== 'web' ? [backgroundStyles] : undefined,
+      $isHovered: isHovered || isHoveredInternal,
+      $isDisabled: disabled,
+      $isSelected: selected,
+      $isPressed: isPressed || isPressedInternal,
+      $variant: variant,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography.SetDefaultColor, {
+        value: getCurrentTextColor({
+          isDisabled: disabled,
+          isSelected: selected || isPressedInternal,
+          isPressed,
+          isHovered: isHovered || isHoveredInternal
+        }),
+        children: children
+      }), disabled ? /*#__PURE__*/jsxRuntime.jsx(DisabledBorder, {
+        $variant: variant,
+        style: reactNative.StyleSheet.absoluteFillObject
+      }) : null]
+    })
+  });
+}
+
+const ChoiceItemContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "ChoiceItemContainer",
+  componentId: "kitt-universal__sc-17uuimx-0"
+})(["", ""], ({
+  theme,
+  $isLast,
+  $direction
+}) => {
+  const {
+    row,
+    column
+  } = theme.kitt.choices.spacing;
+
+  if ($direction === 'row') {
+    return styled.css(["margin-right:", "px;"], $isLast ? 0 : row);
+  }
+
+  return styled.css(["margin-bottom:", "px;"], $isLast ? 0 : column);
+});
+
+function ChoicesContainer({
+  direction,
+  ...props
+}) {
+  if (direction === 'row') {
+    return /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+      horizontal: true,
+      ...props
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, { ...props
+  });
+}
+
+function Choices({
+  id,
+  testID,
+  type,
+  direction = 'column',
+  disabled,
+  children,
+  value,
+  variant,
+  onPress,
+  onChange,
+  onFocus,
+  onBlur
+}) {
+  const [currentValue, setCurrentValue] = React.useState(value);
+  const isForm = type && ['radio', 'checkbox'].includes(type);
+  const childrenArray = React.Children.toArray(children);
+  const sharedProps = {
+    type,
+    disabled,
+    variant,
+    onPress: !isForm ? onPress : undefined,
+    onChange: isForm ? newValue => {
+      setCurrentValue(newValue);
+      if (onChange) onChange(newValue);
+    } : undefined,
+    onFocus,
+    onBlur
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(ChoicesContainer, {
+    direction: direction,
+    testID: testID,
+    nativeID: id,
+    children: childrenArray.map((child, index) => {
+      const element = /*#__PURE__*/React.cloneElement(child, {
+        selected: isForm ? child.props.value === currentValue : undefined,
+        ...sharedProps
+      });
+      return /*#__PURE__*/jsxRuntime.jsx(ChoiceItemContainer, {
+        $direction: direction,
+        $isLast: index === childrenArray.length - 1,
+        children: element
+      }, child.key);
+    })
+  });
+}
+
+Choices.Item = ChoiceItem;
+function createChoicesComponent() {
+  return Choices;
+}
+const ButtonChoices = createChoicesComponent();
+Choices.ButtonChoices = ButtonChoices;
+const ChoicesElements = {
+  Item: ChoiceItem,
+  ButtonChoices
+};
+
 function Emoji({
   emoji,
   size,
@@ -1159,6 +1489,39 @@ const card = {
   }
 };
 
+const choices = {
+  spacing: {
+    row: 12,
+    column: 12
+  },
+  item: {
+    borderRadius: 10,
+    padding: {
+      base: 16,
+      small: 24
+    },
+    backgroundColor: {
+      default: lateOceanColorPalette.black50,
+      disabled: colors.disabled,
+      selected: colors.primary,
+      pressed: lateOceanColorPalette.lateOceanLight1,
+      hover: lateOceanColorPalette.black100,
+      hoverWhenSelected: lateOceanColorPalette.lateOceanLight1
+    },
+    disabled: {
+      border: {
+        width: 2,
+        color: lateOceanColorPalette.black100
+      }
+    },
+    transition: {
+      property: 'all',
+      duration: 300,
+      timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
+    }
+  }
+};
+
 const feedbackMessage = {
   danger: {
     backgroundColor: colors.danger
@@ -1572,6 +1935,7 @@ const theme = {
   breakpoints,
   button,
   card,
+  choices,
   feedbackMessage,
   forms,
   fullScreenModal,
@@ -5103,6 +5467,7 @@ exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.ChoicesElements = ChoicesElements;
 exports.DatePicker = DatePicker;
 exports.Emoji = Emoji;
 exports.ExternalAppLink = ExternalAppLink;
@@ -5163,6 +5528,7 @@ exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.VStack = VStack;
 exports.View = View;
+exports.createChoicesComponent = createChoicesComponent;
 exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;