@cdx-ui/primitives 0.0.1-beta.18 → 0.0.1-beta.180

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-beta.18",
+  "version": "0.0.1-beta.180",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dfh-candescent-ui/ui-component-framework",
+    "directory": "packages/primitives"
+  },
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -17,7 +23,8 @@
   },
   "files": [
     "lib",
-    "src"
+    "src",
+    "coverage.svg"
   ],
   "react-native-builder-bob": {
     "source": "src",
@@ -58,15 +65,17 @@
     "@react-native-aria/interactions": "^0.2.16",
     "@react-native-aria/radio": "0.2.13",
     "@react-stately/checkbox": "3.7.4",
+    "@react-stately/disclosure": "3.1.1",
     "@react-stately/radio": "3.12.0",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/utils": "0.0.1-beta.18"
+    "@cdx-ui/formatters": "0.0.1-beta.180",
+    "@cdx-ui/utils": "0.0.1-beta.180"
   },
   "devDependencies": {
-    "@types/react": "*",
+    "@types/react": "19.1.17",
     "@types/react-dom": "*",
-    "react": "*",
-    "react-dom": "*",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native": "*",
     "react-native-builder-bob": "*",
     "react-native-web": "*",

package/src/CLAUDE.md

@@ -0,0 +1,86 @@
+# Primitive Authoring
+
+Auto-loaded when working in `packages/primitives/src/**`.
+
+Primitives in `@cdx-ui/primitives` are unstyled behavioral components that handle accessibility and interactions. Read the full guides before making changes:
+
+- `docs/internal/practices/composition.md` — compound component structure
+- `docs/internal/practices/types.md` — `I*Props` convention, extending RN base types
+- `docs/internal/practices/accessibility.md` — ARIA roles, keyboard nav, screen reader support
+- `docs/internal/practices/as-child.md` — `asChild` prop pattern
+- `docs/internal/practices/data-attributes.md` — `data-state` and `data-slot` conventions
+
+## Six standards
+
+Forge UI primitives and their styled counterparts follow six standards. The first three govern primitive-layer authoring; the last three govern the styled layer (see `packages/components/src/components/CLAUDE.md`).
+
+### Standard 1 — Data attributes for interaction states
+
+Root primitives emit `data-*` attributes for the interaction state they own and expose that state via context. Sub-slots **do not** subscribe to context and **do not** emit interaction `data-*` attributes — they opt in only when their own styling or behavior reacts to that state.
+
+- **Root** — emits + provides context. Always.
+- **Sub-slot** — does not subscribe, does not emit. Opt in only when the styled layer (or the slot's own behavior) demonstrably reacts to the state.
+- **Native compound conditions** — when the styled layer needs two or more interaction states combined on native (Uniwind evaluates only the last `data-[]` condition in a chain), the primitive derives a single compound-state string via a module-scope lookup table and emits it through `dataAttributes({...})` **in parallel** with the individual booleans. Canonical example: `InputRoot.tsx`'s `FIELD_STATES` → `data-field-state` (`idle` / `invalid` / `focused` / `focused-invalid`). See `docs/internal/practices/data-attributes.md` § "Compound state on native".
+
+Pointlessly emitting on every sub-slot multiplies bridge writes (native) and DOM attribute writes (web) for no consumer benefit. A sub-slot that calls `useButtonContext()` becomes a subscriber — every interaction re-renders it even when nothing visually changes.
+
+`useButtonContext()` stays exported so styled-layer slots and external consumers can opt in when they actually need it.
+
+### Standard 2 — `asChild` support
+
+Every public primitive supports `asChild` via `Slot` (re-exported from `packages/primitives/src/slot`). The runtime cost when `asChild` is `false` is a single boolean check; consumers who opt in pay the merge cost themselves.
+
+```tsx
+const Comp = asChild ? Slot : DefaultElement;
+```
+
+### Standard 3 — When to create a primitive (the primitive-existence test)
+
+Create a primitive **only** when the slot owns behavior. A slot earns a primitive if it has at least one of:
+
+1. **Behavioral state machinery** — interaction hooks (`useFocus`, `useFocusRing`, `useHover`, `usePress`), controlled/uncontrolled state, open/closed/checked/value management.
+2. **Non-host accessibility semantics** — ARIA role/state beyond what the host element provides natively, custom keyboard handling, screen-reader announcements, focus traps.
+3. **Cross-platform host abstraction** — different host element per platform (e.g., a `.web.tsx` / `.native.tsx` split).
+4. **Compound contract ownership** — defines the compound's state surface and is the context provider (i.e., the Root).
+
+A slot does **not** earn a primitive if it only:
+
+- Wraps a host element with `className`/`style`.
+- Reads context for styling (the styled layer reads it directly via `useButtonContext`, `useStyleContext`, etc.).
+- Wants `asChild` (the styled layer uses `Slot` directly — it is re-exported from `@cdx-ui/primitives`).
+
+This eliminates the "factory pass-through" anti-pattern (e.g., a `ButtonIcon` primitive whose body is `<View {...props} ref={ref} />`). Such wrappers add nothing and force every consumer through a useless layer.
+
+## Canonical reference
+
+`packages/primitives/src/button/ButtonRoot.tsx` is the canonical concrete primitive. It demonstrates every Standard 1–3 requirement: concrete `forwardRef` component over `Pressable`, `asChild` via `Slot`, `dataAttributes()` for interaction state, `ButtonProvider` for context, function-as-children, ARIA defaults, and composed event handlers.
+
+`packages/primitives/src/button/` only ships `ButtonRoot` + `useButtonContext` + types. There is intentionally no `ButtonLabel`/`ButtonIcon`/`ButtonSpinner`/`ButtonGroup` primitive — those slots fail the primitive-existence test, so they live in `@cdx-ui/components` only.
+
+The styled-layer Indicator inside `packages/components/src/components/QuickActionButton/index.tsx` is the canonical example of a sub-slot that legitimately opts into interaction state. When (and only when) its own styling reacts to hover/focus/press, it reads `useButtonContext()` and emits `data-*` via `mergeDataAttributes(props, dataAttributes({ ... }))` — the same pattern external consumers use.
+
+## Pattern summary
+
+Each concrete primitive is a `forwardRef` component that hardcodes its default RN base element and supports `asChild` via `Slot`:
+
+1. **Concrete component** — `export const ComponentRoot = forwardRef<View, Props>(...)` hardcodes `View`/`Pressable`/`Text` as the default; uses `const Comp = asChild ? Slot : View` for the escape hatch
+2. **Interaction hooks** — `useFocus`, `useFocusRing`, `useHover`, `usePress` from `@react-native-aria/*`
+3. **Data attributes** — `dataAttributes({ hover, focus, active, disabled, focusVisible })` emitted on the rendered element for Uniwind `data-[state]` selectors
+4. **Context provider** — interaction state exposed via context so sub-slots and external consumers can opt in
+5. **Barrel export** — `index.ts` re-exports the concrete components, context, and types
+6. **`displayName`** — set on every exported component
+
+## Key rules
+
+- **Unstyled** — no visual styling (no `className`, no color/spacing classes). Only behavioral and a11y concerns.
+- **`asChild` via `Slot`** — import `Slot` from `../slot`; use `const Comp = asChild ? Slot : DefaultElement`.
+- **`I*Props` convention** — public prop types are aliased with `I` prefix (e.g., `IButtonProps`), exported from `types.ts`.
+- **`Interface*Props` pattern** — the full interface (e.g., `InterfaceButtonProps`) extends the appropriate RN base type (`PressableProps`, `ViewProps`, etc.) with interaction state booleans (`isHovered`, `isActive`, `isFocused`, `isFocusVisible`, `isDisabled`); re-exported as `I*Props`.
+- **`dataAttributes()` helper** — always use the helper from `../utils/dataAttributes` to emit `data-*` props; it handles platform differences (native vs web).
+- **Derived compound-state attributes** — when the styled layer needs a native compound condition, derive a single compound-state string via a module-scope lookup table and emit it via `dataAttributes({...})` alongside the individual booleans. `InputRoot.tsx`'s `FIELD_STATES` → `data-field-state` is the canonical example.
+- **`mergeDataAttributes(...sources)` helper** — when a primitive Root receives data attrs through `props` from its styled layer (e.g. `data-slot`) AND emits its own data attrs (e.g. interaction state), combine them via `mergeDataAttributes(props, dataAttributes({...}))`. A plain `{...dataAttributes({...})} {...props}` spread chain wipes out one side on web — `dataAttributes` returns `{ dataSet }`, so back-to-back spreads replace each other. The merge helper preserves both. `ButtonRoot.tsx` shows the canonical pattern.
+- **`composeEventHandlers`** from `@cdx-ui/utils` — merge consumer handlers with internal handlers; never silently override.
+- **`forwardRef`** on every component — refs forwarded to the underlying host element.
+- **ARIA roles** — set `role` with a sensible default (e.g., `role={props?.role || 'button'}`).
+- **Render children as function** — support `children` as `(state: InteractionState) => ReactNode` for state-driven rendering where the Root exposes interaction state.
+- **Consumable independently** of `@cdx-ui/components` — no imports from the styled layer.

package/src/accordion/Accordion.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useDisclosureGroupState } from '@react-stately/disclosure';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { AccordionProvider } from './context';
+import type { AccordionType, IAccordionProps } from './types';
+import { fromExpandedKeys, toExpandedKeys } from './utils';
+
+type WidenedAccordionProps = ViewProps & {
+  asChild?: boolean;
+  className?: string;
+  type?: AccordionType;
+  collapsible?: boolean;
+  isDisabled?: boolean;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[] | undefined) => void;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+};
+
+export type AccordionRootProps = IAccordionProps & {
+  asChild?: boolean;
+  className?: string;
+};
+
+export const AccordionRoot = forwardRef<View, AccordionRootProps>((accordionProps, ref) => {
+  const {
+    asChild,
+    children,
+    className,
+    style,
+    type = 'single',
+    collapsible = true,
+    isDisabled = false,
+    value,
+    defaultValue,
+    onValueChange,
+    ...props
+  } = accordionProps as WidenedAccordionProps;
+  const isValueControlled = Object.prototype.hasOwnProperty.call(accordionProps, 'value');
+  const expandedKeys = useMemo(
+    () => (isValueControlled ? (toExpandedKeys(value) ?? new Set<string>()) : undefined),
+    [isValueControlled, value],
+  );
+  const groupState = useDisclosureGroupState({
+    allowsMultipleExpanded: type === 'multiple',
+    isDisabled,
+    expandedKeys,
+    defaultExpandedKeys: toExpandedKeys(defaultValue),
+    onExpandedChange: onValueChange
+      ? (keys) => {
+          onValueChange(fromExpandedKeys(keys, type));
+        }
+      : undefined,
+  });
+
+  const isItemOpen = useCallback(
+    (itemValue: string) => groupState.expandedKeys.has(itemValue),
+    [groupState.expandedKeys],
+  );
+  const toggleItem = useCallback(
+    (itemValue: string) => groupState.toggleKey(itemValue),
+    [groupState],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      type,
+      collapsible,
+      isDisabled,
+      isItemOpen,
+      toggleItem,
+    }),
+    [type, collapsible, isDisabled, isItemOpen, toggleItem],
+  );
+
+  const Comp = asChild ? Slot : View;
+
+  return (
+    <AccordionProvider value={contextValue}>
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion' }))}
+      >
+        {children}
+      </Comp>
+    </AccordionProvider>
+  );
+});
+
+AccordionRoot.displayName = 'AccordionRoot';

package/src/accordion/AccordionContent.tsx

@@ -0,0 +1,90 @@
+import { forwardRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import {
+  domDataAttributes,
+  mergeDomDataAttributes,
+  type DomDataAttributeValue,
+} from '../utils/domDataAttributes';
+import { useAccordionItemContext } from './context';
+import type { IAccordionContentProps } from './types';
+
+export interface AccordionContentRootProps extends IAccordionContentProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const AccordionContentRoot = forwardRef<View, AccordionContentRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    const { isOpen, triggerId, contentId } = useAccordionItemContext();
+    const Comp = asChild ? Slot : View;
+
+    if (!isOpen) {
+      return null;
+    }
+
+    const dataAttrValues = {
+      slot: 'accordion-content',
+      state: 'open',
+    };
+
+    if (Platform.OS === 'web' && asChild) {
+      const {
+        dataSet,
+        nativeID: _nativeID,
+        ...domProps
+      } = props as typeof props & {
+        dataSet?: Record<string, DomDataAttributeValue>;
+      };
+      const dataAttrs = mergeDomDataAttributes(
+        domDataAttributes(dataSet ?? {}),
+        domProps,
+        domDataAttributes(dataAttrValues),
+      );
+
+      return (
+        <Slot
+          ref={ref}
+          className={className}
+          style={style}
+          {...domProps}
+          {...dataAttrs}
+          id={contentId}
+          role="region"
+          aria-labelledby={triggerId}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    const platformA11yProps =
+      Platform.OS === 'web'
+        ? {
+            id: contentId,
+            role: 'region' as const,
+            'aria-labelledby': triggerId,
+          }
+        : {
+            nativeID: contentId,
+            accessibilityLabelledBy: triggerId,
+            accessibilityRole: 'none' as const,
+          };
+
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes(dataAttrValues))}
+        {...platformA11yProps}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AccordionContentRoot.displayName = 'AccordionContentRoot';

package/src/accordion/AccordionItem.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, useCallback, useId, useMemo } from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { AccordionItemProvider, useAccordionContext } from './context';
+import type { IAccordionItemProps } from './types';
+
+export interface AccordionItemRootProps extends IAccordionItemProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const AccordionItemRoot = forwardRef<View, AccordionItemRootProps>(
+  ({ asChild, children, className, style, value, disabled = false, ...props }, ref) => {
+    const {
+      type,
+      collapsible,
+      isDisabled: groupDisabled,
+      isItemOpen,
+      toggleItem,
+    } = useAccordionContext();
+    const reactId = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+    const triggerId = `accordion-${reactId}-trigger`;
+    const contentId = `accordion-${reactId}-content`;
+
+    const isOpen = isItemOpen(value);
+    const isDisabled = disabled || groupDisabled;
+
+    const toggle = useCallback(() => {
+      if (isDisabled) {
+        return;
+      }
+      if (type === 'single' && !collapsible && isOpen) {
+        return;
+      }
+      toggleItem(value);
+    }, [isDisabled, type, collapsible, isOpen, toggleItem, value]);
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        isOpen,
+        isDisabled,
+        triggerId,
+        contentId,
+        toggle,
+      }),
+      [value, isOpen, isDisabled, triggerId, contentId, toggle],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <AccordionItemProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              slot: 'accordion-item',
+              state: isOpen ? 'open' : 'closed',
+              disabled: isDisabled,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </AccordionItemProvider>
+    );
+  },
+);
+
+AccordionItemRoot.displayName = 'AccordionItemRoot';

package/src/accordion/AccordionTrigger.tsx

@@ -0,0 +1,99 @@
+import { forwardRef } from 'react';
+import { Platform, Pressable } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { usePress, useHover } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useAccordionItemContext } from './context';
+import type { IAccordionTriggerProps } from './types';
+
+export interface AccordionTriggerRootProps extends IAccordionTriggerProps {
+  className?: string;
+}
+
+export const AccordionTriggerRoot = forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  AccordionTriggerRootProps
+>(
+  (
+    {
+      asChild,
+      children,
+      className,
+      style,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isOpen, isDisabled, triggerId, contentId, toggle } = useAccordionItemContext();
+    const { focusProps, isFocused } = useFocus();
+    const { focusProps: focusRingProps, isFocusVisible } = useFocusRing() as {
+      focusProps: { onFocus?: () => void; onBlur?: () => void };
+      isFocusVisible: boolean;
+    };
+    const { pressProps, isPressed } = usePress({ isDisabled });
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+
+    const Comp = asChild ? Slot : Pressable;
+
+    const platformA11yProps =
+      Platform.OS === 'web'
+        ? {
+            id: triggerId,
+            role: 'button' as const,
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled || undefined,
+            'aria-controls': contentId,
+          }
+        : {
+            nativeID: triggerId,
+            accessibilityRole: 'button' as const,
+            accessibilityState: { expanded: isOpen, disabled: isDisabled },
+            accessibilityControls: contentId,
+          };
+
+    return (
+      <Comp
+        ref={ref}
+        disabled={isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        className={className}
+        style={style}
+        {...props}
+        {...platformA11yProps}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'accordion-trigger',
+            state: isOpen ? 'open' : 'closed',
+            disabled: isDisabled,
+            hover: isHovered,
+            active: isPressed,
+            focus: isFocused,
+            focusVisible: isFocusVisible,
+          }),
+        )}
+        onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+        onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+        onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+        onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+        onPress={composeEventHandlers(onPress, toggle)}
+        onFocus={composeEventHandlers(onFocus, focusProps.onFocus, focusRingProps.onFocus)}
+        onBlur={composeEventHandlers(onBlur, focusProps.onBlur, focusRingProps.onBlur)}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AccordionTriggerRoot.displayName = 'AccordionTriggerRoot';

package/src/accordion/context.tsx

@@ -0,0 +1,8 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IAccordionContextValue, IAccordionItemContextValue } from './types';
+
+export const [AccordionProvider, useAccordionContext] =
+  createContext<IAccordionContextValue>('AccordionContext');
+
+export const [AccordionItemProvider, useAccordionItemContext] =
+  createContext<IAccordionItemContextValue>('AccordionItemContext');

package/src/accordion/index.ts

@@ -0,0 +1,23 @@
+export type {
+  IAccordionProps,
+  IAccordionSingleProps,
+  IAccordionMultipleProps,
+  IAccordionItemProps,
+  IAccordionTriggerProps,
+  IAccordionContentProps,
+  IAccordionContextValue,
+  IAccordionItemContextValue,
+  AccordionType,
+} from './types';
+
+export {
+  AccordionProvider,
+  AccordionItemProvider,
+  useAccordionContext,
+  useAccordionItemContext,
+} from './context';
+
+export { AccordionRoot, type AccordionRootProps } from './Accordion';
+export { AccordionItemRoot, type AccordionItemRootProps } from './AccordionItem';
+export { AccordionTriggerRoot, type AccordionTriggerRootProps } from './AccordionTrigger';
+export { AccordionContentRoot, type AccordionContentRootProps } from './AccordionContent';

package/src/accordion/types.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type AccordionType = 'single' | 'multiple';
+
+interface IAccordionBaseProps extends ViewProps {
+  /** Disables expansion for all items. */
+  isDisabled?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+export interface IAccordionSingleProps extends IAccordionBaseProps {
+  /** Single-item expansion mode. @default 'single' */
+  type?: 'single';
+  /** Controlled open item value. */
+  value?: string;
+  /** Initial open item value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called when the open item changes. */
+  onValueChange?: (value: string | undefined) => void;
+  /** Allows closing the open item. @default true */
+  collapsible?: boolean;
+}
+
+export interface IAccordionMultipleProps extends IAccordionBaseProps {
+  /** Multiple-item expansion mode. */
+  type: 'multiple';
+  /** Controlled open item values. */
+  value?: string[];
+  /** Initial open item values for uncontrolled usage. */
+  defaultValue?: string[];
+  /** Called when the open items change. */
+  onValueChange?: (value: string[]) => void;
+  collapsible?: never;
+}
+
+export type IAccordionProps = IAccordionSingleProps | IAccordionMultipleProps;
+
+export interface IAccordionItemProps extends ViewProps {
+  /** Required stable id within the Accordion. */
+  value: string;
+  disabled?: boolean;
+}
+
+export interface IAccordionTriggerProps extends PressableProps {
+  children?: ReactNode;
+  asChild?: boolean;
+}
+
+export interface IAccordionContentProps extends ViewProps {
+  children?: ReactNode;
+}
+
+export interface IAccordionContextValue {
+  type: AccordionType;
+  collapsible: boolean;
+  isDisabled: boolean;
+  isItemOpen: (value: string) => boolean;
+  toggleItem: (value: string) => void;
+}
+
+export interface IAccordionItemContextValue {
+  value: string;
+  isOpen: boolean;
+  isDisabled: boolean;
+  triggerId: string;
+  contentId: string;
+  toggle: () => void;
+}

package/src/accordion/utils.ts

@@ -0,0 +1,22 @@
+import type { AccordionType } from './types';
+
+export function toExpandedKeys(value: string | string[] | undefined): Set<string> | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (Array.isArray(value)) {
+    return new Set(value);
+  }
+  if (value === '') {
+    return new Set<string>();
+  }
+  return new Set<string>([value]);
+}
+
+export function fromExpandedKeys(
+  keys: Iterable<string | number>,
+  type: AccordionType,
+): string | string[] | undefined {
+  const values = Array.from(keys).map(String);
+  return type === 'single' ? values[0] : values;
+}

package/src/avatar/AvatarRoot.tsx

@@ -0,0 +1,39 @@
+import type React from 'react';
+import { forwardRef, useMemo, useState } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import { AvatarProvider } from './context';
+import type { IAvatarProps, IAvatarContextValue } from './types';
+
+export interface AvatarRootProps extends IAvatarProps {
+  asChild?: boolean;
+}
+
+export const AvatarRoot = forwardRef<React.ComponentRef<typeof View>, AvatarRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageError, setImageError] = useState(false);
+
+    const contextValue = useMemo<IAvatarContextValue>(
+      () => ({ imageLoaded, imageError, setImageLoaded, setImageError }),
+      [imageLoaded, imageError],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <AvatarProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          role={props.role || 'img'}
+          accessibilityRole="image"
+          {...(props as ViewProps)}
+        >
+          {children}
+        </Comp>
+      </AvatarProvider>
+    );
+  },
+);
+
+AvatarRoot.displayName = 'AvatarRoot';