@ornikar/bumper 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/.eslintrc.json

@@ -24,8 +24,8 @@
         "paths": [
           {
             "name": "@tamagui/core",
-            "importNames": ["View", "ViewProps"],
-            "message": "Import `View` and `ViewProps` from `system/core/primitives/View` instead."
+            "importNames": ["View", "ViewProps", "useProps", "PropsWithoutMediaStyles"],
+            "message": "Import our internal bumper variations."
           },
           {
             "name": "react-native",

package/src/system/content/icon/Icon.tsx

@@ -2,6 +2,7 @@ import type { ColorTokens, GetProps } from '@tamagui/core';
 import { styled, useStyle } from '@tamagui/core';
 import type { ReactElement, ReactNode } from 'react';
 import { cloneElement } from 'react';
+import { useProps } from '../../core/hooks/useProps';
 import { View } from '../../core/primitives/View';
 import type { BumperIconTokens } from '../../core/tokens/bumperIcon';
 import type { TamaguiMediaProps } from '../../types';
@@ -35,14 +36,19 @@ interface InternalIconProps {
 
 export type IconProps = TamaguiMediaProps<InternalIconProps>;
 
-export function Icon({ icon, color = '$content.base.hi', size = '$icon.m', testID, alignSelf }: IconProps): ReactNode {
-  const style = useStyle({ color });
+export const InternalIcon = IconContainer.styleable<IconProps>((props) => {
+  const flattenProps = useProps(props);
+  const style = useStyle({ color: flattenProps.color || '$content.base.hi' });
 
-  const clonedIcon = cloneElement(icon, { color: style.color });
+  const clonedIcon = cloneElement(flattenProps.icon, { color: style.color });
 
   return (
-    <IconContainer size={size} testID={testID} alignSelf={alignSelf}>
+    <IconContainer size={flattenProps.size} testID={flattenProps.testID} alignSelf={flattenProps.alignSelf}>
       {clonedIcon}
     </IconContainer>
   );
+});
+
+export function Icon(props: IconProps): ReactNode {
+  return <InternalIcon {...props} />;
 }

package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap

@@ -32,8 +32,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 base.hi
               </span>
@@ -50,8 +49,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 base.mid
               </span>
@@ -68,8 +66,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 base.low
               </span>
@@ -86,8 +83,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 accent
               </span>
@@ -104,8 +100,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 success
               </span>
@@ -122,8 +117,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 warning
               </span>
@@ -140,8 +134,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 danger
               </span>
@@ -158,8 +151,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 info
               </span>
@@ -204,8 +196,7 @@ exports[`Bumper/Content/Icon/Features Sizes 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 s (16)
               </span>
@@ -222,8 +213,7 @@ exports[`Bumper/Content/Icon/Features Sizes 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 m (20)
               </span>
@@ -240,8 +230,7 @@ exports[`Bumper/Content/Icon/Features Sizes 1`] = `
                 />
               </div>
               <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fw-f-weight-re98715119 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
-                data-disable-theme="true"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
               >
                 l (24)
               </span>

package/src/system/content/typography/Typography.tsx

@@ -1,27 +1,35 @@
-import type { ColorTokens, TextStyle } from '@tamagui/core';
+import type { ColorTokens, GetProps } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
 import type { ReactNode } from 'react';
-import type { BodyFontVariants, HeadingFontVariants, LabelFontVariants } from '../../core/tokens/GTStandardFont';
+import { type Except } from 'type-fest';
+import {
+  BODY_VARIANTS,
+  type BodyFontVariants,
+  HEADING_VARIANTS,
+  type HeadingFontVariants,
+  LABEL_VARIANTS,
+  type LabelFontVariants,
+} from '../../core/tokens/GTStandardFont';
 import { CONTENT_CAPS_VARIANTS, type ContentCapsVariants } from '../../core/tokens/GTStandardNarrowFont';
 import type { FontVariants } from '../../core/tokens/fonts';
 import type { TamaguiMediaProps } from '../../types';
-import { getVariantAndWeightValues } from './utils/getVariantAndWeightValues';
-import {
-  TypograhyColorContext,
-  TypographyContext,
-  TypographyVariantContext,
-  TypographyWeightContext,
-  useTypographyColor,
-  useTypographyContext,
-  useTypographyVariant,
-  useTypographyWeight,
-} from './utils/typographyContext';
+import { typographyStyleContext } from './utils/typographyContext';
+
+interface TypographyWithoutMediaProps extends TypographyPropsWithoutFontStyleProps {}
 
-interface TypographyWithoutMediaProps {
+// Remove font-related style props from InternalTypography Props
+type TypographyExcludedFontStyleProps =
+  | 'fontFamily'
+  | 'fontSize'
+  | 'lineHeight'
+  | 'fontStyle'
+  | 'fontVariant'
+  | 'fontWeight'
+  | 'color';
+
+type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps> & {
   color?: ColorTokens;
-  textAlign?: TextStyle['textAlign'];
-  children: ReactNode;
-}
+};
 
 export interface BodyProps extends TypographyWithoutMediaProps {
   variant?: BodyFontVariants;
@@ -41,24 +49,56 @@ export type TypographyTextProps =
   | TamaguiMediaProps<HeadingLabelProps>
   | TamaguiMediaProps<ContentCapsProps>;
 
-const InternalTypographyBase = styled(Text, {
+export 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: FontVariants | undefined) => {
-      if (!variant) return {};
-      const isContentCapsVariant = (CONTENT_CAPS_VARIANTS as readonly string[]).includes(variant);
-
-      return {
-        fontFamily: isContentCapsVariant ? '$GTStandardNarrow' : '$GTStandard',
-        textTransform: isContentCapsVariant ? 'uppercase' : undefined,
+    variant: (variant: FontVariants) => {
+      const commonVariantStyles = {
         fontSize: `$${variant}`,
         lineHeight: `$${variant}`,
         letterSpacing: `$${variant}`,
       };
+
+      // Body variant
+      if ((BODY_VARIANTS as readonly string[]).includes(variant)) {
+        return {
+          ...commonVariantStyles,
+        };
+      }
+      // Content Caps variant
+      if ((CONTENT_CAPS_VARIANTS as readonly string[]).includes(variant)) {
+        return {
+          fontFamily: '$GTStandardNarrow',
+          textTransform: 'uppercase',
+          fontWeight: '$bold',
+          ...commonVariantStyles,
+        };
+      }
+      // Heading variants
+      if ((HEADING_VARIANTS as readonly string[]).includes(variant)) {
+        return {
+          fontWeight: '$semibold',
+          ...commonVariantStyles,
+        };
+      }
+      // Label variants
+      if ((LABEL_VARIANTS as readonly string[]).includes(variant)) {
+        return {
+          fontWeight: '$semibold',
+          ...commonVariantStyles,
+        };
+      }
+
+      return undefined;
     },
     weight: {
       regular: {
@@ -73,60 +113,11 @@ const InternalTypographyBase = styled(Text, {
     },
   } as const,
   defaultVariants: {
-    variant: 'body-m',
     weight: 'regular',
   },
 });
 
-export const InternalTypography = InternalTypographyBase.styleable<TypographyTextProps>((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 = (
-    <InternalTypographyBase
-      ref={ref}
-      {...props}
-      {...(color ? { color } : undefined)}
-      {...(weight ? { weight } : undefined)}
-      {...(variant ? { variant } : undefined)}
-    />
-  );
-
-  content = typographyContext ? content : <TypographyContext.Provider value>{content}</TypographyContext.Provider>;
-
-  // If a variant is provided, we set it in the context for children to be able to inherit variant value
-  content = props.variant ? (
-    <TypographyVariantContext.Provider value={props.variant}>{content}</TypographyVariantContext.Provider>
-  ) : (
-    content
-  );
-
-  // If a weight is provided, we set it in the context for children to be able to inherit weight value
-  content = props.weight ? (
-    <TypographyWeightContext.Provider value={props.weight}>{content}</TypographyWeightContext.Provider>
-  ) : (
-    content
-  );
-
-  // If a color is provided, we set it in the context for children to be able to inherit color value
-  content = props.color ? (
-    <TypograhyColorContext.Provider value={props.color}>{content}</TypograhyColorContext.Provider>
-  ) : (
-    content
-  );
-
-  return content;
-});
+export type InternalTypographyProps = GetProps<typeof InternalTypography>;
 
 export function TypographyBase(props: TypographyTextProps): ReactNode {
   return <InternalTypography {...props} />;

package/src/system/content/typography/TypographyIcon.tsx

@@ -1,33 +1,28 @@
+import { styled } from '@tamagui/core';
 import { type ReactNode } from 'react';
 import type { Except } from 'type-fest';
+import type { TamaguiMediaProps } from '../../types';
 import type { IconProps } from '../icon/Icon';
-import { Icon } from '../icon/Icon';
+import { InternalIcon } from '../icon/Icon';
 import type { TypographyTextProps } from './Typography';
 import { TypographyView } from './TypographyView';
-import { useTypographyColor } from './utils/typographyContext';
+import { typographyStyleContext } from './utils/typographyContext';
 
-export interface TypographyIconProps extends Except<IconProps, 'color'> {
+interface TypographyIconWithoutMediaProps extends Except<IconProps, 'color'> {
   color?: TypographyTextProps['color'];
 }
 
-function TypographyIconInternal(props: TypographyIconProps): ReactNode {
+const TypographyIconInternal = styled(InternalIcon, {
+  name: 'TypographyIconInternal',
+  context: typographyStyleContext,
+});
+
+export type TypographyIconProps = TamaguiMediaProps<TypographyIconWithoutMediaProps>;
+
+export function TypographyIcon(props: TypographyIconProps): ReactNode {
   return (
     <TypographyView>
-      <Icon {...props} />
+      <TypographyIconInternal {...props} />
     </TypographyView>
   );
 }
-
-function TypographyIconInheritColor(props: TypographyIconProps): ReactNode {
-  const typographyColorAncestorValue = useTypographyColor();
-
-  return <TypographyIconInternal color={typographyColorAncestorValue || undefined} {...props} />;
-}
-
-export function TypographyIcon({ color, ...props }: TypographyIconProps): ReactNode {
-  if (color) {
-    return <TypographyIconInternal color={color} {...props} />;
-  }
-
-  return <TypographyIconInheritColor {...props} />;
-}

package/src/system/content/typography/TypographyLink.features.stories.tsx

@@ -1,8 +1,10 @@
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VStack } from '../../core/primitives/Stack';
 import type { BodyProps } from './Typography';
 import type { TypographyLinkProps } from './TypographyLink';
 import { InternalTypographyLink, TypographyLink } from './TypographyLink';
+import { Typography } from '.';
 
 const meta: Meta<Extract<TypographyLinkProps, BodyProps>> = {
   title: 'Bumper/Content/TypographyLink/Features',
@@ -16,7 +18,7 @@ export const DisabledFalse: Story = {
   args: {
     disabled: false,
     children: 'Enabled link (clickable with pointer cursor)',
-    onPress: () => alert('Link clicked!'),
+    onPress: action('Link clicked!'),
   },
 };
 
@@ -24,7 +26,7 @@ export const DisabledTrue: Story = {
   args: {
     disabled: true,
     children: 'Disabled link (not-allowed cursor, onPress removed)',
-    onPress: () => alert('This should not be called'),
+    onPress: action('This should not be called'),
   },
 };
 
@@ -32,7 +34,7 @@ export const NoUnderlineFalse: Story = {
   args: {
     noUnderline: false,
     children: 'Link with underline (default)',
-    onPress: () => alert('Link clicked!'),
+    onPress: action('Link clicked!'),
   },
 };
 
@@ -40,23 +42,47 @@ export const NoUnderlineTrue: Story = {
   args: {
     noUnderline: true,
     children: 'Link without underline',
-    onPress: () => alert('Link clicked!'),
+    onPress: action('Link clicked!'),
   },
 };
 
+export const NestedInContentCaps: Story = {
+  render: () => (
+    <Typography.Text variant="content-caps-m">
+      content caps with <TypographyLink onPress={action('Link clicked!')}>a nested link</TypographyLink>
+    </Typography.Text>
+  ),
+};
+
+export const NestedInHeading: Story = {
+  render: () => (
+    <Typography.Text variant="heading-m">
+      Heading with <TypographyLink onPress={action('Link clicked!')}>a nested link</TypographyLink>
+    </Typography.Text>
+  ),
+};
+
+export const NestedInBodyBold: Story = {
+  render: () => (
+    <Typography.Text variant="body-l" weight="bold" color="$content.accent">
+      Bold accent text with <TypographyLink onPress={action('Link clicked!')}>a nested link</TypographyLink>
+    </Typography.Text>
+  ),
+};
+
 export const StateHover: Story = {
   render: () => (
     <VStack gap="$space.16">
-      <InternalTypographyLink forceStyle="hover" onPress={() => alert('Link clicked!')}>
+      <InternalTypographyLink forceStyle="hover" onPress={action('Link clicked!')}>
         Forced hover state - underline removed (hoverStyle applied)
       </InternalTypographyLink>
-      <InternalTypographyLink noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
+      <InternalTypographyLink noUnderline forceStyle="hover" onPress={action('Link clicked!')}>
         Forced hover state with noUnderline - no visual change
       </InternalTypographyLink>
-      <InternalTypographyLink disabled forceStyle="hover" onPress={() => alert('Link clicked!')}>
+      <InternalTypographyLink disabled forceStyle="hover" onPress={action('Link clicked!')}>
         Forced hover state on disabled - underline removed (hoverStyle applied)
       </InternalTypographyLink>
-      <InternalTypographyLink disabled noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
+      <InternalTypographyLink disabled noUnderline forceStyle="hover" onPress={action('Link clicked!')}>
         Forced hover state with noUnderline on disabled - no visual change
       </InternalTypographyLink>
     </VStack>

package/src/system/content/typography/TypographyLink.stories.tsx

@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
 import type { BodyProps } from './Typography';
@@ -68,6 +69,6 @@ export const Default: Story = {
     disabled: false,
     noUnderline: false,
     children: 'This is a link',
-    onPress: () => alert('Link clicked!'),
+    onPress: action('Link clicked!'),
   },
 };

package/src/system/content/typography/TypographyLink.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import type { TamaguiMediaProps } from '../../types';
 import type { TypographyTextProps } from './Typography';
 import { InternalTypography } from './Typography';
+import { typographyStyleContext } from './utils/typographyContext';
 
 export interface TypographyLinkWithoutMediaProps {
   disabled?: boolean;
@@ -14,6 +15,7 @@ export type TypographyLinkProps = TypographyTextProps & TamaguiMediaProps<Typogr
 
 export const InternalTypographyLink = styled(InternalTypography, {
   name: 'TypographyLink',
+  context: typographyStyleContext,
   role: 'link',
   variants: {
     disabled: {

package/src/system/content/typography/TypographyView.tsx

@@ -2,13 +2,6 @@ import type { GetProps } from '@tamagui/core';
 import { styled } from '@tamagui/core';
 import type { ReactNode } from 'react';
 import { View } from '../../core/primitives/View';
-import { useTypographyContext } from './utils/typographyContext';
-
-const InternalTypographyView = styled(View, {
-  name: 'TypographyView',
-});
-
-type TypographyViewProps = GetProps<typeof InternalTypographyView>;
 
 /**
  *
@@ -21,15 +14,15 @@ type TypographyViewProps = GetProps<typeof InternalTypographyView>;
  *
  * Inside a Typography component, always use TypographyView to wrap external components like Icon or Svg
  */
-export function TypographyView(props: TypographyViewProps): ReactNode {
-  const isInTypographyContext = useTypographyContext();
+const InternalTypographyView = styled(View, {
+  name: 'TypographyViewInternal',
+  '$platform-web': {
+    display: 'inline-flex',
+  },
+});
 
-  return (
-    <InternalTypographyView
-      {...props}
-      $platform-web={
-        isInTypographyContext ? { ...props['$platform-web'], display: 'inline-flex' } : props['$platform-web']
-      }
-    />
-  );
+type TypographyViewProps = GetProps<typeof InternalTypographyView>;
+
+export function TypographyView(props: TypographyViewProps): ReactNode {
+  return <InternalTypographyView {...props} />;
 }