@cdx-ui/primitives 0.0.1-beta.5 → 0.0.1-beta.50

package/src/radio/createRadioRoot.tsx

@@ -0,0 +1,100 @@
+import { forwardRef } from 'react';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { RadioProvider } from './context';
+import type { IRadioProps } from './types';
+import { useRadioRoot } from './useRadioRoot';
+
+export const createRadioRoot = <T,>(
+  BaseRadio: React.ComponentType<T>,
+  RadioIndicator: React.ComponentType<any>,
+) =>
+  forwardRef(
+    (
+      {
+        onPressIn,
+        onPressOut,
+        onHoverIn,
+        onHoverOut,
+        onFocus,
+        onBlur,
+        children,
+        ...props
+      }: IRadioProps,
+      ref?: React.Ref<T>,
+    ) => {
+      const {
+        isHovered: isHoveredProp,
+        isDisabled: isDisabledProp,
+        isInvalid: isInvalidProp,
+        isReadOnly: isReadOnlyProp,
+        isPressed: isPressedProp,
+        isFocused: isFocusedProp,
+        isFocusVisible,
+      } = props;
+
+      const {
+        combinedProps,
+        isInvalid,
+        isReadOnly,
+        inputProps,
+        isChecked,
+        isDisabled,
+        isHovered,
+        hoverProps,
+        mergedRef,
+      } = useRadioRoot(props, ref);
+
+      const { focusProps, isFocused } = useFocus();
+
+      const { pressProps, isPressed } = usePress({
+        isDisabled: isDisabled || isDisabledProp,
+      });
+
+      return (
+        <BaseRadio
+          disabled={isDisabled || isDisabledProp}
+          {...pressProps}
+          {...(combinedProps as T)}
+          {...inputProps}
+          ref={mergedRef}
+          role="radio"
+          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(onFocus, focusProps.onFocus)}
+          onBlur={composeEventHandlers(onBlur, focusProps.onBlur)}
+          {...dataAttributes({
+            slot: 'radio',
+            checked: isChecked,
+            disabled: isDisabled || isDisabledProp,
+            hover: isHovered || isHoveredProp,
+            invalid: isInvalid || isInvalidProp,
+            readonly: isReadOnly || isReadOnlyProp,
+            active: isPressed,
+            focus: isFocused,
+            focusVisible: isFocusVisible,
+          })}
+        >
+          <RadioProvider
+            value={{
+              isChecked,
+              isDisabled: isDisabled || isDisabledProp,
+              isHovered: isHovered || isHoveredProp,
+              isInvalid: isInvalid || isInvalidProp,
+              isReadOnly: isReadOnly || isReadOnlyProp,
+              isPressed: isPressed || isPressedProp,
+              isFocused: isFocused || isFocusedProp,
+              isFocusVisible,
+            }}
+          >
+            <RadioIndicator />
+            {children}
+          </RadioProvider>
+        </BaseRadio>
+      );
+    },
+  );

package/src/radio/createRadioRoot.web.tsx

@@ -0,0 +1,81 @@
+import { forwardRef } from 'react';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { mergeProps } from '@react-aria/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { dataAttributes } from '../utils/dataAttributes';
+import { RadioProvider } from './context';
+import type { IRadioProps } from './types';
+import { useRadioRoot } from './useRadioRoot';
+
+// TODO: Keyboard focus is not working as expected
+
+export const createRadioRoot = <T,>(
+  BaseRadio: React.ComponentType<T>,
+  RadioIndicator: React.ComponentType<any>,
+) =>
+  forwardRef(({ children, ...props }: IRadioProps, ref?: React.Ref<T>) => {
+    const {
+      isHovered: isHoveredProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isFocused,
+      isPressed,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      inputProps,
+      labelProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      mergedRef,
+      inputRef,
+    } = useRadioRoot(props, ref, { useInputRefForAria: true });
+
+    const { focusProps, isFocusVisible } = useFocusRing();
+
+    return (
+      <BaseRadio
+        {...mergeProps(combinedProps as any, labelProps as any, focusProps as any)}
+        ref={mergedRef}
+        role="label"
+        // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
+        accessibilityRole="label"
+        {...dataAttributes({
+          slot: 'radio',
+          checked: isChecked,
+          disabled: isDisabled || isDisabledProp,
+          hover: isHovered || isHoveredProp,
+          invalid: isInvalid || isInvalidProp,
+          readonly: isReadOnly || isReadOnlyProp,
+          active: isPressed,
+          focus: isFocused,
+          focusVisible: isFocusVisible || isFocusVisibleProp,
+        })}
+      >
+        <RadioProvider
+          value={{
+            isChecked,
+            isDisabled: isDisabled || isDisabledProp,
+            isFocusVisible: isFocusVisible || isFocusVisibleProp,
+            isHovered: isHovered || isHoveredProp,
+            isInvalid: isInvalid || isInvalidProp,
+            isReadOnly: isReadOnly || isReadOnlyProp,
+            isPressed,
+            isFocused,
+          }}
+        >
+          <VisuallyHidden>
+            <input {...inputProps} ref={inputRef} />
+          </VisuallyHidden>
+          <RadioIndicator />
+          {children}
+        </RadioProvider>
+      </BaseRadio>
+    );
+  });

package/src/radio/index.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+import { createRadioGroup } from './createRadioGroup';
+import { createRadioIndicator } from './createRadioIndicator';
+import { createRadioLabel } from './createRadioLabel';
+import { createRadioRoot } from './createRadioRoot';
+import type { IRadioComponentType } from './types';
+
+export type {
+  IRadioComponentType,
+  IRadioGroupProps,
+  IRadioIndicatorProps,
+  IRadioLabelProps,
+  IRadioProps,
+} from './types';
+
+export function createRadio<Root, Indicator, Label, Group>(BaseComponents: {
+  Root: React.ComponentType<Root>;
+  Indicator: React.ComponentType<Indicator>;
+  Label: React.ComponentType<Label>;
+  Group: React.ComponentType<Group>;
+}) {
+  const Indicator = createRadioIndicator(BaseComponents.Indicator);
+  const Radio = createRadioRoot(BaseComponents.Root, Indicator);
+  const Label = createRadioLabel(BaseComponents.Label);
+  const Group = createRadioGroup(BaseComponents.Group);
+
+  Radio.displayName = 'RadioPrimitive';
+  Indicator.displayName = 'RadioPrimitive.Indicator';
+  Label.displayName = 'RadioPrimitive.Label';
+  Group.displayName = 'RadioPrimitive.Group';
+
+  return Object.assign(Radio, {
+    Indicator,
+    Label,
+    Group,
+  }) as IRadioComponentType<Root, Indicator, Label, Group>;
+}

package/src/radio/types.ts

@@ -0,0 +1,67 @@
+import type { PressableProps } from 'react-native';
+
+export interface IRadioProps extends PressableProps {
+  /** Required — identifies this item's value within a Radio.Group. */
+  value: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  isPressed?: boolean;
+  isFocusVisible?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface IRadioGroupProps {
+  /** Controlled selected value. */
+  value?: string;
+  /** Default selected value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called when the selected value changes. */
+  onChange?: (value: string) => void;
+  /** Layout direction of the radio items. */
+  direction?: 'column' | 'row';
+  /** Form field name for web form integration. */
+  name?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  children?: React.ReactNode;
+}
+
+export interface IRadioIndicatorProps {
+  children?: React.ReactNode;
+}
+
+export interface IRadioLabelProps {
+  children?: React.ReactNode;
+}
+
+export type IRadioComponentType<Root, Indicator, Label, Group> = React.ForwardRefExoticComponent<
+  React.RefAttributes<Root> & React.PropsWithoutRef<Root> & IRadioProps
+> & {
+  Indicator: React.ForwardRefExoticComponent<
+    React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator> & IRadioIndicatorProps
+  >;
+  Label: React.ForwardRefExoticComponent<
+    React.RefAttributes<Label> & React.PropsWithoutRef<Label> & IRadioLabelProps
+  >;
+  Group: React.ForwardRefExoticComponent<
+    React.RefAttributes<Group> & React.PropsWithoutRef<Group> & IRadioGroupProps
+  >;
+};
+
+export interface IRadioContextValue {
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  isHovered?: boolean;
+  isPressed?: boolean;
+}

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/createSelectIcon.tsx

@@ -5,7 +5,7 @@ import { useSelectContext, useSelectTriggerContext } from './context';
 export const createSelectIcon = <T,>(BaseIcon: React.ComponentType<T>) =>
   forwardRef((props: any, ref?: any) => {
     const { hover, focus, active, disabled, focusVisible } = useSelectTriggerContext();
-    const { required, invalid, readOnly } = useSelectContext();
+    const { required, invalid, readOnly, open } = useSelectContext();
 
     return (
       <BaseIcon
@@ -19,6 +19,7 @@ export const createSelectIcon = <T,>(BaseIcon: React.ComponentType<T>) =>
           required,
           invalid,
           readonly: readOnly,
+          state: open ? 'open' : 'closed',
           slot: 'select-icon',
         })}
         {...(props as T)}

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