@ankhorage/zora 16.0.0 → 17.0.0

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;

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

@@ -0,0 +1,10 @@
+export type {
+  ContentRailControlPressEvent,
+  ContentRailDirection,
+  ContentRailItemSize,
+  ContentRailMotion,
+  ContentRailProps,
+  ContentRailSpacing,
+  ContentRailVisibleRangeChangeEvent,
+} from '../../types/content-rail';
+export { ContentRail } from './adapters/inbound/ContentRail';

package/src/features/data-table/adapters/inbound/DataTable.tsx

@@ -1,8 +1,8 @@
 import type { InteractionPolicy } from '@ankhorage/surface';
+import { Show } from '@ankhorage/surface';
 import React from 'react';
 import { ScrollView, type ViewStyle } from 'react-native';
 
-import { Show } from '../../../../foundation';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
   DataTableCellContext,
@@ -17,7 +17,7 @@ import { Button } from '../../../button/public';
 import { IconButton } from '../../../button/public';
 import { Card } from '../../../card/public';
 import { EmptyState } from '../../../empty-state/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { PopoverMenu, type PopoverMenuAction } from '../../../popover-menu/public';
 import { SkeletonList } from '../../../skeleton/public';
 import { Text, type TextAlign } from '../../../typography/public';
@@ -207,8 +207,8 @@ function DataTableHeader<TRow extends object>({
   const passive = interactionPolicy === 'passive';
 
   return (
-    <Box bg="subtle" borderColor="border" borderWidth={1} radius="m">
-      <Stack direction="row" align="center">
+    <View bg="subtle" borderColor="border" borderWidth={1} radius="m">
+      <View direction="row" align="center">
         {columns.map((column) => {
           const currentDirection = sort?.columnId === column.id ? sort.direction : undefined;
           const sortable = Boolean(column.sortable && onSortChange);
@@ -216,7 +216,7 @@ function DataTableHeader<TRow extends object>({
             currentDirection === undefined ? '' : currentDirection === 'asc' ? ' ↑' : ' ↓';
 
           return (
-            <Box key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>
+            <View key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>
               {sortable ? (
                 <Button
                   color="primary"
@@ -245,16 +245,16 @@ function DataTableHeader<TRow extends object>({
                   {column.header}
                 </Text>
               )}
-            </Box>
+            </View>
           );
         })}
-        <Box px={padding.px} py={padding.py} style={{ minWidth: 56, width: 56 }}>
+        <View px={padding.px} py={padding.py} style={{ minWidth: 56, width: 56 }}>
           <Text align="right" emphasis="muted" variant="caption" weight="semiBold">
             Actions
           </Text>
-        </Box>
-      </Stack>
-    </Box>
+        </View>
+      </View>
+    </View>
   );
 }
 
@@ -274,8 +274,8 @@ function DataTableDesktop<TRow extends object>({
 
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-      <Box minWidth={720} style={{ width: '100%' }}>
-        <Stack gap="xs">
+      <View minWidth={720} style={{ width: '100%' }}>
+        <View gap="xs">
           <DataTableHeader
             columns={columns}
             density={density}
@@ -283,9 +283,9 @@ function DataTableDesktop<TRow extends object>({
             onSortChange={onSortChange}
             sort={sort}
           />
-          <Stack gap="xs">
+          <View gap="xs">
             {rows.map((row, rowIndex) => (
-              <Box
+              <View
                 bg="surface"
                 borderColor="border"
                 borderWidth={1}
@@ -293,30 +293,30 @@ function DataTableDesktop<TRow extends object>({
                 radius="m"
                 testID={testID ? `${testID}-row-${rowIndex}` : undefined}
               >
-                <Stack direction="row" align="center">
+                <View direction="row" align="center">
                   {columns.map((column) => (
-                    <Box
+                    <View
                       key={column.id}
                       px={padding.px}
                       py={padding.py}
                       style={resolveCellStyle(column)}
                     >
                       {renderTableCell(column, row, rowIndex)}
-                    </Box>
+                    </View>
                   ))}
-                  <Box
+                  <View
                     px={padding.px}
                     py={padding.py}
                     style={{ alignItems: 'flex-end', minWidth: 56, width: 56 }}
                   >
                     {renderRowActions({ row, rowActions, rowIndex, testID, interactionPolicy })}
-                  </Box>
-                </Stack>
-              </Box>
+                  </View>
+                </View>
+              </View>
             ))}
-          </Stack>
-        </Stack>
-      </Box>
+          </View>
+        </View>
+      </View>
     </ScrollView>
   );
 }
@@ -333,7 +333,7 @@ function DataTableMobile<TRow extends object>({
   const [primaryColumn, ...detailColumns] = columns;
 
   return (
-    <Stack gap="s">
+    <View gap="s">
       {rows.map((row, rowIndex) => {
         const title = primaryColumn
           ? renderCell(primaryColumn, row, rowIndex)
@@ -349,9 +349,9 @@ function DataTableMobile<TRow extends object>({
             testID={testID ? `${testID}-card-${rowIndex}` : undefined}
             title={title}
           >
-            <Stack gap="s">
+            <View gap="s">
               {detailColumns.map((column) => (
-                <Stack gap="xxs" key={column.id}>
+                <View gap="xxs" key={column.id}>
                   <Text emphasis="muted" variant="caption" weight="semiBold">
                     {column.header}
                   </Text>
@@ -362,13 +362,13 @@ function DataTableMobile<TRow extends object>({
                       {renderDefaultCell(resolveAccessorValue(row, column))}
                     </Text>
                   )}
-                </Stack>
+                </View>
               ))}
-            </Stack>
+            </View>
           </Card>
         );
       })}
-    </Stack>
+    </View>
   );
 }
 
@@ -406,10 +406,10 @@ function DataTableInner<TRow extends object>({
   };
 
   return (
-    <Box testID={testID}>
+    <View testID={testID}>
       <Show when={{ base: false, md: true }} fallback={<DataTableMobile {...tableProps} />}>
         <DataTableDesktop {...tableProps} />
       </Show>
-    </Box>
+    </View>
   );
 }