@ankhorage/zora 16.0.0 → 17.0.0

package/src/features/date-picker/composition/DatePickerContent.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { DatePickerProps } from '../../../types/date-picker';
 import { Button } from '../../button/public';
-import { Box, Stack } from '../../layout/public';
+import { View } from '../../layout/public';
 import { Text } from '../../typography/public';
 import { formatLocalDate, parseLocalDate } from '../utils/localDate';
 
@@ -27,7 +27,7 @@ export function DatePickerContent({
   const resolvedMinDate = React.useMemo(() => parseLocalDate(minDate), [minDate]);
 
   return (
-    <Stack gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
+    <View gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
       <PickerHeader description={description} title={label ?? 'Choose date'} />
       <DatePickerMonthNavigation
         displayMonth={displayMonth}
@@ -49,7 +49,7 @@ export function DatePickerContent({
       <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
         Cancel
       </Button>
-    </Stack>
+    </View>
   );
 }
 
@@ -70,7 +70,7 @@ function PickerHeader({
   title: React.ReactNode;
 }) {
   return (
-    <Stack gap="xxs">
+    <View gap="xxs">
       <Text align="center" variant="label" weight="semiBold">
         {title}
       </Text>
@@ -79,7 +79,7 @@ function PickerHeader({
           {description}
         </Text>
       ) : null}
-    </Stack>
+    </View>
   );
 }
 
@@ -101,7 +101,7 @@ function DatePickerMonthNavigation({
   const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
 
   return (
-    <Stack align="center" direction="row" justify="space-between">
+    <View align="center" direction="row" justify="space-between">
       <Button
         disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
         interactionPolicy={interactionPolicy}
@@ -123,22 +123,22 @@ function DatePickerMonthNavigation({
       >
         Next
       </Button>
-    </Stack>
+    </View>
   );
 }
 
 /*** Renders weekday headings for the calendar grid. */
 function DatePickerWeekdays() {
   return (
-    <Stack direction="row" justify="space-between">
+    <View direction="row" justify="space-between">
       {WEEKDAY_LABELS.map((weekday) => (
-        <Box key={weekday} width={DAY_CELL_WIDTH}>
+        <View key={weekday} width={DAY_CELL_WIDTH}>
           <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
             {weekday}
           </Text>
-        </Box>
+        </View>
       ))}
-    </Stack>
+    </View>
   );
 }
 
@@ -161,12 +161,12 @@ function DatePickerCalendar({
   value: DatePickerProps['value'];
 }) {
   return (
-    <Stack direction="row" gap="xs" wrap="wrap">
+    <View direction="row" gap="xs" wrap="wrap">
       {monthDays.map((day, index) => {
-        if (!day) return <Box key={`empty-${index}`} width={DAY_CELL_WIDTH} />;
+        if (!day) return <View key={`empty-${index}`} width={DAY_CELL_WIDTH} />;
         const selected = isSameLocalDay(value, day);
         return (
-          <Box key={day.toISOString()} width={DAY_CELL_WIDTH}>
+          <View key={day.toISOString()} width={DAY_CELL_WIDTH}>
             <Button
               color={selected ? 'primary' : 'neutral'}
               disabled={isDateDisabled(day, minDate, maxDate)}
@@ -178,10 +178,10 @@ function DatePickerCalendar({
             >
               {day.getDate()}
             </Button>
-          </Box>
+          </View>
         );
       })}
-    </Stack>
+    </View>
   );
 }
 

package/src/features/date-picker/composition/DatePickerField.tsx

@@ -2,7 +2,7 @@ import { Field } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { DatePickerProps } from '../../../types/date-picker';
-import { Stack } from '../../layout/public';
+import { View } from '../../layout/public';
 import { Text } from '../../typography/public';
 
 /*** Renders the shared DatePicker field frame around a platform-specific trigger. */
@@ -39,7 +39,7 @@ interface DatePickerFieldProps extends Pick<
 /*** Renders the picker label and optional supporting description. */
 function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
   return (
-    <Stack gap="xs">
+    <View gap="xs">
       <Text variant="label" weight="semiBold">
         {label}
       </Text>
@@ -48,6 +48,6 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
           {description}
         </Text>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/features/dialog/adapters/inbound/Dialog.tsx

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native';
 import { resolveDialogWidth } from '../../../../internal/recipes';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { DialogProps } from '../../../../types/dialog';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading, Text } from '../../../typography/public';
 
 /*** Renders the product-level dialog composition on top of the Surface modal primitive. */
@@ -29,22 +29,22 @@ function DialogInner({
 
   return (
     <SurfaceModal {...props} onDismiss={stableOnDismiss} interactionPolicy={interactionPolicy}>
-      <Box maxWidth={resolveDialogWidth(width)} style={styles.content}>
-        <Stack gap="m">
+      <View maxWidth={resolveDialogWidth(width)} style={styles.content}>
+        <View gap="m">
           {hasHeader ? (
-            <Stack gap="xs">
+            <View gap="xs">
               {title !== undefined ? <Heading level={3}>{title}</Heading> : null}
               {description !== undefined ? (
                 <Text emphasis="muted" variant="bodySmall">
                   {description}
                 </Text>
               ) : null}
-            </Stack>
+            </View>
           ) : null}
-          {children ? <Box>{children}</Box> : null}
-          {footer ? <Box pt="xs">{footer}</Box> : null}
-        </Stack>
-      </Box>
+          {children ? <View>{children}</View> : null}
+          {footer ? <View pt="xs">{footer}</View> : null}
+        </View>
+      </View>
     </SurfaceModal>
   );
 }

package/src/features/empty-state/adapters/inbound/EmptyState.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { EmptyStateProps } from '../../../../types/empty-state';
 import { Button } from '../../../button/public';
 import { Card } from '../../../card/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 function EmptyStateInner({
   themeId: _themeId,
@@ -28,9 +28,9 @@ function EmptyStateInner({
       title={title}
       tone="subtle"
     >
-      <Stack gap="m">
+      <View gap="m">
         {primaryAction || secondaryAction ? (
-          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+          <View direction={{ base: 'column', md: 'row' }} gap="s">
             {primaryAction ? (
               <Button
                 interactionPolicy={interactionPolicy}
@@ -51,10 +51,10 @@ function EmptyStateInner({
                 {secondaryAction.label}
               </Button>
             ) : null}
-          </Stack>
+          </View>
         ) : null}
         {footer}
-      </Stack>
+      </View>
     </Card>
   );
 }

package/src/features/form/adapters/inbound/Form.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormProps } from '../../../../types/form';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { FormActions } from './FormActions';
 
 function FormInner({
@@ -18,7 +18,7 @@ function FormInner({
   interactionPolicy,
 }: FormProps) {
   return (
-    <Stack gap="m" testID={testID}>
+    <View gap="m" testID={testID}>
       {children}
       <FormActions
         disabled={disabled}
@@ -31,7 +31,7 @@ function FormInner({
       >
         {actions}
       </FormActions>
-    </Stack>
+    </View>
   );
 }
 

package/src/features/form/adapters/inbound/FormActions.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormActionsProps } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 function FormActionsInner({
   themeId: _themeId,
@@ -17,7 +17,7 @@ function FormActionsInner({
   interactionPolicy,
 }: FormActionsProps) {
   return (
-    <Stack gap="s" testID={testID}>
+    <View gap="s" testID={testID}>
       <Button
         disabled={disabled}
         fullWidth
@@ -27,8 +27,8 @@ function FormActionsInner({
       >
         {submitLabel}
       </Button>
-      {children ? <Box>{children}</Box> : null}
-    </Stack>
+      {children ? <View>{children}</View> : null}
+    </View>
   );
 }
 

package/src/features/form/adapters/inbound/FormError.tsx

@@ -3,18 +3,18 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormErrorProps } from '../../../../types/form';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 function FormErrorInner({ themeId: _themeId, mode: _mode, error, testID }: FormErrorProps) {
   const { theme } = useZoraTheme();
   if (!error) return null;
   return (
-    <Box borderColor={theme.colors.error} borderWidth={1} p="s" radius="m" testID={testID}>
+    <View borderColor={theme.colors.error} borderWidth={1} p="s" radius="m" testID={testID}>
       <Text color="error" variant="bodySmall">
         {error}
       </Text>
-    </Box>
+    </View>
   );
 }
 

package/src/features/form/adapters/inbound/FormField.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { FormFieldProps } from '../../../../types/form';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 function FormFieldInner({
@@ -21,7 +21,7 @@ function FormFieldInner({
       {...props}
       helperText={helperText}
       label={
-        <Stack gap="xs">
+        <View gap="xs">
           <Text variant="label" weight="semiBold">
             {label}
           </Text>
@@ -30,7 +30,7 @@ function FormFieldInner({
               {description}
             </Text>
           ) : null}
-        </Stack>
+        </View>
       }
     >
       {children}

package/src/features/form/checkbox/adapters/inbound/CheckboxGroup.tsx

@@ -1,10 +1,9 @@
 import { Checkbox } from '@ankhorage/surface';
 import React from 'react';
-import { View } from 'react-native';
 
 import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
 import type { CheckboxGroupOption, CheckboxGroupProps } from '../../../../../types/checkbox';
-import { Stack } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Text } from '../../../../typography/public';
 
 function CheckboxGroupInner<TValue extends string>({
@@ -34,7 +33,7 @@ function CheckboxGroupInner<TValue extends string>({
         flexWrap: isHorizontal ? 'wrap' : 'nowrap',
       }}
     >
-      <Stack
+      <View
         direction={isHorizontal ? 'row' : 'column'}
         gap={gap}
         wrap={isHorizontal ? 'wrap' : 'nowrap'}
@@ -54,7 +53,7 @@ function CheckboxGroupInner<TValue extends string>({
             interactionPolicy={interactionPolicy}
           />
         ))}
-      </Stack>
+      </View>
     </View>
   );
 }
@@ -108,14 +107,14 @@ function CheckboxGroupItem<TValue extends string>({
         onValueChange(nextValue);
       }}
     >
-      <Stack gap="xs">
+      <View gap="xs">
         <Text>{option.label}</Text>
         {option.description ? (
           <Text emphasis="muted" variant="caption">
             {option.description}
           </Text>
         ) : null}
-      </Stack>
+      </View>
     </Checkbox>
   );
 }

package/src/features/form/radio/adapters/inbound/RadioGroup.tsx

@@ -1,11 +1,11 @@
 import { Radio } from '@ankhorage/surface';
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { useZoraThemeRecipe } from '../../../../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
 import type { RadioGroupProps } from '../../../../../types/radio';
-import { Stack } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Text } from '../../../../typography/public';
 import { resolveRadioGroupThemeRecipe } from '../../utils/resolveRadioGroupThemeRecipe';
 import { RadioOptionControl } from './RadioOptionControl';
@@ -35,9 +35,9 @@ function RadioGroupInner<TValue extends string>({
   );
   return (
     <View testID={props.testID} accessibilityRole="radiogroup">
-      <Stack gap={recipe.gap}>
+      <View gap={recipe.gap}>
         {rows.map((options, index) => (
-          <Stack key={index} direction="row" gap={recipe.gap}>
+          <View key={index} direction="row" gap={recipe.gap}>
             {options.map((option) => (
               <View key={option.value} style={styles.option}>
                 <RadioGroupItem {...selectedProps} {...recipe} option={option} />
@@ -46,9 +46,9 @@ function RadioGroupInner<TValue extends string>({
             {Array.from({ length: columns - options.length }, (_, slot) => (
               <View key={`empty-${slot}`} style={styles.option} />
             ))}
-          </Stack>
+          </View>
         ))}
-      </Stack>
+      </View>
     </View>
   );
 }
@@ -57,7 +57,7 @@ function RadioGroupInner<TValue extends string>({
 function RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>) {
   return (
     <View testID={props.testID} accessibilityRole="radiogroup">
-      <Stack
+      <View
         direction={props.orientation === 'horizontal' ? 'row' : 'column'}
         gap={props.gap}
         wrap="wrap"
@@ -65,7 +65,7 @@ function RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>)
         {props.options.map((option) => (
           <RadioGroupItem key={option.value} {...props} option={option} />
         ))}
-      </Stack>
+      </View>
     </View>
   );
 }
@@ -110,14 +110,14 @@ function RadioGroupItem<TValue extends string>(
       testID={option.testID}
       onCheckedChange={onSelect}
     >
-      <Stack gap="xs">
+      <View gap="xs">
         <Text>{option.label}</Text>
         {option.description ? (
           <Text emphasis="muted" variant="caption">
             {option.description}
           </Text>
         ) : null}
-      </Stack>
+      </View>
     </Radio>
   );
 }

package/src/features/form/select/adapters/inbound/Select.web.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
 import type { SelectProps } from '../../../../../types/select';
-import { Stack } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Surface } from '../../../../surface/public';
 import { SelectField } from '../../composition/SelectField';
 import { SelectOptionRow } from '../../composition/SelectOptionRow';
@@ -44,7 +44,7 @@ function SelectInner<TValue extends string = string>({
         testID={testID ? `${testID}-popover` : undefined}
       >
         <Surface variant="raised">
-          <Stack gap="xs" p="xs">
+          <View gap="xs" p="xs">
             {options.map((option) => (
               <SelectOptionRow
                 interactionPolicy={interactionPolicy}
@@ -55,7 +55,7 @@ function SelectInner<TValue extends string = string>({
                 testID={testID}
               />
             ))}
-          </Stack>
+          </View>
         </Surface>
       </Popover>
     </SelectField>

package/src/features/gradient/adapters/inbound/Gradient.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { GradientProps } from '../../../../types/gradient';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { useGradientRenderer } from './GradientRendererContext';
 
 function GradientInner({
@@ -24,7 +24,7 @@ function GradientInner({
   const gradientRenderer = useGradientRenderer();
 
   return (
-    <Box
+    <View
       height={height}
       minHeight={minHeight}
       radius={radius}
@@ -41,11 +41,11 @@ function GradientInner({
           start,
           style: { flex: 1 },
         },
-        <Box p={p} style={{ flex: 1 }}>
+        <View p={p} style={{ flex: 1 }}>
           {children}
-        </Box>,
+        </View>,
       )}
-    </Box>
+    </View>
   );
 }
 

package/src/features/hero/adapters/inbound/Hero.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { HeroAction, HeroAlign, HeroProps } from '../../../../types/hero';
 import { Button } from '../../../button/public';
 import { Card } from '../../../card/public';
-import { Box, Grid, Stack } from '../../../layout/public';
+import { Grid, View } from '../../../layout/public';
 import { Heading, Text } from '../../../typography/public';
 
 function HeroInner({
@@ -31,9 +31,9 @@ function HeroInner({
   const mediaFirst = layout === 'mediaFirst';
 
   const content = (
-    <Box width="100%">
-      <Stack align={contentAlign} gap={compact ? 's' : 'm'}>
-        <Stack align={contentAlign} gap="xs">
+    <View width="100%">
+      <View align={contentAlign} gap={compact ? 's' : 'm'}>
+        <View align={contentAlign} gap="xs">
           {eyebrow !== undefined ? (
             <Text align={textAlign} color="primary" variant="eyebrow">
               {eyebrow}
@@ -55,10 +55,10 @@ function HeroInner({
               {description}
             </Text>
           ) : null}
-        </Stack>
+        </View>
 
         {hasActions ? (
-          <Stack
+          <View
             align={contentAlign}
             direction={{ base: 'column', md: 'row' }}
             gap="s"
@@ -70,15 +70,15 @@ function HeroInner({
             {secondaryAction !== undefined
               ? renderAction(secondaryAction, 'secondary', interactionPolicy)
               : null}
-          </Stack>
+          </View>
         ) : null}
 
         {footer}
-      </Stack>
-    </Box>
+      </View>
+    </View>
   );
 
-  const mediaSlot = hasMedia ? <Box width="100%">{media}</Box> : null;
+  const mediaSlot = hasMedia ? <View width="100%">{media}</View> : null;
 
   const body =
     hasMedia && layout !== 'stack' ? (
@@ -87,10 +87,10 @@ function HeroInner({
         {mediaFirst ? content : mediaSlot}
       </Grid>
     ) : (
-      <Stack align="center" direction="column" gap={compact ? 'm' : 'l'}>
+      <View align="center" direction="column" gap={compact ? 'm' : 'l'}>
         {mediaFirst ? mediaSlot : content}
         {mediaFirst ? content : mediaSlot}
-      </Stack>
+      </View>
     );
 
   return (

package/src/features/icon/utils/meta.test.ts

@@ -8,10 +8,9 @@ test('permits media-backed Icon and Image content in ordinary screen containers'
   expect(icon.allowedChildren).toEqual([]);
   expect(icon.props.source).toMatchObject({ type: 'media', mediaKinds: ['image'] });
   for (const container of [
-    ZORA_COMPONENT_META.Box,
-    ZORA_COMPONENT_META.Stack,
+    ZORA_COMPONENT_META.View,
+    ZORA_COMPONENT_META.ScrollView,
     ZORA_COMPONENT_META.Grid,
-    ZORA_COMPONENT_META.Container,
     ZORA_COMPONENT_META.Card,
     ZORA_COMPONENT_META.Screen,
     ZORA_COMPONENT_META.ScreenSection,

package/src/features/image/adapters/inbound/Image.tsx

@@ -6,7 +6,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ImageProps } from '../../../../types/image';
 import type { UploadAsset } from '../../../../types/upload';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Displays an image asset and owns its missing, unrenderable, and failed presentation states. */
 export const Image = withZoraThemeScope(ImageInner);
@@ -40,7 +40,7 @@ function ImageInner({
 
   if (showPlaceholder) {
     return (
-      <Box
+      <View
         accessibilityLabel={placeholderLabel}
         accessibilityRole={placeholderLabel ? 'image' : undefined}
         accessible={Boolean(placeholderLabel)}
@@ -62,7 +62,7 @@ function ImageInner({
         ]}
       >
         <Icon color={theme.semantics.content.muted} name="image-outline" size={24} />
-      </Box>
+      </View>
     );
   }
 

package/src/features/layout/adapters/inbound/AppShell.test.ts

@@ -0,0 +1,24 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+const implementationSource = readFileSync(join(import.meta.dir, 'AppShell.tsx'), 'utf8');
+const layoutTypesSource = readFileSync(
+  join(import.meta.dir, '../../../../types/layout.ts'),
+  'utf8',
+);
+
+describe('AppShell public API', () => {
+  test('does not expose raw style escape hatches', () => {
+    const appShellType = layoutTypesSource.slice(
+      layoutTypesSource.indexOf('export interface AppShellProps'),
+      layoutTypesSource.indexOf('export interface ScreenProps'),
+    );
+    expect(appShellType).not.toContain('StyleProp');
+    expect(appShellType).not.toContain('ViewStyle');
+    expect(appShellType).not.toMatch(/\bstyle\??:/);
+    expect(appShellType).not.toMatch(/\bbodyStyle\??:/);
+    expect(implementationSource).not.toMatch(/\bbodyStyle\b/);
+  });
+});