@ornikar/bumper 3.1.0 → 3.2.0

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

@@ -458,78 +458,61 @@ const VStack = core.styled(core.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__*/react.createContext(null);
-const TypographyWeightContext = /*#__PURE__*/react.createContext(null);
-const TypograhyColorContext = /*#__PURE__*/react.createContext(null);
-const TypographyContext = /*#__PURE__*/react.createContext(false);
-const useTypographyColor = () => {
-  return react.useContext(TypograhyColorContext);
-};
-const useTypographyVariant = () => {
-  return react.useContext(TypographyVariantContext);
-};
-const useTypographyWeight = () => {
-  return react.useContext(TypographyWeightContext);
-};
-const useTypographyContext = () => {
-  return react.useContext(TypographyContext);
-};
+const typographyStyleContext = core.createStyledContext({
+  color: undefined,
+  weight: undefined,
+  variant: undefined
+});
 
-const InternalTypographyBase = core.styled(core.Text, {
+const InternalTypography = core.styled(core.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 {
+          ...commonVariantStyles
+        };
+      }
+      // Content Caps variant
+      if (CONTENT_CAPS_VARIANTS.includes(variant)) {
+        return {
+          fontFamily: '$GTStandardNarrow',
+          textTransform: 'uppercase',
+          fontWeight: '$bold',
+          ...commonVariantStyles
+        };
+      }
+      // Heading variants
+      if (HEADING_VARIANTS.includes(variant)) {
+        return {
+          fontWeight: '$semibold',
+          ...commonVariantStyles
+        };
+      }
+      // Label variants
+      if (LABEL_VARIANTS.includes(variant)) {
+        return {
+          fontWeight: '$semibold',
+          ...commonVariantStyles
+        };
+      }
+      return undefined;
     },
     weight: {
       regular: {
@@ -544,57 +527,9 @@ const InternalTypographyBase = core.styled(core.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__*/jsxRuntime.jsx(InternalTypographyBase, {
-    ref: ref,
-    ...props,
-    ...(color ? {
-      color
-    } : undefined),
-    ...(weight ? {
-      weight
-    } : undefined),
-    ...(variant ? {
-      variant
-    } : undefined)
-  });
-  content = typographyContext ? content : /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx(TypograhyColorContext.Provider, {
-    value: props.color,
-    children: content
-  }) : content;
-  return content;
-});
 function TypographyBase(props) {
   return /*#__PURE__*/jsxRuntime.jsx(InternalTypography, {
     ...props
@@ -611,6 +546,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 core.useProps(props);
+}
+
 const IconContainer = core.styled(core.View, {
   name: 'Icon',
   variants: {
@@ -624,83 +566,49 @@ const IconContainer = core.styled(core.View, {
     }
   }
 });
-function Icon({
-  icon,
-  color = '$content.base.hi',
-  size = '$icon.m',
-  testID,
-  alignSelf
-}) {
+const InternalIcon = IconContainer.styleable(props => {
+  const flattenProps = useProps(props);
   const style = core.useStyle({
-    color
+    color: flattenProps.color || '$content.base.hi'
   });
-  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(flattenProps.icon, {
     color: style.color
   });
   return /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
-    size: size,
-    testID: testID,
-    alignSelf: alignSelf,
+    size: flattenProps.size,
+    testID: flattenProps.testID,
+    alignSelf: flattenProps.alignSelf,
     children: clonedIcon
   });
-}
+});
 
 const InternalTypographyView = core.styled(core.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__*/jsxRuntime.jsx(InternalTypographyView, {
-    ...props,
-    "$platform-web": isInTypographyContext ? {
-      ...props['$platform-web'],
-      display: 'inline-flex'
-    } : props['$platform-web']
+    ...props
   });
 }
 
-function TypographyIconInternal(props) {
+const TypographyIconInternal = core.styled(InternalIcon, {
+  name: 'TypographyIconInternal',
+  context: typographyStyleContext
+});
+function TypographyIcon(props) {
   return /*#__PURE__*/jsxRuntime.jsx(TypographyView, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIconInternal, {
       ...props
     })
   });
 }
-function TypographyIconInheritColor(props) {
-  const typographyColorAncestorValue = useTypographyColor();
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconInternal, {
-    color: typographyColorAncestorValue || undefined,
-    ...props
-  });
-}
-function TypographyIcon({
-  color,
-  ...props
-}) {
-  if (color) {
-    return /*#__PURE__*/jsxRuntime.jsx(TypographyIconInternal, {
-      color: color,
-      ...props
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconInheritColor, {
-    ...props
-  });
-}
 
 const InternalTypographyLink = core.styled(InternalTypography, {
   name: 'TypographyLink',
+  context: typographyStyleContext,
   role: 'link',
   variants: {
     disabled: {
@@ -769,7 +677,7 @@ function Badge(props) {
   const {
     count,
     maxCount = 9
-  } = core.useProps(props);
+  } = useProps(props);
   if (count === undefined) {
     return /*#__PURE__*/jsxRuntime.jsx(BadgeDot, {});
   }