@cdx-ui/primitives 0.0.1-beta.1 → 0.0.1-beta.11

package/lib/typescript/radio/useRadioRoot.d.ts

@@ -0,0 +1,149 @@
+import type { IRadioProps } from './types';
+interface UseRadioRootOptions {
+    useInputRefForAria?: boolean;
+}
+export declare function useRadioRoot(props: IRadioProps, ref?: React.Ref<unknown>, { useInputRefForAria }?: UseRadioRootOptions): {
+    combinedProps: {
+        value: string;
+        isDisabled?: boolean | undefined;
+        isHovered?: boolean;
+        isFocused?: boolean;
+        isPressed?: boolean;
+        isFocusVisible?: boolean;
+        children?: React.ReactNode;
+        onHoverIn?: null | ((event: import("react-native").MouseEvent) => void) | undefined;
+        onHoverOut?: null | ((event: import("react-native").MouseEvent) => void) | undefined;
+        onPress?: null | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPressIn?: null | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPressOut?: null | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onLongPress?: null | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onBlur?: null | ((event: import("react-native").NativeSyntheticEvent<import("react-native").TargetedEvent>) => void) | undefined;
+        onFocus?: null | ((event: import("react-native").NativeSyntheticEvent<import("react-native").TargetedEvent>) => void) | undefined;
+        cancelable?: null | boolean | undefined;
+        delayHoverIn?: number | null | undefined;
+        delayHoverOut?: number | null | undefined;
+        delayLongPress?: null | number | undefined;
+        disabled?: null | boolean | undefined;
+        hitSlop?: null | import("react-native").Insets | number | undefined;
+        pressRetentionOffset?: null | import("react-native").Insets | number | undefined;
+        android_disableSound?: null | boolean | undefined;
+        android_ripple?: null | import("react-native").PressableAndroidRippleConfig | undefined;
+        testOnly_pressed?: null | boolean | undefined;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>) | undefined;
+        unstable_pressDelay?: number | undefined;
+        accessible?: boolean | undefined;
+        accessibilityActions?: ReadonlyArray<import("react-native").AccessibilityActionInfo> | undefined;
+        accessibilityLabel?: string | undefined;
+        'aria-label'?: string | undefined;
+        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+        accessibilityState?: import("react-native").AccessibilityState | undefined;
+        'aria-busy'?: boolean | undefined;
+        'aria-checked'?: boolean | "mixed" | undefined;
+        'aria-disabled'?: boolean | undefined;
+        'aria-expanded'?: boolean | undefined;
+        'aria-selected'?: boolean | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+        'aria-valuemax'?: import("react-native").AccessibilityValue["max"] | undefined;
+        'aria-valuemin'?: import("react-native").AccessibilityValue["min"] | undefined;
+        'aria-valuenow'?: import("react-native").AccessibilityValue["now"] | undefined;
+        'aria-valuetext'?: import("react-native").AccessibilityValue["text"] | undefined;
+        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined;
+        'aria-hidden'?: boolean | undefined;
+        'aria-modal'?: boolean | undefined;
+        role?: import("react-native").Role | undefined;
+        accessibilityLabelledBy?: string | string[] | undefined;
+        'aria-labelledby'?: string | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        'aria-live'?: ("polite" | "assertive" | "off") | undefined;
+        screenReaderFocusable?: boolean | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+        accessibilityLanguage?: string | undefined;
+        accessibilityShowsLargeContentViewer?: boolean | undefined;
+        accessibilityLargeContentTitle?: string | undefined;
+        accessibilityRespondsToUserInteraction?: boolean | undefined;
+        id?: string | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined | undefined;
+        testID?: string | undefined | undefined;
+        nativeID?: string | undefined | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
+        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined | undefined;
+        removeClippedSubviews?: boolean | undefined | undefined;
+        collapsable?: boolean | undefined | undefined;
+        collapsableChildren?: boolean | undefined | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined | undefined;
+        focusable?: boolean | undefined | undefined;
+        tabIndex?: 0 | -1 | undefined | undefined;
+        shouldRasterizeIOS?: boolean | undefined | undefined;
+        isTVSelectable?: boolean | undefined | undefined;
+        hasTVPreferredFocus?: boolean | undefined | undefined;
+        tvParallaxShiftDistanceX?: number | undefined | undefined;
+        tvParallaxShiftDistanceY?: number | undefined | undefined;
+        tvParallaxTiltAngle?: number | undefined | undefined;
+        tvParallaxMagnification?: number | undefined | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
+        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
+        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
+        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
+        onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
+        hasFeedbackText?: boolean | undefined;
+        hasHelpText?: boolean | undefined;
+        setHasFeedbackText?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
+        setHasHelpText?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
+        name?: string | undefined;
+        labelId?: string | undefined;
+        feedbackId?: string | undefined;
+        helpTextId?: string | undefined;
+        htmlProps?: {
+            [x: string]: unknown;
+        } | undefined;
+        inputRef?: React.RefObject<import("react-native").TextInput | null> | undefined;
+        focusInput?: (() => void) | undefined;
+        isRequired?: boolean | undefined;
+    };
+    isInvalid: boolean;
+    isReadOnly: boolean;
+    inputProps: any;
+    labelProps: Record<string, unknown>;
+    isChecked: any;
+    isDisabled: any;
+    isHovered: boolean;
+    hoverProps: {
+        onHoverIn: () => void;
+        onHoverOut: () => void;
+    };
+    mergedRef: import("react").RefCallback<unknown>;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+};
+export {};
+//# sourceMappingURL=useRadioRoot.d.ts.map

package/lib/typescript/radio/useRadioRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioRoot.d.ts","sourceRoot":"","sources":["../../../src/radio/useRadioRoot.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,WAAW,EAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EACxB,EAAE,kBAA0B,EAAE,GAAE,mBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.11",
   "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.1"
+    "@cdx-ui/utils": "0.0.1-beta.11"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/index.ts

@@ -7,9 +7,11 @@ 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 './progress';
+export * from './radio';
 export type { InteractionState } from './types';
 export { dataAttributes } from './utils/dataAttributes';

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,163 @@
+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 asChildInteractive = asChild && !!onPress && 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 mergedOnPress = composeEventHandlers(
+          child.props.onPress as IListItemProps['onPress'],
+          onPress,
+        );
+
+        const childDisabled = !!(child.props as { disabled?: boolean }).disabled;
+
+        const resolvedDisabled = disabled || childDisabled;
+
+        return (
+          <ListItemProvider
+            value={{
+              isPressed: false,
+              isHovered: false,
+              isDisabled: resolvedDisabled,
+              crossAlign: crossAlign ?? 'center',
+            }}
+          >
+            {React.cloneElement(child, {
+              ...restProps,
+              ...slotAttrs,
+              ...dataAttributes({
+                active: false,
+                hovered: false,
+                disabled: resolvedDisabled,
+              }),
+              ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+              disabled: resolvedDisabled,
+              onPress: resolvedDisabled ? undefined : mergedOnPress,
+              ref: mergeRefs(ref, child.props.ref as React.Ref<unknown>),
+              style: [rowStyleForCrossAlign(crossAlign), style, child.props.style],
+            })}
+          </ListItemProvider>
+        );
+      }
+
+      if (isPressableRoot) {
+        const interactionAttrs = dataAttributes({
+          active: isPressed,
+          hovered: 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>
+    ),
+  );

package/src/list-item/index.ts

@@ -0,0 +1,88 @@
+import type React from 'react';
+import { createListItemContent } from './createListItemContent';
+import { createListItemDescription } from './createListItemDescription';
+import { createListItemLeadingSlot } from './createListItemLeadingSlot';
+import { createListItemMeta } from './createListItemMeta';
+import { createListItemRoot } from './createListItemRoot';
+import { createListItemSectionHeader } from './createListItemSectionHeader';
+import { createListItemTitle } from './createListItemTitle';
+import { createListItemTrailingSlot } from './createListItemTrailingSlot';
+import type { IListItemComponentType } from './types';
+
+export type {
+  IListItemComponentType,
+  IListItemContentProps,
+  IListItemContextValue,
+  IListItemDescriptionProps,
+  IListItemLeadingSlotProps,
+  IListItemMetaProps,
+  IListItemPressablePassthrough,
+  IListItemProps,
+  IListItemSectionHeaderProps,
+  IListItemTitleProps,
+  IListItemTrailingSlotProps,
+  ListItemCrossAlign,
+  ListItemSize,
+  ListItemSurface,
+} from './types';
+
+export { ListItemProvider, useListItemContext } from './context';
+
+export function createListItem<
+  ViewComponent,
+  PressableComponent,
+  LeadingSlot,
+  Content,
+  Title,
+  Description,
+  Meta,
+  TrailingSlot,
+  SectionHeader,
+>(BaseComponents: {
+  View: React.ComponentType<ViewComponent>;
+  Pressable: React.ComponentType<PressableComponent>;
+  LeadingSlot: React.ComponentType<LeadingSlot>;
+  Content: React.ComponentType<Content>;
+  Title: React.ComponentType<Title>;
+  Description: React.ComponentType<Description>;
+  Meta: React.ComponentType<Meta>;
+  TrailingSlot: React.ComponentType<TrailingSlot>;
+  SectionHeader: React.ComponentType<SectionHeader>;
+}) {
+  const ListItem = createListItemRoot(BaseComponents.View, BaseComponents.Pressable);
+  const LeadingSlot = createListItemLeadingSlot(BaseComponents.LeadingSlot);
+  const Content = createListItemContent(BaseComponents.Content);
+  const Title = createListItemTitle(BaseComponents.Title);
+  const Description = createListItemDescription(BaseComponents.Description);
+  const Meta = createListItemMeta(BaseComponents.Meta);
+  const TrailingSlot = createListItemTrailingSlot(BaseComponents.TrailingSlot);
+  const SectionHeader = createListItemSectionHeader(BaseComponents.SectionHeader);
+
+  ListItem.displayName = 'ListItemPrimitive';
+  LeadingSlot.displayName = 'ListItemPrimitive.LeadingSlot';
+  Content.displayName = 'ListItemPrimitive.Content';
+  Title.displayName = 'ListItemPrimitive.Title';
+  Description.displayName = 'ListItemPrimitive.Description';
+  Meta.displayName = 'ListItemPrimitive.Meta';
+  TrailingSlot.displayName = 'ListItemPrimitive.TrailingSlot';
+  SectionHeader.displayName = 'ListItemPrimitive.SectionHeader';
+
+  return Object.assign(ListItem, {
+    LeadingSlot,
+    Content,
+    Title,
+    Description,
+    Meta,
+    TrailingSlot,
+    SectionHeader,
+  }) as IListItemComponentType<
+    ViewComponent | PressableComponent,
+    LeadingSlot,
+    Content,
+    Title,
+    Description,
+    Meta,
+    TrailingSlot,
+    SectionHeader
+  >;
+}