@ankhorage/surface 5.0.1 → 6.0.0

package/src/features/badge/adapters/inbound/Badge.tsx

@@ -4,7 +4,7 @@ import type { ViewStyle } from 'react-native';
 import { resolveButtonColors, resolveControlSize } from '../../../../internal/resolvers';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { BadgeProps } from '../../../../types/badge';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 /*** Renders compact semantic status or metadata content. */
@@ -24,7 +24,7 @@ export function Badge({
   });
 
   return (
-    <Box
+    <View
       px={Math.max(theme.spacing.xs, controlSize.paddingHorizontal - 4)}
       py={Math.max(4, controlSize.paddingVertical - 2)}
       radius={controlSize.borderRadius}
@@ -39,7 +39,7 @@ export function Badge({
       >
         {content}
       </Text>
-    </Box>
+    </View>
   );
 }
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActivityIndicator, View, type ViewStyle } from 'react-native';
+import { ActivityIndicator, View as ReactNativeView, type ViewStyle } from 'react-native';
 
 import {
   type InteractionState,
@@ -12,7 +12,7 @@ import { useTheme } from '../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../theme/types';
 import type { ButtonProps } from '../../../../types/button';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 /*** Renders the primary Surface action control with semantic visual states. */
@@ -80,7 +80,7 @@ function ButtonContent({
   const iconSize = resolveIconSize(theme, size);
 
   return (
-    <Box
+    <View
       px={controlSize.paddingHorizontal}
       py={controlSize.paddingVertical}
       radius={controlSize.borderRadius}
@@ -91,9 +91,9 @@ function ButtonContent({
       ) : (
         <>
           {leadingIcon ? (
-            <View style={resolveAccessoryStyle(theme.spacing.s, 'leading')}>
+            <ReactNativeView style={resolveAccessoryStyle(theme.spacing.s, 'leading')}>
               <Icon {...leadingIcon} color={colors.contentColor} size={iconSize} />
-            </View>
+            </ReactNativeView>
           ) : null}
           <Text
             color={muted ? undefined : color}
@@ -104,13 +104,13 @@ function ButtonContent({
             {children}
           </Text>
           {trailingIcon ? (
-            <View style={resolveAccessoryStyle(theme.spacing.s, 'trailing')}>
+            <ReactNativeView style={resolveAccessoryStyle(theme.spacing.s, 'trailing')}>
               <Icon {...trailingIcon} color={colors.contentColor} size={iconSize} />
-            </View>
+            </ReactNativeView>
           ) : null}
         </>
       )}
-    </Box>
+    </View>
   );
 }
 

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

@@ -10,7 +10,7 @@ import { ButtonBase } from '../../../../primitives/button-base';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { IconButtonProps } from '../../../../types/button';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Renders a compact accessible icon-only action control. */
 export function IconButton({
@@ -38,12 +38,12 @@ export function IconButton({
       {(state) => {
         const colors = resolveButtonColors(theme, { color, state, variant });
         return (
-          <Box
+          <View
             radius={controlSize.borderRadius}
             style={resolveIconButtonStyle(controlSize, colors, variant)}
           >
             <Icon {...icon} color={colors.contentColor} size={resolveIconSize(theme, size)} />
-          </Box>
+          </View>
         );
       }}
     </ButtonBase>

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

@@ -14,7 +14,7 @@ import type { ButtonBaseProps } from '../../../../../primitives/button-base/type
 import { useTheme } from '../../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../../theme/types';
 import type { CheckboxProps } from '../../../../../types/checkbox';
-import { Box } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Text } from '../../../../typography/public';
 
 /*** Renders a controlled or uncontrolled accessible checkbox. */
@@ -128,8 +128,8 @@ function renderCheckboxContent(input: CheckboxContentInput) {
   const indicatorColor = fieldState.invalid ? 'error' : input.color;
 
   return (
-    <Box style={resolveSelectionRowStyle(colors.opacity)}>
-      <Box
+    <View style={resolveSelectionRowStyle(colors.opacity)}>
+      <View
         radius="s"
         style={resolveCheckboxIndicatorStyle(
           colors.backgroundColor,
@@ -147,13 +147,13 @@ function renderCheckboxContent(input: CheckboxContentInput) {
             ✓
           </Text>
         ) : null}
-      </Box>
+      </View>
       {input.children ? (
-        <Box ml="s">
+        <View ml="s">
           <Text emphasis={labelEmphasis}>{input.children}</Text>
-        </Box>
+        </View>
       ) : null}
-    </Box>
+    </View>
   );
 }
 

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

@@ -14,7 +14,7 @@ import type { ButtonBaseProps } from '../../../../../primitives/button-base/type
 import { useTheme } from '../../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../../theme/types';
 import type { RadioProps } from '../../../../../types/radio';
-import { Box } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Text } from '../../../../typography/public';
 import { isRadioTextContent } from '../../utils/isRadioTextContent';
 
@@ -130,8 +130,8 @@ function renderRadioContent(input: RadioContentInput) {
     input.children !== undefined && input.children !== null && input.children !== false;
 
   return (
-    <Box style={resolveSelectionRowStyle(colors.opacity)}>
-      <Box
+    <View style={resolveSelectionRowStyle(colors.opacity)}>
+      <View
         radius="full"
         style={resolveRadioIndicatorStyle(
           colors.backgroundColor,
@@ -140,22 +140,22 @@ function renderRadioContent(input: RadioContentInput) {
         )}
       >
         {input.isChecked ? (
-          <Box
+          <View
             radius="full"
             style={resolveRadioDotStyle(colors.indicatorColor, indicatorSize.radioDot)}
           />
         ) : null}
-      </Box>
+      </View>
       {hasContent ? (
-        <Box flex={1} ml="s">
+        <View flex={1} ml="s">
           {isRadioTextContent(input.children) ? (
             <Text emphasis={labelEmphasis}>{input.children}</Text>
           ) : (
             input.children
           )}
-        </Box>
+        </View>
       ) : null}
-    </Box>
+    </View>
   );
 }
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { DividerProps } from '../../../../types/layout';
-import { Box } from './Box';
+import { View } from './View';
 
 /*** Renders a horizontal or vertical separator using layout tokens. */
 export function Divider({
@@ -11,7 +11,7 @@ export function Divider({
   ...props
 }: DividerProps) {
   return (
-    <Box
+    <View
       {...props}
       bg={color}
       height={orientation === 'horizontal' ? thickness : '100%'}

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { View, type ViewStyle } from 'react-native';
+import { View as ReactNativeView, type ViewStyle } from 'react-native';
 
 import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { GridProps } from '../../../../types/layout';
 import { resolveSpacing } from '../../../../utils/resolveSpacing';
-import { Box } from './Box';
+import { View } from './View';
 
 /*** Lays out children in a responsive wrapping grid. */
 export function Grid({
@@ -31,18 +31,16 @@ export function Grid({
   const basisPercent: `${number}%` = `${100 / activeCols}%`;
 
   return (
-    <Box {...props}>
-      <View style={resolveGridStyle(rowSpacing, colSpacing)}>
-        {React.Children.toArray(children).map((node, index) => (
-          <View
-            key={String(index)}
-            style={resolveGridItemStyle(activeMinItemWidth, basisPercent, rowSpacing, colSpacing)}
-          >
-            {node}
-          </View>
-        ))}
-      </View>
-    </Box>
+    <View {...props} style={[resolveGridStyle(rowSpacing, colSpacing), props.style]}>
+      {React.Children.toArray(children).map((node, index) => (
+        <ReactNativeView
+          key={React.isValidElement(node) && node.key !== null ? String(node.key) : String(index)}
+          style={resolveGridItemStyle(activeMinItemWidth, basisPercent, rowSpacing, colSpacing)}
+        >
+          {node}
+        </ReactNativeView>
+      ))}
+    </View>
   );
 }
 

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