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

package/src/index.ts

@@ -12,5 +12,6 @@ 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/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>
+      );
+    },
+  );

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