@ankhorage/zora 16.0.0 → 17.0.0

package/src/features/auth/adapters/inbound/AuthForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
 import type { FormErrors, FormFieldConfig, FormValues } from '../../../../types/form';
 import { FormActions, FormError, useFormController } from '../../../form/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { AuthFormField } from './AuthFormField';
 
 interface AuthFormProps<TName extends string> {
@@ -38,7 +38,7 @@ export function AuthForm<TName extends string>({
 }: AuthFormProps<TName>) {
   const controller = useFormController({ fields, values, errors, onChange, onSubmit });
   return (
-    <Stack gap="m" testID={testID}>
+    <View gap="m" testID={testID}>
       <FormError error={error} />
       {fields.map((field) => (
         <AuthFormField
@@ -63,6 +63,6 @@ export function AuthForm<TName extends string>({
       >
         {actions}
       </FormActions>
-    </Stack>
+    </View>
   );
 }

package/src/features/auth/adapters/inbound/ForgotPasswordForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ForgotPasswordFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,
@@ -60,7 +60,7 @@ function ForgotPasswordFormInner({
     <AuthForm
       actions={
         onSignIn ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading}
               variant="ghost"
@@ -73,7 +73,7 @@ function ForgotPasswordFormInner({
             >
               {signInLabel}
             </Button>
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/auth/adapters/inbound/OAuthProviderList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { OAuthProviderListProps } from '../../../../types/auth';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { OAuthProviderButton } from './OAuthProviderButton';
 
 function OAuthProviderListInner({
@@ -24,7 +24,7 @@ function OAuthProviderListInner({
   const resolvedFullWidth = fullWidth ?? layout === 'stack';
 
   return (
-    <Stack
+    <View
       direction={direction}
       gap="s"
       testID={testID}
@@ -46,7 +46,7 @@ function OAuthProviderListInner({
           interactionPolicy={interactionPolicy}
         />
       ))}
-    </Stack>
+    </View>
   );
 }
 

package/src/features/auth/adapters/inbound/OtpForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { OtpFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { AuthForm } from './AuthForm';
 
 type OtpFieldName = 'otp';
@@ -55,7 +55,7 @@ function OtpFormInner({
     <AuthForm
       actions={
         onResend ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading || resendDisabled}
               variant="ghost"
@@ -69,7 +69,7 @@ function OtpFormInner({
             >
               {resendLabel}
             </Button>
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/auth/adapters/inbound/SignInForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SignInFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,
@@ -72,7 +72,7 @@ function SignInFormInner({
     <AuthForm
       actions={
         hasActions ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             {onForgotPassword ? (
               <Button
                 disabled={disabled || loading}
@@ -101,7 +101,7 @@ function SignInFormInner({
                 {signUpLabel}
               </Button>
             ) : null}
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/auth/adapters/inbound/SignUpForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SignUpFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { AuthForm } from './AuthForm';
 
 const defaultSignUpFields = [
@@ -52,7 +52,7 @@ function SignUpFormInner({
     <AuthForm
       actions={
         onSignIn ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading}
               variant="ghost"
@@ -65,7 +65,7 @@ function SignUpFormInner({
             >
               {signInLabel}
             </Button>
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/avatar/adapters/inbound/Avatar.tsx

@@ -7,7 +7,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AvatarProps, AvatarShape, AvatarSize } from '../../../../types/avatar';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text, type TextVariant } from '../../../typography/public';
 import { resolveAvatarInitials } from '../../utils/resolveAvatarInitials';
 /***
@@ -120,7 +120,7 @@ function AvatarInner({
   };
 
   return (
-    <Box
+    <View
       accessibilityLabel={label}
       bg={backgroundColor}
       height={resolvedSize}
@@ -142,6 +142,6 @@ function AvatarInner({
       ) : (
         renderFallback()
       )}
-    </Box>
+    </View>
   );
 }

package/src/features/avatar/adapters/inbound/AvatarGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AvatarGroupItem, AvatarGroupProps } from '../../../../types/avatar-group';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Avatar } from '../../public';
 /***
  * Renders a compact group of avatars with optional overflow handling.
@@ -34,7 +34,7 @@ function AvatarGroupInner({
   const borderColor = theme.semantics.surface.default;
 
   const renderItem = (item: AvatarGroupItem, index: number) => (
-    <Box
+    <View
       key={item.id ?? `${index}`}
       ml={index === 0 ? 0 : -overlap}
       radius="full"
@@ -51,14 +51,14 @@ function AvatarGroupInner({
         source={item.source}
         color={item.color}
       />
-    </Box>
+    </View>
   );
 
   return (
-    <Stack align="center" direction="row" testID={testID} wrap="nowrap">
+    <View align="center" direction="row" testID={testID} wrap="nowrap">
       {visibleItems.map(renderItem)}
       {overflowCount > 0 ? (
-        <Box
+        <View
           ml={visibleItems.length === 0 ? 0 : -overlap}
           radius="full"
           borderWidth={2}
@@ -70,8 +70,8 @@ function AvatarGroupInner({
             shape={shape}
             color="neutral"
           />
-        </Box>
+        </View>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/features/bottom-sheet/adapters/inbound/BottomSheet.tsx

@@ -5,7 +5,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { useZoraThemeRuntime } from '../../../../theme/ZoraThemeRuntimeContext';
 import type { BottomSheetProps } from '../../../../types/manifest-bottom-sheet';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Presents declarative manifest children through the shared Surface sheet host. */
 export const BottomSheet = withZoraThemeScope(BottomSheetInner);
@@ -46,9 +46,9 @@ function BottomSheetInner({
     if (!active || dismissed.current) return;
     present({
       content: (
-        <Box mode={mode} themeId={themeId} testID={testID}>
+        <View mode={mode} themeId={themeId} testID={testID}>
           {children}
-        </Box>
+        </View>
       ),
       snapPoints,
       initialIndex,

package/src/features/bottom-sheet/public.test.ts

@@ -10,7 +10,7 @@ describe('ZORA BottomSheet public contract', () => {
     const source = await Bun.file('src/features/bottom-sheet/public.ts').text();
 
     expect(packageJson.exports['./bottom-sheet']).toBeDefined();
-    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^5\./u);
+    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^6\./u);
     expect(source).toContain("from '@ankhorage/surface/bottom-sheet'");
     for (const name of [
       'BottomSheetFlatList',

package/src/features/breadcrumbs/adapters/inbound/Breadcrumbs.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { resolveIconSize } from '../../../../internal/recipes';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
@@ -11,6 +10,7 @@ import type {
 } from '../../../../types/breadcrumbs';
 import { Button } from '../../../button/public';
 import { Icon } from '../../../icon/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 /*** Renders a breadcrumb trail whose final item represents the current location. */
@@ -45,7 +45,7 @@ function BreadcrumbsInner({
   if (items.length === 0) return null;
 
   return (
-    <Inline align="center" gap={compact ? 'xs' : 's'} testID={testID} wrap="wrap">
+    <View direction="row" align="center" gap={compact ? 'xs' : 's'} testID={testID} wrap="wrap">
       {renderItems.map((renderItem, index) => {
         const showSeparator = index !== renderItems.length - 1;
 
@@ -74,7 +74,7 @@ function BreadcrumbsInner({
           />
         );
       })}
-    </Inline>
+    </View>
   );
 }
 
@@ -127,7 +127,7 @@ function BreadcrumbLabel({ item, compact }: { item: BreadcrumbItem; compact: boo
   const { theme } = useZoraTheme();
 
   return (
-    <Inline align="center" gap="xs" wrap="nowrap">
+    <View direction="row" align="center" gap="xs" wrap="nowrap">
       {item.icon ? (
         <Icon
           {...item.icon}
@@ -138,7 +138,7 @@ function BreadcrumbLabel({ item, compact }: { item: BreadcrumbItem; compact: boo
       <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
         {item.label}
       </Text>
-    </Inline>
+    </View>
   );
 }
 

package/src/features/button/adapters/inbound/ButtonGroup.tsx

@@ -6,7 +6,7 @@ import type {
   ButtonGroupOrientation,
   ButtonGroupProps,
 } from '../../../../types/button-group';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 /***
  * Groups multiple `Button` elements with consistent spacing and alignment.
  */
@@ -99,7 +99,7 @@ function ButtonGroupInner({
   const orderedItems = reverse ? items.reverse() : items;
 
   return (
-    <Stack
+    <View
       align={resolveStackAlign(align, orientation)}
       direction={resolveDirection(orientation)}
       gap={gap}
@@ -107,6 +107,6 @@ function ButtonGroupInner({
       testID={testID}
     >
       {orderedItems}
-    </Stack>
+    </View>
   );
 }

package/src/features/card/adapters/inbound/Card.tsx

@@ -5,7 +5,7 @@ import { resolveCardVariant } from '../../../../internal/recipes';
 import { useZoraThemeRecipe } from '../../../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { CardProps } from '../../../../types/card';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { resolveCardThemeRecipe } from '../../utils/resolveCardThemeRecipe';
@@ -55,16 +55,16 @@ function CardInner({
       radius={recipe.radius}
       variant={resolveCardVariant(recipe.tone)}
     >
-      <Stack gap={gap}>
+      <View gap={gap}>
         {hasHeader ? (
-          <Stack
+          <View
             align={{ base: 'flex-start', md: 'center' }}
             direction={{ base: 'column', md: 'row' }}
             gap="m"
             justify="space-between"
           >
-            <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}
@@ -76,16 +76,16 @@ function CardInner({
                     {description}
                   </Text>
                 ) : null}
-              </Stack>
-            </Box>
-            {actions ? <Box>{actions}</Box> : null}
-          </Stack>
+              </View>
+            </View>
+            {actions ? <View>{actions}</View> : null}
+          </View>
         ) : null}
 
-        {children ? <Box>{children}</Box> : null}
+        {children ? <View>{children}</View> : null}
 
-        {hasFooter ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
+        {hasFooter ? <View pt="xs">{footer}</View> : null}
+      </View>
     </SurfaceCard>
   );
 }

package/src/features/card/adapters/inbound/MediaCard.tsx

@@ -4,7 +4,7 @@ import { Image } from 'react-native';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { MediaCardProps } from '../../../../types/media-card';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';
@@ -51,9 +51,9 @@ function MediaCardInner({
   const renderImage = () => {
     if (image) {
       return (
-        <Box radius="m" style={{ overflow: 'hidden' }}>
+        <View radius="m" style={{ overflow: 'hidden' }}>
           {image}
-        </Box>
+        </View>
       );
     }
 
@@ -62,15 +62,15 @@ function MediaCardInner({
     }
 
     return (
-      <Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
-        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
+      <View bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
+        <View style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
           <Image
             accessibilityLabel={imageLabel}
             source={imageSource}
             style={{ height: '100%', width: '100%' }}
           />
-        </Box>
-      </Box>
+        </View>
+      </View>
     );
   };
 
@@ -84,41 +84,41 @@ function MediaCardInner({
       testID={testID}
       tone={tone}
     >
-      <Stack gap={gap}>
+      <View gap={gap}>
         {renderImage()}
 
         {hasHeader ? (
-          <Stack
+          <View
             align={{ base: 'flex-start', md: 'center' }}
             direction={{ base: 'column', md: 'row' }}
             gap="m"
             justify="space-between"
           >
-            <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}
                   </Text>
                 ) : null}
-                <Stack gap="xs">
+                <View gap="xs">
                   <Heading level={compact ? 4 : 3}>{title}</Heading>
-                  {badges ? <Box>{badges}</Box> : null}
-                </Stack>
+                  {badges ? <View>{badges}</View> : null}
+                </View>
                 {description ? (
                   <Text emphasis="muted" variant="bodySmall">
                     {description}
                   </Text>
                 ) : null}
-              </Stack>
-            </Box>
-            {actions ? <Box>{actions}</Box> : null}
-          </Stack>
+              </View>
+            </View>
+            {actions ? <View>{actions}</View> : null}
+          </View>
         ) : null}
 
-        {children ? <Box>{children}</Box> : null}
-        {footer ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
+        {children ? <View>{children}</View> : null}
+        {footer ? <View pt="xs">{footer}</View> : null}
+      </View>
     </Card>
   );
 }

package/src/features/card/adapters/inbound/MetricCard.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { resolveBadgeRecipe, resolveIconSize } from '../../../../internal/recipes';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { MetricCardProps } from '../../../../types/metric-card';
 import { Badge } from '../../../badge/public';
 import { Icon } from '../../../icon/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';
@@ -46,10 +45,10 @@ function MetricCardInner({
       testID={testID}
       tone={tone}
     >
-      <Stack gap={compact ? 's' : 'm'}>
-        <Inline align="flex-start" gap="m" justify="space-between">
-          <Stack flex={1} gap="xs">
-            <Inline align="center" gap="xs" wrap="wrap">
+      <View gap={compact ? 's' : 'm'}>
+        <View direction="row" align="flex-start" gap="m" justify="space-between">
+          <View flex={1} gap="xs">
+            <View direction="row" align="center" gap="xs" wrap="wrap">
               {icon ? <Icon {...icon} color={iconColor} size={resolveIconSize('s')} /> : null}
               <Text emphasis="muted" variant="caption" weight="semiBold">
                 {label}
@@ -63,7 +62,7 @@ function MetricCardInner({
                   {delta}
                 </Badge>
               ) : null}
-            </Inline>
+            </View>
 
             <Heading level={compact ? 3 : 2}>{value}</Heading>
 
@@ -72,11 +71,11 @@ function MetricCardInner({
                 {description}
               </Text>
             ) : null}
-          </Stack>
+          </View>
 
-          {actions ? <Box>{actions}</Box> : null}
-        </Inline>
-      </Stack>
+          {actions ? <View>{actions}</View> : null}
+        </View>
+      </View>
     </Card>
   );
 }