@ornikar/bumper 3.1.0 → 3.2.0

package/dist/index.es.js

@@ -1,11 +1,11 @@
-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 _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 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';
@@ -422,13 +422,13 @@ var Center = styled(View, {
   alignItems: 'center'
 });
 
-var _excluded$1 = ["as"];
+var _excluded = ["as"];
 /**
  * A polymorphic Pressable component that can render as any Tamagui primitive.
  */
 function Pressable(_ref) {
   var as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var Component = styled(as !== null && as !== void 0 ? as : View, {
     name: 'Pressable',
     role: 'button',
@@ -446,78 +446,56 @@ var VStack = styled(Stack, {
   flexDirection: 'column'
 });
 
-function getVariantAndWeightValues(weightProp, variantProp, typographyWeightAncestorValue, typographyVariantAncestorValue) {
-  var computedVariant = variantProp || typographyVariantAncestorValue || undefined;
-  if (computedVariant) {
-    if (BODY_VARIANTS.includes(computedVariant)) {
-      var 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
-  };
-}
-
-var TypographyVariantContext = /*#__PURE__*/createContext(null);
-var TypographyWeightContext = /*#__PURE__*/createContext(null);
-var TypograhyColorContext = /*#__PURE__*/createContext(null);
-var TypographyContext = /*#__PURE__*/createContext(false);
-var useTypographyColor = function () {
-  return useContext(TypograhyColorContext);
-};
-var useTypographyVariant = function () {
-  return useContext(TypographyVariantContext);
-};
-var useTypographyWeight = function () {
-  return useContext(TypographyWeightContext);
-};
-var useTypographyContext = function () {
-  return useContext(TypographyContext);
-};
+var typographyStyleContext = createStyledContext({
+  color: undefined,
+  weight: undefined,
+  variant: undefined
+});
 
-var InternalTypographyBase = styled(Text, {
+var 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: function (_variant) {
-      if (!_variant) return {};
-      var isContentCapsVariant = CONTENT_CAPS_VARIANTS.includes(_variant);
-      return {
-        fontFamily: isContentCapsVariant ? '$GTStandardNarrow' : '$GTStandard',
-        textTransform: isContentCapsVariant ? 'uppercase' : undefined,
+      var commonVariantStyles = {
         fontSize: "$".concat(_variant),
         lineHeight: "$".concat(_variant),
         letterSpacing: "$".concat(_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: {
@@ -532,52 +510,9 @@ var InternalTypographyBase = styled(Text, {
     }
   },
   defaultVariants: {
-    variant: 'body-m',
     weight: 'regular'
   }
 });
-var InternalTypography = InternalTypographyBase.styleable(function (props, ref) {
-  var typographyVariantAncestorValue = useTypographyVariant();
-  var typographyWeightAncestorValue = useTypographyWeight();
-  var typographyColorAncestorValue = useTypographyColor();
-  var typographyContext = useTypographyContext();
-  var _getVariantAndWeightV = getVariantAndWeightValues(props.weight, props.variant, typographyWeightAncestorValue, typographyVariantAncestorValue),
-    variant = _getVariantAndWeightV.variant,
-    weight = _getVariantAndWeightV.weight;
-  var color = props.color || typographyColorAncestorValue || undefined;
-  var content = /*#__PURE__*/jsx(InternalTypographyBase, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    ref: ref
-  }, props), color ? {
-    color: color
-  } : undefined), weight ? {
-    weight: weight
-  } : undefined), variant ? {
-    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));
 }
@@ -591,6 +526,13 @@ var createHeading = function (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);
+}
+
 var IconContainer = styled(View, {
   name: 'Icon',
   variants: {
@@ -603,76 +545,45 @@ var IconContainer = styled(View, {
     }
   }
 });
-function Icon(_ref2) {
-  var icon = _ref2.icon,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? '$content.base.hi' : _ref2$color,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? '$icon.m' : _ref2$size,
-    testID = _ref2.testID,
-    alignSelf = _ref2.alignSelf;
+var InternalIcon = IconContainer.styleable(function (props) {
+  var flattenProps = useProps(props);
   var style = useStyle({
-    color: color
+    color: flattenProps.color || '$content.base.hi'
   });
-  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+  var 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
   });
-}
+});
 
 var 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) {
-  var 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));
 }
 
-var _excluded = ["color"];
-function TypographyIconInternal(props) {
+var 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) {
-  var typographyColorAncestorValue = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconInternal, _objectSpread({
-    color: typographyColorAncestorValue || undefined
-  }, props));
-}
-function TypographyIcon(_ref) {
-  var color = _ref.color,
-    props = _objectWithoutProperties(_ref, _excluded);
-  if (color) {
-    return /*#__PURE__*/jsx(TypographyIconInternal, _objectSpread({
-      color: color
-    }, props));
-  }
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
-}
 
 var InternalTypographyLink = styled(InternalTypography, {
   name: 'TypographyLink',
+  context: typographyStyleContext,
   role: 'link',
   variants: {
     disabled: {