@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.14

package/src/index.ts

@@ -11,6 +11,7 @@ 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';

package/src/list-item/createListItemRoot.tsx

@@ -49,7 +49,17 @@ export const createListItemRoot = <V, P>(
       }: IListItemProps,
       ref: React.Ref<unknown>,
     ) => {
-      const asChildInteractive = asChild && !!onPress && React.isValidElement(children);
+      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({
@@ -74,15 +84,33 @@ export const createListItemRoot = <V, P>(
       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;
 
+        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={{
@@ -92,20 +120,7 @@ export const createListItemRoot = <V, P>(
               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],
-            })}
+            {React.cloneElement(child, cloneProps)}
           </ListItemProvider>
         );
       }
@@ -113,7 +128,7 @@ export const createListItemRoot = <V, P>(
       if (isPressableRoot) {
         const interactionAttrs = dataAttributes({
           active: isPressed,
-          hovered: isHovered,
+          hover: isHovered,
           disabled,
         });
 

package/src/tile/context.tsx

@@ -0,0 +1,23 @@
+import { createContext as createReactContext, useContext } from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { ITileContextValue, ITileGroupContextValue } from './types';
+
+// Per-tile subtree (selection-aware slots, indicator, etc.)
+export const [TileProvider, useTileContext] = createContext<ITileContextValue>('TileContext');
+
+// Per-group subtree (optional — standalone tiles have no provider)
+const TileGroupContext = createReactContext<ITileGroupContextValue | null>(null);
+
+export const TileGroupContextProvider = TileGroupContext.Provider;
+
+export function useTileGroupContext(): ITileGroupContextValue {
+  const ctx = useContext(TileGroupContext);
+  if (!ctx) {
+    throw new Error('Tile must be used within Tile.Group');
+  }
+  return ctx;
+}
+
+export function useOptionalTileGroupContext(): ITileGroupContextValue | null {
+  return useContext(TileGroupContext);
+}

package/src/tile/createTileContent.tsx

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

package/src/tile/createTileDescription.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ITileDescriptionProps } from './types';
+
+const noUnderline = { textDecorationLine: 'none' as const };
+
+export const createTileDescription = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: ITileDescriptionProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'tile-description',
+      })}
+      ref={ref as React.Ref<T>}
+      style={[noUnderline, style]}
+    >
+      {children}
+    </Base>
+  ));

package/src/tile/createTileGroup.tsx

@@ -0,0 +1,134 @@
+import React, { forwardRef, useCallback, useMemo, type Ref } from 'react';
+import type { ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import { TileGroupContextProvider } from './context';
+import type { ITileGroupProps, TileGroupType } from './types';
+
+/**
+ * Internal widening of the public discriminated union: the runtime accepts any value
+ * shape and reads `type` to decide branch behavior. The public API stays narrow.
+ */
+type WidenedTileGroupProps = ViewProps & {
+  type: TileGroupType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  max?: number;
+  isDisabled?: boolean;
+  'aria-label'?: string;
+};
+
+export const createTileGroup = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef((props: ITileGroupProps, ref: Ref<T>) => {
+    const {
+      children,
+      type,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      max: maxProp,
+      isDisabled = false,
+      'aria-label': ariaLabel,
+      ...rest
+    } = props as WidenedTileGroupProps;
+
+    const max = maxProp ?? Number.POSITIVE_INFINITY;
+
+    const defaultProp =
+      defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : undefined;
+
+    const [state, setState] = useControllableState<string | string[] | undefined>({
+      prop: valueProp,
+      defaultProp,
+      onChange: (next) => {
+        if (next !== undefined) {
+          onValueChange?.(next);
+        }
+      },
+    });
+
+    const isSelected = useCallback(
+      (tileValue: string) => {
+        if (type === 'single') {
+          return state === tileValue;
+        }
+        return Array.isArray(state) && state.includes(tileValue);
+      },
+      [type, state],
+    );
+
+    const isTileDisabledByGroup = useCallback(
+      (tileValue: string) => {
+        if (isDisabled) {
+          return true;
+        }
+        if (type !== 'multiple') {
+          return false;
+        }
+        const arr = Array.isArray(state) ? state : [];
+        if (arr.length < max) {
+          return false;
+        }
+        return !arr.includes(tileValue);
+      },
+      [isDisabled, type, state, max],
+    );
+
+    const toggleValue = useCallback(
+      (tileValue: string) => {
+        if (isDisabled) {
+          return;
+        }
+        if (type === 'single') {
+          if (state === tileValue) {
+            return;
+          }
+          setState(tileValue);
+          return;
+        }
+        const arr = Array.isArray(state) ? [...state] : [];
+        const idx = arr.indexOf(tileValue);
+        if (idx >= 0) {
+          arr.splice(idx, 1);
+          setState(arr);
+        } else if (arr.length < max) {
+          arr.push(tileValue);
+          setState(arr);
+        }
+      },
+      [isDisabled, type, state, setState, max],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        type,
+        value: state,
+        toggleValue,
+        isSelected,
+        isTileDisabledByGroup,
+        isGroupDisabled: isDisabled,
+        max,
+      }),
+      [type, state, toggleValue, isSelected, isTileDisabledByGroup, isDisabled, max],
+    );
+
+    const role = type === 'single' ? 'radiogroup' : 'group';
+
+    return (
+      <TileGroupContextProvider value={contextValue}>
+        <Base
+          {...(rest as T)}
+          ref={ref}
+          role={role}
+          {...(type === 'single' ? { accessibilityRole: 'radiogroup' as const } : {})}
+          {...(ariaLabel ? { 'aria-label': ariaLabel, accessibilityLabel: ariaLabel } : {})}
+          {...dataAttributes({
+            slot: 'tile-group',
+          })}
+        >
+          {children}
+        </Base>
+      </TileGroupContextProvider>
+    );
+  });

package/src/tile/createTileIndicator.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useTileContext } from './context';
+import type { ITileIndicatorProps } from './types';
+
+const shrinkZero = { flexShrink: 0 as const, pointerEvents: 'none' as const };
+
+export const createTileIndicator = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      { children, style, indicatorType, ...props }: ITileIndicatorProps,
+      ref: React.Ref<unknown>,
+    ) => {
+      const { isSelected, isDisabled, selectionType } = useTileContext();
+
+      // Effective visual type: explicit prop wins; otherwise infer from group/standalone context.
+      const effectiveType: 'radio' | 'checkbox' =
+        indicatorType ?? (selectionType === 'single' ? 'radio' : 'checkbox');
+
+      return (
+        <Base
+          {...(props as T)}
+          accessibilityElementsHidden
+          aria-hidden
+          {...dataAttributes({
+            slot: 'tile-indicator',
+            checked: isSelected,
+            selectionType: effectiveType === 'radio' ? 'single' : 'multiple',
+            disabled: isDisabled,
+          })}
+          ref={ref as React.Ref<T>}
+          style={[shrinkZero, style]}
+        >
+          {children}
+        </Base>
+      );
+    },
+  );

package/src/tile/createTileLeadingSlot.tsx

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

package/src/tile/createTileRoot.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, useMemo } from 'react';
+import { composeEventHandlers, mergeRefs, useControllableState } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { TileProvider, useOptionalTileGroupContext } from './context';
+import type { ITileProps, ITilePressablePassthrough } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignSelf: 'stretch' as const,
+  alignItems: 'center' as const,
+};
+
+export const createTileRoot = <T,>(BasePressable: React.ComponentType<T>) =>
+  forwardRef((props: ITileProps, ref: React.Ref<unknown>) => {
+    const {
+      value,
+      disabled: disabledProp = false,
+      isSelected: controlledSelected,
+      defaultSelected,
+      onSelectedChange,
+      children,
+      onPress,
+      onFocus,
+      onBlur,
+      style,
+      /** Consumed by styled `withStyleContext` root. */
+      context: _styleContext,
+      ...rest
+    } = props;
+
+    const group = useOptionalTileGroupContext();
+
+    // Standalone selection state — only meaningful when no group owns selection.
+    const [standaloneSelected = false, setStandaloneSelected] = useControllableState<boolean>({
+      prop: controlledSelected,
+      defaultProp: defaultSelected ?? false,
+      onChange: (next) => {
+        onSelectedChange?.(next);
+      },
+    });
+
+    const isSelected = group ? group.isSelected(value) : standaloneSelected;
+    const disabledByGroup = group ? group.isTileDisabledByGroup(value) : false;
+    const isDisabled = disabledByGroup || disabledProp;
+    const cannotToggle = isDisabled;
+
+    const { focusProps, isFocused } = useFocus();
+    const { pressProps, isPressed } = usePress({ isDisabled: cannotToggle });
+    const { hoverProps, isHovered } = useHover();
+
+    // Standalone tiles use checkbox semantics (independent on/off toggle).
+    const selectionType = group ? group.type : 'multiple';
+
+    const accessibilityState = useMemo(
+      () => ({
+        disabled: isDisabled,
+        ...(selectionType === 'single' ? { selected: isSelected } : { checked: isSelected }),
+      }),
+      [isDisabled, isSelected, selectionType],
+    );
+
+    const tileContext = useMemo(
+      () => ({ value, isSelected, isDisabled, selectionType }),
+      [value, isSelected, isDisabled, selectionType],
+    );
+
+    const passthrough = rest as ITilePressablePassthrough;
+
+    const composedOnPress = composeEventHandlers(onPress, () => {
+      if (cannotToggle) {
+        return;
+      }
+      if (group) {
+        group.toggleValue(value);
+      } else {
+        setStandaloneSelected(!standaloneSelected);
+      }
+    });
+
+    const sharedHandlers = {
+      onPress: isDisabled ? undefined : composedOnPress,
+      onPressIn: composeEventHandlers(passthrough.onPressIn, pressProps.onPressIn),
+      onPressOut: composeEventHandlers(passthrough.onPressOut, pressProps.onPressOut),
+      onHoverIn: composeEventHandlers(passthrough.onHoverIn, hoverProps.onHoverIn),
+      onHoverOut: composeEventHandlers(passthrough.onHoverOut, hoverProps.onHoverOut),
+      onFocus: composeEventHandlers(onFocus, focusProps.onFocus),
+      onBlur: composeEventHandlers(onBlur, focusProps.onBlur),
+    } as const;
+
+    const role = selectionType === 'single' ? 'radio' : 'checkbox';
+
+    const sharedAttrs = {
+      accessibilityRole: role,
+      role,
+      accessibilityState,
+      'aria-checked': isSelected,
+      ...(isDisabled ? { 'aria-disabled': true as const } : {}),
+      ...dataAttributes({
+        slot: 'tile',
+        state: isSelected ? 'selected' : 'unselected',
+        disabled: isDisabled,
+        active: isPressed,
+        hover: isHovered,
+        focused: isFocused,
+      }),
+    };
+
+    return (
+      <TileProvider value={tileContext}>
+        <BasePressable
+          {...(rest as T)}
+          context={_styleContext}
+          ref={mergeRefs(ref) as React.Ref<T>}
+          {...sharedAttrs}
+          {...sharedHandlers}
+          style={[rowStyle, style]}
+        >
+          {children}
+        </BasePressable>
+      </TileProvider>
+    );
+  });

package/src/tile/createTileTitle.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ITileTitleProps } from './types';
+
+const noUnderline = { textDecorationLine: 'none' as const };
+
+export const createTileTitle = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: ITileTitleProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'tile-title',
+      })}
+      ref={ref as React.Ref<T>}
+      style={[noUnderline, style]}
+    >
+      {children}
+    </Base>
+  ));

package/src/tile/createTileTrailingSlot.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ITileTrailingSlotProps } from './types';
+
+const shrinkZero = { flexShrink: 0 as const };
+
+/**
+ * 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 const createTileTrailingSlot = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: ITileTrailingSlotProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'tile-trailing',
+      })}
+      ref={ref as React.Ref<T>}
+      style={[shrinkZero, style]}
+    >
+      {children}
+    </Base>
+  ));

package/src/tile/index.ts

@@ -0,0 +1,88 @@
+import type React from 'react';
+import { createTileContent } from './createTileContent';
+import { createTileDescription } from './createTileDescription';
+import { createTileGroup } from './createTileGroup';
+import { createTileIndicator } from './createTileIndicator';
+import { createTileLeadingSlot } from './createTileLeadingSlot';
+import { createTileRoot } from './createTileRoot';
+import { createTileTitle } from './createTileTitle';
+import { createTileTrailingSlot } from './createTileTrailingSlot';
+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 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>;
+}) {
+  const Tile = createTileRoot(BaseComponents.Pressable);
+  const Group = createTileGroup(BaseComponents.Group);
+  const LeadingSlot = createTileLeadingSlot(BaseComponents.LeadingSlot);
+  const Content = createTileContent(BaseComponents.Content);
+  const Title = createTileTitle(BaseComponents.Title);
+  const Description = createTileDescription(BaseComponents.Description);
+  const Indicator = createTileIndicator(BaseComponents.Indicator);
+  const TrailingSlot = createTileTrailingSlot(BaseComponents.TrailingSlot);
+
+  Tile.displayName = 'TilePrimitive';
+  Group.displayName = 'TilePrimitive.Group';
+  LeadingSlot.displayName = 'TilePrimitive.LeadingSlot';
+  Content.displayName = 'TilePrimitive.Content';
+  Title.displayName = 'TilePrimitive.Title';
+  Description.displayName = 'TilePrimitive.Description';
+  Indicator.displayName = 'TilePrimitive.Indicator';
+  TrailingSlot.displayName = 'TilePrimitive.TrailingSlot';
+
+  return Object.assign(Tile, {
+    Group,
+    LeadingSlot,
+    Content,
+    Title,
+    Description,
+    Indicator,
+    TrailingSlot,
+  }) as ITileComponentType<
+    Pressable,
+    Leading,
+    Content,
+    Title,
+    Description,
+    Indicator,
+    TrailingSlot,
+    Group
+  >;
+}