react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/progress/Progress.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Platform, Text, View } from 'react-native';
 import { clamp, parseNumberLike, parsePercentage, isString, isText } from '../../utils';
+import { useReducedMotion } from '../../hooks/animation';
 import { useProgressTokens } from './tokens';
 const GRADIENT_REGEX = /linear-gradient|radial-gradient|conic-gradient/i;
 const ProgressContext = /*#__PURE__*/React.createContext(null);
@@ -10,20 +11,20 @@ export const ProgressFilledTrack = ({
 }) => {
   const context = useContext(ProgressContext);
   if (!context) return null;
-  const indicatorSize = useMemo(() => context.animatedValue.interpolate({
+  const size = useMemo(() => context.animatedValue.interpolate({
     inputRange: [0, 100],
     outputRange: ['0%', '100%']
   }), [context.animatedValue]);
   const sizeStyle = useMemo(() => context.orientation === 'vertical' ? {
     width: context.height,
-    height: indicatorSize,
+    height: size,
     bottom: 0,
     left: 0,
     position: 'absolute'
   } : {
     height: context.height,
-    width: indicatorSize
-  }, [context.height, context.orientation, indicatorSize]);
+    width: size
+  }, [context.height, context.orientation, size]);
   const baseStyle = [context.orientation === 'vertical' ? {
     position: 'absolute',
     left: 0,
@@ -42,152 +43,153 @@ export const ProgressFilledTrack = ({
 export const Progress = /*#__PURE__*/memo(props => {
   const {
     tokensOverride,
-    percentage: percentageProp,
+    percentage: pctP,
     strokeWidth,
     color,
     trackColor,
     pivotText,
     pivotColor,
     textColor,
-    inactive: inactiveProp,
-    showPivot: showPivotProp,
+    inactive: inactP,
+    showPivot: showPivotP,
     animated,
-    transition: transitionProp,
-    animationDuration: animationDurationProp,
+    transition: transP,
+    animationDuration: durP,
     style,
     pivotStyle,
     indicatorStyle,
-    orientation: orientationProp,
+    orientation: oriP,
     children,
     ...rest
   } = props;
   const tokens = useProgressTokens(tokensOverride);
-  const percentage = useMemo(() => clamp(parsePercentage(percentageProp ?? tokens.defaults.percentage), 0, 100), [percentageProp, tokens.defaults.percentage]);
-  const height = useMemo(() => parseNumberLike(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height, [strokeWidth, tokens.sizing.height]);
-  const inactive = useMemo(() => inactiveProp ?? tokens.defaults.inactive, [inactiveProp, tokens.defaults.inactive]);
-  const orientation = orientationProp ?? 'horizontal';
-  const showPivot = useMemo(() => orientation === 'vertical' ? false : showPivotProp ?? tokens.defaults.showPivot, [orientation, showPivotProp, tokens.defaults.showPivot]);
-  const shouldAnimate = useMemo(() => (animated ?? transitionProp ?? tokens.defaults.transition) && !inactive, [animated, inactive, tokens.defaults.transition, transitionProp]);
-  const duration = useMemo(() => Math.max(0, animationDurationProp ?? tokens.defaults.animationDuration), [animationDurationProp, tokens.defaults.animationDuration]);
-  const isGradient = Platform.OS === 'web' && isString(color) && GRADIENT_REGEX.test(color);
-  const resolvedTrackColor = useMemo(() => trackColor ?? tokens.colors.track, [tokens.colors.track, trackColor]);
-  const resolvedIndicatorColor = useMemo(() => inactive ? tokens.colors.track : !isGradient ? color ?? tokens.colors.indicator : undefined, [color, inactive, isGradient, tokens.colors.indicator, tokens.colors.track]);
-  const resolvedPivotBg = useMemo(() => pivotColor ?? (isGradient ? inactive ? tokens.colors.track : tokens.colors.indicator : resolvedIndicatorColor), [inactive, isGradient, pivotColor, resolvedIndicatorColor, tokens.colors.indicator, tokens.colors.track]);
-  const resolvedPivotTextColor = useMemo(() => textColor ?? tokens.colors.pivotText, [textColor, tokens.colors.pivotText]);
-  const pivotContent = useMemo(() => pivotText ?? `${percentage}%`, [percentage, pivotText]);
-  const hasPivot = useMemo(() => showPivot && pivotContent !== null && pivotContent !== false, [pivotContent, showPivot]);
-  const animatedValue = useRef(new Animated.Value(percentage)).current;
+  const reducedMotion = useReducedMotion();
+  const pct = clamp(parsePercentage(pctP ?? tokens.defaults.percentage), 0, 100);
+  const h = parseNumberLike(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height;
+  const inact = inactP ?? tokens.defaults.inactive;
+  const ori = oriP ?? 'horizontal';
+  const showPivot = ori === 'vertical' ? false : showPivotP ?? tokens.defaults.showPivot;
+  const doAnim = (animated ?? transP ?? tokens.defaults.transition) && !inact;
+  const dur = Math.max(0, durP ?? tokens.defaults.animationDuration);
+  const isGrad = Platform.OS === 'web' && isString(color) && GRADIENT_REGEX.test(color);
+  const trackClr = trackColor ?? tokens.colors.track;
+  const indClr = inact ? tokens.colors.track : !isGrad ? color ?? tokens.colors.indicator : undefined;
+  const pivotBg = pivotColor ?? (isGrad ? inact ? tokens.colors.track : tokens.colors.indicator : indClr);
+  const pivotTxtClr = textColor ?? tokens.colors.pivotText;
+  const pivotCnt = pivotText ?? `${pct}%`;
+  const hasPiv = showPivot && pivotCnt !== null && pivotCnt !== false;
+  const animVal = useRef(new Animated.Value(pct)).current;
   useEffect(() => {
-    if (shouldAnimate && duration > 0) {
-      const animation = Animated.timing(animatedValue, {
-        toValue: percentage,
-        duration,
-        useNativeDriver: false
+    if (doAnim && dur > 0 && !reducedMotion) {
+      const anim = Animated.timing(animVal, {
+        toValue: pct,
+        duration: dur,
+        useNativeDriver: false,
+        isInteraction: false
       });
-      animation.start();
-      return () => animation.stop();
-    } else {
-      animatedValue.setValue(percentage);
-    }
-  }, [percentage, shouldAnimate, duration, animatedValue]);
-  const [layout, setLayout] = useState({
+      anim.start();
+      return () => anim.stop();
+    } else animVal.setValue(pct);
+  }, [pct, doAnim, dur, animVal, reducedMotion]);
+  const [lay, setLay] = useState({
     track: 0,
     pivot: 0
   });
-  const onTrackLayout = useCallback(e => {
-    const width = e.nativeEvent.layout.width;
-    setLayout(prev => prev.track === width ? prev : {
+  const onTrackLay = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    setLay(prev => prev.track === w ? prev : {
       ...prev,
-      track: width
+      track: w
     });
   }, []);
-  const onPivotLayout = useCallback(e => {
-    const width = e.nativeEvent.layout.width;
-    setLayout(prev => prev.pivot === width ? prev : {
+  const onPivotLay = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    setLay(prev => prev.pivot === w ? prev : {
       ...prev,
-      pivot: width
+      pivot: w
     });
   }, []);
-  const trackStyle = useMemo(() => [tokens.layout.track, orientation === 'vertical' ? {
-    width: height,
+  const trackStyle = [tokens.layout.track, ori === 'vertical' ? {
+    width: h,
     height: '100%',
-    backgroundColor: resolvedTrackColor,
-    borderRadius: height / 2
+    backgroundColor: trackClr,
+    borderRadius: h / 2
   } : {
-    height,
-    backgroundColor: resolvedTrackColor,
-    borderRadius: height / 2
-  }], [height, orientation, resolvedTrackColor, tokens.layout.track]);
+    height: h,
+    backgroundColor: trackClr,
+    borderRadius: h / 2
+  }];
   const pivotNode = useMemo(() => {
-    if (!hasPivot) return null;
+    if (!hasPiv) return null;
     const {
-      track: trackW,
-      pivot: pivotW
-    } = layout;
-    const pivotContainerStyle = [tokens.layout.pivot, {
-      bottom: height + tokens.sizing.pivotPaddingVertical * 2,
-      backgroundColor: resolvedPivotBg,
+      track: tw,
+      pivot: pw
+    } = lay;
+    const ctrStyle = [tokens.layout.pivot, {
+      bottom: h + tokens.sizing.pivotPaddingVertical * 2,
+      backgroundColor: pivotBg,
       paddingHorizontal: tokens.sizing.pivotPaddingHorizontal,
       paddingVertical: tokens.sizing.pivotPaddingVertical,
-      borderRadius: height,
-      opacity: trackW > 0 ? 1 : 0
+      borderRadius: h,
+      opacity: tw > 0 ? 1 : 0
     }];
-    let transformStyle = null;
-    if (trackW > 0 && pivotW > 0) {
-      const p1 = pivotW / 2 / trackW * 100;
-      const p2 = (trackW - pivotW / 2) / trackW * 100;
-      if (p1 < p2) {
-        transformStyle = {
-          transform: [{
-            translateX: animatedValue.interpolate({
-              inputRange: [0, p1, p2, 100],
-              outputRange: [0, 0, trackW - pivotW, trackW - pivotW],
-              extrapolate: 'clamp'
-            })
-          }]
-        };
-      } else {
-        transformStyle = {
-          transform: [{
-            translateX: (trackW - pivotW) / 2
-          }]
-        };
-      }
-    }
+    let transStyle = null;
+    if (tw > 0 && pw > 0) {
+      const p1 = pw / 2 / tw * 100;
+      const p2 = (tw - pw / 2) / tw * 100;
+      transStyle = p1 < p2 ? {
+        transform: [{
+          translateX: animVal.interpolate({
+            inputRange: [0, p1, p2, 100],
+            outputRange: [0, 0, tw - pw, tw - pw],
+            extrapolate: 'clamp'
+          })
+        }]
+      } : {
+        transform: [{
+          translateX: (tw - pw) / 2
+        }]
+      };
+    } else transStyle = {
+      transform: [{
+        translateX: (tw - pw) / 2
+      }]
+    };
     return /*#__PURE__*/React.createElement(Animated.View, {
-      style: [pivotContainerStyle, transformStyle],
+      style: [ctrStyle, transStyle],
       pointerEvents: "none",
-      onLayout: onPivotLayout
-    }, isText(pivotContent) ? /*#__PURE__*/React.createElement(Text, {
+      onLayout: onPivotLay
+    }, isText(pivotCnt) ? /*#__PURE__*/React.createElement(Text, {
       style: [tokens.layout.pivotText, {
-        color: resolvedPivotTextColor,
+        color: pivotTxtClr,
+        fontFamily: tokens.typography.fontFamily,
         fontSize: tokens.typography.pivotFontSize
       }, pivotStyle]
-    }, pivotContent) : pivotContent);
-  }, [animatedValue, hasPivot, height, layout, onPivotLayout, pivotContent, pivotStyle, resolvedPivotBg, resolvedPivotTextColor, tokens.layout.pivot, tokens.layout.pivotText, tokens.sizing.pivotPaddingHorizontal, tokens.sizing.pivotPaddingVertical, tokens.typography.pivotFontSize]);
-  const progressContextValue = useMemo(() => ({
-    animatedValue,
-    orientation,
-    height,
-    indicatorColor: resolvedIndicatorColor,
+    }, pivotCnt) : pivotCnt);
+  }, [animVal, hasPiv, h, lay, onPivotLay, pivotCnt, pivotStyle, pivotBg, pivotTxtClr, tokens.layout.pivot, tokens.layout.pivotText, tokens.sizing.pivotPaddingHorizontal, tokens.sizing.pivotPaddingVertical, tokens.typography.fontFamily, tokens.typography.pivotFontSize]);
+  const ctxVal = useMemo(() => ({
+    animatedValue: animVal,
+    orientation: ori,
+    height: h,
+    indicatorColor: indClr,
     indicatorStyle: indicatorStyle,
-    isGradient,
-    gradientColor: isGradient ? color : undefined,
+    isGradient: isGrad,
+    gradientColor: isGrad ? color : undefined,
     layoutIndicator: tokens.layout.indicator
-  }), [animatedValue, color, height, indicatorStyle, isGradient, orientation, resolvedIndicatorColor, tokens.layout.indicator]);
+  }), [animVal, color, h, indicatorStyle, isGrad, ori, indClr, tokens.layout.indicator]);
   return /*#__PURE__*/React.createElement(ProgressContext.Provider, {
-    value: progressContextValue
+    value: ctxVal
   }, /*#__PURE__*/React.createElement(View, _extends({
     style: style,
     accessibilityRole: "progressbar",
     accessibilityValue: {
       min: 0,
       max: 100,
-      now: percentage
+      now: pct
     }
   }, rest), /*#__PURE__*/React.createElement(View, {
     style: trackStyle,
-    onLayout: hasPivot ? onTrackLayout : undefined
+    onLayout: hasPiv ? onTrackLay : undefined
   }, children ?? /*#__PURE__*/React.createElement(ProgressFilledTrack, null)), pivotNode));
 });
 Progress.displayName = 'Progress';

package/dist/es/components/progress/tokens.js

@@ -32,6 +32,7 @@ export const createProgressTokens = foundations => {
       pivotText: onPrimary
     },
     typography: {
+      fontFamily: foundations.typography.fontFamily,
       pivotFontSize: foundations.fontSize.xs
     },
     sizing: {

package/dist/es/components/radio/Radio.js

@@ -1,11 +1,12 @@
 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, useMemo, useRef } from 'react';
-import { Platform, Pressable, Text, View } from 'react-native';
+import { Platform, Pressable, 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';
+import { createHairlineView, parseNumber, renderTextOrNode } from '../../utils';
+import { isRenderable, isText } from '../../utils/validate';
 export const Radio = /*#__PURE__*/React.memo(props => {
   const {
     children,
@@ -16,7 +17,7 @@ export const Radio = /*#__PURE__*/React.memo(props => {
     iconSize,
     checkedColor,
     iconRender,
-    shape: shapeProp,
+    shape: shapeP,
     labelPosition,
     labelDisabled,
     disabled,
@@ -31,124 +32,133 @@ export const Radio = /*#__PURE__*/React.memo(props => {
   } = 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 optVal = value ?? name;
+  const sv = optVal == null ? undefined : String(optVal);
+  const isGroup = !!group && sv !== undefined;
+  const rIconSz = parseNumber(iconSize ?? group?.iconSize, tokens.defaults.iconSize);
+  const rCheckedClr = checkedColor ?? group?.checkedColor ?? tokens.colors.checkedBackground;
+  const rLabelPos = labelPosition ?? tokens.defaults.labelPosition;
+  const rLabelDis = labelDisabled ?? group?.labelDisabled ?? tokens.defaults.labelDisabled;
+  const rDis = Boolean(disabled || group?.state.isDisabled);
+  const shape = shapeP ?? tokens.defaults.shape;
+  const standKey = sv ?? 'standalone';
   const inputRef = useRef(null);
-  const inputElementRef = useRef(null);
-  const resolvedAccessibilityLabel = useMemo(() => accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'radio', [accessibilityLabel, ariaLabel, children, serializedValue]);
+  const inputElRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onClickRef = useRef(onClick);
+  onClickRef.current = onClick;
+  const rAccLabel = accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? sv ?? 'radio';
   const {
-    isSelected: standaloneSelected,
-    setSelected: setStandaloneSelected
+    isSelected: standSel,
+    setSelected: setStandSel
   } = useToggleState({
     isSelected: checked,
     defaultSelected: defaultChecked,
     onChange: next => onChange?.(next)
   });
   const pseudoState = {
-    selectedValue: standaloneSelected ? standaloneKey : null,
+    selectedValue: standSel ? standKey : null,
     setSelectedValue: next => {
-      setStandaloneSelected(next === standaloneKey);
+      setStandSel(next === standKey);
     }
   };
   useEffect(() => {
-    if (isGroup && group && serializedValue !== undefined) {
-      group.registerValue(serializedValue, optionValue ?? serializedValue);
-      return () => group.unregisterValue(serializedValue);
+    if (isGroup && group && sv !== undefined) {
+      group.registerValue(sv, optVal ?? sv);
+      return () => group.unregisterValue(sv);
     }
+    ;
     return undefined;
-  }, [group, isGroup, optionValue, serializedValue]);
+  }, [group, isGroup, optVal, sv]);
   const state = isGroup && group ? group.state : pseudoState;
-  const radioValue = isGroup ? serializedValue : standaloneKey;
+  const radioVal = isGroup ? sv : standKey;
   const {
     onBlur,
     onFocus,
-    ...compatibleRest
+    ...compRest
   } = rest;
-  const ariaRef = Platform.OS === 'web' ? inputElementRef : inputRef;
+  const ariaRef = Platform.OS === 'web' ? inputElRef : inputRef;
   const {
     inputProps
   } = useRadio({
-    value: radioValue,
-    isDisabled: resolvedDisabled,
-    'aria-label': resolvedAccessibilityLabel,
-    accessibilityLabel: resolvedAccessibilityLabel,
-    ...compatibleRest
+    value: radioVal,
+    isDisabled: rDis,
+    'aria-label': rAccLabel,
+    accessibilityLabel: rAccLabel,
+    ...compRest
   }, state, ariaRef);
-  const isChecked = isGroup && group && serializedValue !== undefined ? group.state.selectedValue === serializedValue : checked !== undefined ? checked : standaloneSelected;
+  const isChecked = isGroup && group && sv !== undefined ? group.state.selectedValue === sv : checked !== undefined ? checked : standSel;
   const inputOnPress = inputProps?.onPress;
   const handlePress = useCallback(e => {
-    onClick?.(e);
-    if (resolvedDisabled) return;
-    if (isGroup && group && serializedValue !== undefined) {
-      if (!isChecked) group.state.setSelectedValue(serializedValue);
+    onClickRef.current?.(e);
+    if (rDis) return;
+    if (isGroup && group && sv !== undefined) {
+      if (!isChecked) group.state.setSelectedValue(sv);
       return;
     }
+    ;
     if (checked !== undefined) {
-      onChange?.(!checked);
+      onChangeRef.current?.(!checked);
       return;
     }
-    if (onChange) {
-      setStandaloneSelected(!standaloneSelected);
+    ;
+    if (onChangeRef.current) {
+      setStandSel(!standSel);
       return;
     }
+    ;
     inputOnPress?.(e);
-  }, [checked, group, inputOnPress, isChecked, isGroup, onChange, onClick, resolvedDisabled, serializedValue, setStandaloneSelected, standaloneSelected]);
+  }, [checked, group, inputOnPress, isChecked, isGroup, rDis, sv, setStandSel, standSel]);
   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 = useMemo(() => resolvedLabelPosition === 'left' ? {
+  const borderClr = rDis ? tokens.colors.disabledBorder : isChecked ? rCheckedClr : tokens.colors.border;
+  const bgClr = rDis ? tokens.colors.disabledBackground : tokens.colors.background;
+  const spacingStyle = rLabelPos === 'left' ? {
     marginRight: tokens.spacing.gap
   } : {
     marginLeft: tokens.spacing.gap
-  }, [resolvedLabelPosition, tokens.spacing.gap]);
-  const labelColor = useMemo(() => resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label, [resolvedDisabled, tokens.colors.label, tokens.colors.labelDisabled]);
-  const borderRadius = useMemo(() => shape === 'square' ? tokens.radii.square : tokens.radii.round, [shape, tokens.radii.round, tokens.radii.square]);
-  const labelNode = useMemo(() => children === null || children === undefined || children === false ? null : /*#__PURE__*/React.createElement(View, {
+  };
+  const labelClr = rDis ? tokens.colors.labelDisabled : tokens.colors.label;
+  const radius = shape === 'square' ? tokens.radii.square : tokens.radii.round;
+  const labelNode = useMemo(() => !isRenderable(children) ? 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), [children, labelColor, labelStyle, spacingStyle, tokens.layout.label, tokens.layout.labelWrapper, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeightMultiplier]);
-  const interactive = !resolvedDisabled && !resolvedLabelDisabled;
+  }, renderTextOrNode(children, [tokens.layout.label, {
+    color: labelClr,
+    fontSize: tokens.typography.fontSize,
+    lineHeight: tokens.typography.fontSize * tokens.typography.lineHeightMultiplier,
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: tokens.typography.fontWeight
+  }, labelStyle].filter(Boolean))), [children, labelClr, labelStyle, spacingStyle, tokens.layout.label, tokens.layout.labelWrapper, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeightMultiplier]);
+  const interactive = !rDis && !rLabelDis;
   const defaultIcon = useMemo(() => /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.icon, {
-      width: resolvedIconSize,
-      height: resolvedIconSize,
-      borderRadius,
-      borderWidth: tokens.borders.width,
-      borderColor,
-      backgroundColor
+      width: rIconSz,
+      height: rIconSz,
+      borderRadius: radius,
+      backgroundColor: bgClr
     }]
-  }, isChecked ? /*#__PURE__*/React.createElement(View, {
+  }, isChecked && /*#__PURE__*/React.createElement(View, {
     style: {
-      width: resolvedIconSize * tokens.sizing.dotScale,
-      height: resolvedIconSize * tokens.sizing.dotScale,
-      borderRadius,
-      backgroundColor: resolvedCheckedColor
+      width: rIconSz * tokens.sizing.dotScale,
+      height: rIconSz * tokens.sizing.dotScale,
+      borderRadius: radius,
+      backgroundColor: rCheckedClr
     }
-  }) : null), [backgroundColor, borderColor, borderRadius, isChecked, resolvedCheckedColor, resolvedIconSize, tokens.borders.width, tokens.layout.icon, tokens.sizing.dotScale]);
+  }), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'all',
+      color: borderClr,
+      borderRadius: radius
+    })
+  })), [bgClr, borderClr, radius, isChecked, rCheckedClr, rIconSz, tokens.layout.icon, tokens.sizing.dotScale]);
   const iconVisual = iconRender ? iconRender({
     checked: Boolean(isChecked),
-    disabled: Boolean(resolvedDisabled)
+    disabled: Boolean(rDis)
   }) ?? null : defaultIcon;
   const webInputStyle = {
     position: 'absolute',
@@ -167,7 +177,7 @@ export const Radio = /*#__PURE__*/React.memo(props => {
     ...webInputProps
   } = inputProps ?? {};
   const webInputNode = Platform.OS === 'web' ? /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputElementRef
+    ref: inputElRef
   }, webInputProps, {
     style: webInputStyle
   })) : null;
@@ -175,33 +185,30 @@ export const Radio = /*#__PURE__*/React.memo(props => {
     style: tokens.layout.iconWrapper
   }, iconVisual, webInputNode) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
     ref: inputRef,
-    testID: serializedValue !== undefined ? `radio-icon-${serializedValue}` : undefined,
-    disabled: resolvedDisabled,
+    testID: sv !== undefined ? `radio-icon-${sv}` : undefined,
+    disabled: rDis,
     accessibilityRole: "radio",
     accessibilityState: {
       selected: isChecked,
-      disabled: resolvedDisabled
+      disabled: rDis
     },
     style: tokens.layout.iconWrapper
   }), iconVisual, webInputNode);
-  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);
-  }
+  const isLeft = rLabelPos === 'left';
+  const first = isLeft ? labelNode : iconNode;
+  const second = isLeft ? iconNode : labelNode;
+  if (interactive) return /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
+    ref: inputRef,
+    testID: sv !== undefined ? `radio-icon-${sv}` : undefined,
+    disabled: rDis,
+    accessibilityRole: "radio",
+    accessibilityState: {
+      selected: isChecked,
+      disabled: rDis
+    },
+    style: [tokens.layout.container, style]
+  }), first, second);
   return /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.container, style]
   }, first, second);
-});
-Radio.displayName = 'Radio';
+});