@ankhorage/zora 15.0.0 → 17.0.0

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Modal } from '../../components/modal';
 import { Button } from '../../features/button/public';
-import { Stack } from '../../features/layout/public';
+import { Dialog } from '../../features/dialog/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ConfirmDialogProps } from './types';
 
@@ -25,12 +25,12 @@ function ConfirmDialogInner({
   interactionPolicy,
 }: ConfirmDialogProps) {
   return (
-    <Modal
+    <Dialog
       closeOnBackdrop={closeOnBackdrop}
       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}
@@ -57,7 +57,7 @@ function ConfirmDialogInner({
       width="narrow"
     >
       {children}
-    </Modal>
+    </Dialog>
   );
 }
 

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

package/src/patterns/list/List.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Divider, Stack } from '../../features/layout/public';
-import { Spacer } from '../../foundation';
+import { Divider, View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { ListRow } from './ListRow';
 import { resolveListSeparator } from './resolveListSeparator';
@@ -36,7 +35,7 @@ function ListItemsInner({
   compact,
 }: ListItemsProps) {
   return (
-    <Stack gap="none" testID={testID}>
+    <View gap="none" testID={testID}>
       {items.map((item, index) => {
         const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });
         const separator = resolveListSeparator(effectiveVariant, index);
@@ -44,7 +43,7 @@ function ListItemsInner({
         return (
           <React.Fragment key={`${index}`}>
             {separator === 'divider' ? <Divider /> : null}
-            {separator === 'spacer' ? <Spacer size="s" /> : null}
+            {separator === 'spacer' ? <View height="s" /> : null}
             <ListRow
               {...item}
               compact={resolveRowCompact({ item, compact })}
@@ -53,7 +52,7 @@ function ListItemsInner({
           </React.Fragment>
         );
       })}
-    </Stack>
+    </View>
   );
 }
 
@@ -64,9 +63,9 @@ function ListInner(props: ListProps) {
 
   const { themeId: _themeId, mode: _mode, children, testID } = props;
   return (
-    <Stack gap="none" testID={testID}>
+    <View gap="none" testID={testID}>
       {children}
-    </Stack>
+    </View>
   );
 }
 

package/src/patterns/list/ListRow.tsx

@@ -1,9 +1,8 @@
 import { ButtonBase } from '@ankhorage/surface';
 import React from 'react';
 
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
-import { Inline, Spacer } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ListRowProps, ListRowVariant } from './types';
@@ -80,7 +79,7 @@ function ListRowInner({
   const isInteractive = Boolean(onPress) && !action;
 
   const content = (
-    <Stack
+    <View
       align="center"
       direction="row"
       style={{
@@ -89,13 +88,13 @@ function ListRowInner({
     >
       {leading ? (
         <>
-          <Box>{leading}</Box>
-          <Spacer axis="horizontal" size="m" />
+          <View>{leading}</View>
+          <View width="m" />
         </>
       ) : null}
 
-      <Box flex={1}>
-        <Stack gap="xxs">
+      <View flex={1}>
+        <View gap="xxs">
           <Text variant="body" weight={selected ? 'semiBold' : 'medium'}>
             {title}
           </Text>
@@ -109,19 +108,19 @@ function ListRowInner({
               {meta}
             </Text>
           ) : null}
-        </Stack>
-      </Box>
+        </View>
+      </View>
 
       {trailing || action ? (
         <>
-          <Spacer axis="horizontal" size="m" />
-          <Inline align="center" gap="s" wrap="nowrap">
+          <View width="m" />
+          <View direction="row" align="center" gap="s" wrap="nowrap">
             {trailing}
             {action}
-          </Inline>
+          </View>
         </>
       ) : null}
-    </Stack>
+    </View>
   );
 
   if (!isInteractive) {
@@ -135,7 +134,7 @@ function ListRowInner({
     });
 
     return (
-      <Box
+      <View
         bg={styles.bg}
         borderColor={styles.borderColor}
         borderWidth={styles.borderWidth}
@@ -148,7 +147,7 @@ function ListRowInner({
         }}
       >
         {content}
-      </Box>
+      </View>
     );
   }
 
@@ -172,7 +171,7 @@ function ListRowInner({
         });
 
         return (
-          <Box
+          <View
             bg={styles.bg}
             borderColor={styles.borderColor}
             borderWidth={styles.borderWidth}
@@ -184,7 +183,7 @@ function ListRowInner({
             }}
           >
             {content}
-          </Box>
+          </View>
         );
       }}
     </ButtonBase>

package/src/patterns/list/ListSection.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 { SectionHeader } from '../section-header';
 import { List } from './List';
@@ -19,7 +19,7 @@ function ListSectionInner({
   const hasHeader = title !== undefined;
 
   return (
-    <Stack gap="s" testID={testID}>
+    <View gap="s" testID={testID}>
       {hasHeader ? (
         <SectionHeader
           actions={actions}
@@ -29,7 +29,7 @@ function ListSectionInner({
         />
       ) : null}
       <List {...props} />
-    </Stack>
+    </View>
   );
 }
 

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>
   );
 }