@ankhorage/zora 15.0.0 → 17.0.0

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

@@ -3,13 +3,13 @@ import type { AppCategory } from '@ankhorage/contracts';
 import { APP_CATEGORIES } from '@ankhorage/contracts';
 import React from 'react';
 
-import { Tabs } from '../../components/tabs';
 import { Badge } from '../../features/badge/public';
 import { Button } from '../../features/button/public';
 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';
@@ -48,7 +48,7 @@ function formatAppCategoryLabel(category: AppCategory): string {
 
 const HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
 
-const MODE_TABS = [
+const MODE_OPTIONS = [
   { value: 'light' as ZoraThemeMode, label: 'Light' },
   { value: 'dark' as ZoraThemeMode, label: 'Dark' },
 ];
@@ -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 */}
@@ -230,44 +230,43 @@ function ThemeComposerInner({
 
       {/* Section: Mode */}
       <Card title="Mode" description="Switch between light and dark presentation.">
-        <Tabs
+        <ChipGroup
           value={activeMode}
-          items={MODE_TABS}
-          onValueChange={(m) => onModeChange?.(m)}
-          variant="segmented"
-          testID={testID ? `${testID}-mode-tabs` : undefined}
+          items={MODE_OPTIONS}
+          onValueChange={(nextMode) => onModeChange?.(nextMode)}
+          testID={testID ? `${testID}-mode` : undefined}
         />
       </Card>
 
       {/* 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>
@@ -277,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
@@ -289,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 */}
@@ -310,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

@@ -1,12 +1,6 @@
 import type { InteractionPolicyProps } from '@ankhorage/surface';
 import type React from 'react';
 
-import { Modal } from './components/modal';
-import { Pagination } from './components/pagination';
-import { Rating } from './components/rating';
-import { SearchBar } from './components/search-bar';
-import { Tabs } from './components/tabs';
-import { Toolbar, ToolbarAction } from './components/toolbar';
 import { Accordion, AccordionItem } from './features/accordion/public';
 import { ActivityIndicator } from './features/activity-indicator/public';
 import { AppBar } from './features/app-bar/public';
@@ -33,12 +27,15 @@ 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';
 import { EmptyState } from './features/empty-state/public';
 import { Checkbox, CheckboxGroup } from './features/form/checkbox/public';
 import { Form, FormActions, FormError, FormField } from './features/form/public';
 import { Radio, RadioGroup } from './features/form/radio/public';
+import { SearchInput } from './features/form/search-input/public';
 import { Select } from './features/form/select/public';
 import { TextInput } from './features/form/text-input/public';
 import { Gradient } from './features/gradient/public';
@@ -46,26 +43,31 @@ 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';
 import { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './features/skeleton/public';
 import { Surface } from './features/surface/public';
+import { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';
 import { TimePicker } from './features/time-picker/public';
 import { Toast } from './features/toast/public';
+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';
@@ -130,6 +130,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   ChipGroup,
   DataTable,
   DatePicker,
+  Dialog,
   Form,
   FormActions,
   FormError,
@@ -143,7 +144,6 @@ const _ZORA_COMPONENT_REGISTRY = {
   TextInput,
   MediaCard,
   MetricCard,
-  Modal,
   Pagination,
   PopoverMenu,
   Progress,
@@ -151,39 +151,33 @@ const _ZORA_COMPONENT_REGISTRY = {
   Radio,
   RadioGroup,
   Rating,
-  SearchBar,
+  SearchInput,
   Select,
   Skeleton,
   SkeletonCard,
   SkeletonList,
   SkeletonText,
+  Tab,
+  TabList,
+  TabPanel,
   Tabs,
   Text,
   TimePicker,
   Toast,
   Toolbar,
-  ToolbarAction,
   Uploader,
   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,
@@ -213,11 +207,9 @@ const _ZORA_COMPONENT_REGISTRY = {
   ScanOverlay,
   SectionHeader,
   SelectableItem,
-  SettingsRow,
   SwitchField,
   ThemeComposer,
   PaletteItem,
-  TileGrid,
   Timeline,
   TreeItem,
   TreeView,