@ornikar/bumper 2.5.1-canary.9789a78a274b9d336c93fc42d4a6561d0d61ff73.0 → 2.6.1-canary.5ea5493c945a003792345fbeb7191d0e206ed8da.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.5.1-canary.9789a78a274b9d336c93fc42d4a6561d0d61ff73.0",
+  "version": "2.6.1-canary.5ea5493c945a003792345fbeb7191d0e206ed8da.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -32,8 +32,8 @@
   },
   "peerDependencies": {
     "@storybook/preview-api": ">=8.6.15",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-native": ">=0.76.9"
   },
   "peerDependenciesMeta": {
@@ -52,11 +52,11 @@
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.1",
     "@testing-library/react-native": "13.3.3",
-    "@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"
+    "@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"
   },
   "expo": {},
   "exports": {

package/src/components/breakpoints/__snapshots_web__/breakpoints.stories.tsx.snap

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

package/src/components/breakpoints/breakpoints.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import type { View } from '@tamagui/core';
 import type { ReactElement } from 'react';
-import { Typography } from '../typography/Typograhy';
+import { Typography } from '../typography/Typography';
 import { SwitchBreakpoints } from './SwitchBreakpoins';
 import { useBreakpointValue } from './hooks/useBreakpointValue';
 import { useCurrentBreakpointName } from './hooks/useCurrentBreakpointName';

package/src/components/primitives/Pressable.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { Typography } from '../typography/Typography';
+import type { CenterProps } from './Center';
+import { Center } from './Center';
+import { Pressable } from './Pressable';
+
+export default {
+  title: 'bumper/Primitives',
+  component: Center,
+} satisfies Meta<CenterProps>;
+
+export const PressableStory: StoryFn<typeof Pressable> = () => (
+  <Pressable
+    as={Center}
+    marginTop="$space.16"
+    padding="$space.24"
+    backgroundColor="$bg.accent.default"
+    pressStyle={{ opacity: 0.7 }}
+    onPress={() => null}
+  >
+    <Typography.Text color="$content.base.onContrasted.hi">Click me</Typography.Text>
+  </Pressable>
+);
+
+PressableStory.storyName = 'Pressable';

package/src/components/primitives/Pressable.tsx

@@ -0,0 +1,35 @@
+import type { GetProps, TamaguiComponent } from '@tamagui/core';
+import { View, styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import type { Except } from 'type-fest';
+
+export type PressableProps<C extends TamaguiComponent = typeof View> = {
+  /**
+   * The Tamagui component to render as (`View`, `Stack`, etc.).
+   *
+   * @default View
+   */
+  as?: C;
+} & Except<GetProps<C>, 'as'>;
+
+/**
+ * A polymorphic Pressable component that can render as any Tamagui primitive.
+ *
+ * @example
+ * <Pressable onPress={() => {}} />
+ *
+ * @example
+ * <Pressable
+ *   as={HStack}
+ *   onPress={() => {}}
+ * />
+ */
+export function Pressable<C extends TamaguiComponent = typeof View>({ as, ...rest }: PressableProps<C>): ReactNode {
+  const Component = styled(as ?? View, {
+    name: 'Pressable',
+    role: 'button',
+    cursor: 'pointer',
+  });
+
+  return <Component {...(rest as GetProps<C>)} />;
+}

package/src/components/primitives/__snapshots__/Pressable.stories.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Pressable 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#563B56",
+        "justifyContent": "center",
+        "marginTop": 16,
+        "opacity": 1,
+        "paddingBottom": 24,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingTop": 24,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#ffffff",
+          "fontFamily": "GTStandard",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Click me
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/primitives/__snapshots_web__/Center.stories.tsx.snap

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

package/src/components/primitives/__snapshots_web__/Pressable.stories.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Pressable 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_Pressable _opacity-0active-0--7 _display-flex _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _cursor-pointer _marginTop-t-space-spa1366020313 _paddingTop-t-space-spa1366020284 _paddingRight-t-space-spa1366020284 _paddingBottom-t-space-spa1366020284 _paddingLeft-t-space-spa1366020284 _backgroundColor-bg--accent-1633109644"
+            role="button"
+            tabindex="0"
+          >
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _color-content--ba254712717"
+              data-disable-theme="true"
+            >
+              Click me
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/components/primitives/__snapshots_web__/Stack.stories.tsx.snap

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

package/src/components/primitives/__snapshots_web__/View.stories.tsx.snap

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

package/src/components/typography/Typography.stories.tsx

@@ -1,11 +1,17 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import type { FC } from 'react';
 import { StorySection } from '../../story-components/StorySection';
-import type { BodyFontVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
+import type {
+  BodyFontVariants,
+  ContentCapsVariants,
+  FontVariants,
+  HeadingFontVariants,
+  LabelFontVariants,
+} from '../../tokens/fonts';
 import { VStack } from '../primitives/Stack';
 import { View } from '../primitives/View';
-import type { TypographyTextProps } from './Typograhy';
-import { Typography } from './Typograhy';
+import type { TypographyTextProps } from './Typography';
+import { Typography } from './Typography';
 
 export default {
   title: 'bumper/Typography/Typography',
@@ -19,12 +25,13 @@ interface TypographyTypeWithComponent<T extends FontVariants> {
 }
 
 const headingVariants: TypographyTypeWithComponent<HeadingFontVariants>[] = [
-  { component: Typography.Text, variant: 'heading-2xl', weights: [undefined] },
-  { component: Typography.Text, variant: 'heading-xl', weights: [undefined] },
-  { component: Typography.Text, variant: 'heading-l', weights: [undefined] },
-  { component: Typography.Text, variant: 'heading-m', weights: [undefined] },
-  { component: Typography.Text, variant: 'heading-s', weights: [undefined] },
-  { component: Typography.Text, variant: 'heading-xs', weights: [undefined] },
+  { component: Typography.Text, variant: 'heading-2xl', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'heading-xl', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'heading-l', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'heading-m', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'heading-s', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'heading-xs', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'heading-2xs', weights: ['semibold'] },
 ];
 
 const bodyVariants: TypographyTypeWithComponent<BodyFontVariants>[] = [
@@ -36,10 +43,20 @@ const bodyVariants: TypographyTypeWithComponent<BodyFontVariants>[] = [
 ];
 
 const labelVariants: TypographyTypeWithComponent<LabelFontVariants>[] = [
-  { component: Typography.Text, variant: 'label-xl', weights: [undefined] },
-  { component: Typography.Text, variant: 'label-l', weights: [undefined] },
-  { component: Typography.Text, variant: 'label-m', weights: [undefined] },
-  { component: Typography.Text, variant: 'label-s', weights: [undefined] },
+  { component: Typography.Text, variant: 'label-xl', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'label-l', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'label-m', weights: ['semibold'] },
+  { component: Typography.Text, variant: 'label-s', weights: ['semibold'] },
+];
+
+const contentCapsVariants: TypographyTypeWithComponent<ContentCapsVariants>[] = [
+  { component: Typography.Text, variant: 'content-caps-3xl', weights: ['bold'] },
+  { component: Typography.Text, variant: 'content-caps-2xl', weights: ['bold'] },
+  { component: Typography.Text, variant: 'content-caps-xl', weights: ['bold'] },
+  { component: Typography.Text, variant: 'content-caps-l', weights: ['bold'] },
+  { component: Typography.Text, variant: 'content-caps-m', weights: ['bold'] },
+  { component: Typography.Text, variant: 'content-caps-s', weights: ['bold'] },
+  { component: Typography.Text, variant: 'content-caps-xs', weights: ['bold'] },
 ];
 
 interface TypographyTypesProps {
@@ -53,7 +70,7 @@ function TypographyVariants({ types }: TypographyTypesProps) {
         return type.weights.map((weight) => (
           <VStack key={`${type.variant}-${weight}`} marginBottom="$space.16">
             <Typography.Text variant="heading-s">{`${type.variant.split('-').join(' ')} - ${
-              weight || 'semibold'
+              weight || ''
             }`}</Typography.Text>
             <View
               paddingVertical="$space.4"
@@ -62,8 +79,8 @@ function TypographyVariants({ types }: TypographyTypesProps) {
               backgroundColor="$bg.base.mid.default"
               marginTop="$space.4"
             >
-              {/* Don't know why it's expecting BodyFontVariants type */}
-              <Typography.Text variant={type.variant as BodyFontVariants} weight={weight}>
+              {/* @ts-expect-error some variants does not support specific weight */}
+              <Typography.Text variant={type.variant} weight={weight}>
                 The quick brown fox jumps over the lazy dog
               </Typography.Text>
             </View>
@@ -118,7 +135,7 @@ export const TypographyStory: StoryFn<typeof Typography.Text> = (args) => (
                 <Typography.Text color="$content.base.hi">color is content.base.hi</Typography.Text>
               </Typography.Text>
             </Typography.Text>
-          </Typography.Text>{' '}
+          </Typography.Text>
         </Typography.Text>
       </StorySection.SubSection>
       <StorySection title="Heading">
@@ -130,6 +147,17 @@ export const TypographyStory: StoryFn<typeof Typography.Text> = (args) => (
       <StorySection title="Label">
         <TypographyVariants types={labelVariants} />
       </StorySection>
+      <StorySection title="Content Caps">
+        <TypographyVariants types={contentCapsVariants} />
+      </StorySection>
+      <StorySection title="Accessibility">
+        <Typography.Header1>role: heading aria-level: 1</Typography.Header1>
+        <Typography.Header2>role: heading aria-level: 2</Typography.Header2>
+        <Typography.Header3>role: heading aria-level: 3</Typography.Header3>
+        <Typography.Header4>role: heading aria-level: 4</Typography.Header4>
+        <Typography.Header5>role: heading aria-level: 5</Typography.Header5>
+        <Typography.Header6>role: heading aria-level: 6</Typography.Header6>
+      </StorySection>
     </StorySection>
   </>
 );

package/src/components/typography/{Typograhy.tsx → Typography.tsx}

@@ -1,17 +1,23 @@
-import type { GetProps, GetThemeValueForKey } from '@tamagui/core';
+import type { 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, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
-import { getVariantAndWeightValues } from './utils/getTypeAndWeightValues';
+import type {
+  BodyFontVariants,
+  ContentCapsVariants,
+  FontVariants,
+  HeadingFontVariants,
+  LabelFontVariants,
+} from '../../tokens/fonts';
+import { getVariantAndWeightValues } from './utils/getVariantAndWeightValues';
+
+// Should use type from tamagui (PropsWithoutMediaStyles) when fixed: https://github.com/tamagui/tamagui/pull/3783
+type PropsWithoutMedia<A> = {
+  // remove all media
+  [Key in keyof A as Key extends `$${string}` ? never : Key]?: A[Key];
+};
 
-export type TypographyVariantContextValue = FontVariants | null;
-export type TypographyWeightContextValue = 'regular' | 'bold' | null;
-export type TypograhyColorContextValue = TypograhyColorProps | null;
-
-const TypographyVariantContext = createContext<TypographyVariantContextValue>(null);
-const TypographyWeightContext = createContext<TypographyWeightContextValue>(null);
-const TypograhyColorContext = createContext<TypograhyColorContextValue>(null);
+type OverrideTamaguiComponentProps<A> = PropsWithoutMedia<A> & WithMediaProps<PropsWithoutMedia<A>>;
 
 const InternalTypography = styled(Text, {
   fontFamily: '$GTStandard',
@@ -49,9 +55,13 @@ const InternalTypography = styled(Text, {
 
 export type InternalTypographyProps = GetProps<typeof InternalTypography>;
 
-// Create a type for color props that matches strings containing '$content.'
-type ContainsOneString<T extends string> = `${string}${T}${string}`;
-type TypograhyColorProps = ContainsOneString<'$content.'>;
+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 =
@@ -61,24 +71,28 @@ type TypographyExcludedFontStyleProps =
   | 'fontStyle'
   | 'fontVariant'
   | 'fontWeight';
-type TypographyPropsWithoutFontStyleProps = Except<
-  InternalTypographyProps,
-  TypographyExcludedFontStyleProps | 'color'
-> & {
-  color?: TypograhyColorProps;
-};
+
+type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps>;
 
 export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
   variant?: BodyFontVariants;
-  weight?: Exclude<InternalTypographyProps['weight'], 'semibold'>;
+  weight?: 'regular' | 'bold';
 }
 export interface HeadingLabelProps extends TypographyPropsWithoutFontStyleProps {
   variant: HeadingFontVariants | LabelFontVariants;
-  weight?: never;
+  weight?: 'semibold';
 }
-export type TypographyTextProps = BodyProps | HeadingLabelProps;
+export interface ContentCapsProps extends TypographyPropsWithoutFontStyleProps {
+  variant: ContentCapsVariants;
+  weight?: 'bold';
+}
+
+export type TypographyTextProps =
+  | OverrideTamaguiComponentProps<BodyProps>
+  | OverrideTamaguiComponentProps<HeadingLabelProps>
+  | OverrideTamaguiComponentProps<ContentCapsProps>;
 
-const TypographyText = InternalTypography.styleable<TypographyTextProps>((props, ref) => {
+const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
   const typographyVariantAncestorValue = useContext(TypographyVariantContext);
   const typographyWeightAncestorValue = useContext(TypographyWeightContext);
   const typographyColorAncestorValue = useContext(TypograhyColorContext);
@@ -101,22 +115,22 @@ const TypographyText = InternalTypography.styleable<TypographyTextProps>((props,
     />
   );
 
+  // If a variant is provided, we set it in the context for children to be able to inherit variant value
   content = props.variant ? (
-    // If a variant is provided, we set it in the context for children to be able to inherit variant value
     <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 ? (
-    // If a weight is provided, we set it in the context for children to be able to inherit weight value
     <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 ? (
-    // If a color is provided, we set it in the context for children to be able to inherit color value
     <TypograhyColorContext.Provider value={props.color}>{content}</TypograhyColorContext.Provider>
   ) : (
     content
@@ -125,6 +139,18 @@ const TypographyText = InternalTypography.styleable<TypographyTextProps>((props,
   return content;
 });
 
+const createHeading = (level: number): TamaguiComponent<TypographyTextProps> => {
+  return TypographyBase.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
+    return <TypographyBase ref={ref} {...props} role="heading" aria-level={level} />;
+  });
+};
+
 export const Typography = {
-  Text: TypographyText,
+  Text: TypographyBase,
+  Header1: createHeading(1),
+  Header2: createHeading(2),
+  Header3: createHeading(3),
+  Header4: createHeading(4),
+  Header5: createHeading(5),
+  Header6: createHeading(6),
 };