@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0

package/src/system/core/breakpoints/hooks/useBreakpointValue.test.ts

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-native';
-import { BreakpointNameEnum } from '../constants';
+import { BreakpointNameEnum } from '../../tokens/breakpoints';
 import { getValueForBreakpoint } from '../utils/breakpointsUtils';
 import { useBreakpointValue } from './useBreakpointValue';
 import { useCurrentBreakpointName } from './useCurrentBreakpointName';

package/src/system/core/breakpoints/hooks/useCurrentBreakpointName.test.ts

@@ -1,6 +1,6 @@
 import { type UseMediaState, useMedia } from '@tamagui/core';
 import { renderHook } from '@testing-library/react-native';
-import { BreakpointNameEnum } from '../constants';
+import { BreakpointNameEnum } from '../../tokens/breakpoints';
 import { useCurrentBreakpointName } from './useCurrentBreakpointName';
 
 jest.mock('@tamagui/core');

package/src/system/core/breakpoints/hooks/useCurrentBreakpointName.ts

@@ -1,5 +1,5 @@
 import { useMedia } from '@tamagui/core';
-import { BreakpointNameEnum } from '../constants';
+import { BreakpointNameEnum } from '../../tokens/breakpoints';
 
 export function useCurrentBreakpointName(): BreakpointNameEnum {
   const media = useMedia();

package/src/system/core/breakpoints/utils/breakpointsUtils.test.ts

@@ -1,4 +1,4 @@
-import { BreakpointNameEnum } from '../constants';
+import { BreakpointNameEnum } from '../../tokens/breakpoints';
 import { getValueForBreakpoint } from './breakpointsUtils';
 
 describe('getValueForBreakpoint', () => {

package/src/system/core/breakpoints/utils/breakpointsUtils.ts

@@ -1,4 +1,4 @@
-import { BreakpointNameEnum } from '../constants';
+import { BreakpointNameEnum } from '../../tokens/breakpoints';
 
 export interface ValueForBreakpoint<T> {
   base: T;

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { Center } from './Center';
+import { HStack } from './Stack';
+
+const meta: Meta<typeof Center> = {
+  title: 'Bumper/Core/Primitives/Center/Features',
+  component: Center,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CenteringText: Story = {
+  render: () => (
+    <HStack gap="$space.16">
+      <Center
+        backgroundColor="$bg.accent.default"
+        padding="$space.24"
+        borderRadius="$radius.m"
+        width="$size.144"
+        height="$size.144"
+      >
+        <Typography.Text variant="heading-s" color="$content.base.onContrasted.hi">
+          Title
+        </Typography.Text>
+      </Center>
+      <Center
+        backgroundColor="$bg.promo.hi.default"
+        padding="$space.24"
+        borderRadius="$radius.m"
+        width="$size.144"
+        height="$size.144"
+      >
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi" textAlign="center">
+          Multi-line centered text content
+        </Typography.Text>
+      </Center>
+    </HStack>
+  ),
+};
+
+export const CircularCentering: Story = {
+  render: () => (
+    <HStack gap="$space.16">
+      <Center backgroundColor="$bg.accent.default" borderRadius="$radius.circle" width="$size.80" height="$size.80">
+        <Typography.Text variant="heading-l" color="$content.base.onContrasted.hi">
+          1
+        </Typography.Text>
+      </Center>
+      <Center backgroundColor="$bg.promo.hi.default" borderRadius="$radius.circle" width="$size.80" height="$size.80">
+        <Typography.Text variant="heading-l" color="$content.base.onContrasted.hi">
+          2
+        </Typography.Text>
+      </Center>
+      <Center backgroundColor="$bg.info.hi" borderRadius="$radius.circle" width="$size.80" height="$size.80">
+        <Typography.Text variant="heading-l" color="$content.base.onContrasted.hi">
+          3
+        </Typography.Text>
+      </Center>
+    </HStack>
+  ),
+};

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

@@ -1,17 +1,116 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { CenterProps } from './Center';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
 import { Center } from './Center';
-import { View } from './View';
 
-export default {
-  title: 'bumper/Primitives',
+const meta: Meta<typeof Center> = {
+  title: 'Bumper/Core/Primitives/Center',
   component: Center,
-} satisfies Meta<CenterProps>;
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'select',
+      options: [
+        '$bg.base.low.default',
+        '$bg.base.low.pressed',
+        '$bg.base.mid.default',
+        '$bg.base.mid.pressed',
+        '$bg.base.hi.default',
+        '$bg.base.hi.pressed',
+        '$bg.accent.default',
+        '$bg.accent.pressed',
+        '$bg.promo.mid.default',
+        '$bg.promo.mid.pressed',
+        '$bg.promo.hi.default',
+        '$bg.promo.hi.pressed',
+        '$bg.highlight.mid.default',
+        '$bg.highlight.mid.pressed',
+        '$bg.highlight.hi.default',
+        '$bg.highlight.hi.pressed',
+        '$bg.info.mid',
+        '$bg.info.hi',
+        '$bg.success.mid',
+        '$bg.success.hi',
+        '$bg.warning.mid',
+        '$bg.warning.hi',
+        '$bg.danger.mid',
+        '$bg.danger.hi',
+        '$bg.disabled.mid',
+        '$bg.disabled.hi',
+        '$bg.overlay',
+      ],
+      description: 'Background color (semantic theme token)',
+    },
+    padding: {
+      control: 'select',
+      options: [
+        '$space.none',
+        '$space.2',
+        '$space.4',
+        '$space.8',
+        '$space.12',
+        '$space.16',
+        '$space.24',
+        '$space.32',
+        '$space.40',
+        '$space.48',
+        '$space.56',
+        '$space.64',
+        '$space.80',
+      ],
+      description: 'Padding (space token)',
+    },
+    width: {
+      control: 'select',
+      options: [
+        '$size.16',
+        '$size.20',
+        '$size.24',
+        '$size.32',
+        '$size.48',
+        '$size.64',
+        '$size.80',
+        '$size.96',
+        '$size.120',
+        '$size.144',
+        '$size.176',
+        '$size.208',
+      ],
+      description: 'Width (size token)',
+    },
+    height: {
+      control: 'select',
+      options: [
+        '$size.16',
+        '$size.20',
+        '$size.24',
+        '$size.32',
+        '$size.48',
+        '$size.64',
+        '$size.80',
+        '$size.96',
+        '$size.120',
+        '$size.144',
+        '$size.176',
+        '$size.208',
+      ],
+      description: 'Height (size token)',
+    },
+  },
+};
 
-export const CenterStory: StoryFn<typeof Center> = () => (
-  <Center width="$size.120" height="$size.120" backgroundColor="$bg.accent.default">
-    <View width="$size.16" height="$size.16" backgroundColor="$bg.base.mid.default" />
-  </Center>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-CenterStory.storyName = 'Center';
+export const Default: Story = {
+  args: {
+    backgroundColor: '$bg.base.mid.default',
+    padding: '$space.none',
+    width: '$size.208',
+    height: '$size.120',
+  },
+  render: (args) => (
+    <Center {...args}>
+      <Typography.Text>Centered content</Typography.Text>
+    </Center>
+  ),
+};

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

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { Pressable } from './Pressable';
+import { HStack, VStack } from './Stack';
+
+const meta: Meta<typeof Pressable> = {
+  title: 'Bumper/Core/Primitives/Pressable/Features',
+  component: Pressable,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HoverEffects: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Pressable
+        backgroundColor="$bg.highlight.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        hoverStyle={{ backgroundColor: '$bg.highlight.hi.default' }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('Background change on hover');
+        }}
+      >
+        <Typography.Text variant="body-m">Hover to change background</Typography.Text>
+      </Pressable>
+
+      <Pressable
+        backgroundColor="$bg.accent.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        hoverStyle={{ scale: 1.05 }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('Scale on hover');
+        }}
+      >
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Hover to scale up
+        </Typography.Text>
+      </Pressable>
+
+      <Pressable
+        backgroundColor="$bg.promo.hi.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        hoverStyle={{ opacity: 0.8 }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('Opacity on hover');
+        }}
+      >
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Hover to reduce opacity
+        </Typography.Text>
+      </Pressable>
+    </VStack>
+  ),
+};
+
+export const PressEffects: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Pressable
+        backgroundColor="$bg.accent.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        pressStyle={{ scale: 0.95 }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('Scale down on press');
+        }}
+      >
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Press to scale down
+        </Typography.Text>
+      </Pressable>
+
+      <Pressable
+        backgroundColor="$bg.promo.hi.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        pressStyle={{ backgroundColor: '$bg.promo.hi.pressed', opacity: 0.9 }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('Background + opacity on press');
+        }}
+      >
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Press to change background and opacity
+        </Typography.Text>
+      </Pressable>
+
+      <Pressable
+        backgroundColor="$bg.info.hi"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        pressStyle={{ scale: 0.98, rotateZ: '1deg' }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('Scale + rotate on press');
+        }}
+      >
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Press to scale and rotate
+        </Typography.Text>
+      </Pressable>
+    </VStack>
+  ),
+};
+
+export const PolymorphicAs: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Pressable
+        backgroundColor="$bg.accent.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        hoverStyle={{ backgroundColor: '$bg.accent.pressed' }}
+        pressStyle={{ scale: 0.98 }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('Default (View) pressed');
+        }}
+      >
+        <Typography.Text variant="label-m" color="$content.base.onContrasted.hi">
+          Default as View
+        </Typography.Text>
+      </Pressable>
+
+      <Pressable
+        as={HStack}
+        gap="$space.12"
+        backgroundColor="$bg.promo.hi.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        hoverStyle={{ backgroundColor: '$bg.promo.hi.pressed' }}
+        pressStyle={{ scale: 0.98 }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('HStack pressed');
+        }}
+      >
+        <Typography.Text variant="label-m" color="$content.base.onContrasted.hi">
+          Pressable as HStack
+        </Typography.Text>
+      </Pressable>
+
+      <Pressable
+        as={VStack}
+        gap="$space.8"
+        backgroundColor="$bg.info.hi"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        alignItems="center"
+        hoverStyle={{ opacity: 0.9 }}
+        pressStyle={{ scale: 0.98 }}
+        onPress={() => {
+          // eslint-disable-next-line no-console
+          console.log('VStack pressed');
+        }}
+      >
+        <Typography.Text variant="label-m" color="$content.base.onContrasted.hi">
+          Pressable as VStack
+        </Typography.Text>
+      </Pressable>
+    </VStack>
+  ),
+};

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

@@ -1,25 +1,87 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from '../../content/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>;
+const meta: Meta<typeof Pressable> = {
+  title: 'Bumper/Core/Primitives/Pressable',
+  component: Pressable,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'select',
+      options: [
+        '$bg.base.low.default',
+        '$bg.base.low.pressed',
+        '$bg.base.mid.default',
+        '$bg.base.mid.pressed',
+        '$bg.base.hi.default',
+        '$bg.base.hi.pressed',
+        '$bg.accent.default',
+        '$bg.accent.pressed',
+        '$bg.promo.mid.default',
+        '$bg.promo.mid.pressed',
+        '$bg.promo.hi.default',
+        '$bg.promo.hi.pressed',
+        '$bg.highlight.mid.default',
+        '$bg.highlight.mid.pressed',
+        '$bg.highlight.hi.default',
+        '$bg.highlight.hi.pressed',
+        '$bg.info.mid',
+        '$bg.info.hi',
+        '$bg.success.mid',
+        '$bg.success.hi',
+        '$bg.warning.mid',
+        '$bg.warning.hi',
+        '$bg.danger.mid',
+        '$bg.danger.hi',
+        '$bg.disabled.mid',
+        '$bg.disabled.hi',
+        '$bg.overlay',
+      ],
+      description: 'Background color (semantic theme token)',
+    },
+    padding: {
+      control: 'select',
+      options: [
+        '$space.none',
+        '$space.2',
+        '$space.4',
+        '$space.8',
+        '$space.12',
+        '$space.16',
+        '$space.24',
+        '$space.32',
+        '$space.40',
+        '$space.48',
+        '$space.56',
+        '$space.64',
+        '$space.80',
+      ],
+      description: 'Padding (space token)',
+    },
+    pressStyle: {
+      control: 'object',
+      description: 'Styles to apply on press',
+    },
+  },
+};
 
-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>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-PressableStory.storyName = 'Pressable';
+export const Default: Story = {
+  args: {
+    backgroundColor: '$bg.accent.default',
+    padding: '$space.16',
+    pressStyle: { backgroundColor: '$bg.accent.pressed', scale: 0.98 },
+    onPress: () => {
+      // eslint-disable-next-line no-console
+      console.log('Pressed!');
+    },
+  },
+  render: (args) => (
+    <Pressable {...args}>
+      <Typography.Text color="$content.base.onContrasted.hi">Press me</Typography.Text>
+    </Pressable>
+  ),
+};

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

@@ -14,15 +14,6 @@ export type PressableProps<C extends TamaguiComponent = typeof View> = {
 
 /**
  * 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, {

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';