@ankhorage/surface 5.0.1 → 6.0.0

package/dist/primitives/button-base/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/primitives/button-base/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform, Pressable, type PressableStateCallbackType } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../core/responsive';\nimport {\n  type InteractionState,\n  resolveFocusRingStyles,\n  resolveInteractiveState,\n} from '../../internal/resolvers';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { resolveBoxStyles } from '../../utils/resolveBoxStyles';\nimport type { ButtonBaseProps } from './types';\n\nfunction getInteractionState(\n  pressableState: PressableStateCallbackType,\n  hovered: boolean,\n  focused: boolean,\n  disabled: boolean,\n): InteractionState {\n  return resolveInteractiveState({\n    pressed: pressableState.pressed,\n    hovered,\n    focused,\n    disabled,\n  });\n}\n\nexport function ButtonBase({\n  children,\n  disabled = false,\n  interactionPolicy = 'enabled',\n  onPress,\n  onLongPress,\n  accessibilityLabel,\n  accessibilityRole = 'button',\n  accessibilityState,\n  style,\n  testID,\n  ...props\n}: ButtonBaseProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const [hovered, setHovered] = React.useState(false);\n  const [focused, setFocused] = React.useState(false);\n  const isWeb = Platform.OS === 'web';\n  const resolvedBoxStyles = resolveBoxStyles(theme, breakpoint, props);\n  const passive = interactionPolicy === 'passive';\n\n  return (\n    <Pressable\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      disabled={disabled}\n      onBlur={() => setFocused(false)}\n      onFocus={() => {\n        if (isWeb) {\n          setFocused(true);\n        }\n      }}\n      onHoverIn={isWeb ? () => setHovered(true) : undefined}\n      onHoverOut={isWeb ? () => setHovered(false) : undefined}\n      onLongPress={passive ? undefined : onLongPress}\n      onPress={passive ? undefined : onPress}\n      style={(pressableState) => {\n        const state = getInteractionState(pressableState, hovered, focused, disabled);\n\n        return [\n          resolvedBoxStyles,\n          resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),\n          style,\n        ];\n      }}\n      testID={testID}\n    >\n      {(pressableState) => {\n        const state = getInteractionState(pressableState, hovered, focused, disabled);\n\n        return typeof children === 'function' ? children(state) : children;\n      }}\n    </Pressable>\n  );\n}\n"]}
+{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/primitives/button-base/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform, Pressable, type PressableStateCallbackType } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../core/responsive';\nimport {\n  type InteractionState,\n  resolveFocusRingStyles,\n  resolveInteractiveState,\n} from '../../internal/resolvers';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { resolveViewStyles } from '../../utils/resolveViewStyles';\nimport type { ButtonBaseProps } from './types';\n\n/*** Resolves one Pressable state into the canonical Surface interaction state. */\nfunction getInteractionState(\n  pressableState: PressableStateCallbackType,\n  hovered: boolean,\n  focused: boolean,\n  disabled: boolean,\n): InteractionState {\n  return resolveInteractiveState({\n    pressed: pressableState.pressed,\n    hovered,\n    focused,\n    disabled,\n  });\n}\n\n/*** Renders the low-level token-aware Pressable boundary shared by Surface controls. */\nexport function ButtonBase({\n  children,\n  disabled = false,\n  interactionPolicy = 'enabled',\n  onPress,\n  onLongPress,\n  accessibilityLabel,\n  accessibilityRole = 'button',\n  accessibilityState,\n  style,\n  testID,\n  ...props\n}: ButtonBaseProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const [hovered, setHovered] = React.useState(false);\n  const [focused, setFocused] = React.useState(false);\n  const isWeb = Platform.OS === 'web';\n  const resolvedViewStyles = resolveViewStyles(theme, breakpoint, props);\n  const passive = interactionPolicy === 'passive';\n\n  return (\n    <Pressable\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      disabled={disabled}\n      onBlur={() => setFocused(false)}\n      onFocus={() => {\n        if (isWeb) setFocused(true);\n      }}\n      onHoverIn={isWeb ? () => setHovered(true) : undefined}\n      onHoverOut={isWeb ? () => setHovered(false) : undefined}\n      onLongPress={passive ? undefined : onLongPress}\n      onPress={passive ? undefined : onPress}\n      style={(pressableState) => {\n        const state = getInteractionState(pressableState, hovered, focused, disabled);\n        return [\n          resolvedViewStyles,\n          resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),\n          style,\n        ];\n      }}\n      testID={testID}\n    >\n      {(pressableState) => {\n        const state = getInteractionState(pressableState, hovered, focused, disabled);\n        return typeof children === 'function' ? children(state) : children;\n      }}\n    </Pressable>\n  );\n}\n"]}

package/dist/primitives/button-base/types.d.ts

@@ -2,8 +2,8 @@ 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 { BoxProps } from '../../types/layout';
-export interface ButtonBaseProps extends Omit<BoxProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
+import type { ViewProps } from '../../types/layout';
+export interface ButtonBaseProps extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
     children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
     disabled?: boolean;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;

package/dist/primitives/button-base/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/primitives/button-base/types.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,yBAAyB,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,EAAE,sBAAsB;IAC5E,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/primitives/button-base/types.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,yBAAyB,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,eACf,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/primitives/button-base/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/primitives/button-base/types.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 { BoxProps } from '../../types/layout';\n\nexport interface ButtonBaseProps\n  extends Omit<BoxProps, '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"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/primitives/button-base/types.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 '../../types/layout';\n\nexport interface ButtonBaseProps\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/app-bar.d.ts

@@ -0,0 +1,12 @@
+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>;
+}
+//# sourceMappingURL=app-bar.d.ts.map

package/dist/types/app-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../src/types/app-bar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC"}

package/dist/types/app-bar.js

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

package/dist/types/app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../src/types/app-bar.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport type { ViewProps } from './layout';\n\nexport interface AppBarProps extends Omit<ViewProps, 'children'> {\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  children?: React.ReactNode;\n  safeAreaTop?: boolean;\n  divider?: boolean;\n  contentStyle?: StyleProp<ViewStyle>;\n}\n"]}

package/dist/types/layout.d.ts

@@ -1,5 +1,5 @@
 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';
 type SpaceToken = keyof SurfaceTheme['spacing'];
@@ -8,7 +8,7 @@ type ColorToken = keyof SurfaceTheme['colors'];
 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>;
@@ -23,6 +23,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>;
@@ -37,6 +40,10 @@ 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>;
@@ -48,7 +55,7 @@ export interface BoxStyleProps {
     opacity?: Responsive<number>;
     style?: StyleProp<ViewStyle>;
 }
-export interface BoxProps extends BoxStyleProps {
+export interface ViewProps extends ViewStyleProps {
     accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
     accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
     accessibilityState?: ReactNativeViewProps['accessibilityState'];
@@ -57,31 +64,22 @@ export interface BoxProps extends BoxStyleProps {
     pointerEvents?: ReactNativeViewProps['pointerEvents'];
     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>;
 }
 export {};
 //# sourceMappingURL=layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"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"}

package/dist/types/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { StyleProp, ViewProps as ReactNativeViewProps, ViewStyle } from 'react-native';\n\nimport type { Responsive } from '../core/responsive';\nimport type { SurfaceTheme } from '../theme/types';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\ntype RadiusValue = number | RadiusToken;\n\nexport type SpaceValue = number | SpaceToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface BoxStyleProps {\n  p?: Responsive<SpaceValue>;\n  px?: Responsive<SpaceValue>;\n  py?: Responsive<SpaceValue>;\n  pt?: Responsive<SpaceValue>;\n  pb?: Responsive<SpaceValue>;\n  pl?: Responsive<SpaceValue>;\n  pr?: Responsive<SpaceValue>;\n  m?: Responsive<SpaceValue>;\n  mx?: Responsive<SpaceValue>;\n  my?: Responsive<SpaceValue>;\n  mt?: Responsive<SpaceValue>;\n  mb?: Responsive<SpaceValue>;\n  ml?: Responsive<SpaceValue>;\n  mr?: Responsive<SpaceValue>;\n  bg?: Responsive<ColorValue>;\n  radius?: Responsive<RadiusValue>;\n  borderWidth?: Responsive<number>;\n  borderColor?: Responsive<ColorValue>;\n  width?: Responsive<number | string>;\n  height?: Responsive<number | string>;\n  minWidth?: Responsive<number | string>;\n  maxWidth?: Responsive<number | string>;\n  minHeight?: Responsive<number | string>;\n  maxHeight?: Responsive<number | string>;\n  flex?: Responsive<number>;\n  flexGrow?: Responsive<number>;\n  flexShrink?: Responsive<number>;\n  flexBasis?: Responsive<number | string>;\n  alignSelf?: Responsive<ViewStyle['alignSelf']>;\n  position?: Responsive<ViewStyle['position']>;\n  top?: Responsive<number>;\n  bottom?: Responsive<number>;\n  left?: Responsive<number>;\n  right?: Responsive<number>;\n  overflow?: Responsive<ViewStyle['overflow']>;\n  zIndex?: Responsive<number>;\n  opacity?: Responsive<number>;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface BoxProps extends BoxStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\nexport interface ContainerProps extends Omit<BoxProps, 'children'> {\n  children?: React.ReactNode;\n  maxWidth?: Responsive<number>;\n  px?: Responsive<number | keyof SurfaceTheme['spacing']>;\n}\n\nexport interface DividerProps extends Omit<BoxProps, 'bg' | 'height' | 'width'> {\n  orientation?: 'horizontal' | 'vertical';\n  color?: ColorValue;\n  thickness?: number;\n}\n\nexport interface GridProps extends Omit<BoxProps, 'children'> {\n  children?: React.ReactNode;\n  cols: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport interface StackProps extends Omit<BoxProps, 'children'> {\n  children?: React.ReactNode;\n  direction?: Responsive<'row' | 'column'>;\n  gap?: Responsive<SpaceValue>;\n  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n  justify?: Responsive<\n    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'\n  >;\n  wrap?: Responsive<'nowrap' | 'wrap'>;\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type {\n  ScrollViewProps as ReactNativeScrollViewProps,\n  StyleProp,\n  ViewProps as ReactNativeViewProps,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Responsive } from '../core/responsive';\nimport type { SurfaceTheme } from '../theme/types';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\ntype RadiusValue = number | RadiusToken;\n\nexport type SpaceValue = number | SpaceToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface ViewStyleProps {\n  p?: Responsive<SpaceValue>;\n  px?: Responsive<SpaceValue>;\n  py?: Responsive<SpaceValue>;\n  pt?: Responsive<SpaceValue>;\n  pb?: Responsive<SpaceValue>;\n  pl?: Responsive<SpaceValue>;\n  pr?: Responsive<SpaceValue>;\n  m?: Responsive<SpaceValue>;\n  mx?: Responsive<SpaceValue>;\n  my?: Responsive<SpaceValue>;\n  mt?: Responsive<SpaceValue>;\n  mb?: Responsive<SpaceValue>;\n  ml?: Responsive<SpaceValue>;\n  mr?: Responsive<SpaceValue>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  columnGap?: Responsive<SpaceValue>;\n  bg?: Responsive<ColorValue>;\n  radius?: Responsive<RadiusValue>;\n  borderWidth?: Responsive<number>;\n  borderColor?: Responsive<ColorValue>;\n  width?: Responsive<number | string>;\n  height?: Responsive<number | string>;\n  minWidth?: Responsive<number | string>;\n  maxWidth?: Responsive<number | string>;\n  minHeight?: Responsive<number | string>;\n  maxHeight?: Responsive<number | string>;\n  flex?: Responsive<number>;\n  flexGrow?: Responsive<number>;\n  flexShrink?: Responsive<number>;\n  flexBasis?: Responsive<number | string>;\n  direction?: Responsive<'row' | 'column'>;\n  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n  justify?: Responsive<\n    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'\n  >;\n  wrap?: Responsive<'nowrap' | 'wrap'>;\n  alignSelf?: Responsive<ViewStyle['alignSelf']>;\n  position?: Responsive<ViewStyle['position']>;\n  top?: Responsive<number>;\n  bottom?: Responsive<number>;\n  left?: Responsive<number>;\n  right?: Responsive<number>;\n  overflow?: Responsive<ViewStyle['overflow']>;\n  zIndex?: Responsive<number>;\n  opacity?: Responsive<number>;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface ViewProps extends ViewStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\nexport interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {\n  orientation?: 'horizontal' | 'vertical';\n  color?: ColorValue;\n  thickness?: number;\n}\n\nexport interface GridProps extends Omit<ViewProps, 'children'> {\n  children?: React.ReactNode;\n  cols?: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport interface ScrollViewProps\n  extends\n    ViewStyleProps,\n    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {\n  children?: React.ReactNode;\n  contentContainerStyle?: StyleProp<ViewStyle>;\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/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":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,sFAAsF;AACtF,MAAM,UAAU,iBAAiB,CAC/B,KAAmB,EACnB,UAAsB,EACtB,KAAqB;IAErB,OAAO;QACL,SAAS,EAAE,CAAC;QACZ,GAAG,oBAAoB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;QACjD,GAAG,mBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;QAChD,GAAG,sBAAsB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;QACnD,GAAG,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC;KAC1C,CAAC;AACJ,CAAC;AAED,+EAA+E;AAC/E,SAAS,oBAAoB,CAC3B,KAAmB,EACnB,UAAsB,EACtB,KAAqB;IAErB,OAAO;QACL,OAAO,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;QACtE,iBAAiB,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QACjF,eAAe,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC/E,UAAU,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC1E,aAAa,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC7E,WAAW,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC3E,YAAY,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC5E,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;QACrE,gBAAgB,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAChF,cAAc,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC9E,SAAS,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QACzE,YAAY,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC5E,UAAU,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC1E,WAAW,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC3E,GAAG,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;QACpE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC1E,SAAS,EAAE,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;KACjF,CAAC;AACJ,CAAC;AAED,uDAAuD;AACvD,SAAS,mBAAmB,CAC1B,KAAmB,EACnB,UAAsB,EACtB,KAAqB;IAErB,OAAO;QACL,eAAe,EAAE,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAC7E,YAAY,EAAE,aAAa,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC/E,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC;QAC7D,WAAW,EAAE,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;KACnF,CAAC;AACJ,CAAC;AAED,mEAAmE;AACnE,SAAS,sBAAsB,CAC7B,KAAmB,EACnB,UAAsB,EACtB,KAAqB;IAErB,OAAO;QACL,KAAK,EAAE,gBAAgB,CACrB,KAAK,EACL,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,CACrB;QACvB,MAAM,EAAE,gBAAgB,CACtB,KAAK,EACL,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,CACrB;QACxB,QAAQ,EAAE,gBAAgB,CACxB,KAAK,EACL,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAU,CAAC,CACrB;QAC1B,QAAQ,EAAE,gBAAgB,CACxB,KAAK,EACL,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAU,CAAC,CACrB;QAC1B,SAAS,EAAE,gBAAgB,CACzB,KAAK,EACL,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CACrB;QAC3B,SAAS,EAAE,gBAAgB,CACzB,KAAK,EACL,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CACrB;KAC5B,CAAC;AACJ,CAAC;AAED,qEAAqE;AACrE,SAAS,mBAAmB,CAAC,UAAsB,EAAE,KAAqB;IACxE,OAAO;QACL,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC;QAC/C,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAU,CAAC;QACvD,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAAC,UAAU,EAAE,UAAU,CAAC;QAC3D,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAA2B;QACnF,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC;QAC7D,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC;QACtD,cAAc,EAAE,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC;QAC5D,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC;QACnD,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC;QACzD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAU,CAAC;QACvD,GAAG,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,EAAE,UAAU,CAAC;QAC7C,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC;QACnD,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC;QAC/C,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC;QACjD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAU,CAAC;QACvD,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC;QACnD,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC;KACtD,CAAC;AACJ,CAAC;AAED,sDAAsD;AACtD,SAAS,aAAa,CACpB,KAAmB,EACnB,KAAuD;IAEvD,OAAO,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;AAED,gFAAgF;AAChF,SAAS,YAAY,CAAC,KAAmB,EAAE,KAA6B;IACtE,OAAO,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAC3C,CAAC;AAED,iFAAiF;AACjF,SAAS,gBAAgB,CACvB,KAAmB,EACnB,KAAkC;IAElC,OAAO,YAAY,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC5C,CAAC","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": "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';