@ankhorage/surface 5.0.0 → 6.0.0

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

@@ -0,0 +1,77 @@
+import React from 'react';
+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 { 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');
+
+/*** Renders the generic Surface modal overlay and focus boundary. */
+export function Modal({
+  visible,
+  onDismiss,
+  children,
+  closeOnBackdrop = true,
+  interactionPolicy = 'enabled',
+  testID,
+}: ModalProps) {
+  const { theme } = useTheme();
+  const animation = resolveOverlayAnimation('modal');
+  const passive = interactionPolicy === 'passive';
+  const backdropPress = passive || !closeOnBackdrop ? undefined : onDismiss;
+
+  if (!visible) return null;
+
+  return (
+    <Portal layer="modal" visible={visible}>
+      <ReactNativeView
+        {...boxNonePointerEvents.props}
+        style={[boxNonePointerEvents.style, styles.fill]}
+      >
+        <Pressable
+          onPress={backdropPress}
+          style={[
+            styles.fill,
+            resolveBackdropStyle(theme.semantics.neutral.text, animation.backdropOpacity),
+          ]}
+          testID={testID ? `${testID}-backdrop` : undefined}
+        />
+        <FocusScope
+          active={visible}
+          onEscape={passive ? undefined : onDismiss}
+          testID={testID ? `${testID}-focus` : undefined}
+        >
+          <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>
+            </ReactNativeView>
+          </View>
+        </FocusScope>
+      </ReactNativeView>
+    </Portal>
+  );
+}
+
+/*** Resolves the runtime backdrop color and opacity without inline JSX styles. */
+function resolveBackdropStyle(backgroundColor: string, opacity: number): ViewStyle {
+  return { backgroundColor, opacity };
+}
+
+const styles = StyleSheet.create({
+  center: { flex: 1 },
+  content: { maxWidth: 560, width: '100%' },
+  fill: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 },
+  surface: {
+    shadowOffset: { height: 8, width: 0 },
+    shadowOpacity: 0.14,
+    shadowRadius: 18,
+  },
+});

package/src/features/modal/public.ts

@@ -0,0 +1,2 @@
+export type { ModalProps } from '../../types/modal';
+export { Modal } from './adapters/inbound/Modal';

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Pressable, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { TabProps } from '../../../../types/tabs';
+import { View } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+import { useTabRegistration } from '../../composition/useTabRegistration';
+import { useTabsContext } from '../../composition/useTabsContext';
+
+/*** Renders one accessible selectable tab inside a Tabs context. */
+export function Tab({
+  value,
+  children,
+  disabled = false,
+  interactionPolicy = 'enabled',
+  testID,
+}: TabProps) {
+  const { theme } = useTheme();
+  const { activeValue, getPanelId, getTabId, setActiveValue, setFocusedValue } = useTabsContext();
+  const pressableRef = useTabRegistration({ disabled, value });
+  const selected = activeValue === value;
+  const passive = interactionPolicy === 'passive';
+  const onPress = passive || disabled ? undefined : () => setActiveValue(value);
+
+  return (
+    <Pressable
+      accessibilityLabel={undefined}
+      accessibilityRole="tab"
+      accessibilityState={{ disabled, selected }}
+      aria-controls={getPanelId(value)}
+      disabled={disabled}
+      nativeID={getTabId(value)}
+      onBlur={() => setFocusedValue(undefined)}
+      onFocus={() => setFocusedValue(value)}
+      onPress={onPress}
+      ref={pressableRef}
+      testID={testID}
+    >
+      <View
+        px="m"
+        py="s"
+        style={resolveTabStyle({
+          borderColor: selected
+            ? theme.semantics.action.primary.base
+            : theme.semantics.border.default,
+          disabled,
+        })}
+      >
+        <Text color={selected ? 'primary' : undefined} variant="label" weight="medium">
+          {children}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}
+
+/*** Resolves active and disabled visual state without inline JSX styles. */
+function resolveTabStyle({
+  borderColor,
+  disabled,
+}: {
+  borderColor: string;
+  disabled: boolean;
+}): ViewStyle {
+  return { borderBottomColor: borderColor, borderBottomWidth: 2, opacity: disabled ? 0.64 : 1 };
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { useFocusManager } from '../../../../internal/focus/useFocusManager';
+import type { TabListProps, TabNavigationKey } from '../../../../types/tabs';
+import { View } from '../../../layout/public';
+import { useTabsContext } from '../../composition/useTabsContext';
+import { resolveNextTabValue } from '../../utils/resolveNextTabValue';
+
+const navigationKeys: readonly string[] = [
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Home',
+  'End',
+];
+
+/*** Renders the accessible tab list and owns keyboard focus navigation. */
+export function TabList({ children, testID }: TabListProps) {
+  const { bindKeydown } = useFocusManager();
+  const { focusedValue, setActiveValue, tabs } = useTabsContext();
+
+  React.useEffect(() => {
+    if (!focusedValue) return undefined;
+
+    return bindKeydown((event) => {
+      if (!isTabNavigationKey(event.key)) return;
+      const nextValue = resolveNextTabValue(tabs, focusedValue, event.key);
+      if (!nextValue) return;
+
+      event.preventDefault();
+      tabs.find((tab) => tab.value === nextValue)?.focus();
+      setActiveValue(nextValue);
+    });
+  }, [bindKeydown, focusedValue, setActiveValue, tabs]);
+
+  return (
+    <View accessibilityRole="tablist" direction="row" testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+/*** Narrows keyboard event keys to the tab navigation key contract. */
+function isTabNavigationKey(key: string | undefined): key is TabNavigationKey {
+  return key !== undefined && navigationKeys.includes(key);
+}

package/src/{components/tabs → features/tabs/adapters/inbound}/TabPanel.tsx

@@ -1,26 +1,22 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { useTabsContext } from './context';
-import type { TabPanelProps } from './types';
+import type { TabPanelProps } from '../../../../types/tabs';
+import { useTabsContext } from '../../composition/useTabsContext';
 
 const TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];
 
+/*** Renders the content panel associated with the active tab value. */
 export function TabPanel({ value, children, testID }: TabPanelProps) {
   const { activeValue, getPanelId, getTabId } = useTabsContext();
 
-  if (activeValue !== value) {
-    return null;
-  }
-
-  const tabId = getTabId(value);
-  const panelId = getPanelId(value);
+  if (activeValue !== value) return null;
 
   return (
     <View
-      accessibilityLabelledBy={tabId}
+      accessibilityLabelledBy={getTabId(value)}
       accessibilityRole={TAB_PANEL_ROLE}
-      nativeID={panelId}
+      nativeID={getPanelId(value)}
       testID={testID}
     >
       {children}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { TabsProps } from '../../../../types/tabs';
+import { View } from '../../../layout/public';
+import { TabsContext } from '../../composition/TabsContext';
+import { useTabsController } from '../../composition/useTabsController';
+
+/*** Provides accessible tab selection state to TabList, Tab, and TabPanel children. */
+export function Tabs({ children, ...props }: TabsProps) {
+  const contextValue = useTabsController(props);
+
+  return (
+    <TabsContext value={contextValue}>
+      <View testID={props.testID}>{children}</View>
+    </TabsContext>
+  );
+}

package/src/features/tabs/composition/TabsContext.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { TabsContextValue } from '../../../types/tabs';
+
+export const TabsContext = React.createContext<TabsContextValue | null>(null);

package/src/features/tabs/composition/useTabRegistration.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Pressable } from 'react-native';
+
+import { useTabsContext } from './useTabsContext';
+
+/*** Registers one focusable tab with the owning Tabs context. */
+export function useTabRegistration({ disabled, value }: { disabled: boolean; value: string }) {
+  const { registerTab, unregisterTab } = useTabsContext();
+  const pressableRef = React.useRef<React.ElementRef<typeof Pressable> | null>(null);
+
+  React.useEffect(() => {
+    registerTab({
+      disabled,
+      focus: () => {
+        const focusable = pressableRef.current as unknown as {
+          focus?: (() => void) | undefined;
+        } | null;
+        focusable?.focus?.();
+      },
+      value,
+    });
+
+    return () => unregisterTab(value);
+  }, [disabled, registerTab, unregisterTab, value]);
+
+  return pressableRef;
+}

package/src/features/tabs/composition/useTabsContext.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type { TabsContextValue } from '../../../types/tabs';
+import { TabsContext } from './TabsContext';
+
+/*** Returns the active Tabs feature context. */
+export function useTabsContext(): TabsContextValue {
+  const value = React.use(TabsContext);
+
+  if (!value) throw new Error('Tabs components must be used within <Tabs>.');
+
+  return value;
+}