@ankhorage/surface 2.2.0 → 3.0.0

package/src/components/button/Button.tsx

@@ -31,11 +31,9 @@ export function Button({
       {...props}
       disabled={disabled || loading}
       onPress={onPress}
-      style={[
-        {
-          alignSelf: fullWidth ? 'stretch' : 'flex-start',
-        },
-      ]}
+      style={{
+        alignSelf: fullWidth ? 'stretch' : 'flex-start',
+      }}
       testID={testID}
     >
       {(state) => {
@@ -74,12 +72,7 @@ export function Button({
               <>
                 {leadingIcon ? (
                   <View style={{ marginRight: theme.spacing.s }}>
-                    <Icon
-                      color={colors.contentColor}
-                      name={leadingIcon.name}
-                      provider={leadingIcon.provider}
-                      size={iconSize}
-                    />
+                    <Icon {...leadingIcon} color={colors.contentColor} size={iconSize} />
                   </View>
                 ) : null}
                 <Text
@@ -92,12 +85,7 @@ export function Button({
                 </Text>
                 {trailingIcon ? (
                   <View style={{ marginLeft: theme.spacing.s }}>
-                    <Icon
-                      color={colors.contentColor}
-                      name={trailingIcon.name}
-                      provider={trailingIcon.provider}
-                      size={iconSize}
-                    />
+                    <Icon {...trailingIcon} color={colors.contentColor} size={iconSize} />
                   </View>
                 ) : null}
               </>

package/src/components/button/types.ts

@@ -3,13 +3,10 @@ import type React from 'react';
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
 import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
 import type { ButtonBaseProps } from '../../primitives/button-base';
-import type { IconProps } from '../../primitives/icon';
+import type { IconSource } from '../../primitives/icon';
 import type { SurfaceColor } from '../../surfaceColor';
 
-export interface ButtonIconSpec {
-  name: IconProps['name'];
-  provider?: IconProps['provider'];
-}
+export type ButtonIconSpec = IconSource;
 
 export interface ButtonProps extends Omit<
   ButtonBaseProps,

package/src/components/drawer/Drawer.tsx

@@ -3,11 +3,14 @@ import { Pressable, View } 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 { Box, Surface } from '../../layout';
 import { useTheme } from '../../theme/ThemeContext';
 import type { DrawerProps } from './types';
 
+const boxNonePointerEvents = resolvePointerEvents('box-none');
+
 export function Drawer({
   visible,
   onDismiss,
@@ -28,14 +31,17 @@ export function Drawer({
   return (
     <Portal layer="drawer" visible={visible}>
       <View
-        pointerEvents="box-none"
-        style={{
-          bottom: 0,
-          left: 0,
-          position: 'absolute',
-          right: 0,
-          top: 0,
-        }}
+        {...boxNonePointerEvents.props}
+        style={[
+          boxNonePointerEvents.style,
+          {
+            bottom: 0,
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          },
+        ]}
       >
         <Pressable
           onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}

package/src/components/icon-button/IconButton.tsx

@@ -46,12 +46,7 @@ export function IconButton({
               opacity: colors.opacity,
             }}
           >
-            <Icon
-              color={colors.contentColor}
-              name={icon.name}
-              provider={icon.provider}
-              size={resolveIconSize(theme, size)}
-            />
+            <Icon {...icon} color={colors.contentColor} size={resolveIconSize(theme, size)} />
           </Box>
         );
       }}

package/src/components/icon-button/types.ts

@@ -1,17 +1,14 @@
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
 import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
 import type { ButtonBaseProps } from '../../primitives/button-base';
-import type { IconProps } from '../../primitives/icon';
+import type { IconSource } from '../../primitives/icon';
 import type { SurfaceColor } from '../../surfaceColor';
 
 export interface IconButtonProps extends Omit<
   ButtonBaseProps,
   'children' | 'style' | 'accessibilityLabel'
 > {
-  icon: {
-    name: IconProps['name'];
-    provider?: IconProps['provider'];
-  };
+  icon: IconSource;
   accessibilityLabel: string;
   variant?: ButtonVariant;
   color?: SurfaceColor;

package/src/components/menu/Menu.tsx

@@ -4,6 +4,7 @@ import { type LayoutRectangle, Pressable, View } from 'react-native';
 import { FocusScope } from '../../internal/focus/FocusScope';
 import { useFocusManager } from '../../internal/focus/useFocusManager';
 import { Portal } from '../../internal/overlay/Portal';
+import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
 import { Box, Inline, Stack, Surface } from '../../layout';
 import { ButtonBase } from '../../primitives/button-base';
@@ -12,6 +13,8 @@ import { useTheme } from '../../theme/ThemeContext';
 import { resolveNextMenuIndex } from './navigation';
 import type { MenuAction, MenuProps } from './types';
 
+const boxNonePointerEvents = resolvePointerEvents('box-none');
+
 interface MeasurableNode {
   measureInWindow?: (
     callback: (x: number, y: number, width: number, height: number) => void,
@@ -142,14 +145,17 @@ export function Menu({
       </ButtonBase>
       <Portal layer="menu" visible={open && Boolean(layout)}>
         <View
-          pointerEvents="box-none"
-          style={{
-            bottom: 0,
-            left: 0,
-            position: 'absolute',
-            right: 0,
-            top: 0,
-          }}
+          {...boxNonePointerEvents.props}
+          style={[
+            boxNonePointerEvents.style,
+            {
+              bottom: 0,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+              top: 0,
+            },
+          ]}
         >
           <Pressable
             onPress={passive ? undefined : closeMenu}

package/src/components/modal/Modal.tsx

@@ -3,11 +3,14 @@ import { Pressable, View } 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, Surface } from '../../layout';
 import { useTheme } from '../../theme/ThemeContext';
 import type { ModalProps } from './types';
 
+const boxNonePointerEvents = resolvePointerEvents('box-none');
+
 export function Modal({
   visible,
   onDismiss,
@@ -27,14 +30,17 @@ export function Modal({
   return (
     <Portal layer="modal" visible={visible}>
       <View
-        pointerEvents="box-none"
-        style={{
-          bottom: 0,
-          left: 0,
-          position: 'absolute',
-          right: 0,
-          top: 0,
-        }}
+        {...boxNonePointerEvents.props}
+        style={[
+          boxNonePointerEvents.style,
+          {
+            bottom: 0,
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          },
+        ]}
       >
         <Pressable
           onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}

package/src/components/navigation/NavigationItem.tsx

@@ -56,12 +56,7 @@ export function NavigationItem({
           >
             {item.icon ? (
               <View style={{ marginRight: theme.spacing.s }}>
-                <Icon
-                  color={presentation.contentColor}
-                  name={item.icon.name}
-                  provider={item.icon.provider}
-                  size={compact ? 's' : 'm'}
-                />
+                <Icon {...item.icon} color={presentation.contentColor} size={compact ? 's' : 'm'} />
               </View>
             ) : null}
             <Box flex={1}>

package/src/components/navigation/TabBarItem.tsx

@@ -57,12 +57,7 @@ export function TabBarItem({ item, compact = false, testID, interactionPolicy }:
           >
             {item.icon ? (
               <View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>
-                <Icon
-                  color={contentColor}
-                  name={item.icon.name}
-                  provider={item.icon.provider}
-                  size={compact ? 's' : 'm'}
-                />
+                <Icon {...item.icon} color={contentColor} size={compact ? 's' : 'm'} />
               </View>
             ) : null}
             {item.label ? (

package/src/components/navigation/types.ts

@@ -2,9 +2,9 @@ import type React from 'react';
 import type { AccessibilityRole, AccessibilityState } from 'react-native';
 
 import type { InteractionPolicy } from '../../interactionPolicy';
-import type { IconProps } from '../../primitives/icon';
+import type { IconSource } from '../../primitives/icon';
 
-export type NavigationItemIcon = Pick<IconProps, 'name' | 'provider'>;
+export type NavigationItemIcon = IconSource;
 
 export interface NavigationItemSpec {
   id: string;

package/src/components/toast/ToastProvider.tsx

@@ -68,9 +68,10 @@ export function ToastProvider({
   }, [defaultDuration, dismissToast, toasts]);
 
   React.useEffect(() => {
+    const timers = timersRef.current;
     return () => {
-      timersRef.current.forEach((timer) => clearTimeout(timer));
-      timersRef.current.clear();
+      timers.forEach((timer) => clearTimeout(timer));
+      timers.clear();
     };
   }, []);
 

package/src/components/tooltip/Tooltip.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import { type LayoutRectangle, Platform, Pressable, View } from 'react-native';
 
 import { Portal } from '../../internal/overlay/Portal';
+import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
 import { Surface } from '../../layout';
 import { Text } from '../../primitives/text';
 import { useTheme } from '../../theme/ThemeContext';
 import type { TooltipProps } from './types';
 
+const noPointerEvents = resolvePointerEvents('none');
+
 interface MeasurableNode {
   measureInWindow?: (
     callback: (x: number, y: number, width: number, height: number) => void,
@@ -85,12 +88,15 @@ export function Tooltip({
       </Pressable>
       <Portal layer="tooltip" visible={visible && Boolean(layout)}>
         <View
-          pointerEvents="none"
-          style={{
-            left: tooltipLeft,
-            position: 'absolute',
-            top: tooltipTop,
-          }}
+          {...noPointerEvents.props}
+          style={[
+            noPointerEvents.style,
+            {
+              left: tooltipLeft,
+              position: 'absolute',
+              top: tooltipTop,
+            },
+          ]}
         >
           <Surface
             p="s"

package/src/context/TranslationContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext } from 'react';
 
 /**
  * Minimal translation runtime surface.
@@ -31,20 +31,17 @@ export function TranslationProvider(props: {
 }) {
   const { t, i18n, children } = props;
 
-  const value = useMemo<TranslationRuntime>(
-    () => ({
-      t: (key: string, options?: Record<string, unknown>) => {
-        if (i18n?.t) {
-          const result = i18n.t(key, options);
-          // If translation returns the key, it's missing in the current dictionary
-          if (result !== key) return result;
-        }
-        return t(key, options);
-      },
-      i18n: i18n ?? null,
-    }),
-    [t, i18n, i18n?.language],
-  );
+  const value: TranslationRuntime = {
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (i18n?.t) {
+        const result = i18n.t(key, options);
+        // If translation returns the key, it's missing in the current dictionary
+        if (result !== key) return result;
+      }
+      return t(key, options);
+    },
+    i18n: i18n ?? null,
+  };
 
   return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
 }

package/src/index.test.ts

@@ -19,6 +19,7 @@ const expectedRootExports = [
   "export { Field } from './components/field';",
   "export { HelperText } from './components/helper-text';",
   "export { IconButton } from './components/icon-button';",
+  "export { Icon, SUPPORTED_ICON_PROVIDERS } from './primitives/icon';",
   "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export { Label } from './components/label';",
   "export { ListItem } from './components/list-item';",

package/src/index.ts

@@ -67,8 +67,8 @@ export type { ButtonBaseProps } from './primitives/button-base';
 export { ButtonBase } from './primitives/button-base';
 export type { HeadingLevel, HeadingProps } from './primitives/heading';
 export { Heading } from './primitives/heading';
-export type { IconProps, IconProvider } from './primitives/icon';
-export { Icon } from './primitives/icon';
+export type { IconProps, IconProvider, IconSource, IconVariant } from './primitives/icon';
+export { Icon, SUPPORTED_ICON_PROVIDERS } from './primitives/icon';
 export type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';
 export { Image } from './primitives/image';
 export type { TextProps } from './primitives/text';

package/src/internal/overlay/OverlayProvider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
 
+import { resolvePointerEvents } from '../resolvePointerEvents';
 import {
   createOverlayEntry,
   type OverlayDescriptor,
@@ -10,6 +11,21 @@ import {
   sortOverlayEntries,
 } from './useOverlayStack';
 
+const boxNonePointerEvents = resolvePointerEvents('box-none');
+const styles = StyleSheet.create({
+  fill: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});
+
+function overlayZIndex(zIndex: number): ViewStyle {
+  return { zIndex };
+}
+
 export function OverlayProvider({ children }: { children: React.ReactNode }) {
   const orderRef = React.useRef(0);
   const [overlays, setOverlays] = React.useState<OverlayEntry[]>([]);
@@ -52,28 +68,12 @@ export function OverlayProvider({ children }: { children: React.ReactNode }) {
     <OverlayStackActionsContext.Provider value={actions}>
       <OverlayStackContext.Provider value={value}>
         {children}
-        <View
-          pointerEvents="box-none"
-          style={{
-            bottom: 0,
-            left: 0,
-            position: 'absolute',
-            right: 0,
-            top: 0,
-          }}
-        >
+        <View {...boxNonePointerEvents.props} style={[boxNonePointerEvents.style, styles.fill]}>
           {overlays.map((overlay) => (
             <View
+              {...boxNonePointerEvents.props}
               key={overlay.id}
-              pointerEvents="box-none"
-              style={{
-                bottom: 0,
-                left: 0,
-                position: 'absolute',
-                right: 0,
-                top: 0,
-                zIndex: overlay.zIndex,
-              }}
+              style={[boxNonePointerEvents.style, styles.fill, overlayZIndex(overlay.zIndex)]}
             >
               {overlay.node}
             </View>

package/src/internal/overlay/Portal.tsx

@@ -19,9 +19,10 @@ export function Portal({ children, layer = 'modal', visible = true }: PortalProp
     if (!overlayActions || !visible) {
       return undefined;
     }
+    const id = idRef.current;
 
     return () => {
-      overlayActions.removeOverlay(idRef.current);
+      overlayActions.removeOverlay(id);
     };
   }, [overlayActions, visible]);
 

package/src/internal/resolvePointerEvents.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolvePointerEventsForPlatform } from './resolvePointerEvents';
+
+describe('resolvePointerEvents', () => {
+  test('moves React Native Web pointer events into style', () => {
+    expect(resolvePointerEventsForPlatform('box-none', 'web')).toEqual({
+      props: {},
+      style: { pointerEvents: 'box-none' },
+    });
+  });
+
+  test('preserves the native pointer-events prop', () => {
+    expect(resolvePointerEventsForPlatform('none', 'ios')).toEqual({
+      props: { pointerEvents: 'none' },
+      style: null,
+    });
+  });
+});

package/src/internal/resolvePointerEvents.ts

@@ -0,0 +1,29 @@
+import { Platform, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+
+interface ResolvedPointerEvents {
+  props: Pick<ViewProps, 'pointerEvents'>;
+  style: StyleProp<ViewStyle>;
+}
+
+export function resolvePointerEvents(
+  pointerEvents: NonNullable<ViewProps['pointerEvents']>,
+): ResolvedPointerEvents {
+  return resolvePointerEventsForPlatform(pointerEvents, Platform.OS);
+}
+
+export function resolvePointerEventsForPlatform(
+  pointerEvents: NonNullable<ViewProps['pointerEvents']>,
+  platform: typeof Platform.OS,
+): ResolvedPointerEvents {
+  if (platform === 'web') {
+    return {
+      props: {},
+      style: { pointerEvents },
+    };
+  }
+
+  return {
+    props: { pointerEvents },
+    style: null,
+  };
+}

package/src/layout/AppBar.tsx

@@ -33,7 +33,7 @@ export function AppBar({
     topInset === 0 ? undefined : { paddingTop: topInset };
 
   return (
-    <Box {...props} bg={bg ?? theme.semantics.surface.default} style={[style]}>
+    <Box {...props} bg={bg ?? theme.semantics.surface.default} style={style}>
       <View style={safeAreaStyle}>
         <View
           style={[

package/src/layout/Box.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
-import {
-  Platform,
-  type StyleProp,
-  View,
-  type ViewProps as ReactNativeViewProps,
-  type ViewStyle,
-} from 'react-native';
+import { View, type ViewProps as ReactNativeViewProps } from 'react-native';
 
 import { useResponsiveRuntime } from '../core/responsive';
+import { resolvePointerEvents } from '../internal/resolvePointerEvents';
 import { useTheme } from '../theme/ThemeContext';
 import { type BoxStyleProps, resolveBoxStyles } from './helpers';
 
@@ -21,31 +16,6 @@ export interface BoxProps extends BoxStyleProps {
   testID?: string;
 }
 
-function resolvePointerEventsStyle(
-  pointerEvents: ReactNativeViewProps['pointerEvents'] | undefined,
-): StyleProp<ViewStyle> | null {
-  if (Platform.OS !== 'web' || pointerEvents === undefined) return null;
-
-  if (pointerEvents === 'auto' || pointerEvents === 'none') {
-    return { pointerEvents };
-  }
-
-  return null;
-}
-
-function resolveViewPointerEvents(
-  pointerEvents: ReactNativeViewProps['pointerEvents'] | undefined,
-): ReactNativeViewProps['pointerEvents'] | undefined {
-  if (pointerEvents === undefined) return undefined;
-  if (Platform.OS !== 'web') return pointerEvents;
-
-  if (pointerEvents === 'box-none' || pointerEvents === 'box-only') {
-    return pointerEvents;
-  }
-
-  return undefined;
-}
-
 export function Box({
   accessible,
   accessibilityLabel,
@@ -60,18 +30,17 @@ export function Box({
   const { theme } = useTheme();
   const { breakpoint } = useResponsiveRuntime();
   const resolved = resolveBoxStyles(theme, breakpoint, props);
-  const pointerEventsStyle = resolvePointerEventsStyle(pointerEvents);
-  const viewPointerEvents = resolveViewPointerEvents(pointerEvents);
+  const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;
 
   return (
     <View
+      {...resolvedPointerEvents?.props}
       accessible={accessible}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={accessibilityRole}
       accessibilityState={accessibilityState}
-      pointerEvents={viewPointerEvents}
       testID={testID}
-      style={[resolved, pointerEventsStyle, style]}
+      style={[resolved, resolvedPointerEvents?.style, style]}
     >
       {children}
     </View>

package/src/layout/Grid.tsx

@@ -35,7 +35,7 @@ export function Grid({
   const colSpacing = Number(resolveSpacing(theme, activeColGap) ?? 0);
   const activeMinItemWidth = resolveResponsive(minItemWidth, breakpoint);
 
-  const basisPercent = `${100 / activeCols}%`;
+  const basisPercent: `${number}%` = `${100 / activeCols}%`;
   const nodes = React.Children.toArray(children);
 
   return (
@@ -58,8 +58,8 @@ export function Grid({
                   flexGrow: 1,
                 }
               : {
-                  width: basisPercent as ViewStyle['width'],
-                  flexBasis: basisPercent as ViewStyle['flexBasis'],
+                  width: basisPercent,
+                  flexBasis: basisPercent,
                 };
 
           return (

package/src/layout/Stack.test.ts

@@ -0,0 +1,14 @@
+import { readFile } from 'node:fs/promises';
+
+import { describe, expect, it } from 'bun:test';
+
+describe('Stack layout contract', () => {
+  it('keeps authored children as direct flex items and applies spacing through gap', async () => {
+    const source = await readFile(new URL('./Stack.tsx', import.meta.url), 'utf8');
+
+    expect(source).toContain('gap: activeGap');
+    expect(source).toContain('{children}');
+    expect(source).not.toContain("from 'react-native'");
+    expect(source).not.toContain('React.Children');
+  });
+});

package/src/layout/Stack.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { View } from 'react-native';
+import type React from 'react';
 
 import { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';
 import { useTheme } from '../theme/ThemeContext';
@@ -34,14 +33,13 @@ export function Stack({
   const activeJustify = resolveResponsive(justify, breakpoint);
   const activeWrap = resolveResponsive(wrap, breakpoint);
 
-  const nodes = React.Children.toArray(children);
-
   return (
     <Box
       {...props}
       style={[
         {
           flexDirection: activeDirection,
+          gap: activeGap,
           alignItems: activeAlign,
           justifyContent: activeJustify,
           flexWrap: activeWrap,
@@ -49,19 +47,7 @@ export function Stack({
         props.style,
       ]}
     >
-      {nodes.map((node, index) => {
-        const spacing =
-          index === 0
-            ? undefined
-            : activeDirection === 'row'
-              ? { marginLeft: activeGap }
-              : { marginTop: activeGap };
-        return (
-          <View key={String(index)} style={spacing}>
-            {node}
-          </View>
-        );
-      })}
+      {children}
     </Box>
   );
 }