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

package/src/radio/useRadioRoot.ts

@@ -0,0 +1,69 @@
+import { useContext, useRef } from 'react';
+import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import { useRadio } from '@react-native-aria/radio';
+import { useHover } from '@react-native-aria/interactions';
+import { RadioGroupContext } from './context';
+import type { IRadioProps } from './types';
+
+interface UseRadioRootOptions {
+  useInputRefForAria?: boolean;
+}
+
+export function useRadioRoot(
+  props: IRadioProps,
+  ref?: React.Ref<unknown>,
+  { useInputRefForAria = false }: UseRadioRootOptions = {},
+) {
+  const formControlContext = useFormControlContext();
+
+  const { isInvalid, isReadOnly, ...combinedProps } = {
+    ...formControlContext,
+    ...props,
+  };
+
+  const radioGroupContext = useContext(RadioGroupContext);
+
+  if (!radioGroupContext) {
+    throw new Error(
+      'Radio must be rendered inside a Radio.Group. Standalone Radio is not supported.',
+    );
+  }
+
+  const rootRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const mergedRootRef = mergeRefs(ref as any, rootRef as any);
+  const ariaLabel = combinedProps['aria-label'] || combinedProps.value || 'Radio';
+
+  const radio = useRadio(
+    {
+      ...combinedProps,
+      'aria-label': ariaLabel,
+      isReadOnly: isReadOnly || radioGroupContext.state.isReadOnly,
+      isDisabled: combinedProps.isDisabled || radioGroupContext.state.isDisabled,
+    } as any,
+    radioGroupContext.radioGroupState,
+    (useInputRefForAria ? inputRef : rootRef) as any,
+  );
+
+  const { inputProps, labelProps } = radio as typeof radio & {
+    labelProps?: Record<string, unknown>;
+  };
+
+  const { checked: isChecked, disabled: isDisabled } = inputProps;
+
+  const { hoverProps, isHovered } = useHover({}, rootRef);
+
+  return {
+    combinedProps,
+    isInvalid: isInvalid || radioGroupContext.state.isInvalid,
+    isReadOnly: isReadOnly || radioGroupContext.state.isReadOnly,
+    inputProps,
+    labelProps: labelProps ?? {},
+    isChecked,
+    isDisabled,
+    isHovered,
+    hoverProps,
+    mergedRef: mergedRootRef,
+    inputRef,
+  };
+}

package/src/select/createSelectTrigger.tsx

@@ -1,7 +1,12 @@
 import type React from 'react';
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { type GestureResponderEvent, Platform } from 'react-native';
-import { composeEventHandlers, mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import {
+  composeEventHandlers,
+  mergeRefs,
+  useFormControlContext,
+  useReportFormControlLabelFocus,
+} from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import type { InteractionState } from '../types';
@@ -51,6 +56,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
       });
       const { isFocused, focusProps }: any = useFocus();
       const { isHovered, hoverProps } = useHover();
+      const [triggerFocused, setTriggerFocused] = useState(false);
 
       const handlePress = useCallback(
         (e: GestureResponderEvent | KeyboardEvent) => {
@@ -84,10 +90,24 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         [disabled, setOpen],
       );
 
+      // `useFocus()` on Pressable can stay true on native after blur; use explicit focus/blur handlers.
+      const isLabelActive = Platform.select({
+        web: Boolean((isFocusedProp || isFocused || open) && !disabled),
+        default: Boolean((open || triggerFocused) && !disabled),
+      });
+
+      useReportFormControlLabelFocus(isLabelActive);
+
+      useLayoutEffect(() => {
+        if (!open) {
+          setTriggerFocused(false);
+        }
+      }, [open]);
+
       const interactionState = useMemo(
         () => ({
           hover: isHoveredProp || isHovered,
-          focus: isFocusedProp || isFocused,
+          focus: isFocusedProp || isFocused || open,
           active: isActiveProp || isActive,
           disabled: !!disabled,
           focusVisible: isFocusVisibleProp || isFocusVisible,
@@ -102,6 +122,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
           disabled,
           isFocusVisibleProp,
           isFocusVisible,
+          open,
         ],
       );
 
@@ -200,6 +221,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
                 focusProps.onFocus,
               ),
               focusRingProps.onFocus,
+              () => setTriggerFocused(true),
             )}
             onBlur={composeEventHandlers(
               composeEventHandlers(
@@ -207,6 +229,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
                 focusProps.onBlur,
               ),
               focusRingProps.onBlur,
+              () => setTriggerFocused(false),
             )}
             {...webKeyboardProps}
           >

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