react-native-system-ui 1.0.0 → 1.0.2

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

@@ -43,154 +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 reducedMotion = useReducedMotion();
-  const percentageClamped = clamp(parsePercentage(percentageProp ?? tokens.defaults.percentage), 0, 100);
-  const height = parseNumberLike(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height;
-  const inactive = inactiveProp ?? tokens.defaults.inactive;
-  const orientation = orientationProp ?? 'horizontal';
-  const showPivotValue = orientation === 'vertical' ? false : showPivotProp ?? tokens.defaults.showPivot;
-  const shouldAnimate = (animated ?? transitionProp ?? tokens.defaults.transition) && !inactive;
-  const duration = Math.max(0, animationDurationProp ?? tokens.defaults.animationDuration);
-  const isGradient = Platform.OS === 'web' && isString(color) && GRADIENT_REGEX.test(color);
-  const resolvedTrackColor = trackColor ?? tokens.colors.track;
-  const resolvedIndicatorColor = inactive ? tokens.colors.track : !isGradient ? color ?? tokens.colors.indicator : undefined;
-  const resolvedPivotBackground = pivotColor ?? (isGradient ? inactive ? tokens.colors.track : tokens.colors.indicator : resolvedIndicatorColor);
-  const resolvedPivotTextColor = textColor ?? tokens.colors.pivotText;
-  const pivotContentText = pivotText ?? `${percentageClamped}%`;
-  const hasPivot = showPivotValue && pivotContentText !== null && pivotContentText !== false;
-  const animatedValue = useRef(new Animated.Value(percentageClamped)).current;
+  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 && !reducedMotion) {
-      const animation = Animated.timing(animatedValue, {
-        toValue: percentageClamped,
-        duration,
+    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(percentageClamped);
-    }
-  }, [percentageClamped, shouldAnimate, duration, animatedValue, reducedMotion]);
-  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(event => {
-    const width = event.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(event => {
-    const width = event.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 = [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: height,
-    backgroundColor: resolvedTrackColor,
-    borderRadius: height / 2
+    height: h,
+    backgroundColor: trackClr,
+    borderRadius: h / 2
   }];
   const pivotNode = useMemo(() => {
-    if (!hasPivot) return null;
+    if (!hasPiv) return null;
     const {
-      track: trackWidth,
-      pivot: pivotWidth
-    } = layout;
-    const pivotContainerStyle = [tokens.layout.pivot, {
-      bottom: height + tokens.sizing.pivotPaddingVertical * 2,
-      backgroundColor: resolvedPivotBackground,
+      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: trackWidth > 0 ? 1 : 0
+      borderRadius: h,
+      opacity: tw > 0 ? 1 : 0
     }];
-    let transformStyle = null;
-    if (trackWidth > 0 && pivotWidth > 0) {
-      const pivotPosition1 = pivotWidth / 2 / trackWidth * 100;
-      const pivotPosition2 = (trackWidth - pivotWidth / 2) / trackWidth * 100;
-      if (pivotPosition1 < pivotPosition2) {
-        transformStyle = {
-          transform: [{
-            translateX: animatedValue.interpolate({
-              inputRange: [0, pivotPosition1, pivotPosition2, 100],
-              outputRange: [0, 0, trackWidth - pivotWidth, trackWidth - pivotWidth],
-              extrapolate: 'clamp'
-            })
-          }]
-        };
-      } else {
-        transformStyle = {
-          transform: [{
-            translateX: (trackWidth - pivotWidth) / 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(pivotContentText) ? /*#__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]
-    }, pivotContentText) : pivotContentText);
-  }, [animatedValue, hasPivot, height, layout, onPivotLayout, pivotContentText, pivotStyle, resolvedPivotBackground, resolvedPivotTextColor, tokens.layout.pivot, tokens.layout.pivotText, tokens.sizing.pivotPaddingHorizontal, tokens.sizing.pivotPaddingVertical, tokens.typography.pivotFontSize]);
-  const progressContextValue = useMemo(() => ({
-    animatedValue: animatedValue,
-    orientation: orientation,
-    height: 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: 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: percentageClamped
+      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

@@ -17,7 +17,7 @@ export const Radio = /*#__PURE__*/React.memo(props => {
     iconSize,
     checkedColor,
     iconRender,
-    shape: shapeProp,
+    shape: shapeP,
     labelPosition,
     labelDisabled,
     disabled,
@@ -32,129 +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 inputElRef = useRef(null);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const onClickRef = useRef(onClick);
   onClickRef.current = onClick;
-  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'radio';
+  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 => {
     onClickRef.current?.(e);
-    if (resolvedDisabled) return;
-    if (isGroup && group && serializedValue !== undefined) {
-      if (!isChecked) group.state.setSelectedValue(serializedValue);
+    if (rDis) return;
+    if (isGroup && group && sv !== undefined) {
+      if (!isChecked) group.state.setSelectedValue(sv);
       return;
     }
+    ;
     if (checked !== undefined) {
       onChangeRef.current?.(!checked);
       return;
     }
+    ;
     if (onChangeRef.current) {
-      setStandaloneSelected(!standaloneSelected);
+      setStandSel(!standSel);
       return;
     }
+    ;
     inputOnPress?.(e);
-  }, [checked, group, inputOnPress, isChecked, isGroup, 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 = 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
   };
-  const labelColor = resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label;
-  const borderRadius = shape === 'square' ? tokens.radii.square : tokens.radii.round;
+  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
   }, renderTextOrNode(children, [tokens.layout.label, {
-    color: labelColor,
+    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, 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;
+  }, 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,
-      backgroundColor
+      width: rIconSz,
+      height: rIconSz,
+      borderRadius: radius,
+      backgroundColor: bgClr
     }]
   }, 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
     }
   }), /*#__PURE__*/React.createElement(View, {
     style: createHairlineView({
       position: 'all',
-      color: borderColor,
-      borderRadius
+      color: borderClr,
+      borderRadius: radius
     })
-  })), [backgroundColor, borderColor, borderRadius, isChecked, resolvedCheckedColor, resolvedIconSize, tokens.layout.icon, tokens.sizing.dotScale]);
+  })), [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',
@@ -173,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;
@@ -181,26 +185,26 @@ 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 isLeft = resolvedLabelPosition === 'left';
+  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: 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.container, style]
   }), first, second);

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

@@ -51,14 +51,14 @@ const RadioGroupImpl = props => {
     'aria-label': accessibilityLabel,
     name
   }, state);
-  const resolvedRadioGroupProps = useMemo(() => ({
+  const rProps = useMemo(() => ({
     ...(radioGroupProps ?? {}),
     ...(accessibilityHint && {
       'aria-describedby': accessibilityHint
     }),
     'aria-disabled': disabled
   }), [accessibilityHint, disabled, radioGroupProps]);
-  const contextValue = useMemo(() => ({
+  const ctxVal = useMemo(() => ({
     state,
     direction,
     iconSize,
@@ -67,16 +67,16 @@ const RadioGroupImpl = props => {
     registerValue,
     unregisterValue
   }), [checkedColor, direction, iconSize, labelDisabled, registerValue, state, unregisterValue]);
-  const containerStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
+  const ctrStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
   }, style];
   return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedRadioGroupProps, viewProps, {
+    value: ctxVal
+  }, /*#__PURE__*/React.createElement(View, _extends({}, rProps, viewProps, {
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
-    style: containerStyle
+    style: ctrStyle
   }), children));
 };
 export const RadioGroup = /*#__PURE__*/React.memo(RadioGroupImpl);

package/dist/es/components/safe-area-view/SafeAreaView.js

@@ -8,11 +8,11 @@ const SafeAreaViewImpl = ({
   onLayout,
   pointerEvents
 }) => {
-  const padding = useSafeAreaPadding({});
+  const pad = useSafeAreaPadding({});
   if (edge === 'top') return /*#__PURE__*/React.createElement(View, {
     style: [{
       width: '100%',
-      minHeight: padding.paddingTop
+      minHeight: pad.paddingTop
     }, style],
     onLayout: onLayout,
     pointerEvents: pointerEvents ?? 'none'
@@ -20,17 +20,17 @@ const SafeAreaViewImpl = ({
   if (edge === 'bottom') return /*#__PURE__*/React.createElement(View, {
     style: [{
       width: '100%',
-      minHeight: padding.paddingBottom
+      minHeight: pad.paddingBottom
     }, style],
     pointerEvents: pointerEvents ?? 'none'
   });
   return /*#__PURE__*/React.createElement(View, {
     style: [{
       width: '100%',
-      paddingTop: padding.paddingTop,
-      paddingBottom: padding.paddingBottom,
-      paddingLeft: padding.paddingLeft,
-      paddingRight: padding.paddingRight
+      paddingTop: pad.paddingTop,
+      paddingBottom: pad.paddingBottom,
+      paddingLeft: pad.paddingLeft,
+      paddingRight: pad.paddingRight
     }, style],
     onLayout: onLayout,
     pointerEvents: pointerEvents