react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/pull-refresh/PullRefresh.js

@@ -0,0 +1,340 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, PanResponder, Platform, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { nativeDriverEnabled } from '../../platform';
+import { parseNumberLike } from '../../utils/number';
+import { isFunction, isNumber, isText, isUndefined } from '../../utils/validate';
+import { useLocale } from '../config-provider/useLocale';
+import { usePullRefreshTokens } from './tokens';
+const DEFAULT_SUCCESS_DURATION = 500;
+const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    onRefresh,
+    onRefreshEnd,
+    refreshing,
+    defaultRefreshing,
+    tokensOverride,
+    pullingText,
+    loosingText,
+    loadingText,
+    successText = '刷新成功',
+    successDuration,
+    animationDuration,
+    headHeight,
+    pullDistance,
+    disabled = false,
+    style,
+    ...scrollProps
+  } = props;
+  const isWeb = Platform.OS === 'web';
+  const locale = useLocale();
+  const tokens = usePullRefreshTokens(tokensOverride);
+  const {
+    colors,
+    sizing
+  } = tokens;
+  const translateY = useRef(new Animated.Value(0)).current;
+  const headHeightNumber = useMemo(() => Math.max(0, parseNumberLike(headHeight, sizing.headHeight) ?? sizing.headHeight), [headHeight, sizing.headHeight]);
+  const pullDistanceNumber = useMemo(() => Math.max(0, parseNumberLike(pullDistance, headHeightNumber) ?? headHeightNumber), [headHeightNumber, pullDistance]);
+  const successDurationMs = useMemo(() => Math.max(0, parseNumberLike(successDuration, DEFAULT_SUCCESS_DURATION) ?? DEFAULT_SUCCESS_DURATION), [successDuration]);
+  const animationDurationMs = useMemo(() => Math.max(0, parseNumberLike(animationDuration, 300) ?? 300), [animationDuration]);
+  const isControlled = !isUndefined(refreshing);
+  const [innerRefreshing, setInnerRefreshing] = useState(!!defaultRefreshing);
+  const mergedRefreshing = isControlled ? !!refreshing : innerRefreshing;
+  const scrollTopRef = useRef(0);
+  const draggingRef = useRef(false);
+  const webDragRafRef = useRef(null);
+  const webDragPendingRef = useRef(null);
+  const [distance, setDistance] = useState(0);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const timerRef = useRef(null);
+  const refreshEndTimerRef = useRef(null);
+  const mergedRefreshingRef = useRef(mergedRefreshing);
+  const refreshTriggeredRef = useRef(false);
+  const refreshSucceededRef = useRef(false);
+  const setDistanceValue = useCallback((nextDistance, animate = false) => {
+    const normalized = Math.max(0, Math.round(nextDistance));
+    if (isWeb) {
+      translateY.stopAnimation();
+      if (animate && animationDurationMs > 0) {
+        Animated.timing(translateY, {
+          toValue: normalized,
+          duration: animationDurationMs,
+          useNativeDriver: false
+        }).start();
+      } else {
+        translateY.setValue(normalized);
+      }
+    }
+    setDistance(prev => Math.abs(prev - normalized) < 1 ? prev : normalized);
+  }, [animationDurationMs, isWeb, translateY]);
+  const flushWebDrag = useCallback(() => {
+    const pending = webDragPendingRef.current;
+    if (pending == null) return;
+    webDragPendingRef.current = null;
+    setDistanceValue(pending);
+  }, [setDistanceValue]);
+  const cancelWebDrag = useCallback(() => {
+    if (webDragRafRef.current != null && typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(webDragRafRef.current);
+    }
+    webDragRafRef.current = null;
+    webDragPendingRef.current = null;
+  }, []);
+  const scheduleWebDrag = useCallback(nextDistance => {
+    if (!isWeb || typeof requestAnimationFrame !== 'function') {
+      setDistanceValue(nextDistance);
+      return;
+    }
+    webDragPendingRef.current = nextDistance;
+    if (webDragRafRef.current != null) return;
+    webDragRafRef.current = requestAnimationFrame(() => {
+      webDragRafRef.current = null;
+      flushWebDrag();
+    });
+  }, [flushWebDrag, isWeb, setDistanceValue]);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      if (refreshEndTimerRef.current) {
+        clearTimeout(refreshEndTimerRef.current);
+      }
+      cancelWebDrag();
+    };
+  }, [cancelWebDrag]);
+  const setRefreshing = useCallback(value => {
+    if (!isControlled) setInnerRefreshing(value);
+  }, [isControlled]);
+  useEffect(() => {
+    mergedRefreshingRef.current = mergedRefreshing;
+  }, [mergedRefreshing]);
+  const resolveStatusText = useCallback((text, fallback) => {
+    const resolved = isUndefined(text) ? fallback : text;
+    return isFunction(resolved) ? resolved({
+      distance
+    }) : resolved;
+  }, [distance]);
+  const triggerSuccess = useCallback(() => {
+    if (successText === null || successText === undefined || successText === false) return;
+    if (successDurationMs <= 0) return;
+    setShowSuccess(true);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setShowSuccess(false);
+    }, successDurationMs);
+  }, [successDurationMs, successText]);
+  const handleRefresh = useCallback(async () => {
+    if (disabled || mergedRefreshing) return;
+    if (!isFunction(onRefresh)) return;
+    setShowSuccess(false);
+    refreshTriggeredRef.current = true;
+    refreshSucceededRef.current = false;
+    setRefreshing(true);
+    try {
+      await onRefresh();
+      refreshSucceededRef.current = true;
+    } finally {
+      setRefreshing(false);
+      if (isFunction(onRefreshEnd)) {
+        if (refreshEndTimerRef.current) {
+          clearTimeout(refreshEndTimerRef.current);
+        }
+        refreshEndTimerRef.current = setTimeout(onRefreshEnd, 0);
+      }
+      if (refreshTriggeredRef.current && refreshSucceededRef.current && !mergedRefreshingRef.current) {
+        triggerSuccess();
+        refreshTriggeredRef.current = false;
+        refreshSucceededRef.current = false;
+      }
+    }
+  }, [disabled, mergedRefreshing, onRefresh, onRefreshEnd, setRefreshing, triggerSuccess]);
+  useEffect(() => {
+    if (!isWeb) return;
+    if (draggingRef.current) return;
+    if (disabled) {
+      setDistanceValue(0, true);
+      return;
+    }
+    if (mergedRefreshing || showSuccess) {
+      setDistanceValue(headHeightNumber, true);
+      return;
+    }
+    setDistanceValue(0, true);
+  }, [disabled, headHeightNumber, isWeb, mergedRefreshing, setDistanceValue, showSuccess]);
+  useEffect(() => {
+    if (isWeb) return;
+    if (!mergedRefreshing && !showSuccess) return;
+    setDistanceValue(0);
+  }, [isWeb, mergedRefreshing, setDistanceValue, showSuccess]);
+  useEffect(() => {
+    if (!refreshTriggeredRef.current) return;
+    if (mergedRefreshing) return;
+    if (!refreshSucceededRef.current) {
+      refreshTriggeredRef.current = false;
+      refreshSucceededRef.current = false;
+      return;
+    }
+    if (showSuccess) {
+      refreshTriggeredRef.current = false;
+      refreshSucceededRef.current = false;
+      return;
+    }
+    triggerSuccess();
+    refreshTriggeredRef.current = false;
+    refreshSucceededRef.current = false;
+  }, [mergedRefreshing, showSuccess, triggerSuccess]);
+  const status = useMemo(() => mergedRefreshing ? 'loading' : showSuccess ? 'success' : disabled || distance === 0 ? 'normal' : distance < pullDistanceNumber ? 'pulling' : 'loosing', [disabled, distance, mergedRefreshing, pullDistanceNumber, showSuccess]);
+  const opacity = useRef(new Animated.Value(status === 'normal' ? 0 : 1)).current;
+  useEffect(() => {
+    const toValue = status === 'normal' ? 0 : 1;
+    opacity.stopAnimation();
+    if (animationDurationMs <= 0) {
+      opacity.setValue(toValue);
+      return;
+    }
+    Animated.timing(opacity, {
+      toValue,
+      duration: animationDurationMs,
+      useNativeDriver: nativeDriverEnabled
+    }).start();
+  }, [animationDurationMs, opacity, status]);
+  const statusNode = useMemo(() => {
+    switch (status) {
+      case 'pulling':
+        return resolveStatusText(pullingText, locale.vanPullRefresh.pulling);
+      case 'loosing':
+        return resolveStatusText(loosingText, locale.vanPullRefresh.loosing);
+      case 'loading':
+        return resolveStatusText(loadingText, locale.vanPullRefresh.loading);
+      case 'success':
+        return resolveStatusText(successText, '刷新成功');
+      default:
+        return null;
+    }
+  }, [loadingText, locale.vanPullRefresh.loading, locale.vanPullRefresh.loosing, locale.vanPullRefresh.pulling, loosingText, pullingText, resolveStatusText, status, successText]);
+  const shouldReserveHead = (status === 'loading' || status === 'success') && distance === 0;
+  const flattenedContainerStyle = useMemo(() => StyleSheet.flatten(scrollProps.contentContainerStyle), [scrollProps.contentContainerStyle]);
+  const basePaddingTop = isNumber(flattenedContainerStyle?.paddingTop) ? flattenedContainerStyle.paddingTop : 0;
+  const contentContainerStyle = useMemo(() => shouldReserveHead ? [scrollProps.contentContainerStyle, {
+    paddingTop: basePaddingTop + headHeightNumber
+  }] : scrollProps.contentContainerStyle, [basePaddingTop, headHeightNumber, scrollProps.contentContainerStyle, shouldReserveHead]);
+  const onScrollProp = scrollProps.onScroll;
+  const handleScroll = useCallback(event => {
+    onScrollProp?.(event);
+    const offset = event.nativeEvent.contentOffset?.y ?? 0;
+    if (isWeb) {
+      scrollTopRef.current = Math.max(0, offset);
+      return;
+    }
+    if (disabled) return;
+    if (!isFunction(onRefresh) || mergedRefreshing || showSuccess) {
+      setDistanceValue(0);
+      return;
+    }
+    setDistanceValue(offset < 0 ? -offset : 0);
+  }, [disabled, isWeb, mergedRefreshing, onRefresh, onScrollProp, setDistanceValue, showSuccess]);
+  const panResponder = useMemo(() => {
+    if (!isWeb || !isFunction(onRefresh)) return null;
+    const easeDistance = raw => {
+      const pullDistance = pullDistanceNumber;
+      let eased = raw;
+      if (eased > pullDistance) {
+        eased = eased < pullDistance * 2 ? pullDistance + (eased - pullDistance) / 2 : pullDistance * 1.5 + (eased - pullDistance * 2) / 4;
+      }
+      return Math.round(eased);
+    };
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (_event, gestureState) => {
+        if (disabled) return false;
+        if (mergedRefreshingRef.current) return false;
+        if (showSuccess) return false;
+        if (scrollTopRef.current > 0) return false;
+        const {
+          dx,
+          dy
+        } = gestureState;
+        if (dy <= 0) return false;
+        if (Math.abs(dy) <= Math.abs(dx)) return false;
+        return true;
+      },
+      onPanResponderGrant: () => {
+        draggingRef.current = true;
+      },
+      onPanResponderMove: (event, gestureState) => {
+        if (disabled) return;
+        if (mergedRefreshingRef.current) return;
+        if (showSuccess) return;
+        if (scrollTopRef.current > 0) return;
+        const raw = Math.max(0, gestureState.dy ?? 0);
+        scheduleWebDrag(easeDistance(raw));
+        event.preventDefault?.();
+      },
+      onPanResponderRelease: async (_event, gestureState) => {
+        draggingRef.current = false;
+        cancelWebDrag();
+        if (disabled) return;
+        if (mergedRefreshingRef.current) return;
+        if (showSuccess) return;
+        const nextDistance = easeDistance(Math.max(0, gestureState.dy));
+        const shouldRefresh = nextDistance >= pullDistanceNumber;
+        if (shouldRefresh) {
+          setDistanceValue(headHeightNumber, true);
+          await handleRefresh();
+          return;
+        }
+        setDistanceValue(0, true);
+      },
+      onPanResponderTerminate: () => {
+        draggingRef.current = false;
+        cancelWebDrag();
+        setDistanceValue(0, true);
+      }
+    });
+  }, [disabled, handleRefresh, headHeightNumber, isWeb, pullDistanceNumber, cancelWebDrag, scheduleWebDrag, setDistanceValue, showSuccess]);
+  return /*#__PURE__*/React.createElement(ScrollView, _extends({}, scrollProps, {
+    ref: ref,
+    style: style,
+    contentContainerStyle: contentContainerStyle,
+    refreshControl: /*#__PURE__*/React.createElement(RefreshControl, {
+      refreshing: !!mergedRefreshing,
+      onRefresh: handleRefresh,
+      enabled: !disabled && isFunction(onRefresh)
+    }),
+    onScroll: handleScroll,
+    scrollEventThrottle: 16
+  }), /*#__PURE__*/React.createElement(Animated.View, _extends({}, panResponder ? panResponder.panHandlers : {}, {
+    style: isWeb ? {
+      transform: [{
+        translateY
+      }]
+    } : undefined
+  }), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none",
+    style: [styles.head, {
+      height: headHeightNumber,
+      marginTop: -headHeightNumber
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      opacity
+    }
+  }, isText(statusNode) ? /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: status === 'success' ? colors.success : colors.text
+    }
+  }, statusNode) : statusNode)), children));
+});
+PullRefresh.displayName = 'PullRefresh';
+const styles = StyleSheet.create({
+  head: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingBottom: 8
+  }
+});
+export default PullRefresh;

package/dist/es/pull-refresh/index.js

@@ -0,0 +1,3 @@
+import PullRefresh from './PullRefresh';
+export { usePullRefreshTokens } from './tokens';
+export default PullRefresh;

package/dist/es/pull-refresh/tokens.js

@@ -0,0 +1,16 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette
+  } = foundations;
+  return {
+    colors: {
+      text: palette.default[600],
+      success: palette.success?.[500] ?? '#4caf50'
+    },
+    sizing: {
+      headHeight: 50
+    }
+  };
+};
+export const usePullRefreshTokens = createComponentTokensHook('pullRefresh', createTokens);

package/dist/es/radio/Radio.js

@@ -0,0 +1,184 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useRadio } from '@react-native-aria/radio';
+import { useToggleState } from '@react-stately/toggle';
+import { RadioGroupContext } from './RadioContext';
+import { useRadioTokens } from './tokens';
+import { parseNumber, isText } from '../../utils';
+export const Radio = /*#__PURE__*/React.memo(props => {
+  const {
+    children,
+    name,
+    value,
+    checked,
+    defaultChecked,
+    iconSize,
+    checkedColor,
+    iconRender,
+    shape: shapeProp,
+    labelPosition,
+    labelDisabled,
+    disabled,
+    style,
+    labelStyle,
+    tokensOverride,
+    onClick,
+    onChange,
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
+    ...rest
+  } = props;
+  const tokens = useRadioTokens(tokensOverride);
+  const group = useContext(RadioGroupContext);
+  const optionValue = value ?? name;
+  const serializedValue = optionValue == null ? undefined : String(optionValue);
+  const isGroup = !!group && serializedValue !== undefined;
+  const resolvedIconSize = parseNumber(iconSize ?? group?.iconSize, tokens.defaults.iconSize);
+  const resolvedCheckedColor = checkedColor ?? group?.checkedColor ?? tokens.colors.checkedBackground;
+  const resolvedLabelPosition = labelPosition ?? tokens.defaults.labelPosition;
+  const resolvedLabelDisabled = labelDisabled ?? group?.labelDisabled ?? tokens.defaults.labelDisabled;
+  const resolvedDisabled = Boolean(disabled || group?.state.isDisabled);
+  const shape = shapeProp ?? tokens.defaults.shape;
+  const standaloneKey = serializedValue ?? 'standalone';
+  const inputRef = useRef(null);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'radio';
+  const {
+    isSelected: standaloneSelected,
+    setSelected: setStandaloneSelected
+  } = useToggleState({
+    isSelected: checked,
+    defaultSelected: defaultChecked,
+    onChange: next => onChange?.(next)
+  });
+  const pseudoState = {
+    selectedValue: standaloneSelected ? standaloneKey : null,
+    setSelectedValue: next => {
+      setStandaloneSelected(next === standaloneKey);
+    }
+  };
+  useEffect(() => {
+    if (isGroup && group && serializedValue !== undefined) {
+      group.registerValue(serializedValue, optionValue ?? serializedValue);
+      return () => group.unregisterValue(serializedValue);
+    }
+    return undefined;
+  }, [group, isGroup, optionValue, serializedValue]);
+  const state = isGroup && group ? group.state : pseudoState;
+  const radioValue = isGroup ? serializedValue : standaloneKey;
+  const {
+    onBlur,
+    onFocus,
+    ...compatibleRest
+  } = rest;
+  const {
+    inputProps
+  } = useRadio({
+    value: radioValue,
+    isDisabled: resolvedDisabled,
+    'aria-label': resolvedAccessibilityLabel,
+    accessibilityLabel: resolvedAccessibilityLabel,
+    ...compatibleRest
+  }, state, inputRef);
+  const isChecked = isGroup && group && serializedValue !== undefined ? group.state.selectedValue === serializedValue : checked !== undefined ? checked : standaloneSelected;
+  const inputOnPress = inputProps?.onPress;
+  const handlePress = useCallback(e => {
+    onClick?.(e);
+    if (resolvedDisabled) return;
+    if (isGroup && group && serializedValue !== undefined) {
+      if (!isChecked) group.state.setSelectedValue(serializedValue);
+      return;
+    }
+    if (checked !== undefined) {
+      onChange?.(!checked);
+      return;
+    }
+    if (onChange) {
+      setStandaloneSelected(!standaloneSelected);
+      return;
+    }
+    inputOnPress?.(e);
+  }, [checked, group, inputOnPress, isChecked, isGroup, onChange, onClick, resolvedDisabled, serializedValue, setStandaloneSelected, standaloneSelected]);
+  const mergedInputProps = inputProps ? {
+    ...inputProps,
+    onPress: handlePress
+  } : {};
+  const borderColor = resolvedDisabled ? tokens.colors.disabledBorder : isChecked ? resolvedCheckedColor : tokens.colors.border;
+  const backgroundColor = resolvedDisabled ? tokens.colors.disabledBackground : tokens.colors.background;
+  const spacingStyle = resolvedLabelPosition === 'left' ? {
+    marginRight: tokens.spacing.gap
+  } : {
+    marginLeft: tokens.spacing.gap
+  };
+  const labelColor = resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label;
+  const borderRadius = shape === 'square' ? tokens.radii.square : tokens.radii.round;
+  const labelNode = children === null || children === undefined || children === false ? null : /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.labelWrapper, spacingStyle],
+    pointerEvents: "none",
+    accessible: false
+  }, isText(children) ? /*#__PURE__*/React.createElement(Text, {
+    accessible: false,
+    style: [tokens.layout.label, {
+      color: labelColor,
+      fontSize: tokens.typography.fontSize,
+      lineHeight: tokens.typography.fontSize * tokens.typography.lineHeightMultiplier,
+      fontFamily: tokens.typography.fontFamily,
+      fontWeight: tokens.typography.fontWeight
+    }, labelStyle]
+  }, children) : children);
+  const interactive = !resolvedDisabled && !resolvedLabelDisabled;
+  const defaultIcon = /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.icon, {
+      width: resolvedIconSize,
+      height: resolvedIconSize,
+      borderRadius,
+      borderWidth: tokens.borders.width,
+      borderColor,
+      backgroundColor
+    }]
+  }, isChecked ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: resolvedIconSize * tokens.sizing.dotScale,
+      height: resolvedIconSize * tokens.sizing.dotScale,
+      borderRadius,
+      backgroundColor: resolvedCheckedColor
+    }
+  }) : null);
+  const iconVisual = iconRender ? iconRender({
+    checked: Boolean(isChecked),
+    disabled: Boolean(resolvedDisabled)
+  }) ?? null : defaultIcon;
+  const iconNode = interactive ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.iconWrapper
+  }, iconVisual) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
+    ref: inputRef,
+    testID: serializedValue !== undefined ? `radio-icon-${serializedValue}` : undefined,
+    disabled: resolvedDisabled,
+    accessibilityRole: "radio",
+    accessibilityState: {
+      selected: isChecked,
+      disabled: resolvedDisabled
+    },
+    style: tokens.layout.iconWrapper
+  }), iconVisual);
+  const left = resolvedLabelPosition === 'left';
+  const first = left ? labelNode : iconNode;
+  const second = left ? iconNode : labelNode;
+  if (interactive) {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
+      ref: inputRef,
+      testID: serializedValue !== undefined ? `radio-icon-${serializedValue}` : undefined,
+      disabled: resolvedDisabled,
+      accessibilityRole: "radio",
+      accessibilityState: {
+        selected: isChecked,
+        disabled: resolvedDisabled
+      },
+      style: [tokens.layout.container, style]
+    }), first, second);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.container, style]
+  }, first, second);
+});
+Radio.displayName = 'Radio';

package/dist/es/radio/RadioContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const RadioGroupContext = /*#__PURE__*/React.createContext(null);

package/dist/es/radio/RadioGroup.js

@@ -0,0 +1,110 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useMemo, useRef } from 'react';
+import { Platform, View } from 'react-native';
+import { useRadioGroup } from '@react-native-aria/radio';
+import { useRadioGroupState } from '@react-stately/radio';
+import { RadioGroupContext } from './RadioContext';
+import { useRadioTokens } from './tokens';
+export const RadioGroup = props => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled: disabledProp,
+    direction: directionProp,
+    iconSize,
+    checkedColor,
+    labelDisabled,
+    gap: gapProp,
+    name,
+    children,
+    style,
+    tokensOverride,
+    accessibilityLabel,
+    accessibilityHint,
+    ...viewProps
+  } = props;
+  const tokens = useRadioTokens(tokensOverride);
+  const disabled = disabledProp ?? tokens.defaults.groupDisabled;
+  const direction = directionProp ?? tokens.defaults.groupDirection;
+  const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
+  const registryRef = useRef(new Map());
+  const registerValue = useCallback((key, raw) => {
+    registryRef.current.set(key, raw);
+  }, []);
+  const unregisterValue = useCallback(key => {
+    registryRef.current.delete(key);
+  }, []);
+  const state = useRadioGroupState({
+    value: value == null ? undefined : String(value),
+    defaultValue: defaultValue == null ? undefined : String(defaultValue),
+    isDisabled: disabled,
+    onChange: key => {
+      const raw = registryRef.current.get(key);
+      onChange?.(raw ?? key);
+    },
+    name
+  });
+  const {
+    radioGroupProps
+  } = useRadioGroup({
+    isDisabled: disabled,
+    'aria-label': accessibilityLabel,
+    name
+  }, state);
+  const resolvedRadioGroupProps = {
+    ...(radioGroupProps ?? {}),
+    ...(accessibilityHint && {
+      'aria-describedby': accessibilityHint
+    }),
+    'aria-disabled': disabled
+  };
+  const supportsGap = Platform.OS === 'web';
+  const childrenArray = React.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean');
+  const itemStyleForIndex = index => {
+    if (supportsGap) return tokens.layout.groupItem;
+    const isLast = index === childrenArray.length - 1;
+    if (direction === 'horizontal') {
+      return [tokens.layout.groupItem, !isLast && {
+        marginRight: gap
+      }];
+    }
+    return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
+      marginBottom: gap
+    }];
+  };
+  const containerGapStyle = supportsGap ? {
+    columnGap: direction === 'horizontal' ? gap : undefined,
+    rowGap: gap
+  } : null;
+  const contextValue = useMemo(() => ({
+    state,
+    direction,
+    iconSize,
+    checkedColor,
+    labelDisabled,
+    registerValue,
+    unregisterValue
+  }), [state, direction, iconSize, checkedColor, labelDisabled]);
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedRadioGroupProps, viewProps, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    style: [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, containerGapStyle, style]
+  }), supportsGap ? childrenArray : childrenArray.map((child, index) => {
+    const key = /*#__PURE__*/React.isValidElement(child) && child.key !== null ? child.key : index;
+    const itemStyle = itemStyleForIndex(index);
+    if (/*#__PURE__*/React.isValidElement(child) && child.type !== React.Fragment) {
+      const element = child;
+      return /*#__PURE__*/React.cloneElement(element, {
+        style: [element.props.style, itemStyle],
+        key
+      });
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      key: key,
+      style: itemStyle
+    }, child);
+  })));
+};

package/dist/es/radio/index.js

@@ -0,0 +1,5 @@
+import { Radio as RadioBase } from './Radio';
+import { RadioGroup } from './RadioGroup';
+const Radio = RadioBase;
+Radio.Group = RadioGroup;
+export { Radio, RadioGroup };