@ornikar/bumper 3.1.0 → 3.2.0

package/dist/index-metro.es.ios.js

@@ -1,9 +1,9 @@
-import { px, createFont, createTokens, createTamagui, TamaguiProvider, styled, View, Stack, Text, useStyle, useProps, useMedia } from '@tamagui/core';
+import { px, createFont, createTokens, createTamagui, TamaguiProvider, styled, View, Stack, createStyledContext, Text, useProps as useProps$1, useStyle, useMedia } from '@tamagui/core';
 export { Stack, View } from '@tamagui/core';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { createContext, useContext, cloneElement, useMemo, useEffect } from 'react';
+import { cloneElement, useMemo, useEffect } from 'react';
 import Animated, { Easing, useAnimatedProps, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
 export { Image } from '@tamagui/image';
@@ -425,7 +425,7 @@ const Center = styled(View, {
   alignItems: 'center'
 });
 
-const _excluded$1 = ["as"];
+const _excluded = ["as"];
 /**
  * A polymorphic Pressable component that can render as any Tamagui primitive.
  */
@@ -433,7 +433,7 @@ function Pressable(_ref) {
   let {
       as
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
+    rest = _objectWithoutProperties(_ref, _excluded);
   const Component = styled(as !== null && as !== void 0 ? as : View, {
     name: 'Pressable',
     role: 'button',
@@ -451,78 +451,56 @@ const VStack = styled(Stack, {
   flexDirection: 'column'
 });
 
-function getVariantAndWeightValues(weightProp, variantProp, typographyWeightAncestorValue, typographyVariantAncestorValue) {
-  const computedVariant = variantProp || typographyVariantAncestorValue || undefined;
-  if (computedVariant) {
-    if (BODY_VARIANTS.includes(computedVariant)) {
-      const computedWeight = weightProp || typographyWeightAncestorValue || undefined;
-      return {
-        weight: computedWeight,
-        variant: computedVariant
-      };
-    }
-    // Content Caps variant have fixed weights so we override any provided weight
-    if (CONTENT_CAPS_VARIANTS.includes(computedVariant)) {
-      return {
-        weight: 'bold',
-        variant: computedVariant
-      };
-    }
-    // Heading variants have fixed weights so we override any provided weight
-    if (HEADING_VARIANTS.includes(computedVariant)) {
-      return {
-        weight: 'semibold',
-        variant: computedVariant
-      };
-    }
-    // Label variants have fixed weights so we override any provided weight
-    if (LABEL_VARIANTS.includes(computedVariant)) {
-      return {
-        weight: 'semibold',
-        variant: computedVariant
-      };
-    }
-  }
-  return {
-    weight: weightProp,
-    variant: undefined
-  };
-}
-
-const TypographyVariantContext = /*#__PURE__*/createContext(null);
-const TypographyWeightContext = /*#__PURE__*/createContext(null);
-const TypograhyColorContext = /*#__PURE__*/createContext(null);
-const TypographyContext = /*#__PURE__*/createContext(false);
-const useTypographyColor = () => {
-  return useContext(TypograhyColorContext);
-};
-const useTypographyVariant = () => {
-  return useContext(TypographyVariantContext);
-};
-const useTypographyWeight = () => {
-  return useContext(TypographyWeightContext);
-};
-const useTypographyContext = () => {
-  return useContext(TypographyContext);
-};
+const typographyStyleContext = createStyledContext({
+  color: undefined,
+  weight: undefined,
+  variant: undefined
+});
 
-const InternalTypographyBase = styled(Text, {
+const InternalTypography = styled(Text, {
+  context: typographyStyleContext,
   fontFamily: '$GTStandard',
+  fontSize: '$body-m',
+  lineHeight: '$body-m',
+  letterSpacing: '$body-m',
+  fontWeight: '$regular',
   color: '$content.base.hi',
   '$platform-web': {
     WebkitFontSmoothing: 'antialiased'
   },
   variants: {
     variant: variant => {
-      if (!variant) return {};
-      const isContentCapsVariant = CONTENT_CAPS_VARIANTS.includes(variant);
-      return {
-        fontFamily: isContentCapsVariant ? '$GTStandardNarrow' : '$GTStandard',
-        textTransform: isContentCapsVariant ? 'uppercase' : undefined,
+      const commonVariantStyles = {
         fontSize: `$${variant}`,
         lineHeight: `$${variant}`,
         letterSpacing: `$${variant}`
       };
+
+      // Body variant
+      if (BODY_VARIANTS.includes(variant)) {
+        return _objectSpread({}, commonVariantStyles);
+      }
+      // Content Caps variant
+      if (CONTENT_CAPS_VARIANTS.includes(variant)) {
+        return _objectSpread({
+          fontFamily: '$GTStandardNarrow',
+          textTransform: 'uppercase',
+          fontWeight: '$bold'
+        }, commonVariantStyles);
+      }
+      // Heading variants
+      if (HEADING_VARIANTS.includes(variant)) {
+        return _objectSpread({
+          fontWeight: '$semibold'
+        }, commonVariantStyles);
+      }
+      // Label variants
+      if (LABEL_VARIANTS.includes(variant)) {
+        return _objectSpread({
+          fontWeight: '$semibold'
+        }, commonVariantStyles);
+      }
+      return undefined;
     },
     weight: {
       regular: {
@@ -537,53 +515,9 @@ const InternalTypographyBase = styled(Text, {
     }
   },
   defaultVariants: {
-    variant: 'body-m',
     weight: 'regular'
   }
 });
-const InternalTypography = InternalTypographyBase.styleable((props, ref) => {
-  const typographyVariantAncestorValue = useTypographyVariant();
-  const typographyWeightAncestorValue = useTypographyWeight();
-  const typographyColorAncestorValue = useTypographyColor();
-  const typographyContext = useTypographyContext();
-  const {
-    variant,
-    weight
-  } = getVariantAndWeightValues(props.weight, props.variant, typographyWeightAncestorValue, typographyVariantAncestorValue);
-  const color = props.color || typographyColorAncestorValue || undefined;
-  let content = /*#__PURE__*/jsx(InternalTypographyBase, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    ref: ref
-  }, props), color ? {
-    color
-  } : undefined), weight ? {
-    weight
-  } : undefined), variant ? {
-    variant
-  } : undefined));
-  content = typographyContext ? content : /*#__PURE__*/jsx(TypographyContext.Provider, {
-    value: true,
-    children: content
-  });
-
-  // If a variant is provided, we set it in the context for children to be able to inherit variant value
-  content = props.variant ? /*#__PURE__*/jsx(TypographyVariantContext.Provider, {
-    value: props.variant,
-    children: content
-  }) : content;
-
-  // If a weight is provided, we set it in the context for children to be able to inherit weight value
-  content = props.weight ? /*#__PURE__*/jsx(TypographyWeightContext.Provider, {
-    value: props.weight,
-    children: content
-  }) : content;
-
-  // If a color is provided, we set it in the context for children to be able to inherit color value
-  content = props.color ? /*#__PURE__*/jsx(TypograhyColorContext.Provider, {
-    value: props.color,
-    children: content
-  }) : content;
-  return content;
-});
 function TypographyBase(props) {
   return /*#__PURE__*/jsx(InternalTypography, _objectSpread({}, props));
 }
@@ -597,6 +531,13 @@ const createHeading = level => {
   };
 };
 
+// eslint-disable-next-line no-restricted-imports
+// This hook is a wrapper around Tamagui's useProps to extract only the non-media props from the given props object.
+// It uses our custom PropsWithoutMediaStyles type to ensure that all media props are optional, even if they are required in the original props type. This is necessary for our components which have required media props (like variant for Typography).
+function useProps(props) {
+  return useProps$1(props);
+}
+
 const IconContainer = styled(View, {
   name: 'Icon',
   variants: {
@@ -610,77 +551,45 @@ const IconContainer = styled(View, {
     }
   }
 });
-function Icon({
-  icon,
-  color = '$content.base.hi',
-  size = '$icon.m',
-  testID,
-  alignSelf
-}) {
+const InternalIcon = IconContainer.styleable(props => {
+  const flattenProps = useProps(props);
   const style = useStyle({
-    color
+    color: flattenProps.color || '$content.base.hi'
   });
-  const clonedIcon = /*#__PURE__*/cloneElement(icon, {
+  const clonedIcon = /*#__PURE__*/cloneElement(flattenProps.icon, {
     color: style.color
   });
   return /*#__PURE__*/jsx(IconContainer, {
-    size: size,
-    testID: testID,
-    alignSelf: alignSelf,
+    size: flattenProps.size,
+    testID: flattenProps.testID,
+    alignSelf: flattenProps.alignSelf,
     children: clonedIcon
   });
-}
+});
 
 const InternalTypographyView = styled(View, {
-  name: 'TypographyView'
+  name: 'TypographyViewInternal',
+  '$platform-web': {
+    display: 'inline-flex'
+  }
 });
-/**
- *
- * A wrapper component that applies typography styles to its children in order to maintain consistent style between web and native
- * In native, it simply renders a View as it renders correctly by default
- * In web, it ensures that the display is set to inline-flex when inside a Typography context
- *
- * React Native Web includes this implementation in its codebase
- * but Tamagui does not use React Native Webview, we need to implement it ourselves
- *
- * Inside a Typography component, always use TypographyView to wrap external components like Icon or Svg
- */
 function TypographyView(props) {
-  const isInTypographyContext = useTypographyContext();
-  return /*#__PURE__*/jsx(InternalTypographyView, _objectSpread(_objectSpread({}, props), {}, {
-    "$platform-web": isInTypographyContext ? _objectSpread(_objectSpread({}, props['$platform-web']), {}, {
-      display: 'inline-flex'
-    }) : props['$platform-web']
-  }));
+  return /*#__PURE__*/jsx(InternalTypographyView, _objectSpread({}, props));
 }
 
-const _excluded = ["color"];
-function TypographyIconInternal(props) {
+const TypographyIconInternal = styled(InternalIcon, {
+  name: 'TypographyIconInternal',
+  context: typographyStyleContext
+});
+function TypographyIcon(props) {
   return /*#__PURE__*/jsx(TypographyView, {
-    children: /*#__PURE__*/jsx(Icon, _objectSpread({}, props))
+    children: /*#__PURE__*/jsx(TypographyIconInternal, _objectSpread({}, props))
   });
 }
-function TypographyIconInheritColor(props) {
-  const typographyColorAncestorValue = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconInternal, _objectSpread({
-    color: typographyColorAncestorValue || undefined
-  }, props));
-}
-function TypographyIcon(_ref) {
-  let {
-      color
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  if (color) {
-    return /*#__PURE__*/jsx(TypographyIconInternal, _objectSpread({
-      color: color
-    }, props));
-  }
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
-}
 
 const InternalTypographyLink = styled(InternalTypography, {
   name: 'TypographyLink',
+  context: typographyStyleContext,
   role: 'link',
   variants: {
     disabled: {