@ankhorage/surface 4.2.0 → 4.3.0

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

package/src/components/field/Field.tsx

@@ -1,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/accordion/adapters/inbound/Accordion.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import type {
+  AccordionMode,
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSingleProps,
+} from '../../../../types/accordion';
+import { resolveAccordionToggle } from '../../utils/resolveAccordionToggle';
+import { AccordionContext } from './AccordionContext';
+
+/*** Coordinates controlled or uncontrolled accordion expansion state. */
+export function Accordion(props: AccordionProps) {
+  const {
+    children,
+    collapsible = false,
+    defaultValue,
+    disabled = false,
+    interactionPolicy = 'enabled',
+    onValueChange: _onValueChange,
+    type = 'single',
+    value,
+    ...viewProps
+  } = props;
+  const [uncontrolledValues, setUncontrolledValues] = React.useState<readonly string[]>(() =>
+    normalizeAccordionValues(type, defaultValue),
+  );
+  const controlled = value !== undefined;
+  const openValues = controlled ? normalizeAccordionValues(type, value) : uncontrolledValues;
+
+  const toggleValue = React.useCallback(
+    (itemValue: string) => {
+      if (disabled || interactionPolicy === 'passive') return;
+
+      const nextValues = resolveAccordionToggle({
+        collapsible,
+        mode: type,
+        openValues,
+        value: itemValue,
+      });
+
+      if (!controlled) setUncontrolledValues(nextValues);
+      notifyValueChange(props, nextValues);
+    },
+    [collapsible, controlled, disabled, interactionPolicy, openValues, props, type],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({ disabled, interactionPolicy, mode: type, openValues, toggleValue }),
+    [disabled, interactionPolicy, openValues, toggleValue, type],
+  );
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      <View {...viewProps}>{children}</View>
+    </AccordionContext.Provider>
+  );
+}
+
+/*** Normalizes the public single/multiple value shapes for internal state. */
+function normalizeAccordionValues(
+  mode: AccordionMode,
+  value: string | readonly string[] | undefined,
+): readonly string[] {
+  if (mode === 'multiple') {
+    return typeof value === 'string' || value === undefined ? [] : value;
+  }
+
+  return typeof value === 'string' ? [value] : [];
+}
+
+/*** Emits the public value shape matching the configured accordion mode. */
+function notifyValueChange(props: AccordionProps, values: readonly string[]) {
+  if (props.type === 'multiple') {
+    const multipleProps: AccordionMultipleProps = props;
+    multipleProps.onValueChange?.(values);
+    return;
+  }
+
+  const singleProps: AccordionSingleProps = props;
+  singleProps.onValueChange?.(values[0]);
+}

package/src/features/accordion/adapters/inbound/AccordionContent.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import type { AccordionContentProps } from '../../../../types/accordion';
+import { AccordionItemContext } from './AccordionItemContext';
+
+/*** Renders an accordion item's content when expanded or force-mounted. */
+export function AccordionContent({
+  children,
+  forceMount = false,
+  style,
+  ...viewProps
+}: AccordionContentProps) {
+  const item = React.useContext(AccordionItemContext);
+  if (!item) throw new Error('AccordionContent must be rendered inside AccordionItem.');
+  if (!item.open && !forceMount) return null;
+
+  return (
+    <View
+      {...viewProps}
+      accessibilityLabelledBy={item.triggerId}
+      nativeID={item.contentId}
+      style={[!item.open ? hiddenContentStyle : undefined, style]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const hiddenContentStyle: ViewStyle = { display: 'none' };

package/src/features/accordion/adapters/inbound/AccordionContext.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { AccordionContextValue } from '../../../../types/accordion';
+
+export const AccordionContext = React.createContext<AccordionContextValue | null>(null);

package/src/features/accordion/adapters/inbound/AccordionItem.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import type { AccordionItemProps } from '../../../../types/accordion';
+import { AccordionContext } from './AccordionContext';
+import { AccordionItemContext } from './AccordionItemContext';
+
+/*** Provides one accordion item's value, state, and trigger/content identifiers. */
+export function AccordionItem({
+  children,
+  disabled = false,
+  interactionPolicy,
+  value,
+  ...viewProps
+}: AccordionItemProps) {
+  const accordion = React.useContext(AccordionContext);
+  if (!accordion) throw new Error('AccordionItem must be rendered inside Accordion.');
+
+  const reactId = React.useId();
+  const resolvedDisabled = accordion.disabled || disabled;
+  const resolvedInteractionPolicy = interactionPolicy ?? accordion.interactionPolicy;
+  const open = accordion.openValues.includes(value);
+  const toggle = React.useCallback(() => accordion.toggleValue(value), [accordion, value]);
+  const contextValue = React.useMemo(
+    () => ({
+      contentId: `accordion-${reactId}-content`,
+      disabled: resolvedDisabled,
+      interactionPolicy: resolvedInteractionPolicy,
+      open,
+      toggle,
+      triggerId: `accordion-${reactId}-trigger`,
+      value,
+    }),
+    [open, reactId, resolvedDisabled, resolvedInteractionPolicy, toggle, value],
+  );
+
+  return (
+    <AccordionItemContext.Provider value={contextValue}>
+      <View {...viewProps}>{children}</View>
+    </AccordionItemContext.Provider>
+  );
+}

package/src/features/accordion/adapters/inbound/AccordionItemContext.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { AccordionItemContextValue } from '../../../../types/accordion';
+
+export const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);

package/src/features/accordion/adapters/inbound/AccordionTrigger.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import type { AccordionTriggerProps } from '../../../../types/accordion';
+import { AccordionItemContext } from './AccordionItemContext';
+
+/*** Renders the accessible button that toggles its owning accordion item. */
+export function AccordionTrigger({
+  children,
+  disabled = false,
+  interactionPolicy,
+  ...pressableProps
+}: AccordionTriggerProps) {
+  const item = React.useContext(AccordionItemContext);
+  if (!item) throw new Error('AccordionTrigger must be rendered inside AccordionItem.');
+
+  const resolvedDisabled = item.disabled || disabled;
+  const resolvedInteractionPolicy = interactionPolicy ?? item.interactionPolicy;
+
+  return (
+    <View accessibilityRole="header">
+      <Pressable
+        {...pressableProps}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: resolvedDisabled, expanded: item.open }}
+        disabled={resolvedDisabled}
+        nativeID={item.triggerId}
+        onPress={resolvedInteractionPolicy === 'passive' ? undefined : item.toggle}
+      >
+        {children}
+      </Pressable>
+    </View>
+  );
+}

package/src/features/accordion/public.ts

@@ -0,0 +1,13 @@
+export type {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionMode,
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSingleProps,
+  AccordionTriggerProps,
+} from '../../types/accordion';
+export { Accordion } from './adapters/inbound/Accordion';
+export { AccordionContent } from './adapters/inbound/AccordionContent';
+export { AccordionItem } from './adapters/inbound/AccordionItem';
+export { AccordionTrigger } from './adapters/inbound/AccordionTrigger';

package/src/features/accordion/utils/resolveAccordionToggle.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveAccordionToggle } from './resolveAccordionToggle';
+
+describe('resolveAccordionToggle', () => {
+  test('opens one value in single mode', () => {
+    expect(
+      resolveAccordionToggle({
+        collapsible: false,
+        mode: 'single',
+        openValues: ['general'],
+        value: 'appearance',
+      }),
+    ).toEqual(['appearance']);
+  });
+
+  test('keeps the active value open when single mode is not collapsible', () => {
+    const openValues = ['general'] as const;
+    expect(
+      resolveAccordionToggle({
+        collapsible: false,
+        mode: 'single',
+        openValues,
+        value: 'general',
+      }),
+    ).toBe(openValues);
+  });
+
+  test('closes the active value when single mode is collapsible', () => {
+    expect(
+      resolveAccordionToggle({
+        collapsible: true,
+        mode: 'single',
+        openValues: ['general'],
+        value: 'general',
+      }),
+    ).toEqual([]);
+  });
+
+  test('adds and removes values independently in multiple mode', () => {
+    const opened = resolveAccordionToggle({
+      collapsible: false,
+      mode: 'multiple',
+      openValues: ['general'],
+      value: 'appearance',
+    });
+    expect(opened).toEqual(['general', 'appearance']);
+    expect(
+      resolveAccordionToggle({
+        collapsible: false,
+        mode: 'multiple',
+        openValues: opened,
+        value: 'general',
+      }),
+    ).toEqual(['appearance']);
+  });
+});