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

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

@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/Icon/Features Colors 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_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+          >
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                base.hi
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--base--mid)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                base.mid
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--base--low)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                base.low
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--accent)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                accent
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--success)"
+                  data-file-name="check-circle.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                success
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--warning)"
+                  data-file-name="warning.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                warning
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--danger)"
+                  data-file-name="warning.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                danger
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--info)"
+                  data-file-name="info.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                info
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/Icon/Features Sizes 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_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+          >
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385413 _height-t-size-size1385413"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                16
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385438 _height-t-size-size1385438"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                20
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385442 _height-t-size-size1385442"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                24
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385471 _height-t-size-size1385471"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                32
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385508 _height-t-size-size1385508"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                48
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <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-size-size1385566 _height-t-size-size1385566"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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 _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                64
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/Icon Default 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-size-size1385438 _height-t-size-size1385438"
+          >
+            <svg
+              color="var(--content--base--hi)"
+              data-file-name="star.inline.svg"
+            />
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -3,7 +3,7 @@
 exports[`Bumper/Content/Typography/Features BodyVariants 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-175oi2r r-flex-13awgt0"
+    class="css-view-g5y9jx r-flex-13awgt0"
   >
     <span
       class=""
@@ -61,7 +61,7 @@ exports[`Bumper/Content/Typography/Features BodyVariants 1`] = `
 exports[`Bumper/Content/Typography/Features BodyVariantsBold 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-175oi2r r-flex-13awgt0"
+    class="css-view-g5y9jx r-flex-13awgt0"
   >
     <span
       class=""
@@ -119,7 +119,7 @@ exports[`Bumper/Content/Typography/Features BodyVariantsBold 1`] = `
 exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-175oi2r r-flex-13awgt0"
+    class="css-view-g5y9jx r-flex-13awgt0"
   >
     <span
       class=""
@@ -189,7 +189,7 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
 exports[`Bumper/Content/Typography/Features ContextInheritance 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-175oi2r r-flex-13awgt0"
+    class="css-view-g5y9jx r-flex-13awgt0"
   >
     <span
       class=""
@@ -305,7 +305,7 @@ exports[`Bumper/Content/Typography/Features ContextInheritance 1`] = `
 exports[`Bumper/Content/Typography/Features HeaderComponents 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-175oi2r r-flex-13awgt0"
+    class="css-view-g5y9jx r-flex-13awgt0"
   >
     <span
       class=""
@@ -381,7 +381,7 @@ exports[`Bumper/Content/Typography/Features HeaderComponents 1`] = `
 exports[`Bumper/Content/Typography/Features HeadingVariants 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-175oi2r r-flex-13awgt0"
+    class="css-view-g5y9jx r-flex-13awgt0"
   >
     <span
       class=""
@@ -451,7 +451,7 @@ exports[`Bumper/Content/Typography/Features HeadingVariants 1`] = `
 exports[`Bumper/Content/Typography/Features LabelVariants 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-175oi2r r-flex-13awgt0"
+    class="css-view-g5y9jx r-flex-13awgt0"
   >
     <span
       class=""

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

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

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../content/typography/Typography';
+import { HStack, VStack } from '../Stack';
+import { View } from '../View';
+import { ScrollView } from './ScrollView';
+
+const meta: Meta<typeof ScrollView> = {
+  title: 'Bumper/Core/Primitives/ScrollView/Features',
+  component: ScrollView,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HorizontalScroll: Story = {
+  render: () => (
+    <ScrollView horizontal height="$size.96" width="$size.208">
+      <HStack gap="$space.8" padding="$space.8">
+        {Array.from({ length: 10 }, (_, i) => (
+          <View
+            key={`item-${i}`}
+            backgroundColor="$bg.success.mid"
+            padding="$space.16"
+            borderRadius="$radius.m"
+            width="$size.96"
+          >
+            <Typography.Text variant="body-s">H-Item {i + 1}</Typography.Text>
+          </View>
+        ))}
+      </HStack>
+    </ScrollView>
+  ),
+};
+
+export const HiddenIndicators: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-s">Vertical scroll without indicator:</Typography.Text>
+      <ScrollView height="$size.120" width="$size.208" showsVerticalScrollIndicator={false}>
+        <VStack gap="$space.8" padding="$space.8">
+          {Array.from({ length: 8 }, (_, i) => (
+            <View key={`item-${i}`} backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.m">
+              <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+            </View>
+          ))}
+        </VStack>
+      </ScrollView>
+
+      <Typography.Text variant="body-s">Horizontal scroll without indicator:</Typography.Text>
+      <ScrollView horizontal height="$size.80" width="$size.208" showsHorizontalScrollIndicator={false}>
+        <HStack gap="$space.8" padding="$space.8">
+          {Array.from({ length: 8 }, (_, i) => (
+            <View
+              key={`item-${i}`}
+              backgroundColor="$bg.danger.mid"
+              padding="$space.12"
+              borderRadius="$radius.m"
+              width="$size.80"
+            >
+              <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+            </View>
+          ))}
+        </HStack>
+      </ScrollView>
+    </VStack>
+  ),
+};
+
+export const ScrollDisabled: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-s">Scroll disabled (cannot scroll):</Typography.Text>
+      <ScrollView height="$size.120" width="$size.208" scrollEnabled={false}>
+        <VStack gap="$space.8" padding="$space.8">
+          {Array.from({ length: 8 }, (_, i) => (
+            <View key={`item-${i}`} backgroundColor="$bg.disabled.mid" padding="$space.12" borderRadius="$radius.m">
+              <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+            </View>
+          ))}
+        </VStack>
+      </ScrollView>
+    </VStack>
+  ),
+};

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../content/typography/Typography';
+import { View } from '../View';
+import { ScrollView } from './ScrollView';
+
+const meta: Meta<typeof ScrollView> = {
+  title: 'Bumper/Core/Primitives/ScrollView',
+  component: ScrollView,
+  tags: ['autodocs'],
+  argTypes: {
+    horizontal: {
+      control: 'boolean',
+      description: 'When true, the scroll view content is arranged horizontally',
+    },
+    scrollEnabled: {
+      control: 'boolean',
+      description: 'When false, the view cannot be scrolled',
+    },
+    showsVerticalScrollIndicator: {
+      control: 'boolean',
+      description: 'When true, shows a vertical scroll indicator',
+    },
+    showsHorizontalScrollIndicator: {
+      control: 'boolean',
+      description: 'When true, shows a horizontal scroll indicator',
+    },
+    height: {
+      control: 'select',
+      options: ['$size.96', '$size.120', '$size.144', '$size.176', '$size.208'],
+      description: 'Height of the scroll view (size token)',
+    },
+    width: {
+      control: 'select',
+      options: ['$size.176', '$size.208', '100%'],
+      description: 'Width of the scroll view (size token)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    height: '$size.176',
+    width: '$size.208',
+    showsVerticalScrollIndicator: true,
+  },
+  render: (args) => (
+    <ScrollView
+      {...args}
+      contentContainerStyle={{
+        gap: '$space.8',
+      }}
+    >
+      {Array.from({ length: 10 }, (_, i) => (
+        <View key={`item-${i}`} backgroundColor="$bg.info.mid" padding="$space.16" borderRadius="$radius.m">
+          <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+        </View>
+      ))}
+    </ScrollView>
+  ),
+};

package/src/system/core/primitives/ScrollView/ScrollView.ts

@@ -0,0 +1,2 @@
+export type { ScrollViewProps } from '@tamagui/scroll-view';
+export { ScrollView } from '@tamagui/scroll-view';