@ankhorage/surface 6.0.0 → 8.0.0

package/src/features/list/adapters/inbound/ListItem.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { SurfaceTheme } from '../../../../theme/types';
+import type { ListItemProps } from '../../../../types/list';
+import { View } from '../../../layout/public';
+import { Pressable } from '../../../pressable/public';
+import { Text } from '../../../typography/public';
+
+/*** Renders a static or interactive list item with shared row geometry and interaction states. */
+export function ListItem(props: ListItemProps) {
+  const { theme } = useTheme();
+  if (!props.onPress) return renderStaticListItem(props, theme);
+  return renderInteractiveListItem({ ...props, onPress: props.onPress }, theme);
+}
+
+/*** Renders a non-pressable list item. */
+function renderStaticListItem(props: ListItemProps, theme: SurfaceTheme) {
+  return (
+    <ListItemContent
+      {...props}
+      backgroundColor={props.selected ? theme.semantics.selection.background : 'transparent'}
+    />
+  );
+}
+
+/*** Renders a pressable list item with shared interaction-state presentation. */
+function renderInteractiveListItem(
+  props: ListItemProps & { onPress: NonNullable<ListItemProps['onPress']> },
+  theme: SurfaceTheme,
+) {
+  return (
+    <Pressable
+      accessibilityLabel={props.accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: props.disabled ?? false, selected: props.selected ?? false }}
+      disabled={props.disabled ?? false}
+      interactionPolicy={props.interactionPolicy}
+      onPress={props.onPress}
+      testID={props.testID}
+    >
+      {(state) => (
+        <ListItemContent
+          {...props}
+          backgroundColor={resolveListItemBackground(theme, {
+            hovered: state.hovered,
+            pressed: state.pressed,
+            selected: props.selected ?? false,
+          })}
+          disabled={state.disabled}
+          testID={undefined}
+        />
+      )}
+    </Pressable>
+  );
+}
+
+interface ListItemBackgroundState {
+  hovered: boolean;
+  pressed: boolean;
+  selected: boolean;
+}
+
+type ListItemContentProps = Omit<
+  ListItemProps,
+  'accessibilityLabel' | 'interactionPolicy' | 'onPress' | 'selected'
+> & {
+  backgroundColor: string;
+};
+
+/*** Resolves the neutral list-item background for one interaction state. */
+function resolveListItemBackground(theme: SurfaceTheme, state: ListItemBackgroundState) {
+  if (state.pressed) return theme.semantics.neutral.surfaceActive;
+  if (state.hovered) return theme.semantics.neutral.surfaceHover;
+  if (state.selected) return theme.semantics.selection.background;
+  return 'transparent';
+}
+
+/*** Renders the shared visual row content for static and interactive list items. */
+function ListItemContent({
+  backgroundColor,
+  children,
+  compact = false,
+  description,
+  disabled = false,
+  leading,
+  testID,
+  title,
+  trailing,
+}: ListItemContentProps) {
+  const content = children ?? renderDefaultContent(title, description);
+
+  return (
+    <View
+      align="center"
+      bg={backgroundColor}
+      direction="row"
+      gap="m"
+      opacity={disabled ? 0.72 : 1}
+      px="m"
+      py={compact ? 's' : 'm'}
+      testID={testID}
+    >
+      {leading !== undefined ? <View>{leading}</View> : null}
+      <View flex={1}>{content}</View>
+      {trailing !== undefined ? <View>{trailing}</View> : null}
+    </View>
+  );
+}
+
+/*** Renders the default title and description content when custom children are absent. */
+function renderDefaultContent(title: React.ReactNode, description: React.ReactNode) {
+  if (title === undefined && description === undefined) return null;
+  return (
+    <View flex={1} gap="xs">
+      {title !== undefined ? (
+        <Text numberOfLines={1} variant="body" weight="medium">
+          {title}
+        </Text>
+      ) : null}
+      {description !== undefined ? (
+        <Text emphasis="muted" numberOfLines={2} variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/features/list/public.test.ts

@@ -0,0 +1,13 @@
+import { expect, test } from 'bun:test';
+
+test('list capability owns List and ListItem under one feature boundary', async () => {
+  const listSource = await Bun.file('src/features/list/adapters/inbound/List.tsx').text();
+  const listItemSource = await Bun.file('src/features/list/adapters/inbound/ListItem.tsx').text();
+
+  expect(listSource).toContain('export function List');
+  expect(listItemSource).toContain('export function ListItem');
+  expect(listItemSource).toContain('interactionPolicy={props.interactionPolicy}');
+  expect(listItemSource).toContain('selected');
+  expect(listItemSource).toContain('compact');
+  expect(listItemSource).not.toContain('components/list-item');
+});

package/src/features/list/public.ts

@@ -0,0 +1,3 @@
+export type { ListItemProps, ListProps } from '../../types/list';
+export { List } from './adapters/inbound/List';
+export { ListItem } from './adapters/inbound/ListItem';

package/src/{primitives/button-base/ButtonBase.tsx → features/pressable/adapters/inbound/Pressable.tsx}

@@ -1,33 +1,22 @@
 import React from 'react';
-import { Platform, Pressable, type PressableStateCallbackType } from 'react-native';
+import {
+  Platform,
+  Pressable as ReactNativePressable,
+  type PressableStateCallbackType,
+} from 'react-native';
 
-import { useResponsiveRuntime } from '../../core/responsive';
+import { useResponsiveRuntime } from '../../../../core/responsive';
 import {
   type InteractionState,
   resolveFocusRingStyles,
   resolveInteractiveState,
-} from '../../internal/resolvers';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveViewStyles } from '../../utils/resolveViewStyles';
-import type { ButtonBaseProps } from './types';
+} from '../../../../internal/resolvers';
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { PressableProps } from '../../../../types/pressable';
+import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
 
-/*** Resolves one Pressable state into the canonical Surface interaction state. */
-function getInteractionState(
-  pressableState: PressableStateCallbackType,
-  hovered: boolean,
-  focused: boolean,
-  disabled: boolean,
-): InteractionState {
-  return resolveInteractiveState({
-    pressed: pressableState.pressed,
-    hovered,
-    focused,
-    disabled,
-  });
-}
-
-/*** Renders the low-level token-aware Pressable boundary shared by Surface controls. */
-export function ButtonBase({
+/*** Renders the token-aware Surface adapter for React Native Pressable. */
+export function Pressable({
   children,
   disabled = false,
   interactionPolicy = 'enabled',
@@ -39,17 +28,18 @@ export function ButtonBase({
   style,
   testID,
   ...props
-}: ButtonBaseProps) {
+}: PressableProps) {
   const { theme } = useTheme();
   const { breakpoint } = useResponsiveRuntime();
   const [hovered, setHovered] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
   const isWeb = Platform.OS === 'web';
   const resolvedViewStyles = resolveViewStyles(theme, breakpoint, props);
-  const passive = interactionPolicy === 'passive';
+  const pressHandlers = resolvePressHandlers(interactionPolicy, onPress, onLongPress);
 
   return (
-    <Pressable
+    <ReactNativePressable
+      {...pressHandlers}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={accessibilityRole}
       accessibilityState={{ ...accessibilityState, disabled }}
@@ -60,10 +50,8 @@ export function ButtonBase({
       }}
       onHoverIn={isWeb ? () => setHovered(true) : undefined}
       onHoverOut={isWeb ? () => setHovered(false) : undefined}
-      onLongPress={passive ? undefined : onLongPress}
-      onPress={passive ? undefined : onPress}
       style={(pressableState) => {
-        const state = getInteractionState(pressableState, hovered, focused, disabled);
+        const state = resolveInteractionState(pressableState, hovered, focused, disabled);
         return [
           resolvedViewStyles,
           resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),
@@ -73,9 +61,35 @@ export function ButtonBase({
       testID={testID}
     >
       {(pressableState) => {
-        const state = getInteractionState(pressableState, hovered, focused, disabled);
+        const state = resolveInteractionState(pressableState, hovered, focused, disabled);
         return typeof children === 'function' ? children(state) : children;
       }}
-    </Pressable>
+    </ReactNativePressable>
   );
 }
+
+/*** Resolves press handlers according to the shared interaction policy. */
+function resolvePressHandlers(
+  interactionPolicy: PressableProps['interactionPolicy'],
+  onPress: PressableProps['onPress'],
+  onLongPress: PressableProps['onLongPress'],
+) {
+  return interactionPolicy === 'passive'
+    ? { onLongPress: undefined, onPress: undefined }
+    : { onLongPress, onPress };
+}
+
+/*** Resolves one native Pressable state into the canonical Surface interaction state. */
+function resolveInteractionState(
+  pressableState: PressableStateCallbackType,
+  hovered: boolean,
+  focused: boolean,
+  disabled: boolean,
+): InteractionState {
+  return resolveInteractiveState({
+    pressed: pressableState.pressed,
+    hovered,
+    focused,
+    disabled,
+  });
+}

package/src/features/pressable/public.ts

@@ -0,0 +1,2 @@
+export type { PressableProps } from '../../types/pressable';
+export { Pressable } from './adapters/inbound/Pressable';

package/src/index.test.ts

@@ -22,15 +22,19 @@ const expectedFeatureRootExports = [
   "export { Button, IconButton } from './features/button/public';",
   "export { Card } from './features/card/public';",
   "export { Checkbox } from './features/form/checkbox/public';",
+  "export { Field } from './features/form/field/public';",
   "export { Radio } from './features/form/radio/public';",
+  "export { Switch } from './features/form/switch/public';",
   "export { TextInput } from './features/form/text-input/public';",
   "export { Icon, SUPPORTED_ICON_PROVIDERS } from './features/icon/public';",
   "export { Image } from './features/image/public';",
   "export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';",
   "export { Divider, Grid, ScrollView, View } from './features/layout/public';",
+  "export { List, ListItem } from './features/list/public';",
   "export { Modal } from './features/modal/public';",
   "export { PopoverMenu } from './features/popover-menu/public';",
   "export { Popover } from './features/popover/public';",
+  "export { Pressable } from './features/pressable/public';",
   "export { Surface } from './features/surface/public';",
   "export { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';",
   "export { Tooltip } from './features/tooltip/public';",
@@ -38,38 +42,40 @@ const expectedFeatureRootExports = [
   "export { Heading, Text } from './features/typography/public';",
 ] as const;
 
-const expectedLegacyRootExports = [
-  "export { Field } from './components/field';",
-  "export { HelperText } from './components/helper-text';",
-  "export { Label } from './components/label';",
-  "export { ListItem } from './components/list-item';",
-  "export { Switch } from './components/switch';",
-  "export { Textarea } from './components/textarea';",
+const expectedCrossCuttingRootExports = [
   "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export * from './core/responsive';",
 ] as const;
 
 describe('feature-owned root barrel contract', () => {
-  it('routes migrated UI through feature-owned public facades', () => {
+  it('routes UI through feature-owned public facades', () => {
     expectedFeatureRootExports.forEach((line) => expect(indexSource).toContain(line));
   });
 
-  it('does not retain removed layout aliases or a legacy layout facade', () => {
+  it('does not retain removed component or layout facades and aliases', () => {
+    expect(indexSource).not.toContain("'./components/");
     expect(indexSource).not.toContain("'./layout");
+    expect(indexSource).not.toContain("'./primitives/");
     expect(indexSource).not.toMatch(/\bBoxProps\b/u);
     expect(indexSource).not.toMatch(/\bContainerProps\b/u);
     expect(indexSource).not.toMatch(/\bStackProps\b/u);
     expect(indexSource).not.toMatch(/\bScrollAreaProps\b/u);
+    expect(indexSource).not.toMatch(/\bTextareaProps\b/u);
+    expect(indexSource).not.toMatch(/\bHelperTextProps\b/u);
+    expect(indexSource).not.toMatch(/\bLabelProps\b/u);
     expect(indexSource).not.toMatch(/export\s*\{[^}]*\bBox\b/u);
     expect(indexSource).not.toMatch(/export\s*\{[^}]*\bContainer\b/u);
     expect(indexSource).not.toMatch(/export\s*\{[^}]*\bStack\b/u);
     expect(indexSource).not.toMatch(/export\s*\{[^}]*\bScrollArea\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bTextarea\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bHelperText\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bLabel\b/u);
   });
 });
 
 describe('remaining root barrel contract', () => {
-  it('keeps still-unmigrated UI on its current public API until its feature migration', () => {
-    expectedLegacyRootExports.forEach((line) => expect(indexSource).toContain(line));
+  it('keeps deliberate cross-cutting public APIs', () => {
+    expectedCrossCuttingRootExports.forEach((line) => expect(indexSource).toContain(line));
   });
 
   it('does not retain obsolete action-sheet, drawer, menu aliases, or navigation chrome', () => {

package/src/index.ts

@@ -1,15 +1,3 @@
-export type { FieldProps } from './components/field';
-export { Field } from './components/field';
-export type { HelperTextProps } from './components/helper-text';
-export { HelperText } from './components/helper-text';
-export type { LabelProps } from './components/label';
-export { Label } from './components/label';
-export type { ListItemProps } from './components/list-item';
-export { ListItem } from './components/list-item';
-export type { SwitchProps } from './components/switch';
-export { Switch } from './components/switch';
-export type { TextareaProps } from './components/textarea';
-export { Textarea } from './components/textarea';
 export type { FontRuntime } from './context/FontContext';
 export { FontProvider, useFontContext } from './context/FontContext';
 export type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';
@@ -40,8 +28,12 @@ export type { CardProps } from './features/card/public';
 export { Card } from './features/card/public';
 export type { CheckboxProps } from './features/form/checkbox/public';
 export { Checkbox } from './features/form/checkbox/public';
+export type { FieldProps } from './features/form/field/public';
+export { Field } from './features/form/field/public';
 export type { RadioProps } from './features/form/radio/public';
 export { Radio } from './features/form/radio/public';
+export type { SwitchProps } from './features/form/switch/public';
+export { Switch } from './features/form/switch/public';
 export type { TextInputProps } from './features/form/text-input/public';
 export { TextInput } from './features/form/text-input/public';
 export type {
@@ -62,6 +54,8 @@ export type {
 export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
 export type { DividerProps, GridProps, ScrollViewProps, ViewProps } from './features/layout/public';
 export { Divider, Grid, ScrollView, View } from './features/layout/public';
+export type { ListItemProps, ListProps } from './features/list/public';
+export { List, ListItem } from './features/list/public';
 export type { ModalProps } from './features/modal/public';
 export { Modal } from './features/modal/public';
 export type {
@@ -76,6 +70,8 @@ export type {
   PopoverMenuProps,
 } from './features/popover-menu/public';
 export { PopoverMenu } from './features/popover-menu/public';
+export type { PressableProps } from './features/pressable/public';
+export { Pressable } from './features/pressable/public';
 export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
 export { Surface } from './features/surface/public';
 export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './features/tabs/public';
@@ -93,8 +89,6 @@ export { Tooltip } from './features/tooltip/public';
 export type { HeadingLevel, HeadingProps, TextProps } from './features/typography/public';
 export { Heading, Text } from './features/typography/public';
 export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';
-export type { ButtonBaseProps } from './primitives/button-base';
-export { ButtonBase } from './primitives/button-base';
 export type {
   SurfaceColor,
   SurfaceEmphasis,

package/src/interactionPolicy.test.ts

@@ -19,7 +19,7 @@ describe('InteractionPolicy public export', () => {
 
   it('does not export InteractionPolicy from button-base', () => {
     expect(indexSource).not.toContain(
-      "export type { InteractionPolicy, InteractionPolicyProps } from './primitives/button-base';",
+      "export type { InteractionPolicy, InteractionPolicyProps } from './features/pressable/public';",
     );
   });
 });
@@ -57,10 +57,10 @@ describe('InteractionPolicyProps', () => {
   });
 });
 
-describe('ButtonBaseProps includes interactionPolicy', () => {
-  it('has interactionPolicy in ButtonBaseProps', () => {
+describe('PressableProps includes interactionPolicy', () => {
+  it('has interactionPolicy in PressableProps', () => {
     expect(indexSource).toContain(
-      "export type { ButtonBaseProps } from './primitives/button-base';",
+      "export type { PressableProps } from './features/pressable/public';",
     );
   });
 });

package/src/types/button.ts

@@ -2,14 +2,14 @@ import type React from 'react';
 
 import type { ControlSize } from '../internal/resolvers/resolveControlSize';
 import type { ButtonVariant } from '../internal/resolvers/resolveInteractiveColors';
-import type { ButtonBaseProps } from '../primitives/button-base';
 import type { SurfaceColor } from '../surfaceColor';
 import type { IconSource } from './icon';
+import type { PressableProps } from './pressable';
 
 export type ButtonIconSpec = IconSource;
 
 export interface ButtonProps extends Omit<
-  ButtonBaseProps,
+  PressableProps,
   'accessibilityLabel' | 'children' | 'style'
 > {
   children?: React.ReactNode;
@@ -23,7 +23,7 @@ export interface ButtonProps extends Omit<
 }
 
 export interface IconButtonProps extends Omit<
-  ButtonBaseProps,
+  PressableProps,
   'children' | 'style' | 'accessibilityLabel'
 > {
   icon: IconSource;

package/src/types/checkbox.ts

@@ -1,11 +1,11 @@
 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 { PressableProps } from './pressable';
 
 export interface CheckboxProps extends Omit<
-  ButtonBaseProps,
+  PressableProps,
   'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'
 > {
   children?: React.ReactNode;

package/src/types/list.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+
+import type { InteractionPolicyProps } from '../interactionPolicy';
+
+export interface ListProps {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface ListItemProps extends InteractionPolicyProps {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  onPress?: (() => void) | undefined;
+  disabled?: boolean;
+  selected?: boolean;
+  compact?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+}

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

@@ -1,11 +1,11 @@
 import type React from 'react';
 import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';
 
-import type { InteractionPolicyProps } from '../../interactionPolicy';
-import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
-import type { ViewProps } from '../../types/layout';
+import type { InteractionPolicyProps } from '../interactionPolicy';
+import type { InteractionState } from '../internal/resolvers/resolveInteractiveState';
+import type { ViewProps } from './layout';
 
-export interface ButtonBaseProps
+export interface PressableProps
   extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
   children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
   disabled?: boolean;

package/src/types/radio.ts

@@ -1,11 +1,11 @@
 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 { PressableProps } from './pressable';
 
 export interface RadioProps extends Omit<
-  ButtonBaseProps,
+  PressableProps,
   'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'
 > {
   children?: React.ReactNode;

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

@@ -1,11 +1,11 @@
 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 { SurfaceColor } from '../surfaceColor';
+import type { PressableProps } from './pressable';
 
 export interface SwitchProps extends Omit<
-  ButtonBaseProps,
+  PressableProps,
   'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'
 > {
   children?: React.ReactNode;

package/dist/components/field/Field.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,MAAM,GACP,EAAE,UAAU,qBAgCZ"}

package/dist/components/field/Field.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { View } from '../../features/layout/public';
-import { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';
-import { HelperText } from '../helper-text';
-import { Label } from '../label';
-/*** Composes a label, control, and helper or error message into one field. */
-export function Field({ children, label, helperText, errorText, required = false, disabled = false, invalid = false, readOnly = false, testID, }) {
-    const hasErrorText = Boolean(errorText);
-    const fieldState = resolveFieldState({
-        disabled,
-        invalid: invalid || hasErrorText,
-        readOnly,
-    });
-    const presentation = resolveFieldPresentation(fieldState);
-    return (<View gap="xs" testID={testID}>
-      {label ? (<Label color={presentation.labelColor} emphasis={presentation.labelEmphasis} required={required}>
-          {label}
-        </Label>) : null}
-      <View>{children}</View>
-      {hasErrorText ? (<HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
-          {errorText}
-        </HelperText>) : helperText ? (<HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
-          {helperText}
-        </HelperText>) : null}
-    </View>);
-}
-//# sourceMappingURL=Field.js.map

package/dist/components/field/Field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,8EAA8E;AAC9E,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,MAAM,GACK;IACX,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,iBAAiB,CAAC;QACnC,QAAQ;QACR,OAAO,EAAE,OAAO,IAAI,YAAY;QAChC,QAAQ;KACT,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,wBAAwB,CAAC,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC5B;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAC/B,QAAQ,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CACrC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACtB;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CACjF;UAAA,CAAC,SAAS,CACZ;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CACjF;UAAA,CAAC,UAAU,CACb;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { View } from '../../features/layout/public';\nimport { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';\nimport { HelperText } from '../helper-text';\nimport { Label } from '../label';\nimport type { FieldProps } from './types';\n\n/*** Composes a label, control, and helper or error message into one field. */\nexport function Field({\n  children,\n  label,\n  helperText,\n  errorText,\n  required = false,\n  disabled = false,\n  invalid = false,\n  readOnly = false,\n  testID,\n}: FieldProps) {\n  const hasErrorText = Boolean(errorText);\n  const fieldState = resolveFieldState({\n    disabled,\n    invalid: invalid || hasErrorText,\n    readOnly,\n  });\n  const presentation = resolveFieldPresentation(fieldState);\n\n  return (\n    <View gap=\"xs\" testID={testID}>\n      {label ? (\n        <Label\n          color={presentation.labelColor}\n          emphasis={presentation.labelEmphasis}\n          required={required}\n        >\n          {label}\n        </Label>\n      ) : null}\n      <View>{children}</View>\n      {hasErrorText ? (\n        <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>\n          {errorText}\n        </HelperText>\n      ) : helperText ? (\n        <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>\n          {helperText}\n        </HelperText>\n      ) : null}\n    </View>\n  );\n}\n"]}

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

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

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

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

package/dist/components/field/index.js

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/field/types.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/field/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nexport interface FieldProps {\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n  helperText?: React.ReactNode;\n  errorText?: React.ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  invalid?: boolean;\n  readOnly?: boolean;\n  testID?: string;\n}\n"]}

package/dist/components/helper-text/HelperText.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { HelperTextProps } from './types';
-export declare function HelperText({ children, emphasis, color, testID }: HelperTextProps): React.JSX.Element;
-//# sourceMappingURL=HelperText.d.ts.map

package/dist/components/helper-text/HelperText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../src/components/helper-text/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,qBAM1F"}

package/dist/components/helper-text/HelperText.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Text } from '../../features/typography/public';
-export function HelperText({ children, emphasis = 'muted', color, testID }) {
-    return (<Text color={color} emphasis={emphasis} testID={testID} variant="caption">
-      {children}
-    </Text>);
-}
-//# sourceMappingURL=HelperText.js.map

package/dist/components/helper-text/HelperText.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../src/components/helper-text/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AAGxD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAmB;IACzF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,SAAS,CACvE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Text } from '../../features/typography/public';\nimport type { HelperTextProps } from './types';\n\nexport function HelperText({ children, emphasis = 'muted', color, testID }: HelperTextProps) {\n  return (\n    <Text color={color} emphasis={emphasis} testID={testID} variant=\"caption\">\n      {children}\n    </Text>\n  );\n}\n"]}

package/dist/components/helper-text/index.d.ts

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

package/dist/components/helper-text/index.d.ts.map

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

package/dist/components/helper-text/index.js

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