@ankhorage/surface 4.2.0 → 4.2.1

package/dist/types/layout.js.map

@@ -0,0 +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"]}

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

@@ -1,7 +1,7 @@
 import type React from 'react';
-import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
-import type { ButtonBaseProps } from '../../primitives/button-base';
-import type { SurfaceColor } from '../../surfaceColor';
+import type { ControlSize } from '../internal/resolvers/resolveControlSize';
+import type { ButtonBaseProps } from '../primitives/button-base';
+import type { SurfaceColor } from '../surfaceColor';
 export interface RadioProps extends Omit<ButtonBaseProps, 'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'> {
     children?: React.ReactNode;
     checked?: boolean;
@@ -12,4 +12,4 @@ export interface RadioProps extends Omit<ButtonBaseProps, 'accessibilityRole' |
     invalid?: boolean;
     readOnly?: boolean;
 }
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +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"}

package/dist/types/radio.js

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

package/dist/types/radio.js.map

@@ -0,0 +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"]}

package/dist/types/surface.d.ts

@@ -0,0 +1,6 @@
+import type { BoxProps } from './layout';
+export type SurfaceVariant = 'default' | 'subtle' | 'raised' | 'outline';
+export interface SurfaceProps extends Omit<BoxProps, 'bg' | 'borderColor' | 'borderWidth'> {
+    variant?: SurfaceVariant;
+}
+//# sourceMappingURL=surface.d.ts.map

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

@@ -0,0 +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"}

package/dist/types/surface.js

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

package/dist/types/surface.js.map

@@ -0,0 +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"]}

package/dist/{components/text-input/types.d.ts → types/text-input.d.ts}

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { StyleProp, TextInputProps as ReactNativeTextInputProps, TextStyle } from 'react-native';
-import type { InteractionPolicy } from '../../interactionPolicy';
-import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
+import type { InteractionPolicy } from '../interactionPolicy';
+import type { ControlSize } from '../internal/resolvers/resolveControlSize';
 export interface TextInputProps extends Omit<ReactNativeTextInputProps, 'defaultValue' | 'editable' | 'onChangeText' | 'placeholderTextColor' | 'style' | 'testID' | 'value'> {
     value?: string;
     defaultValue?: string;
@@ -17,4 +17,4 @@ export interface TextInputProps extends Omit<ReactNativeTextInputProps, 'default
     style?: StyleProp<TextStyle>;
     testID?: string;
 }
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=text-input.d.ts.map

package/dist/types/text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/types/text-input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,SAAS,EACT,cAAc,IAAI,yBAAyB,EAC3C,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,yBAAyB,EACvB,cAAc,GACd,UAAU,GACV,cAAc,GACd,sBAAsB,GACtB,OAAO,GACP,QAAQ,GACR,OAAO,CACV;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/text-input.js

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

package/dist/types/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../src/types/text-input.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type {\n  StyleProp,\n  TextInputProps as ReactNativeTextInputProps,\n  TextStyle,\n} from 'react-native';\n\nimport type { InteractionPolicy } from '../interactionPolicy';\nimport type { ControlSize } from '../internal/resolvers/resolveControlSize';\n\nexport interface TextInputProps extends Omit<\n  ReactNativeTextInputProps,\n  | 'defaultValue'\n  | 'editable'\n  | 'onChangeText'\n  | 'placeholderTextColor'\n  | 'style'\n  | 'testID'\n  | 'value'\n> {\n  value?: string;\n  defaultValue?: string;\n  onChangeText?: ((text: string) => void) | undefined;\n  placeholder?: string;\n  size?: ControlSize;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  leadingAccessory?: React.ReactNode;\n  trailingAccessory?: React.ReactNode;\n  interactionPolicy?: InteractionPolicy;\n  style?: StyleProp<TextStyle>;\n  testID?: string;\n}\n"]}

package/dist/types/typography.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+import type { TextStyle } from 'react-native';
+import type { TextVariant, TextWeight } from '../internal/resolvers/resolveTextStyles';
+import type { SurfaceColor, SurfaceEmphasis } from '../surfaceColor';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps {
+    text?: string;
+    children?: React.ReactNode;
+    level?: HeadingLevel;
+    align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+    color?: SurfaceColor;
+    emphasis?: SurfaceEmphasis;
+    numberOfLines?: number;
+    i18nKey?: string;
+    testID?: string;
+}
+export interface TextProps {
+    children?: React.ReactNode;
+    i18nKey?: string;
+    variant?: TextVariant;
+    emphasis?: SurfaceEmphasis;
+    color?: SurfaceColor;
+    align?: TextStyle['textAlign'];
+    weight?: TextWeight;
+    italic?: boolean;
+    numberOfLines?: number;
+    testID?: string;
+}
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/types/typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACvF,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/typography.js

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

package/dist/types/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/types/typography.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { TextStyle } from 'react-native';\n\nimport type { TextVariant, TextWeight } from '../internal/resolvers/resolveTextStyles';\nimport type { SurfaceColor, SurfaceEmphasis } from '../surfaceColor';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HeadingProps {\n  text?: string;\n  children?: React.ReactNode;\n  level?: HeadingLevel;\n  align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  color?: SurfaceColor;\n  emphasis?: SurfaceEmphasis;\n  numberOfLines?: number;\n  i18nKey?: string;\n  testID?: string;\n}\n\nexport interface TextProps {\n  children?: React.ReactNode;\n  i18nKey?: string;\n  variant?: TextVariant;\n  emphasis?: SurfaceEmphasis;\n  color?: SurfaceColor;\n  align?: TextStyle['textAlign'];\n  weight?: TextWeight;\n  italic?: boolean;\n  numberOfLines?: number;\n  testID?: string;\n}\n"]}

package/dist/utils/resolveBoxStyles.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 { BoxStyleProps } from '../types/layout';
+/*** Resolves responsive Box style props into one React Native view style. */
+export declare function resolveBoxStyles(theme: SurfaceTheme, breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle;
+//# sourceMappingURL=resolveBoxStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveBoxStyles.d.ts","sourceRoot":"","sources":["../../src/utils/resolveBoxStyles.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,EAAE,aAAa,EAAc,MAAM,iBAAiB,CAAC;AAGjE,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,aAAa,GACnB,SAAS,CAQX"}

package/dist/utils/resolveBoxStyles.js

@@ -0,0 +1,83 @@
+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) {
+    return {
+        elevation: 0,
+        ...resolveSpacingStyles(theme, breakpoint, props),
+        ...resolveVisualStyles(theme, breakpoint, props),
+        ...resolveDimensionStyles(theme, breakpoint, props),
+        ...resolveLayoutStyles(breakpoint, props),
+    };
+}
+/*** Resolves padding and margin styles from responsive spacing props. */
+function resolveSpacingStyles(theme, breakpoint, props) {
+    return {
+        padding: resolveSpacing(theme, resolveResponsive(props.p, breakpoint)),
+        paddingHorizontal: resolveSpacing(theme, resolveResponsive(props.px, breakpoint)),
+        paddingVertical: resolveSpacing(theme, resolveResponsive(props.py, breakpoint)),
+        paddingTop: resolveSpacing(theme, resolveResponsive(props.pt, breakpoint)),
+        paddingBottom: resolveSpacing(theme, resolveResponsive(props.pb, breakpoint)),
+        paddingLeft: resolveSpacing(theme, resolveResponsive(props.pl, breakpoint)),
+        paddingRight: resolveSpacing(theme, resolveResponsive(props.pr, breakpoint)),
+        margin: resolveSpacing(theme, resolveResponsive(props.m, breakpoint)),
+        marginHorizontal: resolveSpacing(theme, resolveResponsive(props.mx, breakpoint)),
+        marginVertical: resolveSpacing(theme, resolveResponsive(props.my, breakpoint)),
+        marginTop: resolveSpacing(theme, resolveResponsive(props.mt, breakpoint)),
+        marginBottom: resolveSpacing(theme, resolveResponsive(props.mb, breakpoint)),
+        marginLeft: resolveSpacing(theme, resolveResponsive(props.ml, breakpoint)),
+        marginRight: resolveSpacing(theme, resolveResponsive(props.mr, breakpoint)),
+    };
+}
+/*** Resolves background, radius, and border styles. */
+function resolveVisualStyles(theme, breakpoint, props) {
+    return {
+        backgroundColor: resolveColor(theme, resolveResponsive(props.bg, breakpoint)),
+        borderRadius: resolveRadius(theme, resolveResponsive(props.radius, breakpoint)),
+        borderWidth: resolveResponsive(props.borderWidth, breakpoint),
+        borderColor: resolveColor(theme, resolveResponsive(props.borderColor, breakpoint)),
+    };
+}
+/*** Resolves responsive dimension props through spacing tokens. */
+function resolveDimensionStyles(theme, breakpoint, props) {
+    return {
+        width: resolveDimension(theme, resolveResponsive(props.width, breakpoint)),
+        height: resolveDimension(theme, resolveResponsive(props.height, breakpoint)),
+        minWidth: resolveDimension(theme, resolveResponsive(props.minWidth, breakpoint)),
+        maxWidth: resolveDimension(theme, resolveResponsive(props.maxWidth, breakpoint)),
+        minHeight: resolveDimension(theme, resolveResponsive(props.minHeight, breakpoint)),
+        maxHeight: resolveDimension(theme, resolveResponsive(props.maxHeight, breakpoint)),
+    };
+}
+/*** Resolves responsive flex, positioning, and visibility styles. */
+function resolveLayoutStyles(breakpoint, props) {
+    return {
+        flex: resolveResponsive(props.flex, breakpoint),
+        flexGrow: resolveResponsive(props.flexGrow, breakpoint),
+        flexShrink: resolveResponsive(props.flexShrink, breakpoint),
+        flexBasis: resolveResponsive(props.flexBasis, breakpoint),
+        alignSelf: resolveResponsive(props.alignSelf, breakpoint),
+        position: resolveResponsive(props.position, breakpoint),
+        top: resolveResponsive(props.top, breakpoint),
+        bottom: resolveResponsive(props.bottom, breakpoint),
+        left: resolveResponsive(props.left, breakpoint),
+        right: resolveResponsive(props.right, breakpoint),
+        overflow: resolveResponsive(props.overflow, breakpoint),
+        zIndex: resolveResponsive(props.zIndex, breakpoint),
+        opacity: resolveResponsive(props.opacity, breakpoint),
+    };
+}
+/*** Resolves a Surface radius token or raw number. */
+function resolveRadius(theme, value) {
+    return resolveToken(theme.radii, value);
+}
+/*** Resolves a Surface color token while preserving arbitrary color strings. */
+function resolveColor(theme, value) {
+    return resolveToken(theme.colors, value);
+}
+/*** Resolves spacing-token dimensions while preserving raw dimension strings. */
+function resolveDimension(theme, value) {
+    return resolveToken(theme.spacing, value);
+}
+//# sourceMappingURL=resolveBoxStyles.js.map

package/dist/utils/resolveBoxStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveBoxStyles.js","sourceRoot":"","sources":["../../src/utils/resolveBoxStyles.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 { BoxStyleProps, ColorValue } from '../types/layout';\nimport { resolveSpacing } from './resolveSpacing';\n\n/*** Resolves responsive Box style props into one React Native view style. */\nexport function resolveBoxStyles(\n  theme: SurfaceTheme,\n  breakpoint: Breakpoint,\n  props: BoxStyleProps,\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 and margin styles from responsive spacing props. */\nfunction resolveSpacingStyles(\n  theme: SurfaceTheme,\n  breakpoint: Breakpoint,\n  props: BoxStyleProps,\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  };\n}\n\n/*** Resolves background, radius, and border styles. */\nfunction resolveVisualStyles(\n  theme: SurfaceTheme,\n  breakpoint: Breakpoint,\n  props: BoxStyleProps,\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: BoxStyleProps,\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: BoxStyleProps): 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    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/dist/utils/resolveSpacing.d.ts

@@ -0,0 +1,5 @@
+import type { SurfaceTheme } from '../theme/types';
+import type { SpaceValue } from '../types/layout';
+/*** Resolves a numeric spacing value or a Surface spacing token. */
+export declare function resolveSpacing(theme: SurfaceTheme, value: SpaceValue | undefined): number | undefined;
+//# sourceMappingURL=resolveSpacing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSpacing.d.ts","sourceRoot":"","sources":["../../src/utils/resolveSpacing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,oEAAoE;AACpE,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,UAAU,GAAG,SAAS,GAC5B,MAAM,GAAG,SAAS,CAEpB"}

package/dist/utils/resolveSpacing.js

@@ -0,0 +1,6 @@
+import { resolveToken } from '../theme/resolveToken';
+/*** Resolves a numeric spacing value or a Surface spacing token. */
+export function resolveSpacing(theme, value) {
+    return resolveToken(theme.spacing, value);
+}
+//# sourceMappingURL=resolveSpacing.js.map

package/dist/utils/resolveSpacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSpacing.js","sourceRoot":"","sources":["../../src/utils/resolveSpacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIrD,oEAAoE;AACpE,MAAM,UAAU,cAAc,CAC5B,KAAmB,EACnB,KAA6B;IAE7B,OAAO,YAAY,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC5C,CAAC","sourcesContent":["import { resolveToken } from '../theme/resolveToken';\nimport type { SurfaceTheme } from '../theme/types';\nimport type { SpaceValue } from '../types/layout';\n\n/*** Resolves a numeric spacing value or a Surface spacing token. */\nexport function resolveSpacing(\n  theme: SurfaceTheme,\n  value: SpaceValue | undefined,\n): number | undefined {\n  return resolveToken(theme.spacing, value);\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "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,7 +1,7 @@
 import React from 'react';
 
+import { Box, Stack } from '../../features/layout/public';
 import { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';
-import { Box, Stack } from '../../layout';
 import { HelperText } from '../helper-text';
 import { Label } from '../label';
 import type { FieldProps } from './types';

package/src/components/helper-text/HelperText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text } from '../../primitives/text';
+import { Text } from '../../features/typography/public';
 import type { HelperTextProps } from './types';
 
 export function HelperText({ children, emphasis = 'muted', color, testID }: HelperTextProps) {

package/src/components/label/Label.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text } from '../../primitives/text';
+import { Text } from '../../features/typography/public';
 import type { LabelProps } from './types';
 
 export function Label({

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Box } from '../../layout';
+import { Box } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { ButtonBase } from '../../primitives/button-base';
-import { Text } from '../../primitives/text';
 import { useTheme } from '../../theme/ThemeContext';
 import type { ListItemProps } from './types';
 

package/src/components/menu/Menu.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { type LayoutRectangle, Pressable, View } from 'react-native';
 
+import { Box, Stack } from '../../features/layout/public';
+import { Surface } from '../../features/surface/public';
+import { Text } from '../../features/typography/public';
 import { FocusScope } from '../../internal/focus/FocusScope';
 import { useFocusManager } from '../../internal/focus/useFocusManager';
 import { Portal } from '../../internal/overlay/Portal';
 import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Box, Inline, Stack, Surface } from '../../layout';
+import { Inline } from '../../layout';
 import { ButtonBase } from '../../primitives/button-base';
-import { Text } from '../../primitives/text';
 import { useTheme } from '../../theme/ThemeContext';
 import { resolveNextMenuIndex } from './navigation';
 import type { MenuAction, MenuProps } from './types';

package/src/components/modal/Modal.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Pressable, View } from 'react-native';
 
+import { Surface } from '../../features/surface/public';
 import { FocusScope } from '../../internal/focus/FocusScope';
 import { Portal } from '../../internal/overlay/Portal';
 import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Center, Surface } from '../../layout';
+import { Center } from '../../layout';
 import { useTheme } from '../../theme/ThemeContext';
 import type { ModalProps } from './types';
 

package/src/components/switch/Switch.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Box } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import {
   resolveFieldState,
   resolveIndicatorSize,
@@ -7,9 +9,7 @@ import {
   resolveSelectionControlNextChecked,
 } from '../../internal/resolvers';
 import { useControllableState } from '../../internal/useControllableState';
-import { Box } from '../../layout';
 import { ButtonBase } from '../../primitives/button-base';
-import { Text } from '../../primitives/text';
 import { useTheme } from '../../theme/ThemeContext';
 import type { SwitchProps } from './types';
 

package/src/components/tabs/Tab.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Pressable } from 'react-native';
 
-import { Box } from '../../layout';
-import { Text } from '../../primitives/text';
+import { Box } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { useTheme } from '../../theme/ThemeContext';
 import { useTabsContext } from './context';
 import type { TabProps } from './types';

package/src/components/tabs/TabList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import { Box } from '../../features/layout/public';
 import { useFocusManager } from '../../internal/focus/useFocusManager';
-import { Box } from '../../layout';
 import { useTabsContext } from './context';
 import { resolveNextTabValue } from './navigation';
 import type { TabListProps } from './types';

package/src/components/tabs/Tabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import { Box } from '../../features/layout/public';
 import { useControllableState } from '../../internal/useControllableState';
-import { Box } from '../../layout';
 import { getTabId as resolveTabId, getTabPanelId as resolveTabPanelId } from './a11y';
 import { type TabRegistration, TabsContext } from './context';
 import type { TabsProps } from './types';

package/src/components/textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TextInput } from '../text-input';
+import { TextInput } from '../../features/form/text-input/public';
 import type { TextareaProps } from './types';
 
 export function Textarea({ rows = 4, numberOfLines, style, ...props }: TextareaProps) {

package/src/components/textarea/types.ts

@@ -1,4 +1,4 @@
-import type { TextInputProps } from '../text-input';
+import type { TextInputProps } from '../../types/text-input';
 
 export interface TextareaProps extends Omit<TextInputProps, 'multiline'> {
   rows?: number;

package/src/components/toast/Toast.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Pressable } from 'react-native';
 
-import { Box, Inline, Surface } from '../../layout';
-import { Text } from '../../primitives/text';
+import { Box } from '../../features/layout/public';
+import { Surface } from '../../features/surface/public';
+import { Text } from '../../features/typography/public';
+import { Inline } from '../../layout';
 import type { SurfaceColor } from '../../surfaceColor';
 import { useTheme } from '../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../theme/types';

package/src/components/toast/ToastProvider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { Stack } from '../../features/layout/public';
 import { Portal } from '../../internal/overlay/Portal';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Stack } from '../../layout';
 import { Toast } from './Toast';
 import type { ToastOptions } from './types';
 

package/src/components/tooltip/Tooltip.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { type LayoutRectangle, Platform, Pressable, View } from 'react-native';
 
+import { Surface } from '../../features/surface/public';
+import { Text } from '../../features/typography/public';
 import { Portal } from '../../internal/overlay/Portal';
 import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Surface } from '../../layout';
-import { Text } from '../../primitives/text';
 import { useTheme } from '../../theme/ThemeContext';
 import type { TooltipProps } from './types';
 

package/src/examples/DocsExamples.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import { Button } from '../components/button';
-import { Card } from '../components/card';
-import { Checkbox } from '../components/checkbox';
 import { Field } from '../components/field';
 import { HelperText } from '../components/helper-text';
 import { Menu } from '../components/menu';
 import { Modal } from '../components/modal';
 import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
-import { TextInput } from '../components/text-input';
 import { ToastProvider, useToast } from '../components/toast';
 import { Tooltip } from '../components/tooltip';
-import { Box, Stack } from '../layout';
-import { Text } from '../primitives/text';
+import { Button } from '../features/button/public';
+import { Card } from '../features/card/public';
+import { Checkbox } from '../features/form/checkbox/public';
+import { TextInput } from '../features/form/text-input/public';
+import { Box, Stack } from '../features/layout/public';
+import { Text } from '../features/typography/public';
 import { ThemeProvider } from '../theme';
 import type { ThemeConfig } from '../theme/types';
 

package/src/features/badge/adapters/inbound/Badge.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+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 { Text } from '../../../typography/public';
+
+/*** Renders compact semantic status or metadata content. */
+export function Badge({
+  content,
+  variant = 'soft',
+  color = 'primary',
+  size = 's',
+  testID,
+}: BadgeProps) {
+  const { theme } = useTheme();
+  const controlSize = resolveControlSize(theme, size);
+  const colors = resolveButtonColors(theme, {
+    variant,
+    color,
+    state: { disabled: false, focused: false, hovered: false, pressed: false },
+  });
+
+  return (
+    <Box
+      px={Math.max(theme.spacing.xs, controlSize.paddingHorizontal - 4)}
+      py={Math.max(4, controlSize.paddingVertical - 2)}
+      radius={controlSize.borderRadius}
+      style={resolveBadgeStyle(colors.backgroundColor, colors.borderColor, variant)}
+      testID={testID}
+    >
+      <Text
+        color={color}
+        emphasis={variant === 'solid' ? 'inverse' : 'default'}
+        variant="bodySmall"
+        weight="medium"
+      >
+        {content}
+      </Text>
+    </Box>
+  );
+}
+
+/*** Resolves the visual container style for one badge variant. */
+function resolveBadgeStyle(
+  backgroundColor: string,
+  borderColor: string,
+  variant: NonNullable<BadgeProps['variant']>,
+): ViewStyle {
+  return {
+    alignSelf: 'flex-start',
+    backgroundColor,
+    borderColor,
+    borderWidth: variant === 'solid' ? 0 : 1,
+  };
+}

package/src/features/badge/public.ts

@@ -0,0 +1,2 @@
+export type { BadgeProps } from '../../types/badge';
+export { Badge } from './adapters/inbound/Badge';