@ankhorage/surface 4.1.0 → 4.2.1

package/src/types/icon.ts

@@ -0,0 +1,52 @@
+import type { FontAwesomeIconName } from '@react-native-vector-icons/fontawesome/static';
+import type {
+  FontAwesome5BrandIconName,
+  FontAwesome5RegularIconName,
+  FontAwesome5SolidIconName,
+} from '@react-native-vector-icons/fontawesome5/static';
+import type {
+  FontAwesome6BrandIconName,
+  FontAwesome6RegularIconName,
+  FontAwesome6SolidIconName,
+} from '@react-native-vector-icons/fontawesome6/static';
+import type { IoniconsIconName } from '@react-native-vector-icons/ionicons/static';
+import type { MaterialDesignIconsIconName } from '@react-native-vector-icons/material-design-icons/static';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import type { SurfaceTheme } from '../theme/types';
+import type { SurfaceImageSource } from './image';
+
+export type IconProvider =
+  'Ionicons' | 'FontAwesome' | 'FontAwesome5' | 'FontAwesome6' | 'MaterialDesignIcons';
+
+export type IconVariant = 'regular' | 'solid' | 'brand';
+
+export type FontIconSource =
+  | { name: IoniconsIconName; provider?: 'Ionicons'; variant?: never }
+  | { name: FontAwesomeIconName; provider: 'FontAwesome'; variant?: never }
+  | { name: FontAwesome5RegularIconName; provider: 'FontAwesome5'; variant: 'regular' }
+  | { name: FontAwesome5SolidIconName; provider: 'FontAwesome5'; variant: 'solid' }
+  | { name: FontAwesome5BrandIconName; provider: 'FontAwesome5'; variant: 'brand' }
+  | { name: FontAwesome6RegularIconName; provider: 'FontAwesome6'; variant: 'regular' }
+  | { name: FontAwesome6SolidIconName; provider: 'FontAwesome6'; variant: 'solid' }
+  | { name: FontAwesome6BrandIconName; provider: 'FontAwesome6'; variant: 'brand' }
+  | { name: MaterialDesignIconsIconName; provider: 'MaterialDesignIcons'; variant?: never };
+
+export interface SvgIconSource {
+  source: SurfaceImageSource;
+  name?: never;
+  provider?: never;
+  variant?: never;
+}
+
+export type IconSource = FontIconSource | SvgIconSource;
+
+interface IconPresentationProps {
+  size?: keyof SurfaceTheme['spacing'] | number;
+  color?: keyof SurfaceTheme['colors'] | string;
+  testID?: string;
+}
+
+export type IconProps =
+  | (FontIconSource & IconPresentationProps & { style?: StyleProp<TextStyle> })
+  | (SvgIconSource & IconPresentationProps & { style?: StyleProp<ViewStyle> });

package/src/{primitives/image/types.ts → types/image.ts}

@@ -2,13 +2,13 @@ import type {
   ImageProps as ReactNativeImageProps,
   ImageResizeMode,
   ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
 } from 'react-native';
-import type { ImageStyle, StyleProp } from 'react-native';
 
-import type { SurfaceTheme } from '../../theme/types';
+import type { SurfaceTheme } from '../theme/types';
 
 export type SurfaceImageSource = string | ImageSourcePropType;
-
 export type ImageFit = ImageResizeMode;
 
 export interface ImageProps {

package/src/types/keyboard-avoiding-view.ts

@@ -0,0 +1,6 @@
+import type { KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps } from 'react-native';
+
+export type KeyboardAvoidingViewBehavior = NonNullable<
+  ReactNativeKeyboardAvoidingViewProps['behavior']
+>;
+export type KeyboardAvoidingViewProps = ReactNativeKeyboardAvoidingViewProps;

package/src/types/layout.ts

@@ -0,0 +1,96 @@
+import type React from 'react';
+import type { 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'];
+type RadiusToken = keyof SurfaceTheme['radii'];
+type ColorToken = keyof SurfaceTheme['colors'];
+type RadiusValue = number | RadiusToken;
+
+export type SpaceValue = number | SpaceToken;
+export type ColorValue = string | ColorToken;
+
+export interface BoxStyleProps {
+  p?: Responsive<SpaceValue>;
+  px?: Responsive<SpaceValue>;
+  py?: Responsive<SpaceValue>;
+  pt?: Responsive<SpaceValue>;
+  pb?: Responsive<SpaceValue>;
+  pl?: Responsive<SpaceValue>;
+  pr?: Responsive<SpaceValue>;
+  m?: Responsive<SpaceValue>;
+  mx?: Responsive<SpaceValue>;
+  my?: Responsive<SpaceValue>;
+  mt?: Responsive<SpaceValue>;
+  mb?: Responsive<SpaceValue>;
+  ml?: Responsive<SpaceValue>;
+  mr?: Responsive<SpaceValue>;
+  bg?: Responsive<ColorValue>;
+  radius?: Responsive<RadiusValue>;
+  borderWidth?: Responsive<number>;
+  borderColor?: Responsive<ColorValue>;
+  width?: Responsive<number | string>;
+  height?: Responsive<number | string>;
+  minWidth?: Responsive<number | string>;
+  maxWidth?: Responsive<number | string>;
+  minHeight?: Responsive<number | string>;
+  maxHeight?: Responsive<number | string>;
+  flex?: Responsive<number>;
+  flexGrow?: Responsive<number>;
+  flexShrink?: Responsive<number>;
+  flexBasis?: Responsive<number | string>;
+  alignSelf?: Responsive<ViewStyle['alignSelf']>;
+  position?: Responsive<ViewStyle['position']>;
+  top?: Responsive<number>;
+  bottom?: Responsive<number>;
+  left?: Responsive<number>;
+  right?: Responsive<number>;
+  overflow?: Responsive<ViewStyle['overflow']>;
+  zIndex?: Responsive<number>;
+  opacity?: Responsive<number>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface BoxProps extends BoxStyleProps {
+  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
+  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
+  accessibilityState?: ReactNativeViewProps['accessibilityState'];
+  accessible?: ReactNativeViewProps['accessible'];
+  children?: React.ReactNode;
+  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'> {
+  orientation?: 'horizontal' | 'vertical';
+  color?: ColorValue;
+  thickness?: number;
+}
+
+export interface GridProps extends Omit<BoxProps, 'children'> {
+  children?: React.ReactNode;
+  cols: Responsive<number>;
+  gap?: Responsive<SpaceValue>;
+  rowGap?: Responsive<SpaceValue>;
+  colGap?: Responsive<SpaceValue>;
+  minItemWidth?: Responsive<number>;
+}
+
+export interface StackProps extends Omit<BoxProps, 'children'> {
+  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'>;
+}

package/src/{components/radio/types.ts → types/radio.ts}

@@ -1,8 +1,8 @@
 import type React from 'react';
 
-import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
-import type { ButtonBaseProps } from '../../primitives/button-base';
-import type { SurfaceColor } from '../../surfaceColor';
+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,

package/src/types/surface.ts

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

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

@@ -5,8 +5,8 @@ import type {
   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,

package/src/types/typography.ts

@@ -0,0 +1,32 @@
+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;
+}

package/src/{layout/helpers.test.ts → utils/resolveBoxStyles.test.ts}

@@ -1,41 +1,25 @@
 import { describe, expect, test } from 'bun:test';
 
 import type { SurfaceTheme } from '../theme/types';
-import { resolveBoxStyles } from './helpers';
+import { resolveBoxStyles } from './resolveBoxStyles';
 
 const mockTheme = {
-  spacing: {
-    s: 4,
-    m: 8,
-    l: 16,
-  },
-  radii: {
-    m: 8,
-  },
-  colors: {
-    primary: '#007AFF',
-    surface: '#FFFFFF',
-  },
+  spacing: { s: 4, m: 8, l: 16 },
+  radii: { m: 8 },
+  colors: { primary: '#007AFF', surface: '#FFFFFF' },
 } as unknown as SurfaceTheme;
 
 describe('resolveBoxStyles', () => {
   test('resolves padding and margins correctly', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', {
-      p: 's',
-      m: 8,
-    });
+    const styles = resolveBoxStyles(mockTheme, 'base', { p: 's', m: 8 });
     expect(styles.padding).toBe(4);
     expect(styles.margin).toBe(8);
   });
 
   test('resolves responsive properties', () => {
-    const props = {
-      p: { base: 's', lg: 'l' },
-    };
-    const baseStyles = resolveBoxStyles(mockTheme, 'base', props);
-    const lgStyles = resolveBoxStyles(mockTheme, 'lg', props);
-    expect(baseStyles.padding).toBe(4);
-    expect(lgStyles.padding).toBe(16);
+    const props = { p: { base: 's', lg: 'l' } } as const;
+    expect(resolveBoxStyles(mockTheme, 'base', props).padding).toBe(4);
+    expect(resolveBoxStyles(mockTheme, 'lg', props).padding).toBe(16);
   });
 
   test('resolves colors and border styles', () => {
@@ -57,7 +41,6 @@ describe('resolveBoxStyles', () => {
       minHeight: 'l',
       maxWidth: '50%',
     });
-
     expect(styles.width).toBe(8);
     expect(styles.minHeight).toBe(16);
     expect(styles.maxWidth).toBe('50%');

package/src/utils/resolveBoxStyles.ts

@@ -0,0 +1,135 @@
+import type { ViewStyle } from 'react-native';
+
+import { resolveResponsive } from '../core/responsive/resolve';
+import type { Breakpoint } from '../core/responsive/types';
+import { resolveToken } from '../theme/resolveToken';
+import type { SurfaceTheme } from '../theme/types';
+import type { BoxStyleProps, ColorValue } from '../types/layout';
+import { resolveSpacing } from './resolveSpacing';
+
+/*** Resolves responsive Box style props into one React Native view style. */
+export function resolveBoxStyles(
+  theme: SurfaceTheme,
+  breakpoint: Breakpoint,
+  props: BoxStyleProps,
+): ViewStyle {
+  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: SurfaceTheme,
+  breakpoint: Breakpoint,
+  props: BoxStyleProps,
+): ViewStyle {
+  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: SurfaceTheme,
+  breakpoint: Breakpoint,
+  props: BoxStyleProps,
+): ViewStyle {
+  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: SurfaceTheme,
+  breakpoint: Breakpoint,
+  props: BoxStyleProps,
+): ViewStyle {
+  return {
+    width: resolveDimension(
+      theme,
+      resolveResponsive(props.width, breakpoint),
+    ) as ViewStyle['width'],
+    height: resolveDimension(
+      theme,
+      resolveResponsive(props.height, breakpoint),
+    ) as ViewStyle['height'],
+    minWidth: resolveDimension(
+      theme,
+      resolveResponsive(props.minWidth, breakpoint),
+    ) as ViewStyle['minWidth'],
+    maxWidth: resolveDimension(
+      theme,
+      resolveResponsive(props.maxWidth, breakpoint),
+    ) as ViewStyle['maxWidth'],
+    minHeight: resolveDimension(
+      theme,
+      resolveResponsive(props.minHeight, breakpoint),
+    ) as ViewStyle['minHeight'],
+    maxHeight: resolveDimension(
+      theme,
+      resolveResponsive(props.maxHeight, breakpoint),
+    ) as ViewStyle['maxHeight'],
+  };
+}
+
+/*** Resolves responsive flex, positioning, and visibility styles. */
+function resolveLayoutStyles(breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle {
+  return {
+    flex: resolveResponsive(props.flex, breakpoint),
+    flexGrow: resolveResponsive(props.flexGrow, breakpoint),
+    flexShrink: resolveResponsive(props.flexShrink, breakpoint),
+    flexBasis: resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],
+    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: SurfaceTheme,
+  value: number | keyof SurfaceTheme['radii'] | undefined,
+): number | undefined {
+  return resolveToken(theme.radii, value);
+}
+
+/*** Resolves a Surface color token while preserving arbitrary color strings. */
+function resolveColor(theme: SurfaceTheme, value: ColorValue | undefined): string | undefined {
+  return resolveToken(theme.colors, value);
+}
+
+/*** Resolves spacing-token dimensions while preserving raw dimension strings. */
+function resolveDimension(
+  theme: SurfaceTheme,
+  value: number | string | undefined,
+): number | string | undefined {
+  return resolveToken(theme.spacing, value);
+}

package/src/utils/resolveSpacing.ts

@@ -0,0 +1,11 @@
+import { resolveToken } from '../theme/resolveToken';
+import type { SurfaceTheme } from '../theme/types';
+import type { SpaceValue } from '../types/layout';
+
+/*** Resolves a numeric spacing value or a Surface spacing token. */
+export function resolveSpacing(
+  theme: SurfaceTheme,
+  value: SpaceValue | undefined,
+): number | undefined {
+  return resolveToken(theme.spacing, value);
+}

package/src/webAcceptance.test.tsx

@@ -8,8 +8,8 @@ await mock.module('react-native', () => ReactNativeWeb);
 
 const scrollContentStyle = { padding: 4 };
 
-const { Container } = await import('./layout/Container');
-const { Grid } = await import('./layout/Grid');
+const { Container, Grid } = await import('./features/layout/public');
+const { KeyboardAvoidingView } = await import('./features/keyboard-avoiding-view/public');
 const { ScrollArea } = await import('./layout/ScrollArea');
 const { Show } = await import('./layout/Show');
 const { OverlayProvider } = await import('./internal/overlay/OverlayProvider');
@@ -94,3 +94,19 @@ test('RN Web 0.21 compiles box-none overlay pointer events into a hit-test-safe
   expect(markup).toContain('data-testid="interactive-content"');
   expect(markup).toContain('r-pointerEvents-');
 });
+
+test('RN Web 0.21 renders keyboard-safe content through the Surface layout boundary', () => {
+  const markup = renderToString(
+    <KeyboardAvoidingView
+      behavior="padding"
+      enabled
+      keyboardVerticalOffset={24}
+      testID="keyboard-safe"
+    >
+      <ReactNativeWeb.Text>Keyboard-safe content</ReactNativeWeb.Text>
+    </KeyboardAvoidingView>,
+  );
+
+  expect(markup).toContain('data-testid="keyboard-safe"');
+  expect(markup).toContain('Keyboard-safe content');
+});

package/dist/components/badge/Badge.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { BadgeProps } from './types';
-export declare function Badge({ content, variant, color, size, testID, }: BadgeProps): React.JSX.Element;
-//# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/Badge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,OAAgB,EAChB,KAAiB,EACjB,IAAU,EACV,MAAM,GACP,EAAE,UAAU,qBAqCZ"}

package/dist/components/badge/Badge.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { resolveButtonColors, resolveControlSize } from '../../internal/resolvers';
-import { Box } from '../../layout';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-export function Badge({ content, variant = 'soft', color = 'primary', size = 's', testID, }) {
-    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={{
-            alignSelf: 'flex-start',
-            backgroundColor: colors.backgroundColor,
-            borderColor: colors.borderColor,
-            borderWidth: variant === 'solid' ? 0 : 1,
-        }} testID={testID}>
-      <Text color={color} emphasis={variant === 'solid' ? 'inverse' : 'default'} variant="bodySmall" weight="medium">
-        {content}
-      </Text>
-    </Box>);
-}
-//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,MAAM,UAAU,KAAK,CAAC,EACpB,OAAO,EACP,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,MAAM,GACK;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,EAAE;QACxC,OAAO;QACP,KAAK;QACL,KAAK,EAAE;YACL,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;SACf;KACF,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,GAAG,CACF,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,WAAW,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,CAClE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CACjD,MAAM,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CACjC,KAAK,CAAC,CAAC;YACL,SAAS,EAAE,YAAY;YACvB,eAAe,EAAE,MAAM,CAAC,eAAe;YACvC,WAAW,EAAE,MAAM,CAAC,WAAW;YAC/B,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACzC,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACtD,OAAO,CAAC,WAAW,CACnB,MAAM,CAAC,QAAQ,CAEf;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { resolveButtonColors, resolveControlSize } from '../../internal/resolvers';\nimport { Box } from '../../layout';\nimport { Text } from '../../primitives/text';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { BadgeProps } from './types';\n\nexport function Badge({\n  content,\n  variant = 'soft',\n  color = 'primary',\n  size = 's',\n  testID,\n}: BadgeProps) {\n  const { theme } = useTheme();\n  const controlSize = resolveControlSize(theme, size);\n  const colors = resolveButtonColors(theme, {\n    variant,\n    color,\n    state: {\n      disabled: false,\n      focused: false,\n      hovered: false,\n      pressed: false,\n    },\n  });\n\n  return (\n    <Box\n      px={Math.max(theme.spacing.xs, controlSize.paddingHorizontal - 4)}\n      py={Math.max(4, controlSize.paddingVertical - 2)}\n      radius={controlSize.borderRadius}\n      style={{\n        alignSelf: 'flex-start',\n        backgroundColor: colors.backgroundColor,\n        borderColor: colors.borderColor,\n        borderWidth: variant === 'solid' ? 0 : 1,\n      }}\n      testID={testID}\n    >\n      <Text\n        color={color}\n        emphasis={variant === 'solid' ? 'inverse' : 'default'}\n        variant=\"bodySmall\"\n        weight=\"medium\"\n      >\n        {content}\n      </Text>\n    </Box>\n  );\n}\n"]}

package/dist/components/badge/index.d.ts

@@ -1,3 +0,0 @@
-export { Badge } from './Badge';
-export type { BadgeProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/badge/index.js

@@ -1,2 +0,0 @@
-export { Badge } from './Badge';
-//# sourceMappingURL=index.js.map

package/dist/components/badge/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Badge } from './Badge';\nexport type { BadgeProps } from './types';\n"]}

package/dist/components/badge/types.d.ts

@@ -1,12 +0,0 @@
-import type React from 'react';
-import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
-import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
-import type { SurfaceColor } from '../../surfaceColor';
-export interface BadgeProps {
-    content?: React.ReactNode;
-    variant?: Extract<ButtonVariant, 'solid' | 'soft' | 'outline'>;
-    color?: SurfaceColor;
-    size?: ControlSize;
-    testID?: string;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/badge/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AACvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/badge/types.js

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

package/dist/components/badge/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/badge/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ControlSize } from '../../internal/resolvers/resolveControlSize';\nimport type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';\nimport type { SurfaceColor } from '../../surfaceColor';\n\nexport interface BadgeProps {\n  content?: React.ReactNode;\n  variant?: Extract<ButtonVariant, 'solid' | 'soft' | 'outline'>;\n  color?: SurfaceColor;\n  size?: ControlSize;\n  testID?: string;\n}\n"]}

package/dist/components/button/Button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAiB,EACjB,KAAiB,EACjB,IAAU,EACV,QAAgB,EAChB,OAAe,EACf,WAAW,EACX,YAAY,EACZ,SAAiB,EACjB,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EAAE,WAAW,qBAyEb"}

package/dist/components/button/Button.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { ActivityIndicator, View } from 'react-native';
-import { resolveButtonColors, resolveControlSize, resolveIconSize } from '../../internal/resolvers';
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Icon } from '../../primitives/icon';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-export function Button({ children, variant = 'solid', color = 'primary', size = 'm', disabled = false, loading = false, leadingIcon, trailingIcon, fullWidth = false, onPress, testID, ...props }) {
-    const { theme } = useTheme();
-    const controlSize = resolveControlSize(theme, size);
-    return (<ButtonBase {...props} disabled={disabled || loading} onPress={onPress} style={{
-            alignSelf: fullWidth ? 'stretch' : 'flex-start',
-        }} testID={testID}>
-      {(state) => {
-            const colors = resolveButtonColors(theme, {
-                variant,
-                color,
-                state,
-            });
-            const textEmphasis = colors.contentColor === theme.semantics.content.muted ? 'muted' : 'default';
-            const resolvedTextColor = textEmphasis === 'muted' ? undefined : color;
-            const resolvedTextEmphasis = textEmphasis === 'muted' ? 'muted' : variant === 'solid' ? 'inverse' : 'default';
-            const iconSize = resolveIconSize(theme, size);
-            return (<Box px={controlSize.paddingHorizontal} py={controlSize.paddingVertical} radius={controlSize.borderRadius} style={{
-                    minHeight: controlSize.minHeight,
-                    width: fullWidth ? '100%' : undefined,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    backgroundColor: colors.backgroundColor,
-                    borderColor: colors.borderColor,
-                    borderWidth: variant === 'solid' ? 0 : 1,
-                    opacity: colors.opacity,
-                }}>
-            {loading ? (<ActivityIndicator color={colors.contentColor} size="small"/>) : (<>
-                {leadingIcon ? (<View style={{ marginRight: theme.spacing.s }}>
-                    <Icon {...leadingIcon} color={colors.contentColor} size={iconSize}/>
-                  </View>) : null}
-                <Text color={resolvedTextColor} emphasis={resolvedTextEmphasis} variant={controlSize.textVariant} weight="semiBold">
-                  {children}
-                </Text>
-                {trailingIcon ? (<View style={{ marginLeft: theme.spacing.s }}>
-                    <Icon {...trailingIcon} color={colors.contentColor} size={iconSize}/>
-                  </View>) : null}
-              </>)}
-          </Box>);
-        }}
-    </ButtonBase>);
-}
-//# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ActivityIndicator, View } from 'react-native';\n\nimport { resolveButtonColors, resolveControlSize, resolveIconSize } from '../../internal/resolvers';\nimport { Box } from '../../layout';\nimport { ButtonBase } from '../../primitives/button-base';\nimport { Icon } from '../../primitives/icon';\nimport { Text } from '../../primitives/text';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { ButtonProps } from './types';\n\nexport function Button({\n  children,\n  variant = 'solid',\n  color = 'primary',\n  size = 'm',\n  disabled = false,\n  loading = false,\n  leadingIcon,\n  trailingIcon,\n  fullWidth = false,\n  onPress,\n  testID,\n  ...props\n}: ButtonProps) {\n  const { theme } = useTheme();\n  const controlSize = resolveControlSize(theme, size);\n\n  return (\n    <ButtonBase\n      {...props}\n      disabled={disabled || loading}\n      onPress={onPress}\n      style={{\n        alignSelf: fullWidth ? 'stretch' : 'flex-start',\n      }}\n      testID={testID}\n    >\n      {(state) => {\n        const colors = resolveButtonColors(theme, {\n          variant,\n          color,\n          state,\n        });\n        const textEmphasis =\n          colors.contentColor === theme.semantics.content.muted ? 'muted' : 'default';\n        const resolvedTextColor = textEmphasis === 'muted' ? undefined : color;\n        const resolvedTextEmphasis =\n          textEmphasis === 'muted' ? 'muted' : variant === 'solid' ? 'inverse' : 'default';\n        const iconSize = resolveIconSize(theme, size);\n\n        return (\n          <Box\n            px={controlSize.paddingHorizontal}\n            py={controlSize.paddingVertical}\n            radius={controlSize.borderRadius}\n            style={{\n              minHeight: controlSize.minHeight,\n              width: fullWidth ? '100%' : undefined,\n              flexDirection: 'row',\n              alignItems: 'center',\n              justifyContent: 'center',\n              backgroundColor: colors.backgroundColor,\n              borderColor: colors.borderColor,\n              borderWidth: variant === 'solid' ? 0 : 1,\n              opacity: colors.opacity,\n            }}\n          >\n            {loading ? (\n              <ActivityIndicator color={colors.contentColor} size=\"small\" />\n            ) : (\n              <>\n                {leadingIcon ? (\n                  <View style={{ marginRight: theme.spacing.s }}>\n                    <Icon {...leadingIcon} color={colors.contentColor} size={iconSize} />\n                  </View>\n                ) : null}\n                <Text\n                  color={resolvedTextColor}\n                  emphasis={resolvedTextEmphasis}\n                  variant={controlSize.textVariant}\n                  weight=\"semiBold\"\n                >\n                  {children}\n                </Text>\n                {trailingIcon ? (\n                  <View style={{ marginLeft: theme.spacing.s }}>\n                    <Icon {...trailingIcon} color={colors.contentColor} size={iconSize} />\n                  </View>\n                ) : null}\n              </>\n            )}\n          </Box>\n        );\n      }}\n    </ButtonBase>\n  );\n}\n"]}

package/dist/components/button/index.d.ts

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export type { ButtonIconSpec, ButtonProps } from './types';
-//# sourceMappingURL=index.d.ts.map