@ornikar/bumper 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0 → 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0",
+  "version": "2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -28,14 +28,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@ornikar/kitt-icons": "14.3.2-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0",
+    "@ornikar/kitt-icons": "14.3.2-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0",
     "@tamagui/core": "1.144.2",
+    "@tamagui/image": "1.144.2",
     "@tamagui/scroll-view": "1.144.2"
   },
   "peerDependencies": {
     "@storybook/preview-api": ">=8.6.15",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-native": ">=0.76.9"
   },
   "peerDependenciesMeta": {
@@ -53,13 +54,13 @@
     "@babel/core": "7.27.1",
     "@phosphor-icons/core": "2.1.1",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/react": "16.3.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/react-native": "13.3.3",
-    "@types/react": "19.0.10",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.6",
-    "react-test-renderer": "19.0.0"
+    "@types/react": "18.3.27",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-test-renderer": "18.3.1"
   },
   "expo": {},
   "exports": {

package/src/index.ts

@@ -4,6 +4,8 @@ export { BumperProvider } from './system/core/provider/BumperProvider';
 // Primitives
 export type { CenterProps } from './system/core/primitives/Center';
 export { Center } from './system/core/primitives/Center';
+export type { ImageProps } from './system/core/primitives/Image/Image';
+export { Image } from './system/core/primitives/Image/Image';
 export type { PressableProps } from './system/core/primitives/Pressable';
 export { Pressable } from './system/core/primitives/Pressable';
 export type { ScrollViewProps } from './system/core/primitives/ScrollView/ScrollView';
@@ -16,6 +18,7 @@ export { View } from './system/core/primitives/View';
 // Typography
 export type { TypographyTextProps } from './system/content/typography/Typography';
 export { Typography } from './system/content/typography/Typography';
+export type { TypographyIconProps } from './system/content/typography/TypographyIcon';
 
 // Breakpoints
 export { useBreakpointValue } from './system/core/breakpoints/hooks/useBreakpointValue';

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

@@ -19,12 +19,8 @@ const IconContainer = styled(View, {
 
 type IconContainerProps = GetProps<typeof IconContainer>;
 
-interface IconElementProps {
-  color?: ColorTokens;
-}
-
-interface IconProps {
-  icon: ReactElement<IconElementProps>;
+interface InternalIconProps {
+  icon: ReactElement;
   color?: ColorTokens;
   size?: IconContainerProps['size'];
   testID?: IconContainerProps['testID'];
@@ -32,15 +28,9 @@ interface IconProps {
   alignSelf?: IconContainerProps['alignSelf'];
 }
 
-type IconWithMediaProps = IconProps & WithMediaProps<IconProps>;
+export type IconProps = InternalIconProps & WithMediaProps<InternalIconProps>;
 
-export function Icon({
-  icon,
-  color = '$content.base.hi',
-  size = '$size.20',
-  testID,
-  alignSelf,
-}: IconWithMediaProps): ReactNode {
+export function Icon({ icon, color = '$content.base.hi', size = '$size.20', testID, alignSelf }: IconProps): ReactNode {
   const style = useStyle({ color });
 
   const clonedIcon = cloneElement(icon, { color: style.color });

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

@@ -3,7 +3,7 @@
 exports[`Bumper/Content/Icon/Features Colors 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -175,7 +175,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
 exports[`Bumper/Content/Icon/Features Sizes 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

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

@@ -3,7 +3,7 @@
 exports[`Bumper/Content/Icon Default 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

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

@@ -1,6 +1,5 @@
-import type { GetProps, GetThemeValueForKey, TamaguiComponent, WithMediaProps } from '@tamagui/core';
+import type { ColorTokens, GetProps, GetThemeValueForKey, TamaguiComponent, WithMediaProps } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
-import { createContext, useContext } from 'react';
 import { type Except } from 'type-fest';
 import type {
   BodyFontVariants,
@@ -9,7 +8,18 @@ import type {
   HeadingFontVariants,
   LabelFontVariants,
 } from '../../core/tokens/fonts';
+import { TypographyIcon } from './TypographyIcon';
 import { getVariantAndWeightValues } from './utils/getVariantAndWeightValues';
+import {
+  TypograhyColorContext,
+  TypographyContext,
+  TypographyVariantContext,
+  TypographyWeightContext,
+  useTypographyColor,
+  useTypographyContext,
+  useTypographyVariant,
+  useTypographyWeight,
+} from './utils/typographyContext';
 
 // Should use type from tamagui (PropsWithoutMediaStyles) when fixed: https://github.com/tamagui/tamagui/pull/3783
 type PropsWithoutMedia<A> = {
@@ -55,14 +65,6 @@ const InternalTypography = styled(Text, {
 
 export type InternalTypographyProps = GetProps<typeof InternalTypography>;
 
-export type TypographyVariantContextValue = FontVariants | null;
-export type TypographyWeightContextValue = 'regular' | 'bold' | 'semibold' | null;
-export type TypograhyColorContextValue = InternalTypographyProps['color'] | null;
-
-const TypographyVariantContext = createContext<TypographyVariantContextValue>(null);
-const TypographyWeightContext = createContext<TypographyWeightContextValue>(null);
-const TypograhyColorContext = createContext<TypograhyColorContextValue>(null);
-
 // Remove font-related style props from InternalTypography Props
 type TypographyExcludedFontStyleProps =
   | 'fontFamily'
@@ -70,9 +72,12 @@ type TypographyExcludedFontStyleProps =
   | 'lineHeight'
   | 'fontStyle'
   | 'fontVariant'
-  | 'fontWeight';
+  | 'fontWeight'
+  | 'color';
 
-type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps>;
+type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps> & {
+  color: ColorTokens;
+};
 
 export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
   variant?: BodyFontVariants;
@@ -93,9 +98,10 @@ export type TypographyTextProps =
   | OverrideTamaguiComponentProps<ContentCapsProps>;
 
 const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
-  const typographyVariantAncestorValue = useContext(TypographyVariantContext);
-  const typographyWeightAncestorValue = useContext(TypographyWeightContext);
-  const typographyColorAncestorValue = useContext(TypograhyColorContext);
+  const typographyVariantAncestorValue = useTypographyVariant();
+  const typographyWeightAncestorValue = useTypographyWeight();
+  const typographyColorAncestorValue = useTypographyColor();
+  const typographyContext = useTypographyContext();
 
   const { variant, weight } = getVariantAndWeightValues(
     props.weight,
@@ -115,6 +121,8 @@ const TypographyBase = InternalTypography.styleable<TypographyTextProps, Typogra
     />
   );
 
+  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>
@@ -153,4 +161,5 @@ export const Typography = {
   Header4: createHeading(4),
   Header5: createHeading(5),
   Header6: createHeading(6),
+  Icon: TypographyIcon,
 };

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

@@ -0,0 +1,163 @@
+import {
+  CheckCircleRegularIcon,
+  InfoRegularIcon,
+  StarRegularIcon,
+  WarningRegularIcon,
+} from '@ornikar/kitt-icons/phosphor';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HStack, VStack } from '../../core/primitives/Stack';
+import { Typography } from './Typography';
+import { TypographyIcon } from './TypographyIcon';
+
+const meta: Meta<typeof TypographyIcon> = {
+  title: 'Bumper/Content/TypographyIcon/Features',
+  component: TypographyIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithExplicitColor: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.24" color="$content.accent" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit accent
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.24" color="$content.success" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit success
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.warning" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit warning
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.danger" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit danger
+        </Typography.Text>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const InheritFromTypography: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits accent color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> This icon inherits the accent color
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits success color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" /> Operation completed successfully
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits danger color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.danger">
+          <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" /> Error: Something went wrong
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits warning color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.warning">
+          <TypographyIcon icon={<InfoRegularIcon />} size="$size.20" /> Warning: Please review this item
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const OverrideInheritedColor: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Typography is accent, but icon explicitly uses success color
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.accent">
+          <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" color="$content.success" /> Icon overrides
+          inherited color
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Typography is success, but icon explicitly uses danger color
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" color="$content.danger" /> Mixed color scenario
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const DifferentSizes: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="heading-l" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.32" /> Large heading with size 32 icon
+      </Typography.Text>
+      <Typography.Text variant="body-m" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Body text with size 20 icon
+      </Typography.Text>
+      <Typography.Text variant="body-s" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.16" /> Small text with size 16 icon
+      </Typography.Text>
+    </VStack>
+  ),
+};
+
+export const NestedTypographyInheritance: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Nested Typography components - icon inherits from parent
+        </Typography.Text>
+        <Typography.Text variant="body-l" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent text with icon
+          <Typography.Text variant="body-m">
+            <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Nested text - icon inherits parent
+            color
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Nested with override - child overrides parent color
+        </Typography.Text>
+        <Typography.Text variant="body-l" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent accent color
+          <Typography.Text variant="body-m" color="$content.success">
+            <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Child overrides to success
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};

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

@@ -0,0 +1,52 @@
+import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TypographyIcon } from './TypographyIcon';
+
+const meta: Meta<typeof TypographyIcon> = {
+  title: 'Bumper/Content/TypographyIcon',
+  component: TypographyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: false,
+      description: 'The icon element to render',
+    },
+    size: {
+      control: 'select',
+      options: ['$size.16', '$size.20', '$size.24', '$size.32', '$size.48', '$size.64', '$size.80', '$size.96'],
+      description: 'Icon size (uses size tokens)',
+    },
+    color: {
+      control: 'select',
+      options: [
+        '$content.base.low',
+        '$content.base.mid',
+        '$content.base.hi',
+        '$content.base.onContrasted.low',
+        '$content.base.onContrasted.mid',
+        '$content.base.onContrasted.hi',
+        '$content.accent',
+        '$content.promo',
+        '$content.promo.onContrasted',
+        '$content.info',
+        '$content.success',
+        '$content.warning',
+        '$content.danger',
+        '$content.muted',
+        '$content.disabled',
+        '$content.disabled.onContrasted',
+      ],
+      description: 'Icon color (semantic theme token). When omitted, inherits from parent Typography context.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <StarRegularIcon />,
+    size: '$size.20',
+  },
+};

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

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { Except } from 'type-fest';
+import type { IconProps } from '../icon/Icon';
+import { Icon } from '../icon/Icon';
+import type { TypographyTextProps } from './Typography';
+import { TypographyView } from './TypographyView';
+import { useTypographyColor } from './utils/typographyContext';
+
+export interface TypographyIconProps extends Except<IconProps, 'color'> {
+  color?: TypographyTextProps['color'];
+}
+
+function TypographyIconInternal(props: TypographyIconProps): ReactNode {
+  return (
+    <TypographyView>
+      <Icon {...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/TypographyView.tsx

@@ -0,0 +1,34 @@
+import type { GetProps } from '@tamagui/core';
+import { View, styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import { useTypographyContext } from './utils/typographyContext';
+
+const InternalTypographyView = styled(View, {
+  name: 'TypographyView',
+});
+
+type TypographyViewProps = GetProps<typeof InternalTypographyView>;
+
+/**
+ *
+ * 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
+ */
+export function TypographyView(props: TypographyViewProps): ReactNode {
+  const isInTypographyContext = useTypographyContext();
+
+  return (
+    <InternalTypographyView
+      {...props}
+      $platform-web={
+        isInTypographyContext ? { ...props['$platform-web'], display: 'inline-flex' } : props['$platform-web']
+      }
+    />
+  );
+}