@ankhorage/surface 5.0.1 → 7.0.0

package/src/index.test.ts

@@ -6,7 +6,6 @@ import type { SelectionSemantics, SurfaceColorDiagnostics } from './index';
 import { createTheme } from './theme/createTheme';
 
 const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8');
-const layoutIndexSource = readFileSync(new URL('./layout/index.ts', import.meta.url), 'utf8');
 const packageJson = JSON.parse(
   readFileSync(new URL('../package.json', import.meta.url), 'utf8'),
 ) as {
@@ -18,16 +17,20 @@ const packageJson = JSON.parse(
 };
 
 const expectedFeatureRootExports = [
+  "export { AppBar } from './features/app-bar/public';",
   "export { Badge } from './features/badge/public';",
   "export { Button, IconButton } from './features/button/public';",
   "export { Card } from './features/card/public';",
   "export { Checkbox } from './features/form/checkbox/public';",
+  "export { Field } from './features/form/field/public';",
   "export { Radio } from './features/form/radio/public';",
+  "export { Switch } from './features/form/switch/public';",
   "export { TextInput } from './features/form/text-input/public';",
   "export { Icon, SUPPORTED_ICON_PROVIDERS } from './features/icon/public';",
   "export { Image } from './features/image/public';",
   "export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';",
-  "export { Box, Container, Divider, Grid, Stack } from './features/layout/public';",
+  "export { Divider, Grid, ScrollView, View } from './features/layout/public';",
+  "export { List, ListItem } from './features/list/public';",
   "export { Modal } from './features/modal/public';",
   "export { PopoverMenu } from './features/popover-menu/public';",
   "export { Popover } from './features/popover/public';",
@@ -38,64 +41,39 @@ const expectedFeatureRootExports = [
   "export { Heading, Text } from './features/typography/public';",
 ] as const;
 
-const expectedLegacyRootExports = [
-  "export { Field } from './components/field';",
-  "export { HelperText } from './components/helper-text';",
-  "export { Label } from './components/label';",
-  "export { ListItem } from './components/list-item';",
-  "export { Switch } from './components/switch';",
-  "export { Textarea } from './components/textarea';",
+const expectedCrossCuttingRootExports = [
   "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export * from './core/responsive';",
-  "export * from './layout';",
 ] as const;
 
 describe('feature-owned root barrel contract', () => {
-  it('routes migrated UI through feature-owned public facades', () => {
+  it('routes UI through feature-owned public facades', () => {
     expectedFeatureRootExports.forEach((line) => expect(indexSource).toContain(line));
   });
 
-  it('does not retain migrated UI exports from legacy component or primitive paths', () => {
-    for (const legacyPath of [
-      './components/badge',
-      './components/button',
-      './components/card',
-      './components/checkbox',
-      './components/icon-button',
-      './components/menu',
-      './components/modal',
-      './components/radio',
-      './components/tabs',
-      './components/text-input',
-      './components/toast',
-      './components/tooltip',
-      './primitives/heading',
-      './primitives/icon',
-      './primitives/image',
-      './primitives/text',
-    ]) {
-      expect(indexSource).not.toContain(legacyPath);
-    }
-  });
-
-  it('removes migrated elements from the legacy layout facade', () => {
-    for (const name of [
-      'Box',
-      'Container',
-      'Divider',
-      'Grid',
-      'KeyboardAvoidingView',
-      'Stack',
-      'Surface',
-    ]) {
-      expect(layoutIndexSource).not.toContain(`./${name}`);
-    }
+  it('does not retain removed component or layout facades and aliases', () => {
+    expect(indexSource).not.toContain("'./components/");
+    expect(indexSource).not.toContain("'./layout");
+    expect(indexSource).not.toMatch(/\bBoxProps\b/u);
+    expect(indexSource).not.toMatch(/\bContainerProps\b/u);
+    expect(indexSource).not.toMatch(/\bStackProps\b/u);
+    expect(indexSource).not.toMatch(/\bScrollAreaProps\b/u);
+    expect(indexSource).not.toMatch(/\bTextareaProps\b/u);
+    expect(indexSource).not.toMatch(/\bHelperTextProps\b/u);
+    expect(indexSource).not.toMatch(/\bLabelProps\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bBox\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bContainer\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bStack\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bScrollArea\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bTextarea\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bHelperText\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bLabel\b/u);
   });
 });
 
 describe('remaining root barrel contract', () => {
-  it('keeps still-unmigrated UI on its current public API until its feature migration', () => {
-    expectedLegacyRootExports.forEach((line) => expect(indexSource).toContain(line));
+  it('keeps deliberate cross-cutting public APIs', () => {
+    expectedCrossCuttingRootExports.forEach((line) => expect(indexSource).toContain(line));
   });
 
   it('does not retain obsolete action-sheet, drawer, menu aliases, or navigation chrome', () => {

package/src/index.ts

@@ -1,15 +1,3 @@
-export type { FieldProps } from './components/field';
-export { Field } from './components/field';
-export type { HelperTextProps } from './components/helper-text';
-export { HelperText } from './components/helper-text';
-export type { LabelProps } from './components/label';
-export { Label } from './components/label';
-export type { ListItemProps } from './components/list-item';
-export { ListItem } from './components/list-item';
-export type { SwitchProps } from './components/switch';
-export { Switch } from './components/switch';
-export type { TextareaProps } from './components/textarea';
-export { Textarea } from './components/textarea';
 export type { FontRuntime } from './context/FontContext';
 export { FontProvider, useFontContext } from './context/FontContext';
 export type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';
@@ -30,6 +18,8 @@ export {
   AccordionItem,
   AccordionTrigger,
 } from './features/accordion/public';
+export type { AppBarProps } from './features/app-bar/public';
+export { AppBar } from './features/app-bar/public';
 export type { BadgeProps } from './features/badge/public';
 export { Badge } from './features/badge/public';
 export type { ButtonIconSpec, ButtonProps, IconButtonProps } from './features/button/public';
@@ -38,8 +28,12 @@ export type { CardProps } from './features/card/public';
 export { Card } from './features/card/public';
 export type { CheckboxProps } from './features/form/checkbox/public';
 export { Checkbox } from './features/form/checkbox/public';
+export type { FieldProps } from './features/form/field/public';
+export { Field } from './features/form/field/public';
 export type { RadioProps } from './features/form/radio/public';
 export { Radio } from './features/form/radio/public';
+export type { SwitchProps } from './features/form/switch/public';
+export { Switch } from './features/form/switch/public';
 export type { TextInputProps } from './features/form/text-input/public';
 export { TextInput } from './features/form/text-input/public';
 export type {
@@ -58,14 +52,10 @@ export type {
   KeyboardAvoidingViewProps,
 } from './features/keyboard-avoiding-view/public';
 export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
-export type {
-  BoxProps,
-  ContainerProps,
-  DividerProps,
-  GridProps,
-  StackProps,
-} from './features/layout/public';
-export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
+export type { DividerProps, GridProps, ScrollViewProps, ViewProps } from './features/layout/public';
+export { Divider, Grid, ScrollView, View } from './features/layout/public';
+export type { ListItemProps, ListProps } from './features/list/public';
+export { List, ListItem } from './features/list/public';
 export type { ModalProps } from './features/modal/public';
 export { Modal } from './features/modal/public';
 export type {
@@ -97,7 +87,6 @@ export { Tooltip } from './features/tooltip/public';
 export type { HeadingLevel, HeadingProps, TextProps } from './features/typography/public';
 export { Heading, Text } from './features/typography/public';
 export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';
-export * from './layout';
 export type { ButtonBaseProps } from './primitives/button-base';
 export { ButtonBase } from './primitives/button-base';
 export type {

package/src/primitives/button-base/ButtonBase.tsx

@@ -8,9 +8,10 @@ import {
   resolveInteractiveState,
 } from '../../internal/resolvers';
 import { useTheme } from '../../theme/ThemeContext';
-import { resolveBoxStyles } from '../../utils/resolveBoxStyles';
+import { resolveViewStyles } from '../../utils/resolveViewStyles';
 import type { ButtonBaseProps } from './types';
 
+/*** Resolves one Pressable state into the canonical Surface interaction state. */
 function getInteractionState(
   pressableState: PressableStateCallbackType,
   hovered: boolean,
@@ -25,6 +26,7 @@ function getInteractionState(
   });
 }
 
+/*** Renders the low-level token-aware Pressable boundary shared by Surface controls. */
 export function ButtonBase({
   children,
   disabled = false,
@@ -43,7 +45,7 @@ export function ButtonBase({
   const [hovered, setHovered] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
   const isWeb = Platform.OS === 'web';
-  const resolvedBoxStyles = resolveBoxStyles(theme, breakpoint, props);
+  const resolvedViewStyles = resolveViewStyles(theme, breakpoint, props);
   const passive = interactionPolicy === 'passive';
 
   return (
@@ -54,9 +56,7 @@ export function ButtonBase({
       disabled={disabled}
       onBlur={() => setFocused(false)}
       onFocus={() => {
-        if (isWeb) {
-          setFocused(true);
-        }
+        if (isWeb) setFocused(true);
       }}
       onHoverIn={isWeb ? () => setHovered(true) : undefined}
       onHoverOut={isWeb ? () => setHovered(false) : undefined}
@@ -64,9 +64,8 @@ export function ButtonBase({
       onPress={passive ? undefined : onPress}
       style={(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
-
         return [
-          resolvedBoxStyles,
+          resolvedViewStyles,
           resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),
           style,
         ];
@@ -75,7 +74,6 @@ export function ButtonBase({
     >
       {(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
-
         return typeof children === 'function' ? children(state) : children;
       }}
     </Pressable>

package/src/primitives/button-base/types.ts

@@ -3,10 +3,10 @@ import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } fro
 
 import type { InteractionPolicyProps } from '../../interactionPolicy';
 import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
-import type { BoxProps } from '../../types/layout';
+import type { ViewProps } from '../../types/layout';
 
 export interface ButtonBaseProps
-  extends Omit<BoxProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
+  extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
   children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
   disabled?: boolean;
   onPress?: ((event: GestureResponderEvent) => void) | undefined;

package/src/types/app-bar.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { ViewProps } from './layout';
+
+export interface AppBarProps extends Omit<ViewProps, 'children'> {
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  children?: React.ReactNode;
+  safeAreaTop?: boolean;
+  divider?: boolean;
+  contentStyle?: StyleProp<ViewStyle>;
+}

package/src/types/layout.ts

@@ -1,5 +1,10 @@
 import type React from 'react';
-import type { StyleProp, ViewProps as ReactNativeViewProps, ViewStyle } from 'react-native';
+import type {
+  ScrollViewProps as ReactNativeScrollViewProps,
+  StyleProp,
+  ViewProps as ReactNativeViewProps,
+  ViewStyle,
+} from 'react-native';
 
 import type { Responsive } from '../core/responsive';
 import type { SurfaceTheme } from '../theme/types';
@@ -12,7 +17,7 @@ type RadiusValue = number | RadiusToken;
 export type SpaceValue = number | SpaceToken;
 export type ColorValue = string | ColorToken;
 
-export interface BoxStyleProps {
+export interface ViewStyleProps {
   p?: Responsive<SpaceValue>;
   px?: Responsive<SpaceValue>;
   py?: Responsive<SpaceValue>;
@@ -27,6 +32,9 @@ export interface BoxStyleProps {
   mb?: Responsive<SpaceValue>;
   ml?: Responsive<SpaceValue>;
   mr?: Responsive<SpaceValue>;
+  gap?: Responsive<SpaceValue>;
+  rowGap?: Responsive<SpaceValue>;
+  columnGap?: Responsive<SpaceValue>;
   bg?: Responsive<ColorValue>;
   radius?: Responsive<RadiusValue>;
   borderWidth?: Responsive<number>;
@@ -41,6 +49,12 @@ export interface BoxStyleProps {
   flexGrow?: Responsive<number>;
   flexShrink?: Responsive<number>;
   flexBasis?: Responsive<number | string>;
+  direction?: Responsive<'row' | 'column'>;
+  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
+  justify?: Responsive<
+    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
+  >;
+  wrap?: Responsive<'nowrap' | 'wrap'>;
   alignSelf?: Responsive<ViewStyle['alignSelf']>;
   position?: Responsive<ViewStyle['position']>;
   top?: Responsive<number>;
@@ -53,7 +67,7 @@ export interface BoxStyleProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export interface BoxProps extends BoxStyleProps {
+export interface ViewProps extends ViewStyleProps {
   accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
   accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
   accessibilityState?: ReactNativeViewProps['accessibilityState'];
@@ -63,34 +77,25 @@ export interface BoxProps extends BoxStyleProps {
   testID?: string;
 }
 
-export interface ContainerProps extends Omit<BoxProps, 'children'> {
-  children?: React.ReactNode;
-  maxWidth?: Responsive<number>;
-  px?: Responsive<number | keyof SurfaceTheme['spacing']>;
-}
-
-export interface DividerProps extends Omit<BoxProps, 'bg' | 'height' | 'width'> {
+export interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {
   orientation?: 'horizontal' | 'vertical';
   color?: ColorValue;
   thickness?: number;
 }
 
-export interface GridProps extends Omit<BoxProps, 'children'> {
+export interface GridProps extends Omit<ViewProps, 'children'> {
   children?: React.ReactNode;
-  cols: Responsive<number>;
+  cols?: Responsive<number>;
   gap?: Responsive<SpaceValue>;
   rowGap?: Responsive<SpaceValue>;
   colGap?: Responsive<SpaceValue>;
   minItemWidth?: Responsive<number>;
 }
 
-export interface StackProps extends Omit<BoxProps, 'children'> {
+export interface ScrollViewProps
+  extends
+    ViewStyleProps,
+    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
   children?: React.ReactNode;
-  direction?: Responsive<'row' | 'column'>;
-  gap?: Responsive<SpaceValue>;
-  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
-  justify?: Responsive<
-    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
-  >;
-  wrap?: Responsive<'nowrap' | 'wrap'>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
 }

package/src/types/list.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+
+import type { InteractionPolicyProps } from '../interactionPolicy';
+
+export interface ListProps {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface ListItemProps extends InteractionPolicyProps {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  onPress?: (() => void) | undefined;
+  disabled?: boolean;
+  selected?: boolean;
+  compact?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+}

package/src/types/surface.ts

@@ -1,7 +1,7 @@
-import type { BoxProps } from './layout';
+import type { ViewProps } from './layout';
 
 export type SurfaceVariant = 'default' | 'subtle' | 'raised' | 'outline';
 
-export interface SurfaceProps extends Omit<BoxProps, 'bg' | 'borderColor' | 'borderWidth'> {
+export interface SurfaceProps extends Omit<ViewProps, 'bg' | 'borderColor' | 'borderWidth'> {
   variant?: SurfaceVariant;
 }

package/src/{components/switch/types.ts → types/switch.ts}

@@ -1,8 +1,8 @@
 import type React from 'react';
 
-import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
-import type { ButtonBaseProps } from '../../primitives/button-base';
-import type { SurfaceColor } from '../../surfaceColor';
+import type { ControlSize } from '../internal/resolvers/resolveControlSize';
+import type { ButtonBaseProps } from '../primitives/button-base';
+import type { SurfaceColor } from '../surfaceColor';
 
 export interface SwitchProps extends Omit<
   ButtonBaseProps,

package/src/utils/resolveViewStyles.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'bun:test';
+
+import type { SurfaceTheme } from '../theme/types';
+import { resolveViewStyles } from './resolveViewStyles';
+
+const mockTheme = {
+  spacing: { s: 4, m: 8, l: 16 },
+  radii: { m: 8 },
+  colors: { primary: '#007AFF', surface: '#FFFFFF' },
+} as unknown as SurfaceTheme;
+
+describe('resolveViewStyles spacing and responsive layout', () => {
+  test('resolves padding and margins correctly', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', { p: 's', m: 8 });
+    expect(styles.padding).toBe(4);
+    expect(styles.margin).toBe(8);
+  });
+
+  test('resolves responsive properties', () => {
+    const props = { p: { base: 's', lg: 'l' }, direction: { base: 'column', lg: 'row' } } as const;
+    expect(resolveViewStyles(mockTheme, 'base', props).padding).toBe(4);
+    expect(resolveViewStyles(mockTheme, 'base', props).flexDirection).toBe('column');
+    expect(resolveViewStyles(mockTheme, 'lg', props).padding).toBe(16);
+    expect(resolveViewStyles(mockTheme, 'lg', props).flexDirection).toBe('row');
+  });
+
+  test('resolves gap tokens with native flex layout props', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      align: 'center',
+      gap: 'm',
+      justify: 'space-between',
+      wrap: 'wrap',
+    });
+    expect(styles.alignItems).toBe('center');
+    expect(styles.gap).toBe(8);
+    expect(styles.justifyContent).toBe('space-between');
+    expect(styles.flexWrap).toBe('wrap');
+  });
+});
+
+describe('resolveViewStyles visual and dimension styles', () => {
+  test('resolves colors and border styles', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      bg: 'primary',
+      radius: 'm',
+      borderWidth: 1,
+      borderColor: 'surface',
+    });
+    expect(styles.backgroundColor).toBe('#007AFF');
+    expect(styles.borderRadius).toBe(8);
+    expect(styles.borderWidth).toBe(1);
+    expect(styles.borderColor).toBe('#FFFFFF');
+  });
+
+  test('resolves spacing tokens for dimension props and preserves raw strings', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      width: 'm',
+      minHeight: 'l',
+      maxWidth: '50%',
+    });
+    expect(styles.width).toBe(8);
+    expect(styles.minHeight).toBe(16);
+    expect(styles.maxWidth).toBe('50%');
+  });
+
+  test('handles undefined props gracefully', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {});
+    expect(styles.padding).toBeUndefined();
+    expect(styles.margin).toBeUndefined();
+  });
+});

package/src/utils/{resolveBoxStyles.ts → resolveViewStyles.ts}

@@ -4,14 +4,14 @@ import { resolveResponsive } from '../core/responsive/resolve';
 import type { Breakpoint } from '../core/responsive/types';
 import { resolveToken } from '../theme/resolveToken';
 import type { SurfaceTheme } from '../theme/types';
-import type { BoxStyleProps, ColorValue } from '../types/layout';
+import type { ColorValue, ViewStyleProps } from '../types/layout';
 import { resolveSpacing } from './resolveSpacing';
 
-/*** Resolves responsive Box style props into one React Native view style. */
-export function resolveBoxStyles(
+/*** Resolves responsive Surface View style props into one React Native view style. */
+export function resolveViewStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     elevation: 0,
@@ -22,11 +22,11 @@ export function resolveBoxStyles(
   };
 }
 
-/*** Resolves padding and margin styles from responsive spacing props. */
+/*** Resolves padding, margin, and gap styles from responsive spacing props. */
 function resolveSpacingStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     padding: resolveSpacing(theme, resolveResponsive(props.p, breakpoint)),
@@ -43,6 +43,9 @@ function resolveSpacingStyles(
     marginBottom: resolveSpacing(theme, resolveResponsive(props.mb, breakpoint)),
     marginLeft: resolveSpacing(theme, resolveResponsive(props.ml, breakpoint)),
     marginRight: resolveSpacing(theme, resolveResponsive(props.mr, breakpoint)),
+    gap: resolveSpacing(theme, resolveResponsive(props.gap, breakpoint)),
+    rowGap: resolveSpacing(theme, resolveResponsive(props.rowGap, breakpoint)),
+    columnGap: resolveSpacing(theme, resolveResponsive(props.columnGap, breakpoint)),
   };
 }
 
@@ -50,7 +53,7 @@ function resolveSpacingStyles(
 function resolveVisualStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     backgroundColor: resolveColor(theme, resolveResponsive(props.bg, breakpoint)),
@@ -64,7 +67,7 @@ function resolveVisualStyles(
 function resolveDimensionStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     width: resolveDimension(
@@ -95,12 +98,16 @@ function resolveDimensionStyles(
 }
 
 /*** Resolves responsive flex, positioning, and visibility styles. */
-function resolveLayoutStyles(breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle {
+function resolveLayoutStyles(breakpoint: Breakpoint, props: ViewStyleProps): ViewStyle {
   return {
     flex: resolveResponsive(props.flex, breakpoint),
     flexGrow: resolveResponsive(props.flexGrow, breakpoint),
     flexShrink: resolveResponsive(props.flexShrink, breakpoint),
     flexBasis: resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],
+    flexDirection: resolveResponsive(props.direction, breakpoint),
+    alignItems: resolveResponsive(props.align, breakpoint),
+    justifyContent: resolveResponsive(props.justify, breakpoint),
+    flexWrap: resolveResponsive(props.wrap, breakpoint),
     alignSelf: resolveResponsive(props.alignSelf, breakpoint),
     position: resolveResponsive(props.position, breakpoint),
     top: resolveResponsive(props.top, breakpoint),

package/src/webAcceptance.test.tsx

@@ -8,18 +8,17 @@ await mock.module('react-native', () => ReactNativeWeb);
 
 const scrollContentStyle = { padding: 4 };
 
-const { Container, Grid } = await import('./features/layout/public');
+const { Grid, ScrollView, View } = await import('./features/layout/public');
 const { KeyboardAvoidingView } = await import('./features/keyboard-avoiding-view/public');
-const { ScrollArea } = await import('./layout/ScrollArea');
-const { Show } = await import('./layout/Show');
+const { Show } = await import('./core/responsive/Show');
 const { OverlayProvider } = await import('./internal/overlay/OverlayProvider');
 const { ThemeProvider } = await import('./theme/ThemeContext');
 
 function ResponsiveAcceptanceTree() {
   return (
     <ThemeProvider>
-      <Container maxWidth={{ base: 640, md: 960 }} px={{ base: 12, md: 24 }} testID="container">
-        <ScrollArea contentContainerStyle={scrollContentStyle} testID="scroll-area">
+      <View maxWidth={{ base: 640, md: 960 }} px={{ base: 12, md: 24 }} testID="container">
+        <ScrollView contentContainerStyle={scrollContentStyle} testID="scroll-view">
           <Grid cols={{ base: 1, md: 2 }} gap={{ base: 8, md: 16 }} testID="grid">
             <ReactNativeWeb.View testID="grid-first" />
             <ReactNativeWeb.View testID="grid-second" />
@@ -30,8 +29,8 @@ function ResponsiveAcceptanceTree() {
           >
             <ReactNativeWeb.Text>wide-content</ReactNativeWeb.Text>
           </Show>
-        </ScrollArea>
-      </Container>
+        </ScrollView>
+      </View>
     </ThemeProvider>
   );
 }
@@ -40,7 +39,7 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
   const markup = renderToString(<ResponsiveAcceptanceTree />);
 
   expect(markup).toContain('data-testid="container"');
-  expect(markup).toContain('data-testid="scroll-area"');
+  expect(markup).toContain('data-testid="scroll-view"');
   expect(markup).toContain('data-testid="grid"');
   expect(markup).toContain('static-fallback');
   expect(markup).not.toContain('wide-content');
@@ -68,7 +67,7 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
     await act(async () => Promise.resolve());
 
     expect(container.querySelector('[data-testid="container"]')).not.toBeNull();
-    expect(container.querySelector('[data-testid="scroll-area"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="scroll-view"]')).not.toBeNull();
     expect(container.querySelectorAll('[data-testid^="grid-"]')).toHaveLength(2);
     expect(hydrationErrors).toEqual([]);
 

package/dist/components/field/Field.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,MAAM,GACP,EAAE,UAAU,qBAgCZ"}

package/dist/components/field/Field.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Box, Stack } from '../../features/layout/public';
-import { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';
-import { HelperText } from '../helper-text';
-import { Label } from '../label';
-export function Field({ children, label, helperText, errorText, required = false, disabled = false, invalid = false, readOnly = false, testID, }) {
-    const hasErrorText = Boolean(errorText);
-    const fieldState = resolveFieldState({
-        disabled,
-        invalid: invalid || hasErrorText,
-        readOnly,
-    });
-    const presentation = resolveFieldPresentation(fieldState);
-    return (<Stack gap="xs" testID={testID}>
-      {label ? (<Label color={presentation.labelColor} emphasis={presentation.labelEmphasis} required={required}>
-          {label}
-        </Label>) : null}
-      <Box>{children}</Box>
-      {hasErrorText ? (<HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
-          {errorText}
-        </HelperText>) : helperText ? (<HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
-          {helperText}
-        </HelperText>) : null}
-    </Stack>);
-}
-//# sourceMappingURL=Field.js.map

package/dist/components/field/Field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,MAAM,GACK;IACX,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,iBAAiB,CAAC;QACnC,QAAQ;QACR,OAAO,EAAE,OAAO,IAAI,YAAY;QAChC,QAAQ;KACT,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,wBAAwB,CAAC,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC7B;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAC/B,QAAQ,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CACrC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CACpB;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CACjF;UAAA,CAAC,SAAS,CACZ;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CACjF;UAAA,CAAC,UAAU,CACb;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Stack } from '../../features/layout/public';\nimport { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';\nimport { HelperText } from '../helper-text';\nimport { Label } from '../label';\nimport type { FieldProps } from './types';\n\nexport function Field({\n  children,\n  label,\n  helperText,\n  errorText,\n  required = false,\n  disabled = false,\n  invalid = false,\n  readOnly = false,\n  testID,\n}: FieldProps) {\n  const hasErrorText = Boolean(errorText);\n  const fieldState = resolveFieldState({\n    disabled,\n    invalid: invalid || hasErrorText,\n    readOnly,\n  });\n  const presentation = resolveFieldPresentation(fieldState);\n\n  return (\n    <Stack gap=\"xs\" testID={testID}>\n      {label ? (\n        <Label\n          color={presentation.labelColor}\n          emphasis={presentation.labelEmphasis}\n          required={required}\n        >\n          {label}\n        </Label>\n      ) : null}\n      <Box>{children}</Box>\n      {hasErrorText ? (\n        <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>\n          {errorText}\n        </HelperText>\n      ) : helperText ? (\n        <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>\n          {helperText}\n        </HelperText>\n      ) : null}\n    </Stack>\n  );\n}\n"]}