@ankhorage/zora 16.0.0 → 17.0.0

package/src/patterns/scanner/ScanOverlay.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { Badge } from '../../features/badge/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
@@ -26,8 +26,8 @@ function ScanOverlayInner({
   };
 
   return (
-    <Box testID={testID}>
-      <Stack gap="m">
+    <View testID={testID}>
+      <View gap="m">
         <View accessibilityRole="image" style={[styles.frame, frameStyle]}>
           <View style={[styles.corner, styles.topLeft, cornerStyle]} />
           <View style={[styles.corner, styles.topRight, cornerStyle]} />
@@ -35,16 +35,16 @@ function ScanOverlayInner({
           <View style={[styles.corner, styles.bottomRight, cornerStyle]} />
           <Badge color="primary">{cornerLabel}</Badge>
         </View>
-        <Stack gap="xs">
+        <View gap="xs">
           <Text align="center" variant="label" weight="semiBold">
             {title}
           </Text>
           <Text align="center" emphasis="muted" variant="bodySmall">
             {description}
           </Text>
-        </Stack>
-      </Stack>
-    </Box>
+        </View>
+      </View>
+    </View>
   );
 }
 

package/src/patterns/section-header/SectionHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Heading } from '../../features/typography/public';
 import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
@@ -17,15 +17,15 @@ function SectionHeaderInner({
   testID,
 }: SectionHeaderProps) {
   return (
-    <Stack
+    <View
       align={{ base: 'flex-start', md: 'center' }}
       direction={{ base: 'column', md: 'row' }}
       gap="m"
       justify="space-between"
       testID={testID}
     >
-      <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}
@@ -37,10 +37,10 @@ function SectionHeaderInner({
               {description}
             </Text>
           ) : null}
-        </Stack>
-      </Box>
-      {actions ? <Box>{actions}</Box> : null}
-    </Stack>
+        </View>
+      </View>
+      {actions ? <View>{actions}</View> : null}
+    </View>
   );
 }
 

package/src/patterns/switch-field/SwitchField.tsx

@@ -2,7 +2,7 @@ import { Switch } from '@ankhorage/surface';
 import React from 'react';
 
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { SettingsRow } from '../settings-row';
+import { ListRow } from '../list';
 import type { SwitchFieldProps } from './types';
 
 function SwitchFieldInner({
@@ -17,12 +17,12 @@ function SwitchFieldInner({
   interactionPolicy,
 }: SwitchFieldProps) {
   return (
-    <SettingsRow
+    <ListRow
       title={label}
       description={description}
       disabled={disabled}
       testID={testID}
-      control={
+      action={
         <Switch
           checked={value}
           disabled={disabled}
@@ -35,7 +35,7 @@ function SwitchFieldInner({
 }
 
 /***
- * Labeled switch field pattern built on `SettingsRow`.
+ * Labeled switch field pattern built on `ListRow`.
  *
  
  */

package/src/patterns/theme-composer/ThemeComposer.tsx

@@ -9,7 +9,7 @@ import { Card } from '../../features/card/public';
 import { ChipGroup } from '../../features/chip/public';
 import { Select } from '../../features/form/select/public';
 import { TextInput } from '../../features/form/text-input/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Heading } from '../../features/typography/public';
 import { Text } from '../../features/typography/public';
 import type { ZoraThemeMode } from '../../theme/types';
@@ -131,14 +131,14 @@ function ThemeComposerInner({
   }));
 
   return (
-    <Stack gap="l" testID={testID}>
+    <View gap="l" testID={testID}>
       {/* Section: Theme identity */}
       <Card
         title="Theme identity"
         description="Name your theme. The ID is assigned automatically and shown for reference."
       >
-        <Stack gap="m">
-          <Stack gap="xs">
+        <View gap="m">
+          <View gap="xs">
             <Text variant="label">Name</Text>
             <TextInput
               value={nameDraft.inputValue}
@@ -153,8 +153,8 @@ function ThemeComposerInner({
                 {nameDraft.error}
               </Text>
             ) : null}
-          </Stack>
-          <Stack gap="xs">
+          </View>
+          <View gap="xs">
             <Text variant="label">ID</Text>
             <Text
               emphasis="muted"
@@ -163,8 +163,8 @@ function ThemeComposerInner({
             >
               {value.id}
             </Text>
-          </Stack>
-        </Stack>
+          </View>
+        </View>
       </Card>
 
       {/* Section: App category */}
@@ -179,9 +179,9 @@ function ThemeComposerInner({
 
       {/* Section: Primary Color */}
       <Card title="Primary color" description="Set the seed color for your theme palette.">
-        <Stack gap="m">
-          <Stack direction="row" gap="m" align="center">
-            <Box flex={1}>
+        <View gap="m">
+          <View direction="row" gap="m" align="center">
+            <View flex={1}>
               <TextInput
                 value={hexDraft.inputValue}
                 onChangeText={handleHexChange}
@@ -192,9 +192,9 @@ function ThemeComposerInner({
                 invalid={hexDraft.error !== undefined}
                 testID={testID ? `${testID}-hex-input` : undefined}
               />
-            </Box>
+            </View>
             {/* Color preview chip */}
-            <Box
+            <View
               width={36}
               height={36}
               radius="m"
@@ -206,13 +206,13 @@ function ThemeComposerInner({
                 borderColor: theme.colors.border,
               }}
             />
-          </Stack>
+          </View>
           {hexDraft.error ? (
             <Text color="danger" variant="bodySmall">
               {hexDraft.error}
             </Text>
           ) : null}
-        </Stack>
+        </View>
       </Card>
 
       {/* Section: Harmony */}
@@ -240,33 +240,33 @@ function ThemeComposerInner({
 
       {/* Section: Preview */}
       <Card title="Preview" description="A quick look at how your theme renders common controls.">
-        <Stack gap="m">
-          <Stack gap="xs">
+        <View gap="m">
+          <View gap="xs">
             <Text variant="label">Name</Text>
             <Text>{value.name}</Text>
-          </Stack>
-          <Stack gap="xs">
+          </View>
+          <View gap="xs">
             <Text variant="label">Category</Text>
             <Text>{formatAppCategoryLabel(value.appCategory)}</Text>
-          </Stack>
-          <Stack gap="xs">
+          </View>
+          <View gap="xs">
             <Text variant="label">Primary color</Text>
             <Text emphasis="muted" variant="bodySmall">
               {value.primaryColor}
             </Text>
-          </Stack>
-          <Stack gap="xs">
+          </View>
+          <View gap="xs">
             <Text variant="label">Harmony</Text>
             <Text emphasis="muted" variant="bodySmall">
               {value.harmony}
             </Text>
-          </Stack>
+          </View>
           <Heading level={4}>Heading</Heading>
           <Text>Body text — this shows default text color and weight.</Text>
           <Text emphasis="muted" variant="bodySmall">
             Muted caption text.
           </Text>
-          <Stack direction="row" gap="s" align="center">
+          <View direction="row" gap="s" align="center">
             <Button color="primary" variant="solid" size="m">
               Primary
             </Button>
@@ -276,8 +276,8 @@ function ThemeComposerInner({
             <Button color="danger" variant="ghost" size="m">
               Danger
             </Button>
-          </Stack>
-          <Stack direction="row" gap="s" align="center">
+          </View>
+          <View direction="row" gap="s" align="center">
             <Badge color="primary">Primary</Badge>
             <Badge color="success" variant="soft">
               Success
@@ -288,14 +288,14 @@ function ThemeComposerInner({
             <Badge color="danger" variant="soft">
               Danger
             </Badge>
-          </Stack>
+          </View>
           <Card
             tone="subtle"
             title="Nested card"
             description="Subtle tone inside the preview."
             compact
           />
-        </Stack>
+        </View>
       </Card>
 
       {/* Submit */}
@@ -309,7 +309,7 @@ function ThemeComposerInner({
           Apply theme
         </Button>
       ) : null}
-    </Stack>
+    </View>
   );
 }
 

package/src/patterns/timeline/Timeline.tsx

@@ -2,10 +2,9 @@ import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 import React from 'react';
 
 import { Icon } from '../../features/icon/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Heading } from '../../features/typography/public';
 import { Text } from '../../features/typography/public';
-import { Inline } from '../../foundation';
 import type { ZoraColor } from '../../internal/recipes';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
@@ -57,9 +56,16 @@ function TimelineInner({
     const iconSize = Math.max(12, resolveIconSize('s'));
 
     return (
-      <Inline key={item.id} align="flex-start" gap="m" testID={item.testID} wrap="nowrap">
-        <Stack align="center" flexShrink={0} gap="xs" style={{ width: 24 }}>
-          <Box
+      <View
+        direction="row"
+        key={item.id}
+        align="flex-start"
+        gap="m"
+        testID={item.testID}
+        wrap="nowrap"
+      >
+        <View align="center" flexShrink={0} gap="xs" style={{ width: 24 }}>
+          <View
             bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg}
             borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base}
             borderWidth={1}
@@ -75,41 +81,41 @@ function TimelineInner({
                 size={iconSize}
               />
             ) : null}
-          </Box>
+          </View>
 
           {showConnector ? (
-            <Box
+            <View
               bg={theme.semantics.neutral.divider}
               height={connectorHeight}
               radius="full"
               style={{ width: 2 }}
             />
           ) : null}
-        </Stack>
+        </View>
 
-        <Stack flex={1} gap="xs" testID={testID}>
-          <Inline align="flex-start" gap="s" justify="space-between" wrap="wrap">
+        <View flex={1} gap="xs" testID={testID}>
+          <View direction="row" align="flex-start" gap="s" justify="space-between" wrap="wrap">
             <Heading level={compact ? 4 : 3}>{item.title}</Heading>
             {item.meta ? (
               <Text emphasis="muted" variant="caption">
                 {item.meta}
               </Text>
             ) : null}
-          </Inline>
+          </View>
           {item.description ? (
             <Text emphasis="muted" variant="bodySmall">
               {item.description}
             </Text>
           ) : null}
-        </Stack>
-      </Inline>
+        </View>
+      </View>
     );
   };
 
   return (
-    <Stack gap={gap} testID={testID}>
+    <View gap={gap} testID={testID}>
       {items.map(renderItem)}
-    </Stack>
+    </View>
   );
 }
 

package/src/patterns/tree-view/TreeItem.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { IconButton } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import { SettingsRow } from '../settings-row';
+import { ListRow } from '../list';
 import type { TreeItemNode, TreeItemRenderProps } from './types';
 
 interface TreeItemProps<TId extends string = string> extends ZoraBaseProps {
@@ -46,10 +46,10 @@ function TreeItemInner<TId extends string = string>({
     }
 
     return (
-      <SettingsRow
+      <ListRow
         title={node.label}
-        control={
-          <Stack direction="row" gap="xs" align="center">
+        action={
+          <View direction="row" gap="xs" align="center">
             {node.actions}
             {hasChildren ? (
               <IconButton
@@ -61,19 +61,20 @@ function TreeItemInner<TId extends string = string>({
                 variant="ghost"
               />
             ) : null}
-          </Stack>
+          </View>
         }
         meta={node.meta}
         disabled={node.disabled}
+        selected={isSelected}
       />
     );
   };
 
   return (
-    <Box testID={testID}>
-      <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>
+    <View testID={testID}>
+      <View style={{ paddingLeft: depth * 16 }}>{renderContent()}</View>
       {hasChildren && isExpanded ? (
-        <Box>
+        <View>
           {node.children?.map((child) => (
             <TreeItem
               key={child.id}
@@ -87,9 +88,9 @@ function TreeItemInner<TId extends string = string>({
               selectedId={selectedId}
             />
           ))}
-        </Box>
+        </View>
       ) : null}
-    </Box>
+    </View>
   );
 }
 

package/src/patterns/tree-view/TreeView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { TreeItem } from './TreeItem';
 import type { TreeViewProps } from './types';
@@ -37,7 +37,7 @@ function TreeViewInner<TId extends string = string>({
   };
 
   return (
-    <Stack gap="none" testID={testID}>
+    <View gap="none" testID={testID}>
       {nodes.map((node) => (
         <TreeItem
           key={node.id}
@@ -51,7 +51,7 @@ function TreeViewInner<TId extends string = string>({
           interactionPolicy={interactionPolicy}
         />
       ))}
-    </Stack>
+    </View>
   );
 }
 

package/src/platformAcceptance.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from 'bun:test';
 
-test('passes the isolated Surface 5 and RN Web 0.21 acceptance suite', () => {
+test('passes the isolated Surface 6 and RN Web 0.21 acceptance suite', () => {
   const subprocess = Bun.spawnSync({
     cmd: [process.execPath, 'test', 'test-fixtures/platformAcceptance.test.tsx'],
     stderr: 'pipe',

package/src/registry.test.ts

@@ -74,7 +74,7 @@ describe('ZORA_COMPONENT_REGISTRY', () => {
 
     expect(registry).toEqual({});
     expect(registryEntries).toContain('Screen');
-    expect(registryEntries).toContain('Box');
+    expect(registryEntries).toContain('View');
     expect(source).toContain("export type { ZoraComponentRegistry } from './registry';");
     expect(source).toContain("export { ZORA_COMPONENT_REGISTRY } from './registry';");
   });

package/src/registry.ts

@@ -27,6 +27,7 @@ import { PostCard } from './features/card/public';
 import { ProductCard } from './features/card/public';
 import { Chip } from './features/chip/public';
 import { ChipGroup } from './features/chip/public';
+import { ContentRail } from './features/content-rail/public';
 import { DataTable } from './features/data-table/public';
 import { DatePicker } from './features/date-picker/public';
 import { Dialog } from './features/dialog/public';
@@ -42,11 +43,19 @@ import { Hero } from './features/hero/public';
 import { Icon } from './features/icon/public';
 import { Image } from './features/image/public';
 import { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
-import { Box, Container, Divider, Grid, Stack } from './features/layout/public';
-import { ContentRail } from './features/layout/public';
+import {
+  AppShell,
+  Divider,
+  Grid,
+  Screen,
+  ScreenSection,
+  ScrollView,
+  View,
+} from './features/layout/public';
 import { FlatList, SectionList } from './features/list/public';
 import { MissingElement } from './features/missing-element/public';
 import { Pagination } from './features/pagination/public';
+import { PaletteItem } from './features/palette-item/public';
 import { PopoverMenu } from './features/popover-menu/public';
 import { Progress, ProgressRing } from './features/progress/public';
 import { Rating } from './features/rating/public';
@@ -59,13 +68,6 @@ import { Toolbar } from './features/toolbar/public';
 import { Heading } from './features/typography/public';
 import { Text } from './features/typography/public';
 import { Uploader } from './features/uploader/public';
-import { Center, Inline, Show, Spacer } from './foundation';
-import { AppShell } from './layout/app-shell';
-import { Screen } from './layout/screen';
-import { ScreenSection } from './layout/screen-section';
-import { SettingsLayout } from './layout/settings-layout';
-import { SidebarLayout } from './layout/sidebar-layout';
-import { TopbarLayout } from './layout/topbar-layout';
 import { ChatListItem } from './patterns/chat-list-item';
 import { CollectionEditor } from './patterns/collection-editor';
 import { ConfirmDialog } from './patterns/confirm-dialog';
@@ -79,10 +81,8 @@ import { ReaderSurface } from './patterns/reader';
 import { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './patterns/scanner';
 import { SectionHeader } from './patterns/section-header';
 import { SelectableItem } from './patterns/selection';
-import { SettingsRow } from './patterns/settings-row';
 import { SwitchField } from './patterns/switch-field';
 import { ThemeComposer } from './patterns/theme-composer';
-import { PaletteItem, TileGrid } from './patterns/tile-grid';
 import { Timeline } from './patterns/timeline';
 import { TreeItem, TreeView } from './patterns/tree-view';
 import { ThemeModeToggle } from './theme/ThemeModeToggle';
@@ -169,23 +169,15 @@ const _ZORA_COMPONENT_REGISTRY = {
   BottomSheet,
   FlatList,
   SectionList,
+  ScrollView,
+  View,
   ThemeModeToggle,
-  Box,
-  Center,
-  Container,
   Divider,
   Grid,
-  Inline,
-  Show,
-  Spacer,
-  Stack,
   Surface,
   AppShell,
   Screen,
   ScreenSection,
-  SettingsLayout,
-  SidebarLayout,
-  TopbarLayout,
   ForgotPasswordForm,
   OAuthProviderButton,
   OAuthProviderList,
@@ -215,11 +207,9 @@ const _ZORA_COMPONENT_REGISTRY = {
   ScanOverlay,
   SectionHeader,
   SelectableItem,
-  SettingsRow,
   SwitchField,
   ThemeComposer,
   PaletteItem,
-  TileGrid,
   Timeline,
   TreeItem,
   TreeView,

package/src/showcaseCoverage.test.ts

@@ -58,27 +58,9 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Text',
     'Toolbar',
   ],
-  foundation: [
-    'Box',
-    'Center',
-    'Container',
-    'Divider',
-    'Grid',
-    'Inline',
-    'Show',
-    'Spacer',
-    'Stack',
-    'Surface',
-  ],
+  foundation: ['Divider', 'Grid', 'Surface', 'View'],
   features: ['Uploader', 'BottomSheet', 'FlatList', 'SectionList'],
-  layouts: [
-    'AppShell',
-    'Screen',
-    'ScreenSection',
-    'SettingsLayout',
-    'SidebarLayout',
-    'TopbarLayout',
-  ],
+  layouts: ['AppShell', 'Screen', 'ScreenSection', 'ScrollView'],
   patterns: [
     'ForgotPasswordForm',
     'OtpForm',
@@ -99,12 +81,10 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Panel',
     'ReaderSurface',
     'SectionHeader',
-    'SettingsRow',
     'SwitchField',
     'Timeline',
     'ThemeComposer',
     'PaletteItem',
-    'TileGrid',
     'TreeItem',
     'TreeView',
   ],