@ankhorage/zora 15.0.0 → 17.0.0

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/{components/search-bar/SearchBar.tsx → features/form/search-input/adapters/inbound/SearchInput.tsx}

@@ -1,14 +1,16 @@
-import React from 'react';
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import type { SearchInputProps } from '../../../../../types/search-input';
+import { TextInput, type TextInputTrailingAction } from '../../../text-input/public';
 
-import { TextInput, type TextInputTrailingAction } from '../../features/form/text-input/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SearchBarProps } from './types';
+/*** Renders a search-focused text input with clear and submit behavior. */
+export const SearchInput = withZoraThemeScope(SearchInputInner);
 
-function SearchBarInner({
+/*** Connects search semantics to the shared ZORA TextInput control. */
+function SearchInputInner({
   themeId: _themeId,
   mode: _mode,
   testID,
-  value,
+  value = '',
   onValueChange,
   placeholder = 'Search',
   onSubmit,
@@ -18,9 +20,8 @@ function SearchBarInner({
   disabled,
   readOnly,
   interactionPolicy,
-}: SearchBarProps) {
+}: SearchInputProps) {
   const passive = interactionPolicy === 'passive';
-
   const trailingAction: TextInputTrailingAction | undefined =
     clearable && value.length > 0
       ? {
@@ -28,8 +29,7 @@ function SearchBarInner({
           label: 'Clear search',
           onPress: () => {
             if (passive) return;
-
-            onValueChange('');
+            onValueChange?.('');
             onClear?.();
           },
         }
@@ -52,8 +52,3 @@ function SearchBarInner({
     />
   );
 }
-
-/***
- * Search input with leading icon and optional trailing action.
- */
-export const SearchBar = withZoraThemeScope(SearchBarInner);

package/src/features/form/search-input/public.ts

@@ -0,0 +1,2 @@
+export type { SearchInputProps } from '../../../types/search-input';
+export { SearchInput } from './adapters/inbound/SearchInput';

package/src/features/form/search-input/searchInputMeta.ts

@@ -0,0 +1,68 @@
+import type { ZoraComponentMeta } from '../../../metadata/types';
+
+export const searchInputMeta = {
+  name: 'SearchInput',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'Search-focused text input with clear and submit events.',
+  blueprint: {
+    label: 'Search input',
+    defaultProps: { clearable: true, placeholder: 'Search', size: 'l', value: '' },
+  },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Current search query.',
+        value: { type: 'string' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        description: 'Runs whenever the search query changes.',
+        payload: {
+          eventType: 'searchInput.valueChange',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+      submit: {
+        label: 'Submit',
+        description: 'Runs when the user submits the search query.',
+        payload: {
+          eventType: 'searchInput.submit',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+      clear: {
+        label: 'Clear',
+        description: 'Runs when the search query is cleared.',
+        payload: { eventType: 'searchInput.clear', fields: [] },
+      },
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'searchInput.valueChange',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+    submit: {
+      label: 'Submit',
+      eventType: 'searchInput.submit',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+    clear: { label: 'Clear', eventType: 'searchInput.clear', payloadFields: [] },
+  },
+  props: {
+    value: { type: 'string', category: 'Content', label: 'Value', default: '' },
+    placeholder: { type: 'string', category: 'Content', label: 'Placeholder', default: 'Search' },
+    clearable: { type: 'boolean', category: 'Behavior', label: 'Clearable', default: true },
+    size: { type: 'enum', category: 'Style', label: 'Size', enum: ['s', 'm', 'l'], default: 'l' },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
+    readOnly: { type: 'boolean', category: 'State', label: 'Read only' },
+  },
+} as const satisfies ZoraComponentMeta;

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

package/src/features/layout/adapters/inbound/AppShell.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { AppShellProps } from '../../../../types/layout';
+import { View } from './View';
+
+function AppShellInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  header,
+  footer,
+  overlay,
+  testID,
+}: AppShellProps) {
+  return (
+    <View bg="background" flex={1} testID={testID}>
+      <View flex={1} minHeight={0} position="relative">
+        {header ? <View flexShrink={0}>{header}</View> : null}
+        <View flex={1} minHeight={0} minWidth={0}>
+          {children}
+        </View>
+        {footer ? <View flexShrink={0}>{footer}</View> : null}
+        {overlay ? (
+          <View
+            bottom={0}
+            left={0}
+            pointerEvents="box-none"
+            position="absolute"
+            right={0}
+            top={0}
+            zIndex={10}
+          >
+            {overlay}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+/*** Root application frame with explicit header, content, footer, and overlay slots. */
+export const AppShell = withZoraThemeScope(AppShellInner);

package/src/features/layout/adapters/inbound/Screen.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { resolvePageMaxWidth } from '../../../../internal/recipes';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ScreenProps } from '../../../../types/layout';
+import { ScrollView } from './ScrollView';
+import { View } from './View';
+
+function ScreenInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  footer,
+  scroll = true,
+  width = 'default',
+  testID,
+}: ScreenProps) {
+  const content = (
+    <View
+      alignSelf="center"
+      gap="l"
+      maxWidth={resolvePageMaxWidth(width)}
+      px={{ base: 16, md: 24, lg: 32 }}
+      py="xl"
+      testID={testID}
+      width="100%"
+    >
+      {children}
+      {footer}
+    </View>
+  );
+
+  if (!scroll) {
+    return (
+      <View bg="background" flex={1} minHeight={0} minWidth={0}>
+        {content}
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView bg="background" flex={1} minHeight={0} minWidth={0}>
+      {content}
+    </ScrollView>
+  );
+}
+
+/*** Screen content boundary with independent width policy and scroll ownership. */
+export const Screen = withZoraThemeScope(ScreenInner);

package/src/{layout/screen-section → features/layout/adapters/inbound}/ScreenSection.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Stack } from '../../features/layout/public';
-import { SectionHeader } from '../../patterns/section-header';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ScreenSectionProps } from './types';
+import { SectionHeader } from '../../../../patterns/section-header';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ScreenSectionProps } from '../../../../types/layout';
+import { View } from './View';
 
 function ScreenSectionInner({
   themeId: _themeId,
@@ -16,16 +16,12 @@ function ScreenSectionInner({
   testID,
 }: ScreenSectionProps) {
   return (
-    <Stack gap="m" testID={testID}>
+    <View gap="m" testID={testID}>
       {title ? <SectionHeader actions={actions} description={description} title={title} /> : null}
       {children}
-    </Stack>
+    </View>
   );
 }
 
-/***
- * Screen section layout with optional title, description, and actions.
- *
- 
- */
+/*** Screen section with optional heading, description, actions, and content. */
 export const ScreenSection = withZoraThemeScope(ScreenSectionInner);

package/src/features/layout/adapters/inbound/ScrollView.tsx

@@ -0,0 +1,18 @@
+import { ScrollView as SurfaceScrollView } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ScrollViewProps } from '../../../../types/layout';
+
+/*** Adapts the token-aware Surface ScrollView primitive to ZORA theme scope. */
+export const ScrollView = withZoraThemeScope(ScrollViewInner);
+
+/*** Forwards ZORA scrolling props to the published Surface ScrollView boundary. */
+function ScrollViewInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ScrollViewProps) {
+  return <SurfaceScrollView {...props} />;
+}

package/src/features/layout/adapters/inbound/View.tsx

@@ -0,0 +1,18 @@
+import { View as SurfaceView } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ViewProps } from '../../../../types/layout';
+
+/*** Adapts the token-aware Surface View primitive to ZORA theme scope. */
+export const View = withZoraThemeScope(ViewInner);
+
+/*** Forwards ZORA layout props to the published Surface View boundary. */
+function ViewInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ViewProps) {
+  return <SurfaceView {...props} />;
+}

package/src/features/layout/constants.ts

@@ -1,7 +1,5 @@
 import type { ZoraComponentMeta } from '../../metadata/types';
 
-export const CONTENT_RAIL_SPACING_VALUES = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;
-
 export const LAYOUT_PROPS = {
   p: { type: 'spacing', category: 'Spacing' },
   px: { type: 'spacing', category: 'Spacing' },

package/src/features/layout/public.test.ts

@@ -0,0 +1,55 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+const srcDir = join(import.meta.dir, '../..');
+const publicSource = readFileSync(join(import.meta.dir, 'public.ts'), 'utf8');
+const rootSource = readFileSync(join(srcDir, 'index.ts'), 'utf8');
+
+const removedPublicNames = [
+  'Box',
+  'Center',
+  'Container',
+  'Inline',
+  'SettingsLayout',
+  'SettingsRow',
+  'SidebarLayout',
+  'Spacer',
+  'Stack',
+  'TileGrid',
+  'TopbarLayout',
+] as const;
+
+describe('canonical layout boundary', () => {
+  test('exports only the current layout primitives and semantic screen composition', () => {
+    for (const name of [
+      'AppShell',
+      'Divider',
+      'Grid',
+      'Screen',
+      'ScreenSection',
+      'ScrollView',
+      'View',
+    ]) {
+      expect(publicSource).toMatch(new RegExp(`\\b${name}\\b`, 'u'));
+    }
+
+    for (const name of removedPublicNames) {
+      expect(publicSource).not.toMatch(new RegExp(`\\b${name}\\b`, 'u'));
+      expect(rootSource).not.toMatch(new RegExp(`export[^\\n]*\\b${name}\\b`, 'u'));
+    }
+  });
+
+  test('does not retain the legacy layout or foundation ownership roots', () => {
+    expect(existsSync(join(srcDir, 'layout'))).toBe(false);
+    expect(existsSync(join(srcDir, 'foundation'))).toBe(false);
+    expect(existsSync(join(srcDir, 'patterns', 'settings-row'))).toBe(false);
+    expect(existsSync(join(srcDir, 'patterns', 'tile-grid'))).toBe(false);
+  });
+
+  test('keeps moved capabilities with their singular feature owners', () => {
+    expect(existsSync(join(srcDir, 'features', 'content-rail', 'public.ts'))).toBe(true);
+    expect(existsSync(join(srcDir, 'features', 'palette-item', 'public.ts'))).toBe(true);
+  });
+});

package/src/features/layout/public.ts

@@ -1,22 +1,16 @@
 export type {
-  ContentRailControlPressEvent,
-  ContentRailDirection,
-  ContentRailItemSize,
-  ContentRailMotion,
-  ContentRailProps,
-  ContentRailSpacing,
-  ContentRailVisibleRangeChangeEvent,
-} from '../../types/content-rail';
-export type {
-  BoxProps,
-  ContainerProps,
+  AppShellProps,
   DividerProps,
   GridProps,
-  StackProps,
+  ScreenProps,
+  ScreenSectionProps,
+  ScrollViewProps,
+  ViewProps,
 } from '../../types/layout';
-export { Box } from './adapters/inbound/Box';
-export { Container } from './adapters/inbound/Container';
-export { ContentRail } from './adapters/inbound/ContentRail';
+export { AppShell } from './adapters/inbound/AppShell';
 export { Divider } from './adapters/inbound/Divider';
 export { Grid } from './adapters/inbound/Grid';
-export { Stack } from './adapters/inbound/Stack';
+export { Screen } from './adapters/inbound/Screen';
+export { ScreenSection } from './adapters/inbound/ScreenSection';
+export { ScrollView } from './adapters/inbound/ScrollView';
+export { View } from './adapters/inbound/View';