@ankhorage/surface 5.0.1 → 7.0.0

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ScrollView as ReactNativeScrollView } from 'react-native';
+
+import { useResponsiveRuntime } from '../../../../core/responsive';
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { ScrollViewProps } from '../../../../types/layout';
+import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
+
+/*** Renders the token-aware responsive Surface adapter for React Native ScrollView. */
+export function ScrollView(props: ScrollViewProps) {
+  const { theme } = useTheme();
+  const { breakpoint } = useResponsiveRuntime();
+  const spacing = splitSpacingProps(props);
+  const visual = splitVisualProps(spacing.rest);
+  const dimensions = splitDimensionProps(visual.rest);
+  const layout = splitLayoutProps(dimensions.rest);
+  const { children, contentContainerStyle, style, ...scrollProps } = layout.rest;
+  const resolved = resolveViewStyles(theme, breakpoint, {
+    ...spacing.styleProps,
+    ...visual.styleProps,
+    ...dimensions.styleProps,
+    ...layout.styleProps,
+  });
+
+  return (
+    <ReactNativeScrollView
+      {...scrollProps}
+      contentContainerStyle={contentContainerStyle}
+      style={[resolved, style]}
+    >
+      {children}
+    </ReactNativeScrollView>
+  );
+}
+
+/*** Splits spacing-aware Surface props from native ScrollView props. */
+function splitSpacingProps(props: ScrollViewProps) {
+  const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap, ...rest } =
+    props;
+  return {
+    rest,
+    styleProps: { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap },
+  };
+}
+
+/*** Splits token-aware visual Surface props from native ScrollView props. */
+function splitVisualProps(props: ReturnType<typeof splitSpacingProps>['rest']) {
+  const { bg, radius, borderWidth, borderColor, ...rest } = props;
+  return { rest, styleProps: { bg, radius, borderWidth, borderColor } };
+}
+
+/*** Splits responsive dimension Surface props from native ScrollView props. */
+function splitDimensionProps(props: ReturnType<typeof splitVisualProps>['rest']) {
+  const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...rest } = props;
+  return { rest, styleProps: { width, height, minWidth, maxWidth, minHeight, maxHeight } };
+}
+
+/*** Splits responsive flex and positioning Surface props from native ScrollView props. */
+function splitLayoutProps(props: ReturnType<typeof splitDimensionProps>['rest']) {
+  const {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    direction,
+    align,
+    justify,
+    wrap,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    overflow,
+    zIndex,
+    opacity,
+    ...rest
+  } = props;
+  return {
+    rest,
+    styleProps: {
+      flex,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      direction,
+      align,
+      justify,
+      wrap,
+      alignSelf,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      overflow,
+      zIndex,
+      opacity,
+    },
+  };
+}

package/src/features/layout/adapters/inbound/{Box.tsx → View.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View as ReactNativeView } from 'react-native';
 
 import { useResponsiveRuntime } from '../../../../core/responsive';
 import { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';
 import { useTheme } from '../../../../theme/ThemeContext';
-import type { BoxProps } from '../../../../types/layout';
-import { resolveBoxStyles } from '../../../../utils/resolveBoxStyles';
+import type { ViewProps } from '../../../../types/layout';
+import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
 
-/*** Renders the responsive foundational layout box. */
-export function Box({
+/*** Renders the token-aware responsive Surface adapter for React Native View. */
+export function View({
   accessible,
   accessibilityLabel,
   accessibilityRole,
@@ -18,14 +18,14 @@ export function Box({
   style,
   testID,
   ...props
-}: BoxProps) {
+}: ViewProps) {
   const { theme } = useTheme();
   const { breakpoint } = useResponsiveRuntime();
-  const resolved = resolveBoxStyles(theme, breakpoint, props);
+  const resolved = resolveViewStyles(theme, breakpoint, props);
   const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;
 
   return (
-    <View
+    <ReactNativeView
       {...resolvedPointerEvents?.props}
       accessible={accessible}
       accessibilityLabel={accessibilityLabel}
@@ -35,6 +35,6 @@ export function Box({
       style={[resolved, resolvedPointerEvents?.style, style]}
     >
       {children}
-    </View>
+    </ReactNativeView>
   );
 }

package/src/features/layout/public.ts

@@ -1,12 +1,5 @@
-export type {
-  BoxProps,
-  ContainerProps,
-  DividerProps,
-  GridProps,
-  StackProps,
-} from '../../types/layout';
-export { Box } from './adapters/inbound/Box';
-export { Container } from './adapters/inbound/Container';
+export type { DividerProps, GridProps, ScrollViewProps, ViewProps } from '../../types/layout';
 export { Divider } from './adapters/inbound/Divider';
 export { Grid } from './adapters/inbound/Grid';
-export { Stack } from './adapters/inbound/Stack';
+export { ScrollView } from './adapters/inbound/ScrollView';
+export { View } from './adapters/inbound/View';

package/src/features/list/adapters/inbound/List.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import type { ListProps } from '../../../../types/list';
+import { View } from '../../../layout/public';
+
+/*** Groups list items under one neutral Surface list boundary. */
+export function List({ children, testID }: ListProps) {
+  return <View testID={testID}>{children}</View>;
+}

package/src/features/list/adapters/inbound/ListItem.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { ButtonBase } from '../../../../primitives/button-base';
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { SurfaceTheme } from '../../../../theme/types';
+import type { ListItemProps } from '../../../../types/list';
+import { View } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+
+/*** Renders a static or interactive list item with shared row geometry and interaction states. */
+export function ListItem(props: ListItemProps) {
+  const { theme } = useTheme();
+  if (!props.onPress) return renderStaticListItem(props, theme);
+  return renderInteractiveListItem({ ...props, onPress: props.onPress }, theme);
+}
+
+/*** Renders a non-pressable list item. */
+function renderStaticListItem(props: ListItemProps, theme: SurfaceTheme) {
+  return (
+    <ListItemContent
+      {...props}
+      backgroundColor={props.selected ? theme.semantics.selection.background : 'transparent'}
+    />
+  );
+}
+
+/*** Renders a pressable list item with shared interaction-state presentation. */
+function renderInteractiveListItem(
+  props: ListItemProps & { onPress: NonNullable<ListItemProps['onPress']> },
+  theme: SurfaceTheme,
+) {
+  return (
+    <ButtonBase
+      accessibilityLabel={props.accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: props.disabled ?? false, selected: props.selected ?? false }}
+      disabled={props.disabled ?? false}
+      interactionPolicy={props.interactionPolicy}
+      onPress={props.onPress}
+      testID={props.testID}
+    >
+      {(state) => (
+        <ListItemContent
+          {...props}
+          backgroundColor={resolveListItemBackground(theme, {
+            hovered: state.hovered,
+            pressed: state.pressed,
+            selected: props.selected ?? false,
+          })}
+          disabled={state.disabled}
+          testID={undefined}
+        />
+      )}
+    </ButtonBase>
+  );
+}
+
+interface ListItemBackgroundState {
+  hovered: boolean;
+  pressed: boolean;
+  selected: boolean;
+}
+
+type ListItemContentProps = Omit<
+  ListItemProps,
+  'accessibilityLabel' | 'interactionPolicy' | 'onPress' | 'selected'
+> & {
+  backgroundColor: string;
+};
+
+/*** Resolves the neutral list-item background for one interaction state. */
+function resolveListItemBackground(theme: SurfaceTheme, state: ListItemBackgroundState) {
+  if (state.pressed) return theme.semantics.neutral.surfaceActive;
+  if (state.hovered) return theme.semantics.neutral.surfaceHover;
+  if (state.selected) return theme.semantics.selection.background;
+  return 'transparent';
+}
+
+/*** Renders the shared visual row content for static and interactive list items. */
+function ListItemContent({
+  backgroundColor,
+  children,
+  compact = false,
+  description,
+  disabled = false,
+  leading,
+  testID,
+  title,
+  trailing,
+}: ListItemContentProps) {
+  const content = children ?? renderDefaultContent(title, description);
+
+  return (
+    <View
+      align="center"
+      bg={backgroundColor}
+      direction="row"
+      gap="m"
+      opacity={disabled ? 0.72 : 1}
+      px="m"
+      py={compact ? 's' : 'm'}
+      testID={testID}
+    >
+      {leading !== undefined ? <View>{leading}</View> : null}
+      <View flex={1}>{content}</View>
+      {trailing !== undefined ? <View>{trailing}</View> : null}
+    </View>
+  );
+}
+
+/*** Renders the default title and description content when custom children are absent. */
+function renderDefaultContent(title: React.ReactNode, description: React.ReactNode) {
+  if (title === undefined && description === undefined) return null;
+  return (
+    <View flex={1} gap="xs">
+      {title !== undefined ? (
+        <Text numberOfLines={1} variant="body" weight="medium">
+          {title}
+        </Text>
+      ) : null}
+      {description !== undefined ? (
+        <Text emphasis="muted" numberOfLines={2} variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { expect, test } from 'bun:test';
+
+test('list capability owns List and ListItem under one feature boundary', async () => {
+  const listSource = await Bun.file('src/features/list/adapters/inbound/List.tsx').text();
+  const listItemSource = await Bun.file('src/features/list/adapters/inbound/ListItem.tsx').text();
+
+  expect(listSource).toContain('export function List');
+  expect(listItemSource).toContain('export function ListItem');
+  expect(listItemSource).toContain('interactionPolicy={props.interactionPolicy}');
+  expect(listItemSource).toContain('selected');
+  expect(listItemSource).toContain('compact');
+  expect(listItemSource).not.toContain('components/list-item');
+});

package/src/features/list/public.ts

@@ -0,0 +1,3 @@
+export type { ListItemProps, ListProps } from '../../types/list';
+export { List } from './adapters/inbound/List';
+export { ListItem } from './adapters/inbound/ListItem';

package/src/features/modal/adapters/inbound/Modal.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View as ReactNativeView, type ViewStyle } from 'react-native';
 
 import { FocusScope } from '../../../../internal/focus/FocusScope';
 import { Portal } from '../../../../internal/overlay/Portal';
 import { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../../../internal/resolvers';
-import { Center } from '../../../../layout';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { ModalProps } from '../../../../types/modal';
+import { View } from '../../../layout/public';
 import { Surface } from '../../../surface/public';
 
 const boxNonePointerEvents = resolvePointerEvents('box-none');
@@ -30,7 +30,10 @@ export function Modal({
 
   return (
     <Portal layer="modal" visible={visible}>
-      <View {...boxNonePointerEvents.props} style={[boxNonePointerEvents.style, styles.fill]}>
+      <ReactNativeView
+        {...boxNonePointerEvents.props}
+        style={[boxNonePointerEvents.style, styles.fill]}
+      >
         <Pressable
           onPress={backdropPress}
           style={[
@@ -44,15 +47,15 @@ export function Modal({
           onEscape={passive ? undefined : onDismiss}
           testID={testID ? `${testID}-focus` : undefined}
         >
-          <Center p="l" style={styles.center}>
-            <View accessible accessibilityViewIsModal style={styles.content}>
+          <View align="center" justify="center" p="l" style={styles.center}>
+            <ReactNativeView accessible accessibilityViewIsModal style={styles.content}>
               <Surface p="l" style={styles.surface} testID={testID} variant="raised">
                 {children}
               </Surface>
-            </View>
-          </Center>
+            </ReactNativeView>
+          </View>
         </FocusScope>
-      </View>
+      </ReactNativeView>
     </Portal>
   );
 }

package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx

@@ -3,10 +3,9 @@ import { Pressable } from 'react-native';
 
 import { FocusScope } from '../../../../internal/focus/FocusScope';
 import { useFocusManager } from '../../../../internal/focus/useFocusManager';
-import { Inline } from '../../../../layout';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { PopoverMenuAction, PopoverMenuProps } from '../../../../types/popoverMenu';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Popover } from '../../../popover/public';
 import { Surface } from '../../../surface/public';
 import { Text } from '../../../typography/public';
@@ -103,10 +102,8 @@ function usePopoverMenuKeyboard({
     () =>
       bindKeydown((event) => {
         if (passive) return;
-
         const { key } = event;
         if (key === undefined) return;
-
         if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(key)) {
           event.preventDefault();
           setActiveIndex((current) => resolveNextMenuIndex(actions, current, key));
@@ -152,7 +149,7 @@ function PopoverMenuItem({
       onPress={passive ? undefined : () => activateAction(action)}
       testID={testID ? `${testID}-item-${action.id}` : undefined}
     >
-      <Box
+      <View
         bg={selected ? theme.semantics.action.neutral.softBg : 'transparent'}
         opacity={action.disabled ? 0.56 : 1}
         px="m"
@@ -160,7 +157,7 @@ function PopoverMenuItem({
         radius="s"
       >
         <PopoverMenuItemContent action={action} active={active} />
-      </Box>
+      </View>
     </Pressable>
   );
 }
@@ -177,10 +174,10 @@ function PopoverMenuItemContent({
     action.intent === 'danger' ? 'danger' : active || action.selected ? 'neutral' : undefined;
 
   return (
-    <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
-      {action.leading ? <Box>{action.leading}</Box> : null}
-      <Box flex={1}>
-        <Stack gap="xxs">
+    <View align="center" direction="row" gap="s" justify="space-between" wrap="nowrap">
+      {action.leading ? <View>{action.leading}</View> : null}
+      <View flex={1}>
+        <View gap="xxs">
           <Text
             color={titleColor}
             variant="bodySmall"
@@ -193,9 +190,9 @@ function PopoverMenuItemContent({
               {action.description}
             </Text>
           ) : null}
-        </Stack>
-      </Box>
-      {action.trailing ? <Box>{action.trailing}</Box> : null}
-    </Inline>
+        </View>
+      </View>
+      {action.trailing ? <View>{action.trailing}</View> : null}
+    </View>
   );
 }

package/src/features/surface/adapters/inbound/Surface.tsx

@@ -3,9 +3,9 @@ import type { ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { SurfaceProps, SurfaceVariant } from '../../../../types/surface';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
-/*** Renders a themed container surface with semantic elevation and border variants. */
+/*** Renders a themed content surface with semantic elevation and border variants. */
 export function Surface({ variant = 'default', radius = 'm', style, ...props }: SurfaceProps) {
   const { theme } = useTheme();
   const backgroundColor =
@@ -17,7 +17,7 @@ export function Surface({ variant = 'default', radius = 'm', style, ...props }:
   const borderColor = theme.semantics.border.default;
 
   return (
-    <Box
+    <View
       {...props}
       radius={radius}
       style={[resolveSurfaceVariantStyles(variant, borderColor, backgroundColor), style]}

package/src/features/tabs/adapters/inbound/Tab.tsx

@@ -3,7 +3,7 @@ import { Pressable, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { TabProps } from '../../../../types/tabs';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { useTabRegistration } from '../../composition/useTabRegistration';
 import { useTabsContext } from '../../composition/useTabsContext';
@@ -37,7 +37,7 @@ export function Tab({
       ref={pressableRef}
       testID={testID}
     >
-      <Box
+      <View
         px="m"
         py="s"
         style={resolveTabStyle({
@@ -50,7 +50,7 @@ export function Tab({
         <Text color={selected ? 'primary' : undefined} variant="label" weight="medium">
           {children}
         </Text>
-      </Box>
+      </View>
     </Pressable>
   );
 }

package/src/features/tabs/adapters/inbound/TabList.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 
 import { useFocusManager } from '../../../../internal/focus/useFocusManager';
 import type { TabListProps, TabNavigationKey } from '../../../../types/tabs';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { useTabsContext } from '../../composition/useTabsContext';
 import { resolveNextTabValue } from '../../utils/resolveNextTabValue';
 
@@ -36,9 +35,9 @@ export function TabList({ children, testID }: TabListProps) {
   }, [bindKeydown, focusedValue, setActiveValue, tabs]);
 
   return (
-    <Box accessibilityRole="tablist" style={styles.list} testID={testID}>
+    <View accessibilityRole="tablist" direction="row" testID={testID}>
       {children}
-    </Box>
+    </View>
   );
 }
 
@@ -46,5 +45,3 @@ export function TabList({ children, testID }: TabListProps) {
 function isTabNavigationKey(key: string | undefined): key is TabNavigationKey {
   return key !== undefined && navigationKeys.includes(key);
 }
-
-const styles = StyleSheet.create({ list: { flexDirection: 'row' } });

package/src/features/tabs/adapters/inbound/Tabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { TabsProps } from '../../../../types/tabs';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { TabsContext } from '../../composition/TabsContext';
 import { useTabsController } from '../../composition/useTabsController';
 
@@ -11,7 +11,7 @@ export function Tabs({ children, ...props }: TabsProps) {
 
   return (
     <TabsContext value={contextValue}>
-      <Box testID={props.testID}>{children}</Box>
+      <View testID={props.testID}>{children}</View>
     </TabsContext>
   );
 }

package/src/features/toast/adapters/inbound/Toast.tsx

@@ -5,7 +5,7 @@ import type { SurfaceColor } from '../../../../surfaceColor';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../theme/types';
 import type { ToastProps } from '../../../../types/toast';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Surface } from '../../../surface/public';
 import { Text } from '../../../typography/public';
 
@@ -29,15 +29,15 @@ export function Toast({
 
   return (
     <Surface p="m" style={[styles.root, statusStyle]} testID={testID} variant="raised">
-      <Stack align="center" direction="row" justify="space-between">
-        <Box flex={1}>
+      <View align="center" direction="row" justify="space-between">
+        <View flex={1}>
           {title ? (
             <Text variant="label" weight="medium">
               {title}
             </Text>
           ) : null}
           {description ? <Text emphasis="muted">{description}</Text> : null}
-        </Box>
+        </View>
         {onDismiss ? (
           <Pressable
             accessibilityLabel="Dismiss notification"
@@ -48,7 +48,7 @@ export function Toast({
             <Text color={statusTextColor}>×</Text>
           </Pressable>
         ) : null}
-      </Stack>
+      </View>
     </Surface>
   );
 }

package/src/features/toast/adapters/inbound/ToastProvider.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, type ViewStyle } from 'react-native';
 import { Portal } from '../../../../internal/overlay/Portal';
 import { resolveOverlayAnimation } from '../../../../internal/resolvers';
 import type { ToastProviderProps } from '../../../../types/toast';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { ToastContext } from '../../composition/ToastContext';
 import { useToastRuntime } from '../../composition/useToastRuntime';
 import { Toast } from './Toast';
@@ -22,7 +22,7 @@ export function ToastProvider({ children, defaultDuration = 4000 }: ToastProvide
     <ToastContext value={controller}>
       {children}
       <Portal layer="toast" visible={toasts.length > 0}>
-        <Stack gap="s" pointerEvents="box-none" style={[styles.container, animationStyle]}>
+        <View gap="s" pointerEvents="box-none" style={[styles.container, animationStyle]}>
           {toasts.map((toast) => (
             <Toast
               description={toast.description}
@@ -33,7 +33,7 @@ export function ToastProvider({ children, defaultDuration = 4000 }: ToastProvide
               title={toast.title}
             />
           ))}
-        </Stack>
+        </View>
       </Portal>
     </ToastContext>
   );