@ankhorage/zora 15.0.0 → 17.0.0

package/src/features/button/adapters/inbound/ButtonGroup.tsx

@@ -6,7 +6,7 @@ import type {
   ButtonGroupOrientation,
   ButtonGroupProps,
 } from '../../../../types/button-group';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 /***
  * Groups multiple `Button` elements with consistent spacing and alignment.
  */
@@ -99,7 +99,7 @@ function ButtonGroupInner({
   const orderedItems = reverse ? items.reverse() : items;
 
   return (
-    <Stack
+    <View
       align={resolveStackAlign(align, orientation)}
       direction={resolveDirection(orientation)}
       gap={gap}
@@ -107,6 +107,6 @@ function ButtonGroupInner({
       testID={testID}
     >
       {orderedItems}
-    </Stack>
+    </View>
   );
 }

package/src/features/card/adapters/inbound/Card.tsx

@@ -5,7 +5,7 @@ import { resolveCardVariant } from '../../../../internal/recipes';
 import { useZoraThemeRecipe } from '../../../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { CardProps } from '../../../../types/card';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { resolveCardThemeRecipe } from '../../utils/resolveCardThemeRecipe';
@@ -55,16 +55,16 @@ function CardInner({
       radius={recipe.radius}
       variant={resolveCardVariant(recipe.tone)}
     >
-      <Stack gap={gap}>
+      <View gap={gap}>
         {hasHeader ? (
-          <Stack
+          <View
             align={{ base: 'flex-start', md: 'center' }}
             direction={{ base: 'column', md: 'row' }}
             gap="m"
             justify="space-between"
           >
-            <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-              <Stack gap="xs">
+            <View flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
+              <View gap="xs">
                 {eyebrow ? (
                   <Text emphasis="muted" variant="caption" weight="semiBold">
                     {eyebrow}
@@ -76,16 +76,16 @@ function CardInner({
                     {description}
                   </Text>
                 ) : null}
-              </Stack>
-            </Box>
-            {actions ? <Box>{actions}</Box> : null}
-          </Stack>
+              </View>
+            </View>
+            {actions ? <View>{actions}</View> : null}
+          </View>
         ) : null}
 
-        {children ? <Box>{children}</Box> : null}
+        {children ? <View>{children}</View> : null}
 
-        {hasFooter ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
+        {hasFooter ? <View pt="xs">{footer}</View> : null}
+      </View>
     </SurfaceCard>
   );
 }

package/src/features/card/adapters/inbound/MediaCard.tsx

@@ -4,7 +4,7 @@ import { Image } from 'react-native';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { MediaCardProps } from '../../../../types/media-card';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';
@@ -51,9 +51,9 @@ function MediaCardInner({
   const renderImage = () => {
     if (image) {
       return (
-        <Box radius="m" style={{ overflow: 'hidden' }}>
+        <View radius="m" style={{ overflow: 'hidden' }}>
           {image}
-        </Box>
+        </View>
       );
     }
 
@@ -62,15 +62,15 @@ function MediaCardInner({
     }
 
     return (
-      <Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
-        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
+      <View bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
+        <View style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
           <Image
             accessibilityLabel={imageLabel}
             source={imageSource}
             style={{ height: '100%', width: '100%' }}
           />
-        </Box>
-      </Box>
+        </View>
+      </View>
     );
   };
 
@@ -84,41 +84,41 @@ function MediaCardInner({
       testID={testID}
       tone={tone}
     >
-      <Stack gap={gap}>
+      <View gap={gap}>
         {renderImage()}
 
         {hasHeader ? (
-          <Stack
+          <View
             align={{ base: 'flex-start', md: 'center' }}
             direction={{ base: 'column', md: 'row' }}
             gap="m"
             justify="space-between"
           >
-            <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-              <Stack gap="xs">
+            <View flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
+              <View gap="xs">
                 {eyebrow ? (
                   <Text emphasis="muted" variant="caption" weight="semiBold">
                     {eyebrow}
                   </Text>
                 ) : null}
-                <Stack gap="xs">
+                <View gap="xs">
                   <Heading level={compact ? 4 : 3}>{title}</Heading>
-                  {badges ? <Box>{badges}</Box> : null}
-                </Stack>
+                  {badges ? <View>{badges}</View> : null}
+                </View>
                 {description ? (
                   <Text emphasis="muted" variant="bodySmall">
                     {description}
                   </Text>
                 ) : null}
-              </Stack>
-            </Box>
-            {actions ? <Box>{actions}</Box> : null}
-          </Stack>
+              </View>
+            </View>
+            {actions ? <View>{actions}</View> : null}
+          </View>
         ) : null}
 
-        {children ? <Box>{children}</Box> : null}
-        {footer ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
+        {children ? <View>{children}</View> : null}
+        {footer ? <View pt="xs">{footer}</View> : null}
+      </View>
     </Card>
   );
 }

package/src/features/card/adapters/inbound/MetricCard.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { resolveBadgeRecipe, resolveIconSize } from '../../../../internal/recipes';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { MetricCardProps } from '../../../../types/metric-card';
 import { Badge } from '../../../badge/public';
 import { Icon } from '../../../icon/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';
@@ -46,10 +45,10 @@ function MetricCardInner({
       testID={testID}
       tone={tone}
     >
-      <Stack gap={compact ? 's' : 'm'}>
-        <Inline align="flex-start" gap="m" justify="space-between">
-          <Stack flex={1} gap="xs">
-            <Inline align="center" gap="xs" wrap="wrap">
+      <View gap={compact ? 's' : 'm'}>
+        <View direction="row" align="flex-start" gap="m" justify="space-between">
+          <View flex={1} gap="xs">
+            <View direction="row" align="center" gap="xs" wrap="wrap">
               {icon ? <Icon {...icon} color={iconColor} size={resolveIconSize('s')} /> : null}
               <Text emphasis="muted" variant="caption" weight="semiBold">
                 {label}
@@ -63,7 +62,7 @@ function MetricCardInner({
                   {delta}
                 </Badge>
               ) : null}
-            </Inline>
+            </View>
 
             <Heading level={compact ? 3 : 2}>{value}</Heading>
 
@@ -72,11 +71,11 @@ function MetricCardInner({
                 {description}
               </Text>
             ) : null}
-          </Stack>
+          </View>
 
-          {actions ? <Box>{actions}</Box> : null}
-        </Inline>
-      </Stack>
+          {actions ? <View>{actions}</View> : null}
+        </View>
+      </View>
     </Card>
   );
 }

package/src/features/card/adapters/inbound/PostCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Image as ReactNativeImage } from 'react-native';
 
-import { Inline } from '../../../../foundation';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
@@ -13,7 +12,7 @@ import type {
 } from '../../../../types/post-card';
 import { Avatar } from '../../../avatar/public';
 import { Button } from '../../../button/public';
-import { Box, Divider, Stack } from '../../../layout/public';
+import { Divider, View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';
 /***
@@ -58,7 +57,7 @@ function PostCardAuthor({ author, compact = false }: { author: PostAuthor; compa
   const { avatar } = author;
 
   return (
-    <Inline align="center" gap="s" wrap="nowrap">
+    <View direction="row" align="center" gap="s" wrap="nowrap">
       <Avatar
         initials={avatar?.initials}
         label={avatar?.label ?? avatarName}
@@ -68,8 +67,8 @@ function PostCardAuthor({ author, compact = false }: { author: PostAuthor; compa
         source={avatar?.source}
         color={avatar?.color}
       />
-      <Box flex={1}>
-        <Stack gap="xxs">
+      <View flex={1}>
+        <View gap="xxs">
           <Text variant="bodySmall" weight="semiBold">
             {author.name}
           </Text>
@@ -78,9 +77,9 @@ function PostCardAuthor({ author, compact = false }: { author: PostAuthor; compa
               {author.subtitle}
             </Text>
           ) : null}
-        </Stack>
-      </Box>
-    </Inline>
+        </View>
+      </View>
+    </View>
   );
 }
 
@@ -90,22 +89,22 @@ function PostCardMediaItem({ media }: { media: PostCardMedia }) {
 
   if (!('source' in media)) {
     return (
-      <Box radius="m" style={{ overflow: 'hidden' }}>
+      <View radius="m" style={{ overflow: 'hidden' }}>
         {media.children}
-      </Box>
+      </View>
     );
   }
 
   return (
-    <Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
-      <Box style={{ aspectRatio, width: '100%' }}>
+    <View bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
+      <View style={{ aspectRatio, width: '100%' }}>
         <ReactNativeImage
           accessibilityLabel={media.label}
           source={media.source}
           style={{ height: '100%', width: '100%' }}
         />
-      </Box>
-    </Box>
+      </View>
+    </View>
   );
 }
 
@@ -127,7 +126,7 @@ function PostCardActions({ actions }: { actions: readonly PostAction[] }) {
   }
 
   return (
-    <Inline align="center" gap="s" wrap="wrap">
+    <View direction="row" align="center" gap="s" wrap="wrap">
       {actions.map((action) => (
         <Button
           key={action.id}
@@ -141,26 +140,26 @@ function PostCardActions({ actions }: { actions: readonly PostAction[] }) {
           <PostActionLabel action={action} />
         </Button>
       ))}
-    </Inline>
+    </View>
   );
 }
 
 function PostCommentPreviewItem({ comment }: { comment: PostCommentPreview }) {
   return (
-    <Inline align="flex-start" gap="s" wrap="nowrap">
+    <View direction="row" align="flex-start" gap="s" wrap="nowrap">
       {comment.author ? <PostCardAuthor author={comment.author} compact /> : null}
-      <Box flex={1}>
-        <Stack gap="xxs">
+      <View flex={1}>
+        <View gap="xxs">
           <Text variant="bodySmall">{comment.text}</Text>
           {comment.meta ? (
             <Text emphasis="subtle" variant="caption">
               {comment.meta}
             </Text>
           ) : null}
-          {comment.action ? <Box>{comment.action}</Box> : null}
-        </Stack>
-      </Box>
-    </Inline>
+          {comment.action ? <View>{comment.action}</View> : null}
+        </View>
+      </View>
+    </View>
   );
 }
 
@@ -170,11 +169,11 @@ function PostCardComments({ comments }: { comments: readonly PostCommentPreview[
   }
 
   return (
-    <Stack gap="s">
+    <View gap="s">
       {comments.map((comment) => (
         <PostCommentPreviewItem key={comment.id} comment={comment} />
       ))}
-    </Stack>
+    </View>
   );
 }
 
@@ -209,33 +208,33 @@ function PostCardInner({
       testID={testID}
       tone={tone}
     >
-      <Stack gap={gap}>
-        <Inline align="center" gap="m" justify="space-between" wrap="nowrap">
-          <Box flex={1}>
+      <View gap={gap}>
+        <View direction="row" align="center" gap="m" justify="space-between" wrap="nowrap">
+          <View flex={1}>
             <PostCardAuthor author={author} compact={compact} />
-          </Box>
-          {headerAction ? <Box>{headerAction}</Box> : null}
-        </Inline>
+          </View>
+          {headerAction ? <View>{headerAction}</View> : null}
+        </View>
 
         {hasBody ? (
-          <Stack gap={gap}>
+          <View gap={gap}>
             {text ? <Text variant="body">{text}</Text> : null}
-            {children ? <Box>{children}</Box> : null}
+            {children ? <View>{children}</View> : null}
             {mediaItems.length > 0 ? (
-              <Stack gap="s">
+              <View gap="s">
                 {mediaItems.map((item, index) => (
                   <PostCardMediaItem key={`${index}`} media={item} />
                 ))}
-              </Stack>
+              </View>
             ) : null}
-          </Stack>
+          </View>
         ) : null}
 
         {hasEngagement ? <Divider /> : null}
         <PostCardActions actions={actions} />
         <PostCardComments comments={comments} />
-        {footer ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
+        {footer ? <View pt="xs">{footer}</View> : null}
+      </View>
     </Card>
   );
 }

package/src/features/card/adapters/inbound/ProductCard.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
 import type { ProductCardProps } from '../../../../types/product-card';
 import { Badge } from '../../../badge/public';
 import { Button } from '../../../button/public';
 import { Image } from '../../../image/public';
-import { Divider, Stack } from '../../../layout/public';
+import { Divider, View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';
@@ -46,7 +45,7 @@ function ProductCardInner({
       interactionPolicy={interactionPolicy}
       {...rest}
     >
-      <Stack gap="m">
+      <View gap="m">
         {imageUrl ? (
           <Image
             accessibilityLabel={imageAlt ?? title}
@@ -56,9 +55,9 @@ function ProductCardInner({
           />
         ) : null}
 
-        <Stack gap="s">
+        <View gap="s">
           {hasHeaderInfo ? (
-            <Stack gap="xxs">
+            <View gap="xxs">
               {eyebrow ? (
                 <Text variant="caption" weight="semiBold" emphasis="muted">
                   {eyebrow}
@@ -70,19 +69,19 @@ function ProductCardInner({
                   {subtitle}
                 </Text>
               ) : null}
-            </Stack>
+            </View>
           ) : null}
 
           {description ? <Text variant="bodySmall">{description}</Text> : null}
 
           {badges && badges.length > 0 ? (
-            <Inline gap="xs" wrap="wrap">
+            <View direction="row" gap="xs" wrap="wrap">
               {badges.map((badge, index) => (
                 <Badge key={`${badge}-${index}`}>{badge}</Badge>
               ))}
-            </Inline>
+            </View>
           ) : null}
-        </Stack>
+        </View>
 
         {price ? (
           <Text variant="bodySmall" weight="bold">
@@ -92,25 +91,25 @@ function ProductCardInner({
         ) : null}
 
         {hasMeta ? (
-          <Stack gap="xs">
+          <View gap="xs">
             <Divider />
             {meta.map((item, index) => (
-              <Inline key={`${item.label}-${index}`} justify="space-between">
+              <View direction="row" key={`${item.label}-${index}`} justify="space-between">
                 <Text variant="bodySmall" emphasis="muted">
                   {item.label}
                 </Text>
                 <Text variant="bodySmall" weight="semiBold">
                   {item.value}
                 </Text>
-              </Inline>
+              </View>
             ))}
-          </Stack>
+          </View>
         ) : null}
 
         {hasActions ? (
-          <Stack gap="s">
+          <View gap="s">
             <Divider />
-            <Inline gap="s">
+            <View direction="row" gap="s">
               {secondaryActionLabel ? (
                 <Button
                   interactionPolicy={interactionPolicy}
@@ -132,10 +131,10 @@ function ProductCardInner({
                   {primaryActionLabel}
                 </Button>
               ) : null}
-            </Inline>
-          </Stack>
+            </View>
+          </View>
         ) : null}
-      </Stack>
+      </View>
     </Card>
   );
 }

package/src/features/chip/adapters/inbound/Chip.tsx

@@ -1,13 +1,12 @@
 import { ButtonBase } from '@ankhorage/surface';
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { resolveIconSize } from '../../../../internal/recipes';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ChipInteractionState, ChipProps } from '../../../../types/chip';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { resolveChipColors } from '../../utils/resolveChipColors';
 /***
@@ -57,7 +56,7 @@ function ChipInner({
     const textEmphasis = state.disabled ? 'muted' : 'default';
 
     return (
-      <Box
+      <View
         bg={colors.backgroundColor}
         borderColor={colors.borderColor}
         borderWidth={1}
@@ -69,13 +68,13 @@ function ChipInner({
           opacity: colors.opacity,
         }}
       >
-        <Inline align="center" gap="xs" wrap="nowrap">
+        <View direction="row" align="center" gap="xs" wrap="nowrap">
           {icon ? <Icon {...icon} color={colors.contentColor} size={iconSize} /> : null}
           <Text color={textColor} emphasis={textEmphasis} variant="label">
             {children}
           </Text>
-        </Inline>
-      </Box>
+        </View>
+      </View>
     );
   };
 

package/src/features/chip/adapters/inbound/ChipGroup.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ChipGroupItem, ChipGroupProps } from '../../../../types/chip-group';
+import { View } from '../../../layout/public';
 import { Chip } from '../../public';
 /***
  * Renders a row or wrap layout of `Chip` items.
@@ -66,8 +66,8 @@ function ChipGroupInner<TValue extends string = string>({
   };
 
   return (
-    <Inline align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
+    <View direction="row" align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
       {items.map(renderChip)}
-    </Inline>
+    </View>
   );
 }

package/src/features/{layout → content-rail}/adapters/inbound/ContentRail.test.ts

@@ -30,7 +30,9 @@ describe('ContentRail public contract', () => {
   });
 
   test('keeps product data, navigation, and platform coupling outside the pattern', async () => {
-    const source = await Bun.file('src/features/layout/adapters/inbound/ContentRail.tsx').text();
+    const source = await Bun.file(
+      'src/features/content-rail/adapters/inbound/ContentRail.tsx',
+    ).text();
 
     expect(source).toContain('ScrollView');
     expect(source).toContain('I18nManager.isRTL');

package/src/features/{layout → content-rail}/adapters/inbound/ContentRail.tsx

@@ -7,7 +7,6 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { Inline } from '../../../../foundation';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
@@ -15,8 +14,8 @@ import type {
   ContentRailVisibleRangeChangeEvent,
 } from '../../../../types/content-rail';
 import { IconButton } from '../../../button/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
-import { Box, Stack } from '../../public';
 import { resolveContentRailItemWidth } from '../../utils/resolveContentRailItemWidth';
 import { resolveContentRailPhysicalOffset } from '../../utils/resolveContentRailPhysicalOffset';
 import { resolveContentRailState } from '../../utils/resolveContentRailState';
@@ -190,13 +189,13 @@ function ContentRailCarousel({
   };
 
   return (
-    <Stack gap="s" testID={testID}>
+    <View gap="s" testID={testID}>
       {showControls && hasOverflow ? (
-        <Inline justify="space-between" wrap="nowrap">
+        <View direction="row" justify="space-between" wrap="nowrap">
           <Text accessibilityLiveRegion="polite" emphasis="muted" variant="caption">
             {rangeLabel}
           </Text>
-          <Inline gap="xs" wrap="nowrap">
+          <View direction="row" gap="xs" wrap="nowrap">
             <IconButton
               disabled={passive || !railState.canGoPrevious}
               icon={{ name: isRtl ? 'chevron-forward' : 'chevron-back' }}
@@ -213,8 +212,8 @@ function ContentRailCarousel({
               onPress={() => scrollToIndex(railState.anchorIndex + 1, 'next')}
               size="l"
             />
-          </Inline>
-        </Inline>
+          </View>
+        </View>
       ) : null}
       <ScrollView
         accessibilityLabel={accessibilityLabel}
@@ -240,12 +239,12 @@ function ContentRailCarousel({
         snapToInterval={itemWidth > 0 ? itemWidth + gapValue : undefined}
       >
         {items.map((item, index) => (
-          <Box key={index} style={{ flexShrink: 0, width: itemWidth || undefined }}>
+          <View key={index} style={{ flexShrink: 0, width: itemWidth || undefined }}>
             {item}
-          </Box>
+          </View>
         ))}
       </ScrollView>
-    </Stack>
+    </View>
   );
 }
 

package/src/features/content-rail/constants.ts

@@ -0,0 +1 @@
+export const CONTENT_RAIL_SPACING_VALUES = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;