@urbint/cl 1.0.1

package/src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Grid, GridItem } from './Grid';
+import { VStack } from '../VStack';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+/**
+ * Story container with design system tokens
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <View style={styles.container}>{children}</View>
+);
+
+const meta: Meta<typeof Grid> = {
+  title: 'Layout/Grid',
+  component: Grid,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    columns: { control: 'number' },
+    gap: { control: 'number' },
+    rowGap: { control: 'number' },
+    columnGap: { control: 'number' },
+  },
+  args: {
+    columns: 3,
+    gap: spacing.md,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Grid {...args}>
+      {[1, 2, 3, 4, 5, 6].map((i) => (
+        <GridItem key={i}>
+          <Box p={spacing.lg} bg={colors.feedback.info.background} rounded="md" alignItems="center">
+            <Text>Item {i}</Text>
+          </Box>
+        </GridItem>
+      ))}
+    </Grid>
+  ),
+};
+
+export const TwoColumns: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">2 Column Grid</Text>
+      <Grid columns={2} gap={spacing.md}>
+        {[1, 2, 3, 4].map((i) => (
+          <GridItem key={i}>
+            <Box p={spacing.lg} bg={colors.feedback.info.border} rounded="md" alignItems="center">
+              <Text>Item {i}</Text>
+            </Box>
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const ThreeColumns: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">3 Column Grid</Text>
+      <Grid columns={3} gap={spacing.md}>
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <GridItem key={i}>
+            <Box p={spacing.lg} bg={colors.brand.blue} rounded="md" alignItems="center">
+              <Text color={colors.white}>Item {i}</Text>
+            </Box>
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const FourColumns: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">4 Column Grid</Text>
+      <Grid columns={4} gap={spacing.sm}>
+        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+          <GridItem key={i}>
+            <Box p={spacing.md} bg={colors.brand.navy} rounded="md" alignItems="center">
+              <Text color={colors.white}>{i}</Text>
+            </Box>
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const ColumnSpan: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Grid with Column Span</Text>
+      <Grid columns={4} gap={spacing.md}>
+        <GridItem colSpan={2}>
+          <Box p={spacing.lg} bg={colors.feedback.error.background} rounded="md" alignItems="center">
+            <Text>Span 2</Text>
+          </Box>
+        </GridItem>
+        <GridItem>
+          <Box p={spacing.lg} bg={colors.feedback.warning.background} rounded="md" alignItems="center">
+            <Text>1</Text>
+          </Box>
+        </GridItem>
+        <GridItem>
+          <Box p={spacing.lg} bg={colors.feedback.warning.border} rounded="md" alignItems="center">
+            <Text>1</Text>
+          </Box>
+        </GridItem>
+        <GridItem>
+          <Box p={spacing.lg} bg={colors.feedback.success.background} rounded="md" alignItems="center">
+            <Text>1</Text>
+          </Box>
+        </GridItem>
+        <GridItem colSpan={3}>
+          <Box p={spacing.lg} bg={colors.feedback.info.background} rounded="md" alignItems="center">
+            <Text>Span 3</Text>
+          </Box>
+        </GridItem>
+        <GridItem colSpan={4}>
+          <Box p={spacing.lg} bg={colors.secondary.default} rounded="md" alignItems="center">
+            <Text>Span 4 (Full Width)</Text>
+          </Box>
+        </GridItem>
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const DifferentGaps: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Different Gap Sizes</Text>
+      <VStack space={spacing.sm}>
+        <Text variant="small" color={colors.text.secondary}>gap={spacing.xs}</Text>
+        <Grid columns={3} gap={spacing.xs}>
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <GridItem key={i}>
+              <Box p={spacing.md} bg={colors.feedback.error.background} rounded="sm" alignItems="center">
+                <Text>{i}</Text>
+              </Box>
+            </GridItem>
+          ))}
+        </Grid>
+      </VStack>
+      <VStack space={spacing.sm}>
+        <Text variant="small" color={colors.text.secondary}>gap={spacing.lg}</Text>
+        <Grid columns={3} gap={spacing.lg}>
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <GridItem key={i}>
+              <Box p={spacing.md} bg={colors.feedback.success.background} rounded="sm" alignItems="center">
+                <Text>{i}</Text>
+              </Box>
+            </GridItem>
+          ))}
+        </Grid>
+      </VStack>
+      <VStack space={spacing.sm}>
+        <Text variant="small" color={colors.text.secondary}>gap={spacing.xl}</Text>
+        <Grid columns={3} gap={spacing.xl}>
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <GridItem key={i}>
+              <Box p={spacing.md} bg={colors.feedback.info.background} rounded="sm" alignItems="center">
+                <Text>{i}</Text>
+              </Box>
+            </GridItem>
+          ))}
+        </Grid>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const AsymmetricGaps: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Different Row and Column Gaps</Text>
+      <Text variant="small" color={colors.text.secondary}>rowGap={spacing.xl}, columnGap={spacing.sm}</Text>
+      <Grid columns={3} rowGap={spacing.xl} columnGap={spacing.sm}>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
+          <GridItem key={i}>
+            <Box p={spacing.lg} bg={colors.badge.purple} rounded="md" alignItems="center">
+              <Text color={colors.white}>Item {i}</Text>
+            </Box>
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+export const CardGrid: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Card Grid Layout</Text>
+      <Grid columns={2} gap={spacing.lg}>
+        {['Dashboard', 'Analytics', 'Reports', 'Settings'].map((title, i) => (
+          <GridItem key={i}>
+            <Box p={spacing.xl} bg={colors.background.default} rounded="lg" shadow="10">
+              <VStack space={spacing.sm}>
+                <Box w={40} h={40} bg={colors.feedback.info.background} rounded="md" alignItems="center" justifyContent="center">
+                  <Text>📊</Text>
+                </Box>
+                <Text weight="semiBold">{title}</Text>
+                <Text variant="small" color={colors.text.secondary}>
+                  Click to view details
+                </Text>
+              </VStack>
+            </Box>
+          </GridItem>
+        ))}
+      </Grid>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,93 @@
+/**
+ * Grid Component
+ * CSS-like grid layout for React Native
+ */
+
+import React, { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { spacing, SpacingToken } from '../../styles/tokens';
+
+/** Spacing value can be a token name or raw number */
+type SpacingValue = SpacingToken | number;
+
+/** Resolve spacing value to pixels */
+const resolveSpacing = (value: SpacingValue): number => {
+  if (typeof value === 'number') return value;
+  return spacing[value];
+};
+
+export interface GridProps extends ViewProps {
+  /** Number of columns */
+  columns?: number;
+  /** Gap between items - accepts token ('sm', 'md', 'lg') or number */
+  gap?: SpacingValue;
+  /** Row gap - accepts token or number */
+  rowGap?: SpacingValue;
+  /** Column gap - accepts token or number */
+  columnGap?: SpacingValue;
+}
+
+export interface GridItemProps extends ViewProps {
+  /** Column span */
+  colSpan?: number;
+}
+
+export const Grid = forwardRef<View, GridProps>(
+  ({ style, columns = 1, gap = 'none', rowGap, columnGap, children, ...props }, ref) => {
+    const resolvedGap = resolveSpacing(gap);
+    const effectiveRowGap = rowGap !== undefined ? resolveSpacing(rowGap) : resolvedGap;
+    const effectiveColumnGap = columnGap !== undefined ? resolveSpacing(columnGap) : resolvedGap;
+
+    const childArray = Children.toArray(children);
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            marginHorizontal: -effectiveColumnGap / 2,
+            marginVertical: -effectiveRowGap / 2,
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {childArray.map((child, index) => {
+          if (!isValidElement<GridItemProps>(child)) return child;
+
+          const colSpan = child.props.colSpan || 1;
+          const itemWidth = `${(colSpan / columns) * 100}%` as const;
+
+          return cloneElement(child, {
+            key: index,
+            style: [
+              {
+                width: itemWidth as ViewStyle['width'],
+                paddingHorizontal: effectiveColumnGap / 2,
+                paddingVertical: effectiveRowGap / 2,
+              },
+              child.props.style,
+            ],
+          });
+        })}
+      </View>
+    );
+  }
+);
+
+Grid.displayName = 'Grid';
+
+export const GridItem = forwardRef<View, GridItemProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={style} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+GridItem.displayName = 'GridItem';
+

package/src/components/Grid/index.ts

@@ -0,0 +1,2 @@
+export { Grid, GridItem, type GridProps, type GridItemProps } from './Grid';
+

package/src/components/HStack/HStack.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { HStack } from './HStack';
+import { VStack } from '../VStack';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+/**
+ * Story container with design system tokens
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <View style={styles.container}>{children}</View>
+);
+
+const meta: Meta<typeof HStack> = {
+  title: 'Layout/HStack',
+  component: HStack,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    space: { control: 'number' },
+    alignItems: {
+      control: 'select',
+      options: ['flex-start', 'center', 'flex-end', 'stretch'],
+    },
+    justifyContent: {
+      control: 'select',
+      options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around'],
+    },
+    wrap: { control: 'boolean' },
+    reversed: { control: 'boolean' },
+  },
+  args: {
+    space: spacing.md,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HStack>;
+
+export const Default: Story = {
+  render: (args) => (
+    <HStack {...args}>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text>Item 1</Text>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text>Item 2</Text>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text>Item 3</Text>
+      </Box>
+    </HStack>
+  ),
+};
+
+export const Spacing: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Different Spacing Values</Text>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text variant="small" color={colors.text.secondary}>space={spacing.xs}</Text>
+        <HStack space={spacing.xs}>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>A</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>B</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>C</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text variant="small" color={colors.text.secondary}>space={spacing.lg}</Text>
+        <HStack space={spacing.lg}>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>A</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>B</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>C</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text variant="small" color={colors.text.secondary}>space={spacing['2xl']}</Text>
+        <HStack space={spacing['2xl']}>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>A</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>B</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>C</Text></Box>
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const JustifyContent: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Justify Content Options</Text>
+      <Box p={spacing.md} bg={colors.feedback.warning.background} rounded="md">
+        <Text variant="small">justifyContent="flex-start"</Text>
+        <HStack justifyContent="flex-start" space={spacing.sm}>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>1</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>2</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>3</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.warning.background} rounded="md">
+        <Text variant="small">justifyContent="center"</Text>
+        <HStack justifyContent="center" space={spacing.sm}>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>1</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>2</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>3</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.warning.background} rounded="md">
+        <Text variant="small">justifyContent="flex-end"</Text>
+        <HStack justifyContent="flex-end" space={spacing.sm}>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>1</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>2</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>3</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.warning.background} rounded="md">
+        <Text variant="small">justifyContent="space-between"</Text>
+        <HStack justifyContent="space-between">
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>1</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>2</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.warning.border} rounded="sm"><Text>3</Text></Box>
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const AlignItems: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Align Items Options</Text>
+      <Box p={spacing.md} bg={colors.feedback.success.background} rounded="md">
+        <Text variant="small">alignItems="flex-start"</Text>
+        <HStack alignItems="flex-start" space={spacing.sm} style={{ height: 80 }}>
+          <Box p={spacing.sm} h={30} bg={colors.feedback.success.border} rounded="sm"><Text>Short</Text></Box>
+          <Box p={spacing.sm} h={50} bg={colors.feedback.success.border} rounded="sm"><Text>Medium</Text></Box>
+          <Box p={spacing.sm} h={70} bg={colors.feedback.success.border} rounded="sm"><Text>Tall</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.success.background} rounded="md">
+        <Text variant="small">alignItems="center"</Text>
+        <HStack alignItems="center" space={spacing.sm} style={{ height: 80 }}>
+          <Box p={spacing.sm} h={30} bg={colors.feedback.success.border} rounded="sm"><Text>Short</Text></Box>
+          <Box p={spacing.sm} h={50} bg={colors.feedback.success.border} rounded="sm"><Text>Medium</Text></Box>
+          <Box p={spacing.sm} h={70} bg={colors.feedback.success.border} rounded="sm"><Text>Tall</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.success.background} rounded="md">
+        <Text variant="small">alignItems="flex-end"</Text>
+        <HStack alignItems="flex-end" space={spacing.sm} style={{ height: 80 }}>
+          <Box p={spacing.sm} h={30} bg={colors.feedback.success.border} rounded="sm"><Text>Short</Text></Box>
+          <Box p={spacing.sm} h={50} bg={colors.feedback.success.border} rounded="sm"><Text>Medium</Text></Box>
+          <Box p={spacing.sm} h={70} bg={colors.feedback.success.border} rounded="sm"><Text>Tall</Text></Box>
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Wrap: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Wrap Behavior</Text>
+      <Box p={spacing.md} bg={colors.feedback.error.background} rounded="md">
+        <Text variant="small">wrap=false (default)</Text>
+        <HStack space={spacing.sm} wrap={false}>
+          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+            <Box key={i} p={spacing.sm} bg={colors.feedback.error.border} rounded="sm">
+              <Text>Item {i}</Text>
+            </Box>
+          ))}
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.error.background} rounded="md">
+        <Text variant="small">wrap=true</Text>
+        <HStack space={spacing.sm} wrap>
+          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+            <Box key={i} p={spacing.sm} bg={colors.feedback.error.border} rounded="sm">
+              <Text>Item {i}</Text>
+            </Box>
+          ))}
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Reversed: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Reversed Direction</Text>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text variant="small">Normal (reversed=false)</Text>
+        <HStack space={spacing.sm}>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>1st</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>2nd</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>3rd</Text></Box>
+        </HStack>
+      </Box>
+      <Box p={spacing.md} bg={colors.feedback.info.background} rounded="md">
+        <Text variant="small">Reversed (reversed=true)</Text>
+        <HStack space={spacing.sm} reversed>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>1st</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>2nd</Text></Box>
+          <Box p={spacing.sm} bg={colors.feedback.info.border} rounded="sm"><Text>3rd</Text></Box>
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/HStack/HStack.tsx

@@ -0,0 +1,80 @@
+/**
+ * HStack Component
+ * Horizontal stack - arranges children in a row
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { spacing, SpacingToken } from '../../styles/tokens';
+
+/** Spacing value can be a token name or raw number */
+type SpacingValue = SpacingToken | number;
+
+/** Resolve spacing value to pixels */
+const resolveSpacing = (value: SpacingValue): number => {
+  if (typeof value === 'number') return value;
+  return spacing[value];
+};
+
+export interface HStackProps extends ViewProps {
+  /** Space between children - accepts token ('sm', 'md', 'lg') or number */
+  space?: SpacingValue;
+  /** Padding on all sides - accepts token ('sm', 'md', 'lg') or number */
+  p?: SpacingValue;
+  /** Horizontal padding - accepts token ('sm', 'md', 'lg') or number */
+  px?: SpacingValue;
+  /** Vertical padding - accepts token ('sm', 'md', 'lg') or number */
+  py?: SpacingValue;
+  /** Align items */
+  alignItems?: ViewStyle['alignItems'];
+  /** Justify content */
+  justifyContent?: ViewStyle['justifyContent'];
+  /** Wrap children */
+  wrap?: boolean;
+  /** Reverse direction */
+  reversed?: boolean;
+}
+
+export const HStack = forwardRef<View, HStackProps>(
+  (
+    {
+      style,
+      space = 'none',
+      p,
+      px,
+      py,
+      alignItems = 'center',
+      justifyContent,
+      wrap = false,
+      reversed = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <View
+        ref={ref}
+        style={[
+          {
+            flexDirection: reversed ? 'row-reverse' : 'row',
+            gap: resolveSpacing(space),
+            alignItems,
+            justifyContent,
+            flexWrap: wrap ? 'wrap' : 'nowrap',
+            ...(p !== undefined && { padding: resolveSpacing(p) }),
+            ...(px !== undefined && { paddingHorizontal: resolveSpacing(px) }),
+            ...(py !== undefined && { paddingVertical: resolveSpacing(py) }),
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+HStack.displayName = 'HStack';
+

package/src/components/HStack/index.ts

@@ -0,0 +1,2 @@
+export { HStack, type HStackProps } from './HStack';
+