@ankhorage/surface 6.0.0 → 8.0.0

package/dist/{primitives/button-base/types.d.ts → types/pressable.d.ts}

@@ -1,9 +1,9 @@
 import type React from 'react';
 import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';
-import type { InteractionPolicyProps } from '../../interactionPolicy';
-import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
-import type { ViewProps } from '../../types/layout';
-export interface ButtonBaseProps extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
+import type { InteractionPolicyProps } from '../interactionPolicy';
+import type { InteractionState } from '../internal/resolvers/resolveInteractiveState';
+import type { ViewProps } from './layout';
+export interface PressableProps extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
     children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
     disabled?: boolean;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
@@ -13,4 +13,4 @@ export interface ButtonBaseProps extends Omit<ViewProps, 'children' | 'pointerEv
     accessibilityState?: AccessibilityState;
     testID?: string;
 }
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=pressable.d.ts.map

package/dist/types/pressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressable.d.ts","sourceRoot":"","sources":["../../src/types/pressable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEjG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,eAAe,CAAC,EAAE,sBAAsB;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/pressable.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=pressable.js.map

package/dist/types/pressable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressable.js","sourceRoot":"","sources":["../../src/types/pressable.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';\n\nimport type { InteractionPolicyProps } from '../interactionPolicy';\nimport type { InteractionState } from '../internal/resolvers/resolveInteractiveState';\nimport type { ViewProps } from './layout';\n\nexport interface PressableProps\n  extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {\n  children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);\n  disabled?: boolean;\n  onPress?: ((event: GestureResponderEvent) => void) | undefined;\n  onLongPress?: ((event: GestureResponderEvent) => void) | undefined;\n  accessibilityLabel?: string;\n  accessibilityRole?: AccessibilityRole;\n  accessibilityState?: AccessibilityState;\n  testID?: string;\n}\n"]}

package/dist/types/radio.d.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';
-export interface RadioProps extends Omit<ButtonBaseProps, 'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'> {
+import type { PressableProps } from './pressable';
+export interface RadioProps extends Omit<PressableProps, 'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'> {
     children?: React.ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;

package/dist/types/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/types/radio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,eAAe,EACf,mBAAmB,GAAG,oBAAoB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAC9E;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/types/radio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,cAAc,EACd,mBAAmB,GAAG,oBAAoB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAC9E;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/types/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/types/radio.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ControlSize } from '../internal/resolvers/resolveControlSize';\nimport type { ButtonBaseProps } from '../primitives/button-base';\nimport type { SurfaceColor } from '../surfaceColor';\n\nexport interface RadioProps extends Omit<\n  ButtonBaseProps,\n  'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'\n> {\n  children?: React.ReactNode;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: ((checked: boolean) => void) | undefined;\n  color?: SurfaceColor;\n  size?: ControlSize;\n  invalid?: boolean;\n  readOnly?: boolean;\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/types/radio.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ControlSize } from '../internal/resolvers/resolveControlSize';\nimport type { SurfaceColor } from '../surfaceColor';\nimport type { PressableProps } from './pressable';\n\nexport interface RadioProps extends Omit<\n  PressableProps,\n  'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'\n> {\n  children?: React.ReactNode;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: ((checked: boolean) => void) | undefined;\n  color?: SurfaceColor;\n  size?: ControlSize;\n  invalid?: boolean;\n  readOnly?: boolean;\n}\n"]}

package/dist/types/switch.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+import type { ControlSize } from '../internal/resolvers/resolveControlSize';
+import type { SurfaceColor } from '../surfaceColor';
+import type { PressableProps } from './pressable';
+export interface SwitchProps extends Omit<PressableProps, 'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'> {
+    children?: React.ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    color?: SurfaceColor;
+    size?: ControlSize;
+    invalid?: boolean;
+    readOnly?: boolean;
+}
+//# sourceMappingURL=switch.d.ts.map

package/dist/types/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/types/switch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,cAAc,EACd,mBAAmB,GAAG,oBAAoB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAC9E;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/types/switch.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=switch.js.map

package/dist/types/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/types/switch.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ControlSize } from '../internal/resolvers/resolveControlSize';\nimport type { SurfaceColor } from '../surfaceColor';\nimport type { PressableProps } from './pressable';\n\nexport interface SwitchProps extends Omit<\n  PressableProps,\n  'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'\n> {\n  children?: React.ReactNode;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: ((checked: boolean) => void) | undefined;\n  color?: SurfaceColor;\n  size?: ControlSize;\n  invalid?: boolean;\n  readOnly?: boolean;\n}\n"]}

package/package.json

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

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

@@ -7,12 +7,12 @@ import {
   resolveControlSize,
   resolveIconSize,
 } from '../../../../internal/resolvers';
-import { ButtonBase } from '../../../../primitives/button-base';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../theme/types';
 import type { ButtonProps } from '../../../../types/button';
 import { Icon } from '../../../icon/public';
 import { View } from '../../../layout/public';
+import { Pressable } from '../../../pressable/public';
 import { Text } from '../../../typography/public';
 
 /*** Renders the primary Surface action control with semantic visual states. */
@@ -34,11 +34,11 @@ export function Button({
   const controlSize = resolveControlSize(theme, size);
 
   return (
-    <ButtonBase
+    <Pressable
       {...props}
       disabled={disabled || loading}
       onPress={onPress}
-      style={resolveButtonBaseStyle(fullWidth)}
+      style={resolvePressableStyle(fullWidth)}
       testID={testID}
     >
       {(state) => (
@@ -57,7 +57,7 @@ export function Button({
           {children}
         </ButtonContent>
       )}
-    </ButtonBase>
+    </Pressable>
   );
 }
 
@@ -114,8 +114,8 @@ function ButtonContent({
   );
 }
 
-/*** Resolves the outer ButtonBase layout style. */
-function resolveButtonBaseStyle(fullWidth: boolean): ViewStyle {
+/*** Resolves the outer Pressable layout style. */
+function resolvePressableStyle(fullWidth: boolean): ViewStyle {
   return { alignSelf: fullWidth ? 'stretch' : 'flex-start' };
 }
 

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

@@ -6,11 +6,11 @@ import {
   resolveControlSize,
   resolveIconSize,
 } from '../../../../internal/resolvers';
-import { ButtonBase } from '../../../../primitives/button-base';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { IconButtonProps } from '../../../../types/button';
 import { Icon } from '../../../icon/public';
 import { View } from '../../../layout/public';
+import { Pressable } from '../../../pressable/public';
 
 /*** Renders a compact accessible icon-only action control. */
 export function IconButton({
@@ -28,7 +28,7 @@ export function IconButton({
   const controlSize = resolveControlSize(theme, size);
 
   return (
-    <ButtonBase
+    <Pressable
       {...props}
       accessibilityLabel={accessibilityLabel}
       disabled={disabled}
@@ -46,7 +46,7 @@ export function IconButton({
           </View>
         );
       }}
-    </ButtonBase>
+    </Pressable>
   );
 }
 

package/src/features/card/adapters/inbound/Card.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { ViewStyle } from 'react-native';
 
-import { ButtonBase } from '../../../../primitives/button-base';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { CardProps } from '../../../../types/card';
 import type { SurfaceVariant } from '../../../../types/surface';
+import { Pressable } from '../../../pressable/public';
 import { Surface } from '../../../surface/public';
 
 /*** Renders a themed content card with optional interactive press states. */
@@ -28,7 +28,7 @@ export function Card({
   }
 
   return (
-    <ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
+    <Pressable accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
       {(state) => (
         <Surface
           {...props}
@@ -46,7 +46,7 @@ export function Card({
           {children}
         </Surface>
       )}
-    </ButtonBase>
+    </Pressable>
   );
 }
 

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

@@ -9,12 +9,12 @@ import {
   resolveSelectionControlNextChecked,
 } from '../../../../../internal/resolvers';
 import { useControllableState } from '../../../../../internal/useControllableState';
-import { ButtonBase } from '../../../../../primitives/button-base';
-import type { ButtonBaseProps } from '../../../../../primitives/button-base/types';
 import { useTheme } from '../../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../../theme/types';
 import type { CheckboxProps } from '../../../../../types/checkbox';
 import { View } from '../../../../layout/public';
+import type { PressableProps } from '../../../../pressable/public';
+import { Pressable } from '../../../../pressable/public';
 import { Text } from '../../../../typography/public';
 
 /*** Renders a controlled or uncontrolled accessible checkbox. */
@@ -81,7 +81,7 @@ function CheckboxControl({
   });
 
   return (
-    <ButtonBase
+    <Pressable
       {...buttonProps}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="checkbox"
@@ -103,7 +103,7 @@ function CheckboxControl({
           theme,
         })
       }
-    </ButtonBase>
+    </Pressable>
   );
 }
 
@@ -181,7 +181,7 @@ function resolveCheckboxIndicatorStyle(
 
 interface CheckboxControlProps {
   accessibilityLabel: CheckboxProps['accessibilityLabel'];
-  buttonProps: ButtonBaseProps;
+  buttonProps: PressableProps;
   children: CheckboxProps['children'];
   color: NonNullable<CheckboxProps['color']>;
   disabled: boolean;

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

@@ -9,12 +9,12 @@ import {
   resolveSelectionControlNextChecked,
 } from '../../../../../internal/resolvers';
 import { useControllableState } from '../../../../../internal/useControllableState';
-import { ButtonBase } from '../../../../../primitives/button-base';
-import type { ButtonBaseProps } from '../../../../../primitives/button-base/types';
 import { useTheme } from '../../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../../theme/types';
 import type { RadioProps } from '../../../../../types/radio';
 import { View } from '../../../../layout/public';
+import type { PressableProps } from '../../../../pressable/public';
+import { Pressable } from '../../../../pressable/public';
 import { Text } from '../../../../typography/public';
 import { isRadioTextContent } from '../../utils/isRadioTextContent';
 
@@ -82,7 +82,7 @@ function RadioControl({
   });
 
   return (
-    <ButtonBase
+    <Pressable
       {...buttonProps}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="radio"
@@ -104,7 +104,7 @@ function RadioControl({
           theme,
         })
       }
-    </ButtonBase>
+    </Pressable>
   );
 }
 
@@ -188,7 +188,7 @@ function resolveRadioDotStyle(backgroundColor: string, size: number): ViewStyle
 
 interface RadioControlProps {
   accessibilityLabel: RadioProps['accessibilityLabel'];
-  buttonProps: ButtonBaseProps;
+  buttonProps: PressableProps;
   children: RadioProps['children'];
   color: NonNullable<RadioProps['color']>;
   disabled: boolean;

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 { useTheme } from '../../../../../theme/ThemeContext';
+import type { SwitchProps } from '../../../../../types/switch';
+import { View } from '../../../../layout/public';
+import { Pressable } from '../../../../pressable/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 (
+    <Pressable
+      {...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,
+        )
+      }
+    </Pressable>
+  );
+}
+
+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/list/adapters/inbound/List.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import type { ListProps } from '../../../../types/list';
+import { View } from '../../../layout/public';
+
+/*** Groups list items under one neutral Surface list boundary. */
+export function List({ children, testID }: ListProps) {
+  return <View testID={testID}>{children}</View>;
+}