@cdx-ui/primitives 0.0.1-beta.2 → 0.0.1-beta.21

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>
+    ),
+  );

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
+  >;
+}

package/src/list-item/types.ts

@@ -0,0 +1,122 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+
+export type ListItemSize = 'default' | 'compact';
+
+export type ListItemSurface = 'default' | 'negative';
+
+/**
+ * Cross-axis alignment for the row (`flex-direction: row`).
+ * - **center**: Leading, content, and trailing are vertically centered (typical transactions).
+ * - **start**: Top-aligned — use when trailing text should align with the title row (e.g. branch distance “2.04 mi”) or status chips sit above a tall content stack.
+ */
+export type ListItemCrossAlign = 'center' | 'start';
+
+export type IListItemPressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+export interface IListItemProps extends ViewProps, IListItemPressablePassthrough {
+  /**
+   * Disables press handling when the root is pressable (maps to Pressable `disabled`).
+   */
+  disabled?: boolean;
+  /**
+   * When set (and `asChild` is not used), root renders as pressable with interaction props.
+   */
+  onPress?: PressableProps['onPress'];
+  /**
+   * Vertical density; mapped at styled layer via `data-size`.
+   * @default 'default'
+   */
+  size?: ListItemSize;
+  /**
+   * Semantic row surface (e.g. canceled transaction); mapped via `data-surface`.
+   * @default 'default'
+   */
+  surface?: ListItemSurface;
+  /**
+   * Whether the row shows a bottom separator; mapped via `data-separator`.
+   * @default true
+   */
+  showSeparator?: boolean;
+  /**
+   * Vertical alignment of leading / content / trailing along the row cross axis.
+   * @default 'center'
+   */
+  crossAlign?: ListItemCrossAlign;
+  /**
+   * Merge interaction props onto a single child instead of rendering the default pressable root.
+   * Intended for use with `onPress`.
+   */
+  asChild?: boolean;
+}
+
+export interface IListItemContextValue {
+  isPressed: boolean;
+  isHovered: boolean;
+  isDisabled: boolean;
+  crossAlign: ListItemCrossAlign;
+}
+
+export interface IListItemLeadingSlotProps extends ViewProps {
+  /**
+   * Decorative leading content defaults to hidden from the accessibility tree.
+   * Set to `false` when the leading region contains meaningful controls.
+   * @default true
+   */
+  'aria-hidden'?: boolean;
+}
+
+export type IListItemContentProps = ViewProps;
+
+export type IListItemTitleProps = TextProps;
+
+export type IListItemDescriptionProps = TextProps;
+
+export type IListItemMetaProps = TextProps;
+
+export type IListItemTrailingSlotProps = ViewProps;
+
+export interface IListItemSectionHeaderProps extends ViewProps {
+  /** Primary section label (e.g. date heading). */
+  children: ReactNode;
+  /** Optional right-aligned adornment (e.g. section Chip). */
+  trailing?: ReactNode;
+  /**
+   * Whether to expose the top divider marker for styling (`data-divider`).
+   * @default true
+   */
+  showDivider?: boolean;
+}
+
+export type IListItemComponentType<
+  RootRef,
+  LeadingSlot,
+  Content,
+  Title,
+  Description,
+  Meta,
+  TrailingSlot,
+  SectionHeader,
+> = ForwardRefExoticComponent<RefAttributes<RootRef> & IListItemProps> & {
+  LeadingSlot: ForwardRefExoticComponent<
+    RefAttributes<LeadingSlot> & PropsWithoutRef<LeadingSlot> & IListItemLeadingSlotProps
+  >;
+  Content: ForwardRefExoticComponent<
+    RefAttributes<Content> & PropsWithoutRef<Content> & IListItemContentProps
+  >;
+  Title: ForwardRefExoticComponent<
+    RefAttributes<Title> & PropsWithoutRef<Title> & IListItemTitleProps
+  >;
+  Description: ForwardRefExoticComponent<
+    RefAttributes<Description> & PropsWithoutRef<Description> & IListItemDescriptionProps
+  >;
+  Meta: ForwardRefExoticComponent<RefAttributes<Meta> & PropsWithoutRef<Meta> & IListItemMetaProps>;
+  TrailingSlot: ForwardRefExoticComponent<
+    RefAttributes<TrailingSlot> & PropsWithoutRef<TrailingSlot> & IListItemTrailingSlotProps
+  >;
+  SectionHeader: ForwardRefExoticComponent<
+    RefAttributes<SectionHeader> & PropsWithoutRef<SectionHeader> & IListItemSectionHeaderProps
+  >;
+};

package/src/radio/context.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { RadioGroupState } from '@react-stately/radio';
+import type { IRadioContextValue } from './types';
+
+export const [RadioProvider, useRadioContext] = createContext<IRadioContextValue>('RadioContext');
+
+export interface IRadioGroupState {
+  isReadOnly: boolean;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isRequired: boolean;
+  isSelected: (value: string) => boolean;
+  selectValue: (value: string) => void;
+}
+
+export const RadioGroupContext = React.createContext<{
+  state: IRadioGroupState;
+  radioGroupState: RadioGroupState;
+  name?: string;
+} | null>(null);

package/src/radio/createRadioGroup.tsx

@@ -0,0 +1,67 @@
+import { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { useRadioGroup } from '@react-native-aria/radio';
+import { useRadioGroupState } from '@react-stately/radio';
+import { dataAttributes } from '../utils/dataAttributes';
+import { RadioGroupContext } from './context';
+import type { IRadioGroupProps } from './types';
+
+export const createRadioGroup = <T,>(BaseRadioGroup: React.ComponentType<T>) =>
+  forwardRef(({ children, ...props }: IRadioGroupProps, ref?: React.Ref<T>) => {
+    const formControlContext = useFormControlContext();
+
+    const combinedProps = {
+      ...formControlContext,
+      ...props,
+    };
+
+    const radioGroupState = useRadioGroupState({
+      ...combinedProps,
+      validationState: combinedProps.isInvalid ? 'invalid' : 'valid',
+    });
+
+    const { radioGroupProps } = useRadioGroup(
+      {
+        ...combinedProps,
+        'aria-label': combinedProps['aria-label'],
+      },
+      radioGroupState,
+    );
+
+    const isDisabled = combinedProps.isDisabled ?? false;
+    const isInvalid = combinedProps.isInvalid ?? false;
+    const isRequired = combinedProps.isRequired ?? false;
+    const isReadOnly = combinedProps.isReadOnly ?? false;
+
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          state: {
+            isDisabled,
+            isInvalid,
+            isRequired,
+            isReadOnly,
+            isSelected: (value: string) => radioGroupState.selectedValue === value,
+            selectValue: (value: string) => radioGroupState.setSelectedValue(value),
+          },
+          radioGroupState,
+          name: combinedProps.name,
+        }}
+      >
+        <BaseRadioGroup
+          {...radioGroupProps}
+          {...(combinedProps as unknown as T)}
+          ref={ref}
+          aria-required={isRequired || undefined}
+          aria-readonly={isReadOnly || undefined}
+          {...dataAttributes({
+            slot: 'radio-group',
+            disabled: isDisabled,
+            invalid: isInvalid,
+          })}
+        >
+          {children}
+        </BaseRadioGroup>
+      </RadioGroupContext.Provider>
+    );
+  });

package/src/radio/createRadioIndicator.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useRadioContext } from './context';
+import type { IRadioIndicatorProps } from './types';
+
+export const createRadioIndicator = <T,>(BaseRadioIndicator: React.ComponentType<T>) =>
+  forwardRef<unknown, IRadioIndicatorProps & { className?: string }>(
+    ({ children, className, ...props }, ref) => {
+      const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly, isPressed, isFocusVisible } =
+        useRadioContext();
+
+      return (
+        <BaseRadioIndicator
+          className={className}
+          {...dataAttributes({
+            slot: 'radio-indicator',
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            active: isPressed,
+          })}
+          {...(props as T)}
+          ref={ref}
+        >
+          {children}
+        </BaseRadioIndicator>
+      );
+    },
+  );

package/src/radio/createRadioLabel.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useRadioContext } from './context';
+import type { IRadioLabelProps } from './types';
+
+export const createRadioLabel = <T,>(BaseRadioLabel: React.ComponentType<T>) =>
+  forwardRef<unknown, IRadioLabelProps & { className?: string }>(
+    ({ children, className, ...props }, ref) => {
+      const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly } = useRadioContext();
+
+      return (
+        <BaseRadioLabel
+          className={className}
+          {...dataAttributes({
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+          })}
+          {...(props as T)}
+          ref={ref}
+        >
+          {children}
+        </BaseRadioLabel>
+      );
+    },
+  );