react-native-system-ui 0.0.6 → 1.0.0

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

@@ -19,6 +19,7 @@ function _reactNative() {
   return data;
 }
 var _utils = require("../../utils");
+var _animation = require("../../hooks/animation");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
@@ -29,20 +30,20 @@ const ProgressFilledTrack = ({
 }) => {
   const context = (0, _react().useContext)(ProgressContext);
   if (!context) return null;
-  const indicatorSize = (0, _react().useMemo)(() => context.animatedValue.interpolate({
+  const size = (0, _react().useMemo)(() => context.animatedValue.interpolate({
     inputRange: [0, 100],
     outputRange: ['0%', '100%']
   }), [context.animatedValue]);
   const sizeStyle = (0, _react().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,
@@ -82,86 +83,88 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useProgressTokens)(tokensOverride);
-  const percentage = (0, _react().useMemo)(() => (0, _utils.clamp)((0, _utils.parsePercentage)(percentageProp ?? tokens.defaults.percentage), 0, 100), [percentageProp, tokens.defaults.percentage]);
-  const height = (0, _react().useMemo)(() => (0, _utils.parseNumberLike)(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height, [strokeWidth, tokens.sizing.height]);
-  const inactive = (0, _react().useMemo)(() => inactiveProp ?? tokens.defaults.inactive, [inactiveProp, tokens.defaults.inactive]);
+  const reducedMotion = (0, _animation.useReducedMotion)();
+  const percentageClamped = (0, _utils.clamp)((0, _utils.parsePercentage)(percentageProp ?? tokens.defaults.percentage), 0, 100);
+  const height = (0, _utils.parseNumberLike)(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height;
+  const inactive = inactiveProp ?? tokens.defaults.inactive;
   const orientation = orientationProp ?? 'horizontal';
-  const showPivot = (0, _react().useMemo)(() => orientation === 'vertical' ? false : showPivotProp ?? tokens.defaults.showPivot, [orientation, showPivotProp, tokens.defaults.showPivot]);
-  const shouldAnimate = (0, _react().useMemo)(() => (animated ?? transitionProp ?? tokens.defaults.transition) && !inactive, [animated, inactive, tokens.defaults.transition, transitionProp]);
-  const duration = (0, _react().useMemo)(() => Math.max(0, animationDurationProp ?? tokens.defaults.animationDuration), [animationDurationProp, tokens.defaults.animationDuration]);
+  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 = _reactNative().Platform.OS === 'web' && (0, _utils.isString)(color) && GRADIENT_REGEX.test(color);
-  const resolvedTrackColor = (0, _react().useMemo)(() => trackColor ?? tokens.colors.track, [tokens.colors.track, trackColor]);
-  const resolvedIndicatorColor = (0, _react().useMemo)(() => inactive ? tokens.colors.track : !isGradient ? color ?? tokens.colors.indicator : undefined, [color, inactive, isGradient, tokens.colors.indicator, tokens.colors.track]);
-  const resolvedPivotBg = (0, _react().useMemo)(() => pivotColor ?? (isGradient ? inactive ? tokens.colors.track : tokens.colors.indicator : resolvedIndicatorColor), [inactive, isGradient, pivotColor, resolvedIndicatorColor, tokens.colors.indicator, tokens.colors.track]);
-  const resolvedPivotTextColor = (0, _react().useMemo)(() => textColor ?? tokens.colors.pivotText, [textColor, tokens.colors.pivotText]);
-  const pivotContent = (0, _react().useMemo)(() => pivotText ?? `${percentage}%`, [percentage, pivotText]);
-  const hasPivot = (0, _react().useMemo)(() => showPivot && pivotContent !== null && pivotContent !== false, [pivotContent, showPivot]);
-  const animatedValue = (0, _react().useRef)(new (_reactNative().Animated.Value)(percentage)).current;
+  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 = (0, _react().useRef)(new (_reactNative().Animated.Value)(percentageClamped)).current;
   (0, _react().useEffect)(() => {
-    if (shouldAnimate && duration > 0) {
+    if (shouldAnimate && duration > 0 && !reducedMotion) {
       const animation = _reactNative().Animated.timing(animatedValue, {
-        toValue: percentage,
+        toValue: percentageClamped,
         duration,
-        useNativeDriver: false
+        useNativeDriver: false,
+        isInteraction: false
       });
       animation.start();
       return () => animation.stop();
     } else {
-      animatedValue.setValue(percentage);
+      animatedValue.setValue(percentageClamped);
     }
-  }, [percentage, shouldAnimate, duration, animatedValue]);
+  }, [percentageClamped, shouldAnimate, duration, animatedValue, reducedMotion]);
   const [layout, setLayout] = (0, _react().useState)({
     track: 0,
     pivot: 0
   });
-  const onTrackLayout = (0, _react().useCallback)(e => {
-    const width = e.nativeEvent.layout.width;
+  const onTrackLayout = (0, _react().useCallback)(event => {
+    const width = event.nativeEvent.layout.width;
     setLayout(prev => prev.track === width ? prev : {
       ...prev,
       track: width
     });
   }, []);
-  const onPivotLayout = (0, _react().useCallback)(e => {
-    const width = e.nativeEvent.layout.width;
+  const onPivotLayout = (0, _react().useCallback)(event => {
+    const width = event.nativeEvent.layout.width;
     setLayout(prev => prev.pivot === width ? prev : {
       ...prev,
       pivot: width
     });
   }, []);
-  const trackStyle = (0, _react().useMemo)(() => [tokens.layout.track, orientation === 'vertical' ? {
+  const trackStyle = [tokens.layout.track, orientation === 'vertical' ? {
     width: height,
     height: '100%',
     backgroundColor: resolvedTrackColor,
     borderRadius: height / 2
   } : {
-    height,
+    height: height,
     backgroundColor: resolvedTrackColor,
     borderRadius: height / 2
-  }], [height, orientation, resolvedTrackColor, tokens.layout.track]);
+  }];
   const pivotNode = (0, _react().useMemo)(() => {
     if (!hasPivot) return null;
     const {
-      track: trackW,
-      pivot: pivotW
+      track: trackWidth,
+      pivot: pivotWidth
     } = layout;
     const pivotContainerStyle = [tokens.layout.pivot, {
       bottom: height + tokens.sizing.pivotPaddingVertical * 2,
-      backgroundColor: resolvedPivotBg,
+      backgroundColor: resolvedPivotBackground,
       paddingHorizontal: tokens.sizing.pivotPaddingHorizontal,
       paddingVertical: tokens.sizing.pivotPaddingVertical,
       borderRadius: height,
-      opacity: trackW > 0 ? 1 : 0
+      opacity: trackWidth > 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) {
+    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, p1, p2, 100],
-              outputRange: [0, 0, trackW - pivotW, trackW - pivotW],
+              inputRange: [0, pivotPosition1, pivotPosition2, 100],
+              outputRange: [0, 0, trackWidth - pivotWidth, trackWidth - pivotWidth],
               extrapolate: 'clamp'
             })
           }]
@@ -169,7 +172,7 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
       } else {
         transformStyle = {
           transform: [{
-            translateX: (trackW - pivotW) / 2
+            translateX: (trackWidth - pivotWidth) / 2
           }]
         };
       }
@@ -178,20 +181,20 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
       style: [pivotContainerStyle, transformStyle],
       pointerEvents: "none",
       onLayout: onPivotLayout
-    }, (0, _utils.isText)(pivotContent) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    }, (0, _utils.isText)(pivotContentText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: [tokens.layout.pivotText, {
         color: resolvedPivotTextColor,
         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]);
+    }, 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 = (0, _react().useMemo)(() => ({
-    animatedValue,
-    orientation,
-    height,
+    animatedValue: animatedValue,
+    orientation: orientation,
+    height: height,
     indicatorColor: resolvedIndicatorColor,
     indicatorStyle: indicatorStyle,
-    isGradient,
+    isGradient: isGradient,
     gradientColor: isGradient ? color : undefined,
     layoutIndicator: tokens.layout.indicator
   }), [animatedValue, color, height, indicatorStyle, isGradient, orientation, resolvedIndicatorColor, tokens.layout.indicator]);
@@ -203,7 +206,7 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
     accessibilityValue: {
       min: 0,
       max: 100,
-      now: percentage
+      now: percentageClamped
     }
   }, rest), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: trackStyle,

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

@@ -35,6 +35,7 @@ function _toggle() {
 var _RadioContext = require("./RadioContext");
 var _tokens = require("./tokens");
 var _utils = require("../../utils");
+var _validate = require("../../utils/validate");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
 const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
@@ -74,7 +75,11 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
   const standaloneKey = serializedValue ?? 'standalone';
   const inputRef = (0, _react().useRef)(null);
   const inputElementRef = (0, _react().useRef)(null);
-  const resolvedAccessibilityLabel = (0, _react().useMemo)(() => accessibilityLabel ?? ariaLabel ?? ((0, _utils.isText)(children) ? String(children) : undefined) ?? serializedValue ?? 'radio', [accessibilityLabel, ariaLabel, children, serializedValue]);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  onChangeRef.current = onChange;
+  const onClickRef = (0, _react().useRef)(onClick);
+  onClickRef.current = onClick;
+  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? ((0, _validate.isText)(children) ? String(children) : undefined) ?? serializedValue ?? 'radio';
   const {
     isSelected: standaloneSelected,
     setSelected: setStandaloneSelected
@@ -116,67 +121,68 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
   const isChecked = isGroup && group && serializedValue !== undefined ? group.state.selectedValue === serializedValue : checked !== undefined ? checked : standaloneSelected;
   const inputOnPress = inputProps?.onPress;
   const handlePress = (0, _react().useCallback)(e => {
-    onClick?.(e);
+    onClickRef.current?.(e);
     if (resolvedDisabled) return;
     if (isGroup && group && serializedValue !== undefined) {
       if (!isChecked) group.state.setSelectedValue(serializedValue);
       return;
     }
     if (checked !== undefined) {
-      onChange?.(!checked);
+      onChangeRef.current?.(!checked);
       return;
     }
-    if (onChange) {
+    if (onChangeRef.current) {
       setStandaloneSelected(!standaloneSelected);
       return;
     }
     inputOnPress?.(e);
-  }, [checked, group, inputOnPress, isChecked, isGroup, onChange, onClick, resolvedDisabled, serializedValue, setStandaloneSelected, standaloneSelected]);
+  }, [checked, group, inputOnPress, isChecked, isGroup, 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 = (0, _react().useMemo)(() => resolvedLabelPosition === 'left' ? {
+  const spacingStyle = resolvedLabelPosition === 'left' ? {
     marginRight: tokens.spacing.gap
   } : {
     marginLeft: tokens.spacing.gap
-  }, [resolvedLabelPosition, tokens.spacing.gap]);
-  const labelColor = (0, _react().useMemo)(() => resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label, [resolvedDisabled, tokens.colors.label, tokens.colors.labelDisabled]);
-  const borderRadius = (0, _react().useMemo)(() => shape === 'square' ? tokens.radii.square : tokens.radii.round, [shape, tokens.radii.round, tokens.radii.square]);
-  const labelNode = (0, _react().useMemo)(() => children === null || children === undefined || children === false ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  };
+  const labelColor = resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label;
+  const borderRadius = shape === 'square' ? tokens.radii.square : tokens.radii.round;
+  const labelNode = (0, _react().useMemo)(() => !(0, _validate.isRenderable)(children) ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.labelWrapper, spacingStyle],
     pointerEvents: "none",
     accessible: false
-  }, (0, _utils.isText)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().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]);
+  }, (0, _utils.renderTextOrNode)(children, [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].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;
   const defaultIcon = (0, _react().useMemo)(() => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.icon, {
       width: resolvedIconSize,
       height: resolvedIconSize,
       borderRadius,
-      borderWidth: tokens.borders.width,
-      borderColor,
       backgroundColor
     }]
-  }, isChecked ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, isChecked && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: {
       width: resolvedIconSize * tokens.sizing.dotScale,
       height: resolvedIconSize * tokens.sizing.dotScale,
       borderRadius,
       backgroundColor: resolvedCheckedColor
     }
-  }) : null), [backgroundColor, borderColor, borderRadius, isChecked, resolvedCheckedColor, resolvedIconSize, tokens.borders.width, tokens.layout.icon, tokens.sizing.dotScale]);
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _utils.createHairlineView)({
+      position: 'all',
+      color: borderColor,
+      borderRadius
+    })
+  })), [backgroundColor, borderColor, borderRadius, isChecked, resolvedCheckedColor, resolvedIconSize, tokens.layout.icon, tokens.sizing.dotScale]);
   const iconVisual = iconRender ? iconRender({
     checked: Boolean(isChecked),
     disabled: Boolean(resolvedDisabled)
@@ -215,24 +221,21 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
     },
     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().default.createElement(_reactNative().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 = resolvedLabelPosition === 'left';
+  const first = isLeft ? labelNode : iconNode;
+  const second = isLeft ? iconNode : labelNode;
+  if (interactive) return /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().View, {
     style: [tokens.layout.container, style]
   }, first, second);
-});
-Radio.displayName = 'Radio';
+});

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

@@ -36,7 +36,7 @@ var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
 const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/_react().default.createContext(null);
-const RadioGroup = props => {
+const RadioGroupImpl = props => {
   const {
     value,
     defaultValue,
@@ -71,8 +71,7 @@ const RadioGroup = props => {
     defaultValue: defaultValue == null ? undefined : String(defaultValue),
     isDisabled: disabled,
     onChange: key => {
-      const raw = registryRef.current.get(key);
-      onChange?.(raw ?? key);
+      onChange?.(registryRef.current.get(key) ?? key);
     },
     name
   });
@@ -90,25 +89,6 @@ const RadioGroup = props => {
     }),
     'aria-disabled': disabled
   }), [accessibilityHint, disabled, radioGroupProps]);
-  const supportsGap = _reactNative().Platform.OS === 'web';
-  const childrenArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean'), [children]);
-  const childrenLength = childrenArray.length;
-  const itemStyleForIndex = (0, _react().useCallback)(index => {
-    if (supportsGap) return tokens.layout.groupItem;
-    const isLast = index === childrenLength - 1;
-    if (direction === 'horizontal') {
-      return [tokens.layout.groupItem, !isLast && {
-        marginRight: gap
-      }];
-    }
-    return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
-      marginBottom: gap
-    }];
-  }, [childrenLength, direction, gap, supportsGap, tokens.layout.groupItem]);
-  const containerGapStyle = (0, _react().useMemo)(() => supportsGap ? {
-    columnGap: direction === 'horizontal' ? gap : undefined,
-    rowGap: gap
-  } : null, [direction, gap, supportsGap]);
   const contextValue = (0, _react().useMemo)(() => ({
     state,
     direction,
@@ -118,28 +98,16 @@ const RadioGroup = props => {
     registerValue,
     unregisterValue
   }), [checkedColor, direction, iconSize, labelDisabled, registerValue, state, unregisterValue]);
-  const containerStyle = (0, _react().useMemo)(() => [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, containerGapStyle, style], [containerGapStyle, direction, style, tokens.layout.groupHorizontal, tokens.layout.groupVertical]);
-  const renderedChildren = (0, _react().useMemo)(() => supportsGap ? childrenArray : childrenArray.map((child, index) => {
-    const key = /*#__PURE__*/_react().default.isValidElement(child) && child.key !== null ? child.key : index;
-    const itemStyle = itemStyleForIndex(index);
-    if (/*#__PURE__*/_react().default.isValidElement(child) && child.type !== _react().default.Fragment) {
-      const element = child;
-      return /*#__PURE__*/_react().default.cloneElement(element, {
-        style: [element.props.style, itemStyle],
-        key
-      });
-    }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: key,
-      style: itemStyle
-    }, child);
-  }), [childrenArray, itemStyleForIndex, supportsGap]);
+  const containerStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
+    columnGap: direction === 'horizontal' ? gap : undefined,
+    rowGap: gap
+  }, style];
   return /*#__PURE__*/_react().default.createElement(RadioGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedRadioGroupProps, viewProps, {
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
     style: containerStyle
-  }), renderedChildren));
+  }), children));
 };
-exports.RadioGroup = RadioGroup;
+const RadioGroup = exports.RadioGroup = /*#__PURE__*/_react().default.memo(RadioGroupImpl);

package/dist/cjs/components/radio/tokens.js

@@ -12,6 +12,10 @@ function _reactNative() {
   return data;
 }
 var _designSystem = require("../../design-system");
+const centered = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 const createRadioTokens = foundations => {
   const {
     palette,
@@ -19,7 +23,6 @@ const createRadioTokens = foundations => {
     fontSize,
     typography
   } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     defaults: {
       iconSize: 20,
@@ -34,17 +37,11 @@ const createRadioTokens = foundations => {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      iconWrapper: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
+      iconWrapper: centered,
       labelWrapper: {
         flexShrink: 1
       },
-      icon: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
+      icon: centered,
       label: {
         includeFontPadding: false
       },
@@ -66,7 +63,7 @@ const createRadioTokens = foundations => {
       checkedBackground: palette.primary[500],
       disabledBorder: palette.default[300],
       disabledBackground: palette.default[100],
-      checkmark: onPrimary,
+      checkmark: palette.primary.foreground ?? '#ffffff',
       label: palette.default.foreground ?? '#111827',
       labelDisabled: palette.default[400]
     },

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

@@ -20,44 +20,40 @@ function _reactNative() {
 }
 var _useSafeAreaPadding = require("../../hooks/useSafeAreaPadding");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SafeAreaView = ({
+const SafeAreaViewImpl = ({
   edge,
   style,
   children,
   onLayout,
   pointerEvents
 }) => {
-  const p = (0, _useSafeAreaPadding.useSafeAreaPadding)({});
-  if (edge === 'top') {
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [{
-        width: '100%',
-        minHeight: p.paddingTop
-      }, style],
-      onLayout: onLayout,
-      pointerEvents: pointerEvents ?? 'none'
-    });
-  }
-  if (edge === 'bottom') {
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [{
-        width: '100%',
-        minHeight: p.paddingBottom
-      }, style],
-      pointerEvents: pointerEvents ?? 'none'
-    });
-  }
+  const padding = (0, _useSafeAreaPadding.useSafeAreaPadding)({});
+  if (edge === 'top') return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [{
+      width: '100%',
+      minHeight: padding.paddingTop
+    }, style],
+    onLayout: onLayout,
+    pointerEvents: pointerEvents ?? 'none'
+  });
+  if (edge === 'bottom') return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [{
+      width: '100%',
+      minHeight: padding.paddingBottom
+    }, style],
+    pointerEvents: pointerEvents ?? 'none'
+  });
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [{
       width: '100%',
-      paddingTop: p.paddingTop,
-      paddingBottom: p.paddingBottom,
-      paddingLeft: p.paddingLeft,
-      paddingRight: p.paddingRight
+      paddingTop: padding.paddingTop,
+      paddingBottom: padding.paddingBottom,
+      paddingLeft: padding.paddingLeft,
+      paddingRight: padding.paddingRight
     }, style],
     onLayout: onLayout,
     pointerEvents: pointerEvents
   }, children);
 };
-exports.SafeAreaView = SafeAreaView;
+const SafeAreaView = exports.SafeAreaView = /*#__PURE__*/_react().default.memo(SafeAreaViewImpl);
 SafeAreaView.displayName = 'SafeAreaView';