@ankhorage/zora 16.0.0 → 18.0.0

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button } from '../../features/button/public';
 import { IconButton } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
@@ -47,18 +47,18 @@ function CollectionEditorInner<TItem>({
         ) : null
       }
     >
-      <Stack gap="s">
+      <View gap="s">
         {isEmpty ? (
-          <Box py="m">
+          <View py="m">
             <Text align="center" emphasis="muted">
               {emptyLabel}
             </Text>
-          </Box>
+          </View>
         ) : (
           items.map((item, index) => (
-            <Box key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
-              <Stack direction="row" gap="m" align="center">
-                <Box flex={1}>
+            <View key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
+              <View direction="row" gap="m" align="center">
+                <View flex={1}>
                   {renderItem({
                     item,
                     index,
@@ -68,8 +68,8 @@ function CollectionEditorInner<TItem>({
                     canMoveUp: index > 0,
                     canMoveDown: index < items.length - 1,
                   })}
-                </Box>
-                <Stack direction="row" gap="xs">
+                </View>
+                <View direction="row" gap="xs">
                   {onMove ? (
                     <>
                       <IconButton
@@ -104,12 +104,12 @@ function CollectionEditorInner<TItem>({
                       variant="ghost"
                     />
                   ) : null}
-                </Stack>
-              </Stack>
-            </Box>
+                </View>
+              </View>
+            </View>
           ))
         )}
-      </Stack>
+      </View>
     </Panel>
   );
 }

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button } from '../../features/button/public';
 import { Dialog } from '../../features/dialog/public';
-import { Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ConfirmDialogProps } from './types';
 
@@ -30,7 +30,7 @@ function ConfirmDialogInner({
       description={description}
       interactionPolicy={interactionPolicy}
       footer={
-        <Stack direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
+        <View direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
           <Button
             variant="soft"
             interactionPolicy={interactionPolicy}
@@ -48,7 +48,7 @@ function ConfirmDialogInner({
           >
             {confirmLabel}
           </Button>
-        </Stack>
+        </View>
       }
       onDismiss={onCancel}
       testID={testID}

package/src/patterns/filter-bar/FilterBar.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Box } from '../../features/layout/public';
-import { Inline } from '../../foundation';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { FilterBarProps } from './types';
 
@@ -16,11 +15,11 @@ function FilterBarInner({
   wrap = true,
 }: FilterBarProps) {
   return (
-    <Inline align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
-      {leading ? <Box>{leading}</Box> : null}
-      <Box flex={1}>{children}</Box>
-      {trailing ? <Box>{trailing}</Box> : null}
-    </Inline>
+    <View direction="row" align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
+      {leading ? <View>{leading}</View> : null}
+      <View flex={1}>{children}</View>
+      {trailing ? <View>{trailing}</View> : null}
+    </View>
   );
 }
 

package/src/patterns/inspector-field/InspectorField.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { FormField } from '../../features/form/public';
-import { Box, Stack } from '../../features/layout/public';
+import { Field } from '../../features/form/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { InspectorFieldProps } from './types';
 
@@ -15,12 +15,12 @@ function InspectorFieldInner({
   ...props
 }: InspectorFieldProps) {
   return (
-    <FormField {...props} label={label}>
-      <Stack direction="row" gap="s" align="center">
-        <Box flex={1}>{children}</Box>
-        {control ? <Box>{control}</Box> : null}
-      </Stack>
-    </FormField>
+    <Field {...props} label={label}>
+      <View direction="row" gap="s" align="center">
+        <View flex={1}>{children}</View>
+        {control ? <View>{control}</View> : null}
+      </View>
+    </Field>
   );
 }
 

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -2,9 +2,8 @@ import { ButtonBase } from '@ankhorage/surface';
 import React from 'react';
 
 import { Avatar } from '../../features/avatar/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
-import { Inline } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type {
@@ -166,7 +165,7 @@ function MessageBubbleInner({
     const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });
 
     return (
-      <Box
+      <View
         bg={styles.bg}
         borderColor={styles.borderColor}
         borderWidth={styles.borderWidth}
@@ -175,7 +174,7 @@ function MessageBubbleInner({
         radius={isSystem ? 'm' : 'l'}
         style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}
       >
-        <Stack align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
+        <View align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
           {hasAuthorName ? (
             <Text emphasis="muted" variant="caption" weight="semiBold">
               {authorName}
@@ -186,9 +185,10 @@ function MessageBubbleInner({
               {text}
             </Text>
           ) : null}
-          {children != null ? <Box width="100%">{children}</Box> : null}
+          {children != null ? <View width="100%">{children}</View> : null}
           {hasMetaRow ? (
-            <Inline
+            <View
+              direction="row"
               align="center"
               gap="xs"
               justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}
@@ -213,10 +213,10 @@ function MessageBubbleInner({
                   {renderedStatus}
                 </Text>
               ) : null}
-            </Inline>
+            </View>
           ) : null}
-        </Stack>
-      </Box>
+        </View>
+      </View>
     );
   };
 
@@ -234,34 +234,37 @@ function MessageBubbleInner({
       {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}
     </ButtonBase>
   ) : (
-    <Box testID={testID}>{renderBubble({ pressed: false, hovered: false })}</Box>
+    <View testID={testID}>{renderBubble({ pressed: false, hovered: false })}</View>
   );
 
   return (
-    <Stack gap="xs" style={{ width: '100%' }}>
-      <Inline
+    <View gap="xs" style={{ width: '100%' }}>
+      <View
+        direction="row"
         align="flex-end"
         gap="s"
         justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}
         wrap="nowrap"
       >
         {!isOutgoing && !isSystem ? (
-          <Box>
+          <View>
             {leading ??
               (hasAvatar ? (
                 <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />
               ) : null)}
-          </Box>
+          </View>
         ) : null}
-        {isOutgoing && trailing ? <Box>{trailing}</Box> : null}
+        {isOutgoing && trailing ? <View>{trailing}</View> : null}
         {bubbleContent}
-        {isOutgoing && leading ? <Box>{leading}</Box> : null}
-        {!isOutgoing && !isSystem && trailing ? <Box>{trailing}</Box> : null}
-      </Inline>
+        {isOutgoing && leading ? <View>{leading}</View> : null}
+        {!isOutgoing && !isSystem && trailing ? <View>{trailing}</View> : null}
+      </View>
       {footer != null ? (
-        <Box alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>{footer}</Box>
+        <View alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>
+          {footer}
+        </View>
       ) : null}
-    </Stack>
+    </View>
   );
 }
 

package/src/patterns/notice/Notice.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Badge } from '../../features/badge/public';
 import { Card } from '../../features/card/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { NoticeProps } from './types';
 
@@ -25,10 +25,10 @@ function NoticeInner({
       title={title}
       tone="subtle"
     >
-      <Stack gap="m">
-        {children ? <Box>{children}</Box> : null}
-        {actions ? <Box>{actions}</Box> : null}
-      </Stack>
+      <View gap="m">
+        {children ? <View>{children}</View> : null}
+        {actions ? <View>{actions}</View> : null}
+      </View>
     </Card>
   );
 }

package/src/patterns/reader/ReaderSurface.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 
 import { AppBar } from '../../features/app-bar/public';
 import { IconButton } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Progress } from '../../features/progress/public';
 import { Surface } from '../../features/surface/public';
 import { Text } from '../../features/typography/public';
-import { Center, Inline } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { resolveReaderProgress } from './resolveReaderProgress';
@@ -50,11 +49,11 @@ function ReaderEmptyState({
     status === 'loading' ? loadingLabel : status === 'error' ? errorTitle : unavailableTitle;
 
   return (
-    <Center flex={1} minHeight={360} p="l">
+    <View align="center" justify="center" flex={1} minHeight={360} p="l">
       <Text align="center" emphasis="muted" variant="bodySmall">
         {title}
       </Text>
-    </Center>
+    </View>
   );
 }
 
@@ -90,7 +89,7 @@ function ReaderHeader({
 >) {
   const actions =
     onOpenContents || onOpenAppearance || onToggleHighlight || headerActions ? (
-      <Inline align="center" gap="xs" wrap="nowrap">
+      <View direction="row" align="center" gap="xs" wrap="nowrap">
         {onOpenContents ? (
           <IconButton
             icon={{ name: 'list-outline' }}
@@ -120,7 +119,7 @@ function ReaderHeader({
           />
         ) : null}
         {headerActions}
-      </Inline>
+      </View>
     ) : undefined;
 
   return (
@@ -176,7 +175,7 @@ function ReaderFooter({
     status === 'ready' && Boolean(onNextPage) && resolveCanGoNext({ canGoNext, page, pageCount });
 
   return (
-    <Stack
+    <View
       bg={theme.semantics.surface.raised}
       borderColor={theme.semantics.neutral.divider}
       borderWidth={1}
@@ -184,7 +183,7 @@ function ReaderFooter({
       p="m"
     >
       <Progress value={resolvedProgress} max={1} size="s" />
-      <Stack align="center" direction="row" gap="m" justify="space-between" wrap="nowrap">
+      <View align="center" direction="row" gap="m" justify="space-between" wrap="nowrap">
         <IconButton
           disabled={!previousEnabled}
           icon={{ name: 'chevron-back' }}
@@ -193,8 +192,8 @@ function ReaderFooter({
           onPress={() => invokeReaderAction(onPreviousPage)}
           size="l"
         />
-        <Box flex={1} minWidth={0}>
-          <Stack align="center" gap="xs">
+        <View flex={1} minWidth={0}>
+          <View align="center" gap="xs">
             {chapterLabel ? (
               <Text
                 align="center"
@@ -216,8 +215,8 @@ function ReaderFooter({
                 {resolvedPageLabel}
               </Text>
             ) : null}
-          </Stack>
-        </Box>
+          </View>
+        </View>
         <IconButton
           disabled={!nextEnabled}
           icon={{ name: 'chevron-forward' }}
@@ -226,9 +225,9 @@ function ReaderFooter({
           onPress={() => invokeReaderAction(onNextPage)}
           size="l"
         />
-      </Stack>
-      {footerActions ? <Box>{footerActions}</Box> : null}
-    </Stack>
+      </View>
+      {footerActions ? <View>{footerActions}</View> : null}
+    </View>
   );
 }
 
@@ -296,7 +295,7 @@ function ReaderSurfaceInner({
       variant="default"
       style={{ minHeight: 480, overflow: 'hidden' }}
     >
-      <Stack flex={1} gap={0}>
+      <View flex={1} gap={0}>
         {showChrome ? (
           <ReaderHeader
             appearanceLabel={appearanceLabel}
@@ -313,9 +312,9 @@ function ReaderSurfaceInner({
           />
         ) : null}
 
-        <Box bg={theme.semantics.surface.default} flex={1} minHeight={360} overflow="hidden">
+        <View bg={theme.semantics.surface.default} flex={1} minHeight={360} overflow="hidden">
           {viewportContent}
-        </Box>
+        </View>
 
         {showChrome ? (
           <ReaderFooter
@@ -335,7 +334,7 @@ function ReaderSurfaceInner({
             status={status}
           />
         ) : null}
-      </Stack>
+      </View>
     </Surface>
   );
 }

package/src/patterns/scanner/BarcodeScannerView.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { Card } from '../../features/card/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';
@@ -62,8 +62,8 @@ function BarcodeScannerViewInner({
       title={title}
       tone="subtle"
     >
-      <Stack gap="m">
-        <Box>
+      <View gap="m">
+        <View>
           <View style={[styles.viewport, viewportStyle]}>
             {camera ? (
               <View style={styles.cameraSlot}>{camera}</View>
@@ -78,13 +78,13 @@ function BarcodeScannerViewInner({
               />
             </View>
           </View>
-        </Box>
-        {children ? <Box>{children}</Box> : null}
+        </View>
+        {children ? <View>{children}</View> : null}
         <Text emphasis="muted" variant="caption">
           Native scanning belongs to an app adapter such as expo-camera. ZORA owns this visible
           scanner surface.
         </Text>
-      </Stack>
+      </View>
     </Card>
   );
 }

package/src/patterns/scanner/CameraPermissionView.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button } from '../../features/button/public';
 import { Card } from '../../features/card/public';
-import { Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { CameraPermissionViewProps } from './types';
@@ -69,11 +69,11 @@ function CameraPermissionViewInner({
       title={title ?? copy.title}
       tone="subtle"
     >
-      <Stack gap="m">
+      <View gap="m">
         <Text emphasis="muted" variant="bodySmall">
           Permission state: {status}
         </Text>
-        <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+        <View direction={{ base: 'column', md: 'row' }} gap="s">
           {handleRequestPermission ? (
             <Button
               color="primary"
@@ -96,8 +96,8 @@ function CameraPermissionViewInner({
               {manualEntryLabel}
             </Button>
           ) : null}
-        </Stack>
-      </Stack>
+        </View>
+      </View>
     </Card>
   );
 }

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

@@ -1,8 +1,8 @@
 import { Switch } from '@ankhorage/surface';
 import React from 'react';
 
+import { ListItem } from '../../features/list/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { SettingsRow } from '../settings-row';
 import type { SwitchFieldProps } from './types';
 
 function SwitchFieldInner({
@@ -17,12 +17,8 @@ function SwitchFieldInner({
   interactionPolicy,
 }: SwitchFieldProps) {
   return (
-    <SettingsRow
-      title={label}
-      description={description}
-      disabled={disabled}
-      testID={testID}
-      control={
+    <ListItem
+      action={
         <Switch
           checked={value}
           disabled={disabled}
@@ -30,13 +26,17 @@ function SwitchFieldInner({
           onCheckedChange={onValueChange}
         />
       }
+      description={description}
+      disabled={disabled}
+      testID={testID}
+      title={label}
+      variant="card"
     />
   );
 }
 
 /***
- * Labeled switch field pattern built on `SettingsRow`.
+ * Labeled switch field pattern built on the card-style `ListItem` presentation.
  *
- 
  */
 export const SwitchField = withZoraThemeScope(SwitchFieldInner);