@ankhorage/surface 5.0.1 → 7.0.0

package/dist/utils/resolveViewStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveViewStyles.js","sourceRoot":"","sources":["../../src/utils/resolveViewStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ViewStyle } from 'react-native';\n\nimport { resolveResponsive } from '../core/responsive/resolve';\nimport type { Breakpoint } from '../core/responsive/types';\nimport { resolveToken } from '../theme/resolveToken';\nimport type { SurfaceTheme } from '../theme/types';\nimport type { ColorValue, ViewStyleProps } from '../types/layout';\nimport { resolveSpacing } from './resolveSpacing';\n\n/*** Resolves responsive Surface View style props into one React Native view style. */\nexport function resolveViewStyles(\n  theme: SurfaceTheme,\n  breakpoint: Breakpoint,\n  props: ViewStyleProps,\n): ViewStyle {\n  return {\n    elevation: 0,\n    ...resolveSpacingStyles(theme, breakpoint, props),\n    ...resolveVisualStyles(theme, breakpoint, props),\n    ...resolveDimensionStyles(theme, breakpoint, props),\n    ...resolveLayoutStyles(breakpoint, props),\n  };\n}\n\n/*** Resolves padding, margin, and gap styles from responsive spacing props. */\nfunction resolveSpacingStyles(\n  theme: SurfaceTheme,\n  breakpoint: Breakpoint,\n  props: ViewStyleProps,\n): ViewStyle {\n  return {\n    padding: resolveSpacing(theme, resolveResponsive(props.p, breakpoint)),\n    paddingHorizontal: resolveSpacing(theme, resolveResponsive(props.px, breakpoint)),\n    paddingVertical: resolveSpacing(theme, resolveResponsive(props.py, breakpoint)),\n    paddingTop: resolveSpacing(theme, resolveResponsive(props.pt, breakpoint)),\n    paddingBottom: resolveSpacing(theme, resolveResponsive(props.pb, breakpoint)),\n    paddingLeft: resolveSpacing(theme, resolveResponsive(props.pl, breakpoint)),\n    paddingRight: resolveSpacing(theme, resolveResponsive(props.pr, breakpoint)),\n    margin: resolveSpacing(theme, resolveResponsive(props.m, breakpoint)),\n    marginHorizontal: resolveSpacing(theme, resolveResponsive(props.mx, breakpoint)),\n    marginVertical: resolveSpacing(theme, resolveResponsive(props.my, breakpoint)),\n    marginTop: resolveSpacing(theme, resolveResponsive(props.mt, breakpoint)),\n    marginBottom: resolveSpacing(theme, resolveResponsive(props.mb, breakpoint)),\n    marginLeft: resolveSpacing(theme, resolveResponsive(props.ml, breakpoint)),\n    marginRight: resolveSpacing(theme, resolveResponsive(props.mr, breakpoint)),\n    gap: resolveSpacing(theme, resolveResponsive(props.gap, breakpoint)),\n    rowGap: resolveSpacing(theme, resolveResponsive(props.rowGap, breakpoint)),\n    columnGap: resolveSpacing(theme, resolveResponsive(props.columnGap, breakpoint)),\n  };\n}\n\n/*** Resolves background, radius, and border styles. */\nfunction resolveVisualStyles(\n  theme: SurfaceTheme,\n  breakpoint: Breakpoint,\n  props: ViewStyleProps,\n): ViewStyle {\n  return {\n    backgroundColor: resolveColor(theme, resolveResponsive(props.bg, breakpoint)),\n    borderRadius: resolveRadius(theme, resolveResponsive(props.radius, breakpoint)),\n    borderWidth: resolveResponsive(props.borderWidth, breakpoint),\n    borderColor: resolveColor(theme, resolveResponsive(props.borderColor, breakpoint)),\n  };\n}\n\n/*** Resolves responsive dimension props through spacing tokens. */\nfunction resolveDimensionStyles(\n  theme: SurfaceTheme,\n  breakpoint: Breakpoint,\n  props: ViewStyleProps,\n): ViewStyle {\n  return {\n    width: resolveDimension(\n      theme,\n      resolveResponsive(props.width, breakpoint),\n    ) as ViewStyle['width'],\n    height: resolveDimension(\n      theme,\n      resolveResponsive(props.height, breakpoint),\n    ) as ViewStyle['height'],\n    minWidth: resolveDimension(\n      theme,\n      resolveResponsive(props.minWidth, breakpoint),\n    ) as ViewStyle['minWidth'],\n    maxWidth: resolveDimension(\n      theme,\n      resolveResponsive(props.maxWidth, breakpoint),\n    ) as ViewStyle['maxWidth'],\n    minHeight: resolveDimension(\n      theme,\n      resolveResponsive(props.minHeight, breakpoint),\n    ) as ViewStyle['minHeight'],\n    maxHeight: resolveDimension(\n      theme,\n      resolveResponsive(props.maxHeight, breakpoint),\n    ) as ViewStyle['maxHeight'],\n  };\n}\n\n/*** Resolves responsive flex, positioning, and visibility styles. */\nfunction resolveLayoutStyles(breakpoint: Breakpoint, props: ViewStyleProps): ViewStyle {\n  return {\n    flex: resolveResponsive(props.flex, breakpoint),\n    flexGrow: resolveResponsive(props.flexGrow, breakpoint),\n    flexShrink: resolveResponsive(props.flexShrink, breakpoint),\n    flexBasis: resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],\n    flexDirection: resolveResponsive(props.direction, breakpoint),\n    alignItems: resolveResponsive(props.align, breakpoint),\n    justifyContent: resolveResponsive(props.justify, breakpoint),\n    flexWrap: resolveResponsive(props.wrap, breakpoint),\n    alignSelf: resolveResponsive(props.alignSelf, breakpoint),\n    position: resolveResponsive(props.position, breakpoint),\n    top: resolveResponsive(props.top, breakpoint),\n    bottom: resolveResponsive(props.bottom, breakpoint),\n    left: resolveResponsive(props.left, breakpoint),\n    right: resolveResponsive(props.right, breakpoint),\n    overflow: resolveResponsive(props.overflow, breakpoint),\n    zIndex: resolveResponsive(props.zIndex, breakpoint),\n    opacity: resolveResponsive(props.opacity, breakpoint),\n  };\n}\n\n/*** Resolves a Surface radius token or raw number. */\nfunction resolveRadius(\n  theme: SurfaceTheme,\n  value: number | keyof SurfaceTheme['radii'] | undefined,\n): number | undefined {\n  return resolveToken(theme.radii, value);\n}\n\n/*** Resolves a Surface color token while preserving arbitrary color strings. */\nfunction resolveColor(theme: SurfaceTheme, value: ColorValue | undefined): string | undefined {\n  return resolveToken(theme.colors, value);\n}\n\n/*** Resolves spacing-token dimensions while preserving raw dimension strings. */\nfunction resolveDimension(\n  theme: SurfaceTheme,\n  value: number | string | undefined,\n): number | string | undefined {\n  return resolveToken(theme.spacing, value);\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "5.0.1",
+  "version": "7.0.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {

package/src/{layout → core/responsive}/Show.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';
+import { resolveResponsive } from './resolve';
+import { useResponsiveRuntime } from './ResponsiveProvider';
+import type { Responsive } from './types';
 
 export interface ShowProps {
   when: Responsive<boolean>;
@@ -8,6 +10,7 @@ export interface ShowProps {
   fallback?: React.ReactNode;
 }
 
+/*** Conditionally renders one responsive subtree or its fallback. */
 export function Show({ when, children, fallback = null }: ShowProps) {
   const { breakpoint } = useResponsiveRuntime();
   const visible = resolveResponsive(when, breakpoint) ?? false;

package/src/core/responsive/index.ts

@@ -2,5 +2,6 @@ export { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
 export { getBreakpointFromWidth } from './getBreakpointFromWidth';
 export { resolveResponsive } from './resolve';
 export { ResponsiveProvider, useResponsiveRuntime } from './ResponsiveProvider';
+export { Show, type ShowProps } from './Show';
 export type { Breakpoint, Responsive, ResponsiveRuntime } from './types';
 export { useBreakpoint } from './useBreakpoint';

package/src/features/app-bar/adapters/inbound/AppBar.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { StyleSheet, View as ReactNativeView, type ViewStyle } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { AppBarProps } from '../../../../types/app-bar';
+import { Divider, View } from '../../../layout/public';
+
+/*** Renders application chrome with optional safe-area padding and leading/trailing slots. */
+export function AppBar({
+  leading,
+  trailing,
+  children,
+  safeAreaTop = true,
+  divider = false,
+  contentStyle,
+  bg,
+  style,
+  ...props
+}: AppBarProps) {
+  const { theme } = useTheme();
+  const insets = React.use(SafeAreaInsetsContext);
+  const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
+  const safeAreaStyle: ViewStyle | undefined =
+    topInset === 0 ? undefined : { paddingTop: topInset };
+
+  return (
+    <View {...props} bg={bg ?? theme.semantics.surface.default} style={style}>
+      <ReactNativeView style={safeAreaStyle}>
+        <ReactNativeView
+          style={[styles.content, resolveHorizontalPadding(theme.spacing.m), contentStyle]}
+        >
+          {leading ? (
+            <ReactNativeView
+              style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'leading')]}
+            >
+              {leading}
+            </ReactNativeView>
+          ) : null}
+          <ReactNativeView style={styles.center}>{children}</ReactNativeView>
+          {trailing ? (
+            <ReactNativeView
+              style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'trailing')]}
+            >
+              {trailing}
+            </ReactNativeView>
+          ) : null}
+        </ReactNativeView>
+        {divider ? <Divider color={theme.semantics.neutral.divider} thickness={1} /> : null}
+      </ReactNativeView>
+    </View>
+  );
+}
+
+/*** Resolves dynamic horizontal padding for the AppBar content row. */
+function resolveHorizontalPadding(paddingHorizontal: number): ViewStyle {
+  return { paddingHorizontal };
+}
+
+/*** Resolves directional spacing for one AppBar accessory. */
+function resolveAccessoryMargin(spacing: number, position: 'leading' | 'trailing'): ViewStyle {
+  return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };
+}
+
+const styles = StyleSheet.create({
+  accessory: { flexShrink: 0 },
+  center: { flex: 1, minWidth: 0 },
+  content: { alignItems: 'center', flexDirection: 'row', minHeight: 56 },
+});

package/src/features/app-bar/public.ts

@@ -0,0 +1,2 @@
+export type { AppBarProps } from '../../types/app-bar';
+export { AppBar } from './adapters/inbound/AppBar';

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/field/adapters/inbound/Field.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {
+  type ResolvedFieldPresentation,
+  resolveFieldPresentation,
+  resolveFieldState,
+} from '../../../../../internal/resolvers';
+import type { FieldProps } from '../../../../../types/field';
+import { View } from '../../../../layout/public';
+import { Text } from '../../../../typography/public';
+
+/*** Composes a control with its label and helper or error message. */
+export function Field({
+  children,
+  label,
+  helperText,
+  errorText,
+  required = false,
+  disabled = false,
+  invalid = false,
+  readOnly = false,
+  testID,
+}: FieldProps) {
+  const hasErrorText = Boolean(errorText);
+  const presentation = resolveFieldPresentation(
+    resolveFieldState({ disabled, invalid: invalid || hasErrorText, readOnly }),
+  );
+  const message = hasErrorText ? errorText : helperText;
+
+  return (
+    <View gap="xs" testID={testID}>
+      {renderFieldLabel(label, required, presentation)}
+      <View>{children}</View>
+      {renderFieldMessage(message, presentation)}
+    </View>
+  );
+}
+
+/*** Renders an optional field label and required indicator. */
+function renderFieldLabel(
+  label: React.ReactNode,
+  required: boolean,
+  presentation: ResolvedFieldPresentation,
+) {
+  if (label === undefined || label === null) return null;
+  const labelContent =
+    typeof label === 'string' || typeof label === 'number' ? (
+      <Text
+        color={presentation.labelColor}
+        emphasis={presentation.labelEmphasis}
+        variant="label"
+        weight="medium"
+      >
+        {label}
+      </Text>
+    ) : (
+      label
+    );
+
+  return (
+    <View align="center" direction="row" gap="xs">
+      <View flex={1}>{labelContent}</View>
+      {required ? (
+        <Text color="error" variant="label" weight="medium">
+          *
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+/*** Renders an optional helper or error message using field presentation semantics. */
+function renderFieldMessage(message: React.ReactNode, presentation: ResolvedFieldPresentation) {
+  if (message === undefined || message === null || message === '') return null;
+  if (typeof message !== 'string' && typeof message !== 'number') return message;
+
+  return (
+    <Text color={presentation.helperColor} emphasis={presentation.helperEmphasis} variant="caption">
+      {message}
+    </Text>
+  );
+}

package/src/features/form/field/public.ts

@@ -0,0 +1,2 @@
+export type { FieldProps } from '../../../types/field';
+export { Field } from './adapters/inbound/Field';

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/form/switch/adapters/inbound/Switch.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import {
+  type InteractionState,
+  resolveFieldState,
+  resolveIndicatorSize,
+  resolveSelectionControlColors,
+  resolveSelectionControlNextChecked,
+} from '../../../../../internal/resolvers';
+import { useControllableState } from '../../../../../internal/useControllableState';
+import { ButtonBase } from '../../../../../primitives/button-base';
+import { useTheme } from '../../../../../theme/ThemeContext';
+import type { SwitchProps } from '../../../../../types/switch';
+import { View } from '../../../../layout/public';
+import { Text } from '../../../../typography/public';
+
+/*** Renders a controlled or uncontrolled accessible switch. */
+export function Switch({
+  children,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  color = 'primary',
+  size = 'm',
+  disabled = false,
+  invalid = false,
+  readOnly = false,
+  accessibilityLabel,
+  testID,
+  ...props
+}: SwitchProps) {
+  const { theme } = useTheme();
+  const [isChecked, setChecked] = useControllableState<boolean>({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+  const nextChecked = resolveSelectionControlNextChecked({
+    checked: isChecked,
+    disabled,
+    kind: 'switch',
+    readOnly,
+  });
+
+  return (
+    <ButtonBase
+      {...props}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isChecked }}
+      disabled={disabled}
+      onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}
+      testID={testID}
+    >
+      {(interactionState) =>
+        renderSwitchContent(
+          { children, color, disabled, invalid, isChecked, readOnly, size, theme },
+          interactionState,
+        )
+      }
+    </ButtonBase>
+  );
+}
+
+interface SwitchContentInput {
+  children: React.ReactNode;
+  color: NonNullable<SwitchProps['color']>;
+  disabled: boolean;
+  invalid: boolean;
+  isChecked: boolean;
+  readOnly: boolean;
+  size: NonNullable<SwitchProps['size']>;
+  theme: ReturnType<typeof useTheme>['theme'];
+}
+
+/*** Resolves switch presentation for one interaction state and renders the visual control. */
+function renderSwitchContent(input: SwitchContentInput, interactionState: InteractionState) {
+  const fieldState = resolveFieldState({
+    disabled: input.disabled,
+    focused: interactionState.focused,
+    invalid: input.invalid,
+    readOnly: input.readOnly,
+  });
+  const colors = resolveSelectionControlColors(input.theme, {
+    checked: input.isChecked,
+    fieldState,
+    hovered: interactionState.hovered,
+    pressed: interactionState.pressed,
+    color: input.color,
+  });
+  const indicatorSize = resolveIndicatorSize(input.size);
+  const labelEmphasis =
+    colors.labelColor === input.theme.semantics.content.muted ? 'muted' : 'default';
+
+  return (
+    <View align="center" direction="row" opacity={colors.opacity}>
+      <View
+        bg={colors.trackColor}
+        borderColor={colors.borderColor}
+        borderWidth={1}
+        height={indicatorSize.switchHeight}
+        justify="center"
+        minWidth={indicatorSize.switchWidth}
+        px={2}
+        radius="full"
+        width={indicatorSize.switchWidth}
+      >
+        <View
+          alignSelf={input.isChecked ? 'flex-end' : 'flex-start'}
+          bg={colors.thumbColor}
+          height={indicatorSize.switchThumb}
+          radius="full"
+          width={indicatorSize.switchThumb}
+        />
+      </View>
+      {input.children ? (
+        <View ml="s">
+          <Text emphasis={labelEmphasis}>{input.children}</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/features/form/switch/public.ts

@@ -0,0 +1,2 @@
+export type { SwitchProps } from '../../../types/switch';
+export { Switch } from './adapters/inbound/Switch';

package/src/features/form/text-input/adapters/inbound/TextInput.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Platform, TextInput as ReactNativeTextInput, View, type ViewStyle } from 'react-native';
+import {
+  Platform,
+  type StyleProp,
+  TextInput as ReactNativeTextInput,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
 
 import { resolveFocusRingStyles } from '../../../../../internal/resolvers';
 import { useTheme } from '../../../../../theme/ThemeContext';
@@ -39,9 +46,7 @@ export function TextInput(props: TextInputProps) {
           nativeProps.onBlur?.(event);
         }}
         onChangeText={(nextValue) => {
-          if (interactionPolicy !== 'passive') {
-            nativeProps.onChangeText?.(nextValue);
-          }
+          if (interactionPolicy !== 'passive') nativeProps.onChangeText?.(nextValue);
         }}
         onFocus={(event) => {
           setFocused(true);
@@ -49,13 +54,24 @@ export function TextInput(props: TextInputProps) {
         }}
         placeholderTextColor={presentation.placeholderColor}
         readOnly={readOnly}
-        style={[presentation.inputStyle, nativeProps.style]}
+        style={resolveInputStyle(presentation.inputStyle, nativeProps.multiline, nativeProps.style)}
       />
       {renderAccessory(trailingAccessory, presentation.accessorySpacing, 'trailing')}
     </View>
   );
 }
 
+const multilineInputStyle: TextStyle = { textAlignVertical: 'top' };
+
+/*** Resolves TextInput style composition including canonical multiline alignment. */
+function resolveInputStyle(
+  presentationStyle: StyleProp<TextStyle>,
+  multiline: boolean | undefined,
+  style: StyleProp<TextStyle>,
+): StyleProp<TextStyle> {
+  return [presentationStyle, multiline ? multilineInputStyle : undefined, style];
+}
+
 /*** Renders one optional TextInput accessory with directional spacing. */
 function renderAccessory(
   accessory: React.ReactNode,

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