@ornikar/bumper 3.6.2 → 3.7.0

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

@@ -226,6 +226,38 @@ exports[`Bumper/Content/Icon/Features DefaultSize 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Bumper/Content/Icon/Features Responsive 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_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
+          >
+            <svg
+              color="var(--content--base--hi)"
+              data-file-name="star.inline.svg"
+            />
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Bumper/Content/Icon/Features Sizes 1`] = `
 <DocumentFragment>
   <div

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

@@ -158,3 +158,11 @@ export const ContextInheritance: Story = {
     </VStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <Typography.Text variant="body-s" $medium={{ variant: 'body-l' }} $large={{ variant: 'body-xl' }}>
+      Responsive text: body-s → body-l → heading-m
+    </Typography.Text>
+  ),
+};

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

@@ -2,6 +2,7 @@ import type { ColorTokens, GetProps } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
 import type { ReactNode } from 'react';
 import { type Except } from 'type-fest';
+import { useProps } from '../../core/hooks/useProps';
 import {
   BODY_VARIANTS,
   type BodyFontVariants,
@@ -120,7 +121,8 @@ export const InternalTypography = styled(Text, {
 export type InternalTypographyProps = GetProps<typeof InternalTypography>;
 
 export function TypographyBase(props: TypographyTextProps): ReactNode {
-  return <InternalTypography {...props} />;
+  const flattenProps = useProps(props);
+  return <InternalTypography {...flattenProps} />;
 }
 
 export const createHeading = (level: number): ((props: TypographyTextProps) => ReactNode) => {

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

@@ -126,6 +126,15 @@ export const DifferentSizes: Story = {
   ),
 };
 
+export const Responsive: Story = {
+  render: () => (
+    <Typography.Text variant="body-m" color="$content.accent">
+      <TypographyIcon icon={<StarIcon />} size="$icon.s" $medium={{ size: '$icon.m' }} $large={{ size: '$icon.l' }} />{' '}
+      Icon scales across breakpoints
+    </Typography.Text>
+  ),
+};
+
 export const NestedTypographyInheritance: Story = {
   render: () => (
     <VStack gap="$space.24">

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

@@ -96,3 +96,12 @@ export const StateHover: Story = {
     </VStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <Typography.Text variant="body-s" $medium={{ variant: 'body-l' }}>
+      Text with <TypographyLink onPress={action('Link clicked!')}>a responsive link</TypographyLink> that scales with
+      its parent
+    </Typography.Text>
+  ),
+};

package/src/system/content/typography/__snapshots__/Typography.features.stories.tsx.snap

@@ -882,3 +882,32 @@ exports[`Bumper/Content/Typography/Features LabelVariants 1`] = `
   </View>
 </RNCSafeAreaProvider>
 `;
+
+exports[`Bumper/Content/Typography/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#101010",
+        "fontFamily": "GTStandardRegular",
+        "fontSize": 14,
+        "letterSpacing": 0.3,
+        "lineHeight": 20,
+      }
+    }
+    suppressHighlighting={true}
+  >
+    Responsive text: body-s → body-l → heading-m
+  </Text>
+</RNCSafeAreaProvider>
+`;

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

@@ -657,6 +657,51 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
 </RNCSafeAreaProvider>
 `;
 
+exports[`Bumper/Content/TypographyIcon/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#563B56",
+        "fontFamily": "GTStandardRegular",
+        "fontSize": 16,
+        "letterSpacing": 0.3,
+        "lineHeight": 24,
+      }
+    }
+    suppressHighlighting={true}
+  >
+    <View>
+      <View
+        style={
+          {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      >
+        <svg
+          color="#563B56"
+          data-file-name="star.inline.svg"
+        />
+      </View>
+    </View>
+     
+    Icon scales across breakpoints
+  </Text>
+</RNCSafeAreaProvider>
+`;
+
 exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}

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

@@ -315,6 +315,61 @@ exports[`Bumper/Content/TypographyLink/Features NoUnderlineTrue 1`] = `
 </RNCSafeAreaProvider>
 `;
 
+exports[`Bumper/Content/TypographyLink/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#101010",
+        "fontFamily": "GTStandardRegular",
+        "fontSize": 14,
+        "letterSpacing": 0.3,
+        "lineHeight": 20,
+      }
+    }
+    suppressHighlighting={true}
+  >
+    Text with 
+    <Text
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="link"
+      style={
+        {
+          "color": "#101010",
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 14,
+          "letterSpacing": 0.3,
+          "lineHeight": 20,
+          "textDecorationLine": "underline",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      a responsive link
+    </Text>
+     that scales with its parent
+  </Text>
+</RNCSafeAreaProvider>
+`;
+
 exports[`Bumper/Content/TypographyLink/Features StateHover 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}

package/src/system/content/typography/__snapshots_web__/Typography.features.stories.tsx.snap

@@ -477,3 +477,32 @@ exports[`Bumper/Content/Typography/Features LabelVariants 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Bumper/Content/Typography/Features Responsive 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;"
+        >
+          <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 _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+          >
+            Responsive text: body-s → body-l → heading-m
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -405,6 +405,47 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Bumper/Content/TypographyIcon/Features Responsive 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;"
+        >
+          <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 _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ac3049896"
+          >
+            <div
+              class="is_TypographyViewInternal _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
+              >
+                <svg
+                  color="var(--content--accent)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+            </div>
+             Icon scales across breakpoints
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
 <DocumentFragment>
   <div

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

@@ -226,6 +226,42 @@ exports[`Bumper/Content/TypographyLink/Features NoUnderlineTrue 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Bumper/Content/TypographyLink/Features Responsive 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;"
+        >
+          <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 _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+          >
+            Text with 
+            <a
+              class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141 _cur-pointer _td-underline _tt-inherit"
+              role="link"
+            >
+              a responsive link
+            </a>
+             that scales with its parent
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Bumper/Content/TypographyLink/Features StateHover 1`] = `
 <DocumentFragment>
   <div

package/src/system/core/primitives/Center.features.stories.tsx

@@ -61,3 +61,20 @@ export const CircularCentering: Story = {
     </HStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <Center
+      backgroundColor="$bg.accent.default"
+      width="$size.96"
+      height="$size.96"
+      padding="$space.8"
+      borderRadius="$radius.m"
+      $medium={{ width: '$size.144', height: '$size.144', padding: '$space.24' }}
+    >
+      <Typography.Text variant="body-m" color="$content.base.onContrasted.hi" textAlign="center">
+        Responsive
+      </Typography.Text>
+    </Center>
+  ),
+};

package/src/system/core/primitives/Pressable.features.stories.tsx

@@ -143,3 +143,21 @@ export const PolymorphicAs: Story = {
     </VStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <Pressable
+      backgroundColor="$bg.accent.default"
+      padding="$space.8"
+      borderRadius="$radius.s"
+      pressStyle={{ scale: 0.98 }}
+      $medium={{ padding: '$space.16', borderRadius: '$radius.m' }}
+      $large={{ padding: '$space.24', borderRadius: '$radius.l' }}
+      onPress={action('Pressed')}
+    >
+      <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+        Responsive padding and radius
+      </Typography.Text>
+    </Pressable>
+  ),
+};

package/src/system/core/primitives/ScrollView/ScrollView.features.stories.tsx

@@ -82,3 +82,17 @@ export const ScrollDisabled: Story = {
     </VStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <ScrollView height="$size.120" width="$size.176" $medium={{ height: '$size.176', width: '$size.208' }}>
+      <VStack gap="$space.8" padding="$space.8">
+        {Array.from({ length: 10 }, (_, i) => (
+          <View key={`item-${i}`} backgroundColor="$bg.info.mid" padding="$space.12" borderRadius="$radius.m">
+            <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+          </View>
+        ))}
+      </VStack>
+    </ScrollView>
+  ),
+};