@cdx-ui/primitives 0.0.1-beta.3 → 0.0.1-beta.31

package/lib/typescript/tile/createTileTitle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const createTileTitle: <T>(Base: React.ComponentType<T>) => React.ForwardRefExoticComponent<import("react-native").TextProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createTileTitle.d.ts.map

package/lib/typescript/tile/createTileTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTileTitle.d.ts","sourceRoot":"","sources":["../../../src/tile/createTileTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,MAAM,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,qGAY5D,CAAC"}

package/lib/typescript/tile/createTileTrailingSlot.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Generic trailing content (chevron, amount, chip, status). Distinct from `Tile.Indicator`,
+ * which is purpose-built for the radio/checkbox selection affordance.
+ *
+ * Trailing content is meaningful by default (`aria-hidden` falsy), unlike the indicator.
+ */
+export declare const createTileTrailingSlot: <T>(Base: React.ComponentType<T>) => React.ForwardRefExoticComponent<import("react-native").ViewProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createTileTrailingSlot.d.ts.map

package/lib/typescript/tile/createTileTrailingSlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTileTrailingSlot.d.ts","sourceRoot":"","sources":["../../../src/tile/createTileTrailingSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAG,MAAM,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,qGAYnE,CAAC"}

package/lib/typescript/tile/index.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+import type { ITileComponentType } from './types';
+export type { ITileComponentType, ITileContentProps, ITileContextValue, ITileDescriptionProps, ITileGroupMultipleProps, ITileGroupProps, ITileGroupSingleProps, ITileGroupContextValue, ITileIndicatorProps, ITileLeadingSlotProps, ITilePressablePassthrough, ITileProps, ITileTitleProps, ITileTrailingSlotProps, TileGroupType, TileGroupValue, } from './types';
+export { TileProvider, useTileContext } from './context';
+export declare function createTile<Pressable, Leading, Content, Title, Description, Indicator, TrailingSlot, Group>(BaseComponents: {
+    Pressable: React.ComponentType<Pressable>;
+    LeadingSlot: React.ComponentType<Leading>;
+    Content: React.ComponentType<Content>;
+    Title: React.ComponentType<Title>;
+    Description: React.ComponentType<Description>;
+    Indicator: React.ComponentType<Indicator>;
+    TrailingSlot: React.ComponentType<TrailingSlot>;
+    Group: React.ComponentType<Group>;
+}): ITileComponentType<Pressable, Leading, Content, Title, Description, Indicator, TrailingSlot, Group>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/tile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tile/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACrB,uBAAuB,EACvB,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,aAAa,EACb,cAAc,GACf,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEzD,wBAAgB,UAAU,CACxB,SAAS,EACT,OAAO,EACP,OAAO,EACP,KAAK,EACL,WAAW,EACX,SAAS,EACT,YAAY,EACZ,KAAK,EACL,cAAc,EAAE;IAChB,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAChD,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;CACnC,GA2BO,kBAAkB,CACtB,SAAS,EACT,OAAO,EACP,OAAO,EACP,KAAK,EACL,WAAW,EACX,SAAS,EACT,YAAY,EACZ,KAAK,CACN,CACF"}

package/lib/typescript/tile/types.d.ts

@@ -0,0 +1,119 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+import type { WithStyleContextProps } from '@cdx-ui/utils';
+export type TileGroupType = 'single' | 'multiple';
+export type TileGroupValue = string | string[] | undefined;
+interface ITileGroupBaseProps extends ViewProps, WithStyleContextProps {
+    /** Disables the whole group. */
+    isDisabled?: boolean;
+    /** Accessible name for the group (radiogroup / group). */
+    'aria-label'?: string;
+}
+export interface ITileGroupSingleProps extends ITileGroupBaseProps {
+    /** Single-select (radio semantics). One value at a time. */
+    type: 'single';
+    /** Controlled selected value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    /** Called when selection changes. */
+    onValueChange?: (value: string) => void;
+}
+export interface ITileGroupMultipleProps extends ITileGroupBaseProps {
+    /** Multi-select (checkbox semantics). Zero to `max` values at a time. */
+    type: 'multiple';
+    /** Controlled selected values. */
+    value?: string[];
+    /** Uncontrolled initial values. */
+    defaultValue?: string[];
+    /** Called when selection changes. */
+    onValueChange?: (value: string[]) => void;
+    /** Maximum selections allowed. @default Infinity */
+    max?: number;
+}
+/**
+ * Discriminated union: `type` narrows `value` / `defaultValue` / `onValueChange`,
+ * and `max` is only valid on `type="multiple"`.
+ */
+export type ITileGroupProps = ITileGroupSingleProps | ITileGroupMultipleProps;
+export interface ITileGroupContextValue {
+    type: TileGroupType;
+    /** Current selection (string for single, array for multiple). */
+    value: string | string[] | undefined;
+    toggleValue: (tileValue: string) => void;
+    isSelected: (tileValue: string) => boolean;
+    /** Group-level disabled or multi-select at max (unselected tiles). */
+    isTileDisabledByGroup: (tileValue: string) => boolean;
+    isGroupDisabled: boolean;
+    max: number;
+}
+export interface ITileContextValue {
+    /** This tile's `value`. */
+    value: string;
+    isSelected: boolean;
+    /** Effective disabled (group rules + tile `disabled`). */
+    isDisabled: boolean;
+    selectionType: TileGroupType;
+}
+export type ITilePressablePassthrough = Partial<Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>>;
+export interface ITileProps extends PressableProps, ITilePressablePassthrough, WithStyleContextProps {
+    /**
+     * Identifies this tile within `Tile.Group`. Must be unique within the group.
+     * Standalone tiles still require a value (useful for form submission, analytics, etc.).
+     */
+    value: string;
+    /**
+     * Disables this tile (in addition to group rules such as multi-select max).
+     */
+    disabled?: boolean;
+    /**
+     * Controlled selected state for **standalone** usage (no parent `Tile.Group`).
+     * Ignored when the tile is rendered inside a `Tile.Group` — selection is owned by the group.
+     */
+    isSelected?: boolean;
+    /**
+     * Initial selected state for **standalone**, uncontrolled usage.
+     */
+    defaultSelected?: boolean;
+    /**
+     * Called when standalone selection state changes. Group context overrides this — when inside
+     * a `Tile.Group`, use the group's `onValueChange` instead.
+     */
+    onSelectedChange?: (isSelected: boolean) => void;
+}
+export interface ITileLeadingSlotProps extends ViewProps {
+    /**
+     * Leading content is decorative by default for screen readers.
+     * @default true
+     */
+    'aria-hidden'?: boolean;
+}
+export type ITileContentProps = ViewProps;
+export type ITileTitleProps = TextProps;
+export type ITileDescriptionProps = TextProps;
+export interface ITileIndicatorProps extends ViewProps {
+    /**
+     * Explicit indicator visual. When inside a `Tile.Group`, auto-infers from `type`
+     * (`single` → radio, `multiple` → checkbox). For standalone tiles, defaults to `'checkbox'`
+     * to match the standalone `checkbox` ARIA role; override with `indicatorType="radio"` if
+     * a radio-style visual is needed.
+     */
+    indicatorType?: 'radio' | 'checkbox';
+    children?: ReactNode;
+}
+/**
+ * Generic trailing content slot. Use for chevrons, amounts, chips, status text — anything that
+ * is **not** the radio/checkbox selection affordance. For that, use `Tile.Indicator`.
+ */
+export type ITileTrailingSlotProps = ViewProps;
+export type ITileComponentType<RootRef, LeadingSlot, Content, Title, Description, Indicator, TrailingSlot, Group> = ForwardRefExoticComponent<RefAttributes<RootRef> & ITileProps> & {
+    Group: ForwardRefExoticComponent<RefAttributes<Group> & PropsWithoutRef<Group> & ITileGroupProps>;
+    LeadingSlot: ForwardRefExoticComponent<RefAttributes<LeadingSlot> & PropsWithoutRef<LeadingSlot> & ITileLeadingSlotProps>;
+    Content: ForwardRefExoticComponent<RefAttributes<Content> & PropsWithoutRef<Content> & ITileContentProps>;
+    Title: ForwardRefExoticComponent<RefAttributes<Title> & PropsWithoutRef<Title> & ITileTitleProps>;
+    Description: ForwardRefExoticComponent<RefAttributes<Description> & PropsWithoutRef<Description> & ITileDescriptionProps>;
+    Indicator: ForwardRefExoticComponent<RefAttributes<Indicator> & PropsWithoutRef<Indicator> & ITileIndicatorProps>;
+    TrailingSlot: ForwardRefExoticComponent<RefAttributes<TrailingSlot> & PropsWithoutRef<TrailingSlot> & ITileTrailingSlotProps>;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/tile/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tile/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.31",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -51,13 +51,16 @@
     }
   },
   "dependencies": {
+    "@react-aria/utils": "^3.33.0",
     "@react-aria/visually-hidden": "3.8.30",
     "@react-native-aria/checkbox": "0.2.10",
     "@react-native-aria/focus": "^0.2.9",
     "@react-native-aria/interactions": "^0.2.16",
+    "@react-native-aria/radio": "0.2.13",
     "@react-stately/checkbox": "3.7.4",
+    "@react-stately/radio": "3.12.0",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/utils": "0.0.1-beta.3"
+    "@cdx-ui/utils": "0.0.1-beta.31"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/checkbox/createCheckboxRoot.web.tsx

@@ -6,8 +6,10 @@ import { CheckboxProvider } from './context';
 import type { ICheckboxProps } from './types';
 import { useCheckboxRoot } from './useCheckboxRoot';
 
-// TODO: Label is taking focus on keyboard navigation
-
+/**
+ * Web uses a native checkbox input (VisuallyHidden) for ARIA + focus management. The outer
+ * `Pressable` must not be in the tab order or each control consumes two Tab stops (wrapper + input).
+ */
 export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
   forwardRef(({ children, ...props }: ICheckboxProps, ref?: React.Ref<T>) => {
     const {
@@ -41,6 +43,8 @@ export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
       <BaseCheckbox
         {...(combinedProps as T)}
         ref={mergedRef}
+        // Native input is the only tab stop; Pressable is still clickable (mouse / screen reader).
+        tabIndex={-1}
         role="label"
         // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
         accessibilityRole="label"

package/src/field/createFieldLabel.tsx

@@ -20,7 +20,10 @@ export const createFieldLabel = <T,>(BaseFormLabel: React.ComponentType<T>) =>
           {...(props as T)}
           id={labelId}
           htmlFor={htmlFor}
-          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
+          {...dataAttributes({
+            invalid: field.isInvalid,
+            required: field.isRequired,
+          })}
         >
           {children}
           {field.isRequired ? requiredIndicator : null}

package/src/index.ts

@@ -7,9 +7,12 @@ export * from './form';
 export * from './input';
 export * from './otp-input';
 export * from './link';
+export * from './list-item';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';
+export * from './tile';
 export * from './progress';
+export * from './radio';
 export type { InteractionState } from './types';
 export { dataAttributes } from './utils/dataAttributes';

package/src/input/createInputField.tsx

@@ -49,8 +49,14 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
 
       const field = useFormControlContext();
 
+      const reportLabelFocus = (focused: boolean) => {
+        const active = focused && !(isDisabled || inputProps.disabled);
+        field.setIsLabelFocused?.(active);
+      };
+
       const handleFocus = (focusState: boolean, callback: any) => {
         setIsFocused(focusState);
+        reportLabelFocus(focusState);
         callback();
       };
 

package/src/list-item/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IListItemContextValue } from './types';
+
+export const [ListItemProvider, useListItemContext] =
+  createContext<IListItemContextValue>('ListItemContext');

package/src/list-item/createListItemContent.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemContentProps } from './types';
+
+const contentStyle = {
+  flex: 1,
+  flexDirection: 'column' as const,
+  minWidth: 0,
+};
+
+export const createListItemContent = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: IListItemContentProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'list-item-content',
+      })}
+      ref={ref as React.Ref<T>}
+      style={[contentStyle, style]}
+    >
+      {children}
+    </Base>
+  ));

package/src/list-item/createListItemDescription.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemDescriptionProps } from './types';
+
+export const createListItemDescription = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, style, ...props }: IListItemDescriptionProps, ref: React.Ref<unknown>) => (
+      <Base
+        {...(props as T)}
+        {...dataAttributes({
+          slot: 'list-item-description',
+        })}
+        ref={ref as React.Ref<T>}
+        style={style}
+      >
+        {children}
+      </Base>
+    ),
+  );

package/src/list-item/createListItemLeadingSlot.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemLeadingSlotProps } from './types';
+
+const shrinkZero = { flexShrink: 0 as const };
+
+export const createListItemLeadingSlot = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      { 'aria-hidden': ariaHidden, style, children, ...props }: IListItemLeadingSlotProps,
+      ref: React.Ref<unknown>,
+    ) => {
+      const accessibilityElementsHidden = ariaHidden !== false;
+
+      return (
+        <Base
+          {...(props as T)}
+          {...dataAttributes({
+            slot: 'list-item-leading',
+          })}
+          accessibilityElementsHidden={accessibilityElementsHidden}
+          aria-hidden={ariaHidden}
+          ref={ref as React.Ref<T>}
+          style={[shrinkZero, style]}
+        >
+          {children}
+        </Base>
+      );
+    },
+  );

package/src/list-item/createListItemMeta.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemMetaProps } from './types';
+
+export const createListItemMeta = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: IListItemMetaProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'list-item-meta',
+      })}
+      ref={ref as React.Ref<T>}
+      style={style}
+    >
+      {children}
+    </Base>
+  ));

package/src/list-item/createListItemRoot.tsx

@@ -0,0 +1,178 @@
+import React, { forwardRef, useMemo } from 'react';
+import type { PressableProps } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { ListItemProvider } from './context';
+import type { IListItemProps, IListItemPressablePassthrough } from './types';
+
+function listItemRootDataAttrs(
+  size: IListItemProps['size'],
+  surface: IListItemProps['surface'],
+  showSeparator: boolean | undefined,
+  crossAlign: IListItemProps['crossAlign'],
+) {
+  return dataAttributes({
+    slot: 'list-item',
+    size: size ?? 'default',
+    surface: surface ?? 'default',
+    separator: showSeparator ?? true,
+    crossAlign: crossAlign ?? 'center',
+  });
+}
+
+function rowStyleForCrossAlign(crossAlign: IListItemProps['crossAlign']) {
+  return {
+    flexDirection: 'row' as const,
+    alignSelf: 'stretch' as const,
+    alignItems: crossAlign === 'start' ? ('flex-start' as const) : ('center' as const),
+  };
+}
+
+export const createListItemRoot = <V, P>(
+  BaseView: React.ComponentType<V>,
+  BasePressable: React.ComponentType<P>,
+) =>
+  forwardRef(
+    (
+      {
+        asChild = false,
+        children,
+        onPress,
+        size = 'default',
+        surface = 'default',
+        showSeparator = true,
+        crossAlign = 'center',
+        disabled = false,
+        style,
+        ...restProps
+      }: IListItemProps,
+      ref: React.Ref<unknown>,
+    ) => {
+      const childOnPress = React.isValidElement(children)
+        ? ((children.props as { onPress?: unknown }).onPress as
+            | IListItemProps['onPress']
+            | undefined)
+        : undefined;
+
+      // asChild always wins when explicitly set with a valid element — even when the press
+      // surface is built internally by the child (e.g. `Link` adds its onPress via `useLink`,
+      // not as a JSX-level prop). The clone path below preserves the child's own press by
+      // *omitting* `onPress` when there is nothing to compose.
+      const asChildInteractive = asChild && React.isValidElement(children);
+      const isPressableRoot = !!onPress && !asChildInteractive;
+
+      const pressState = usePress({
+        isDisabled: !isPressableRoot || disabled,
+      });
+      const isPressed = pressState.isPressed;
+      const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+      const { hoverProps, isHovered } = useHover();
+
+      const slotAttrs = listItemRootDataAttrs(size, surface, showSeparator, crossAlign);
+
+      const contextValue = useMemo(
+        () => ({
+          isPressed: isPressableRoot ? isPressed : false,
+          isHovered,
+          isDisabled: disabled,
+          crossAlign: crossAlign ?? 'center',
+        }),
+        [isPressableRoot, isPressed, isHovered, disabled, crossAlign],
+      );
+
+      if (asChildInteractive) {
+        const child = children as React.ReactElement<Record<string, unknown>>;
+
+        const childDisabled = !!(child.props as { disabled?: boolean }).disabled;
+        const resolvedDisabled = disabled || childDisabled;
+
+        const cloneProps: Record<string, unknown> = {
+          ...restProps,
+          ...slotAttrs,
+          ...dataAttributes({
+            active: false,
+            hover: false,
+            disabled: resolvedDisabled,
+          }),
+          ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+          disabled: resolvedDisabled,
+          ref: mergeRefs(ref, child.props.ref as React.Ref<unknown>),
+          style: [rowStyleForCrossAlign(crossAlign), style, child.props.style],
+        };
+
+        // Only override the child's `onPress` when we have something to add (a parent handler)
+        // or need to suppress (disabled). Otherwise leave the child's own onPress alone — e.g.
+        // `Link` builds its navigation handler inside `useLink`, not as a JSX-level prop, and
+        // overriding here would shadow it.
+        if (resolvedDisabled) {
+          cloneProps.onPress = undefined;
+        } else if (onPress) {
+          cloneProps.onPress = composeEventHandlers(childOnPress, onPress);
+        }
+
+        return (
+          <ListItemProvider
+            value={{
+              isPressed: false,
+              isHovered: false,
+              isDisabled: resolvedDisabled,
+              crossAlign: crossAlign ?? 'center',
+            }}
+          >
+            {React.cloneElement(child, cloneProps)}
+          </ListItemProvider>
+        );
+      }
+
+      if (isPressableRoot) {
+        const interactionAttrs = dataAttributes({
+          active: isPressed,
+          hover: isHovered,
+          disabled,
+        });
+
+        const {
+          onPressIn: onPressInProp,
+          onPressOut: onPressOutProp,
+          onHoverIn: onHoverInProp,
+          onHoverOut: onHoverOutProp,
+        } = restProps as IListItemPressablePassthrough;
+
+        return (
+          <ListItemProvider value={contextValue}>
+            <BasePressable
+              {...(restProps as P)}
+              {...slotAttrs}
+              {...interactionAttrs}
+              {...(disabled && { accessibilityState: { disabled: true } })}
+              disabled={disabled}
+              ref={ref as React.Ref<P>}
+              style={[rowStyleForCrossAlign(crossAlign), style]}
+              onPress={disabled ? undefined : onPress}
+              onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
+              onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
+              onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
+              onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
+            >
+              {children}
+            </BasePressable>
+          </ListItemProvider>
+        );
+      }
+
+      return (
+        <ListItemProvider value={contextValue}>
+          <BaseView
+            {...(restProps as V)}
+            {...slotAttrs}
+            {...(disabled ? dataAttributes({ disabled: true }) : undefined)}
+            ref={ref as React.Ref<V>}
+            style={[rowStyleForCrossAlign(crossAlign), style]}
+          >
+            {children}
+          </BaseView>
+        </ListItemProvider>
+      );
+    },
+  );

package/src/list-item/createListItemSectionHeader.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemSectionHeaderProps } from './types';
+
+const row = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  justifyContent: 'space-between' as const,
+  gap: 8,
+};
+
+const labelCell = {
+  flex: 1,
+  minWidth: 0,
+  /** Keeps the label column from stretching to a taller trailing sibling (e.g. Chip). */
+  alignSelf: 'center' as const,
+};
+
+const trailingCell = {
+  flexShrink: 0,
+  /** Prevents the trailing slot from stretching vertically and “filling” the row. */
+  alignSelf: 'center' as const,
+};
+
+export const createListItemSectionHeader = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        children,
+        trailing,
+        showDivider = true,
+        style,
+        accessibilityRole = 'header',
+        ...props
+      }: IListItemSectionHeaderProps,
+      ref: React.Ref<unknown>,
+    ) => (
+      <Base
+        {...(props as T)}
+        {...dataAttributes({
+          slot: 'list-section-header',
+          divider: showDivider,
+        })}
+        accessibilityRole={accessibilityRole}
+        ref={ref as React.Ref<T>}
+        style={[row, style]}
+      >
+        <View style={labelCell}>{children}</View>
+        {trailing ? <View style={trailingCell}>{trailing}</View> : null}
+      </Base>
+    ),
+  );

package/src/list-item/createListItemTitle.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemTitleProps } from './types';
+
+export const createListItemTitle = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: IListItemTitleProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'list-item-title',
+      })}
+      ref={ref as React.Ref<T>}
+      style={style}
+    >
+      {children}
+    </Base>
+  ));

package/src/list-item/createListItemTrailingSlot.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemTrailingSlotProps } from './types';
+
+const shrinkZero = { flexShrink: 0 as const };
+
+export const createListItemTrailingSlot = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, style, ...props }: IListItemTrailingSlotProps, ref: React.Ref<unknown>) => (
+      <Base
+        {...(props as T)}
+        {...dataAttributes({
+          slot: 'list-item-trailing',
+        })}
+        ref={ref as React.Ref<T>}
+        style={[shrinkZero, style]}
+      >
+        {children}
+      </Base>
+    ),
+  );