@ankhorage/surface 5.0.0 → 6.0.0

package/dist/{components/modal/types.d.ts → types/modal.d.ts}

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { InteractionPolicy } from '../../interactionPolicy';
+import type { InteractionPolicy } from '../interactionPolicy';
 export interface ModalProps {
     visible: boolean;
     onDismiss?: (() => void) | undefined;
@@ -8,4 +8,4 @@ export interface ModalProps {
     interactionPolicy?: InteractionPolicy;
     testID?: string;
 }
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/types/modal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/modal.js

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

package/dist/types/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/types/modal.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from '../interactionPolicy';\n\nexport interface ModalProps {\n  visible: boolean;\n  onDismiss?: (() => void) | undefined;\n  children?: React.ReactNode;\n  closeOnBackdrop?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  testID?: string;\n}\n"]}

package/dist/types/surface.d.ts

@@ -1,6 +1,6 @@
-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;
 }
 //# sourceMappingURL=surface.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/types/surface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,aAAa,GAAG,aAAa,CAAC;IACxF,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/types/surface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,aAAa,GAAG,aAAa,CAAC;IACzF,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B"}

package/dist/types/surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../src/types/surface.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxProps } from './layout';\n\nexport type SurfaceVariant = 'default' | 'subtle' | 'raised' | 'outline';\n\nexport interface SurfaceProps extends Omit<BoxProps, 'bg' | 'borderColor' | 'borderWidth'> {\n  variant?: SurfaceVariant;\n}\n"]}
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../src/types/surface.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from './layout';\n\nexport type SurfaceVariant = 'default' | 'subtle' | 'raised' | 'outline';\n\nexport interface SurfaceProps extends Omit<ViewProps, 'bg' | 'borderColor' | 'borderWidth'> {\n  variant?: SurfaceVariant;\n}\n"]}

package/dist/types/tabs.d.ts

@@ -0,0 +1,43 @@
+import type React from 'react';
+import type { InteractionPolicy } from '../interactionPolicy';
+export interface TabsProps {
+    children?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: ((value: string) => void) | undefined;
+    testID?: string;
+}
+export interface TabListProps {
+    children?: React.ReactNode;
+    testID?: string;
+}
+export interface TabProps {
+    value: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    interactionPolicy?: InteractionPolicy;
+    testID?: string;
+}
+export interface TabPanelProps {
+    value: string;
+    children?: React.ReactNode;
+    testID?: string;
+}
+export interface TabRegistration {
+    disabled: boolean;
+    focus: () => void;
+    value: string;
+}
+export interface TabsContextValue {
+    activeValue: string | undefined;
+    focusedValue: string | undefined;
+    getPanelId: (value: string) => string;
+    getTabId: (value: string) => string;
+    registerTab: (tab: TabRegistration) => void;
+    setActiveValue: (value: string) => void;
+    setFocusedValue: (value: string | undefined) => void;
+    tabs: readonly TabRegistration[];
+    unregisterTab: (value: string) => void;
+}
+export type TabNavigationKey = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,MAAM,gBAAgB,GAC1B,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC"}

package/dist/types/tabs.js

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

package/dist/types/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from '../interactionPolicy';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: ((value: string) => void) | undefined;\n  testID?: string;\n}\n\nexport interface TabListProps {\n  children?: React.ReactNode;\n  testID?: string;\n}\n\nexport interface TabProps {\n  value: string;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  testID?: string;\n}\n\nexport interface TabPanelProps {\n  value: string;\n  children?: React.ReactNode;\n  testID?: string;\n}\n\nexport interface TabRegistration {\n  disabled: boolean;\n  focus: () => void;\n  value: string;\n}\n\nexport interface TabsContextValue {\n  activeValue: string | undefined;\n  focusedValue: string | undefined;\n  getPanelId: (value: string) => string;\n  getTabId: (value: string) => string;\n  registerTab: (tab: TabRegistration) => void;\n  setActiveValue: (value: string) => void;\n  setFocusedValue: (value: string | undefined) => void;\n  tabs: readonly TabRegistration[];\n  unregisterTab: (value: string) => void;\n}\n\nexport type TabNavigationKey =\n  'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';\n"]}

package/dist/utils/resolveViewStyles.d.ts

@@ -0,0 +1,7 @@
+import type { ViewStyle } from 'react-native';
+import type { Breakpoint } from '../core/responsive/types';
+import type { SurfaceTheme } from '../theme/types';
+import type { ViewStyleProps } from '../types/layout';
+/*** Resolves responsive Surface View style props into one React Native view style. */
+export declare function resolveViewStyles(theme: SurfaceTheme, breakpoint: Breakpoint, props: ViewStyleProps): ViewStyle;
+//# sourceMappingURL=resolveViewStyles.d.ts.map

package/dist/utils/resolveViewStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveViewStyles.d.ts","sourceRoot":"","sources":["../../src/utils/resolveViewStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGlE,sFAAsF;AACtF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,cAAc,GACpB,SAAS,CAQX"}

package/dist/utils/{resolveBoxStyles.js → resolveViewStyles.js}

@@ -1,8 +1,8 @@
 import { resolveResponsive } from '../core/responsive/resolve';
 import { resolveToken } from '../theme/resolveToken';
 import { resolveSpacing } from './resolveSpacing';
-/*** Resolves responsive Box style props into one React Native view style. */
-export function resolveBoxStyles(theme, breakpoint, props) {
+/*** Resolves responsive Surface View style props into one React Native view style. */
+export function resolveViewStyles(theme, breakpoint, props) {
     return {
         elevation: 0,
         ...resolveSpacingStyles(theme, breakpoint, props),
@@ -11,7 +11,7 @@ export function resolveBoxStyles(theme, breakpoint, props) {
         ...resolveLayoutStyles(breakpoint, props),
     };
 }
-/*** Resolves padding and margin styles from responsive spacing props. */
+/*** Resolves padding, margin, and gap styles from responsive spacing props. */
 function resolveSpacingStyles(theme, breakpoint, props) {
     return {
         padding: resolveSpacing(theme, resolveResponsive(props.p, breakpoint)),
@@ -28,6 +28,9 @@ function resolveSpacingStyles(theme, breakpoint, props) {
         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)),
     };
 }
 /*** Resolves background, radius, and border styles. */
@@ -57,6 +60,10 @@ function resolveLayoutStyles(breakpoint, props) {
         flexGrow: resolveResponsive(props.flexGrow, breakpoint),
         flexShrink: resolveResponsive(props.flexShrink, breakpoint),
         flexBasis: resolveResponsive(props.flexBasis, breakpoint),
+        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),
@@ -80,4 +87,4 @@ function resolveColor(theme, value) {
 function resolveDimension(theme, value) {
     return resolveToken(theme.spacing, value);
 }
-//# sourceMappingURL=resolveBoxStyles.js.map
+//# sourceMappingURL=resolveViewStyles.js.map

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.0",
+  "version": "6.0.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {

package/src/components/field/Field.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';
 import { HelperText } from '../helper-text';
 import { Label } from '../label';
 import type { FieldProps } from './types';
 
+/*** Composes a label, control, and helper or error message into one field. */
 export function Field({
   children,
   label,
@@ -26,7 +27,7 @@ export function Field({
   const presentation = resolveFieldPresentation(fieldState);
 
   return (
-    <Stack gap="xs" testID={testID}>
+    <View gap="xs" testID={testID}>
       {label ? (
         <Label
           color={presentation.labelColor}
@@ -36,7 +37,7 @@ export function Field({
           {label}
         </Label>
       ) : null}
-      <Box>{children}</Box>
+      <View>{children}</View>
       {hasErrorText ? (
         <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
           {errorText}
@@ -46,6 +47,6 @@ export function Field({
           {helperText}
         </HelperText>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/components/list-item/ListItem.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View as ReactNativeView } from 'react-native';
 
-import { Box } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { ButtonBase } from '../../primitives/button-base';
 import { useTheme } from '../../theme/ThemeContext';
 import type { ListItemProps } from './types';
 
+/*** Renders the content row shared by static and interactive ListItem variants. */
 function ListItemContent({
   title,
   description,
@@ -17,7 +18,7 @@ function ListItemContent({
   const { theme } = useTheme();
 
   return (
-    <Box
+    <View
       px="m"
       py="m"
       testID={testID}
@@ -26,8 +27,10 @@ function ListItemContent({
         alignItems: 'center',
       }}
     >
-      {leading ? <View style={{ marginRight: theme.spacing.m }}>{leading}</View> : null}
-      <Box flex={1}>
+      {leading ? (
+        <ReactNativeView style={{ marginRight: theme.spacing.m }}>{leading}</ReactNativeView>
+      ) : null}
+      <View flex={1}>
         {title ? (
           <Text numberOfLines={1} variant="body" weight="medium">
             {title}
@@ -38,23 +41,24 @@ function ListItemContent({
             {description}
           </Text>
         ) : null}
-      </Box>
-      {trailing ? <View style={{ marginLeft: theme.spacing.m }}>{trailing}</View> : null}
-    </Box>
+      </View>
+      {trailing ? (
+        <ReactNativeView style={{ marginLeft: theme.spacing.m }}>{trailing}</ReactNativeView>
+      ) : null}
+    </View>
   );
 }
 
+/*** Renders a static or pressable list item. */
 export function ListItem({ onPress, disabled = false, testID, ...content }: ListItemProps) {
   const { theme } = useTheme();
 
-  if (!onPress) {
-    return <ListItemContent {...content} testID={testID} />;
-  }
+  if (!onPress) return <ListItemContent {...content} testID={testID} />;
 
   return (
     <ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
       {(state) => (
-        <Box
+        <View
           style={{
             backgroundColor: state.pressed
               ? theme.semantics.neutral.surfaceActive
@@ -65,7 +69,7 @@ export function ListItem({ onPress, disabled = false, testID, ...content }: List
           }}
         >
           <ListItemContent {...content} />
-        </Box>
+        </View>
       )}
     </ButtonBase>
   );

package/src/components/switch/Switch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import {
   resolveFieldState,
@@ -13,6 +13,7 @@ import { ButtonBase } from '../../primitives/button-base';
 import { useTheme } from '../../theme/ThemeContext';
 import type { SwitchProps } from './types';
 
+/*** Renders a controlled or uncontrolled accessible switch. */
 export function Switch({
   children,
   checked,
@@ -48,13 +49,7 @@ export function Switch({
       accessibilityRole="switch"
       accessibilityState={{ checked: isChecked }}
       disabled={disabled}
-      onPress={
-        nextChecked === null
-          ? undefined
-          : () => {
-              setChecked(nextChecked);
-            }
-      }
+      onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}
       testID={testID}
     >
       {(interactionState) => {
@@ -75,14 +70,14 @@ export function Switch({
           colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
 
         return (
-          <Box
+          <View
             style={{
               alignItems: 'center',
               flexDirection: 'row',
               opacity: colors.opacity,
             }}
           >
-            <Box
+            <View
               radius="full"
               style={{
                 backgroundColor: colors.trackColor,
@@ -95,7 +90,7 @@ export function Switch({
                 height: indicatorSize.switchHeight,
               }}
             >
-              <Box
+              <View
                 radius="full"
                 style={{
                   alignSelf: isChecked ? 'flex-end' : 'flex-start',
@@ -104,13 +99,13 @@ export function Switch({
                   width: indicatorSize.switchThumb,
                 }}
               />
-            </Box>
+            </View>
             {children ? (
-              <Box ml="s">
+              <View ml="s">
                 <Text emphasis={labelEmphasis}>{children}</Text>
-              </Box>
+              </View>
             ) : null}
-          </Box>
+          </View>
         );
       }}
     </ButtonBase>

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