react-native-system-ui 0.0.4 → 0.0.6

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Progress = void 0;
+exports.default = exports.ProgressFilledTrack = exports.Progress = void 0;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -23,6 +23,42 @@ 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 GRADIENT_REGEX = /linear-gradient|radial-gradient|conic-gradient/i;
+const ProgressContext = /*#__PURE__*/_react().default.createContext(null);
+const ProgressFilledTrack = ({
+  style
+}) => {
+  const context = (0, _react().useContext)(ProgressContext);
+  if (!context) return null;
+  const indicatorSize = (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,
+    bottom: 0,
+    left: 0,
+    position: 'absolute'
+  } : {
+    height: context.height,
+    width: indicatorSize
+  }, [context.height, context.orientation, indicatorSize]);
+  const baseStyle = [context.orientation === 'vertical' ? {
+    position: 'absolute',
+    left: 0,
+    bottom: 0
+  } : context.layoutIndicator, {
+    backgroundColor: context.indicatorColor,
+    borderRadius: context.height / 2,
+    ...(context.isGradient && context.gradientColor ? {
+      backgroundImage: context.gradientColor
+    } : null)
+  }, sizeStyle, context.indicatorStyle, style];
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    style: baseStyle
+  });
+};
+exports.ProgressFilledTrack = ProgressFilledTrack;
 const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
   const {
     tokensOverride,
@@ -41,22 +77,25 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
     style,
     pivotStyle,
     indicatorStyle,
+    orientation: orientationProp,
+    children,
     ...rest
   } = props;
   const tokens = (0, _tokens.useProgressTokens)(tokensOverride);
-  const percentage = (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 showPivot = showPivotProp ?? tokens.defaults.showPivot;
-  const shouldAnimate = (animated ?? transitionProp ?? tokens.defaults.transition) && !inactive;
-  const duration = Math.max(0, animationDurationProp ?? tokens.defaults.animationDuration);
+  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 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 isGradient = _reactNative().Platform.OS === 'web' && (0, _utils.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 resolvedPivotBg = pivotColor ?? (isGradient ? inactive ? tokens.colors.track : tokens.colors.indicator : resolvedIndicatorColor);
-  const resolvedPivotTextColor = textColor ?? tokens.colors.pivotText;
-  const pivotContent = pivotText ?? `${percentage}%`;
-  const hasPivot = showPivot && pivotContent !== null && pivotContent !== false;
+  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;
   (0, _react().useEffect)(() => {
     if (shouldAnimate && duration > 0) {
@@ -89,13 +128,18 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
       pivot: width
     });
   }, []);
-  const trackStyle = [tokens.layout.track, {
+  const trackStyle = (0, _react().useMemo)(() => [tokens.layout.track, orientation === 'vertical' ? {
+    width: height,
+    height: '100%',
+    backgroundColor: resolvedTrackColor,
+    borderRadius: height / 2
+  } : {
     height,
     backgroundColor: resolvedTrackColor,
     borderRadius: height / 2
-  }];
-  let pivotNode = null;
-  if (hasPivot) {
+  }], [height, orientation, resolvedTrackColor, tokens.layout.track]);
+  const pivotNode = (0, _react().useMemo)(() => {
+    if (!hasPivot) return null;
     const {
       track: trackW,
       pivot: pivotW
@@ -130,7 +174,7 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
         };
       }
     }
-    pivotNode = /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
       style: [pivotContainerStyle, transformStyle],
       pointerEvents: "none",
       onLayout: onPivotLayout
@@ -140,12 +184,20 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
         fontSize: tokens.typography.pivotFontSize
       }, pivotStyle]
     }, pivotContent) : pivotContent);
-  }
-  const indicatorWidth = animatedValue.interpolate({
-    inputRange: [0, 100],
-    outputRange: ['0%', '100%']
-  });
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+  }, [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 = (0, _react().useMemo)(() => ({
+    animatedValue,
+    orientation,
+    height,
+    indicatorColor: resolvedIndicatorColor,
+    indicatorStyle: indicatorStyle,
+    isGradient,
+    gradientColor: isGradient ? color : undefined,
+    layoutIndicator: tokens.layout.indicator
+  }), [animatedValue, color, height, indicatorStyle, isGradient, orientation, resolvedIndicatorColor, tokens.layout.indicator]);
+  return /*#__PURE__*/_react().default.createElement(ProgressContext.Provider, {
+    value: progressContextValue
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     style: style,
     accessibilityRole: "progressbar",
     accessibilityValue: {
@@ -156,18 +208,7 @@ const Progress = exports.Progress = /*#__PURE__*/(0, _react().memo)(props => {
   }, rest), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: trackStyle,
     onLayout: hasPivot ? onTrackLayout : undefined
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [tokens.layout.indicator, {
-      height,
-      backgroundColor: resolvedIndicatorColor,
-      borderRadius: height / 2,
-      ...(isGradient && {
-        backgroundImage: color
-      })
-    }, indicatorStyle, {
-      width: indicatorWidth
-    }]
-  })), pivotNode);
+  }, children ?? /*#__PURE__*/_react().default.createElement(ProgressFilledTrack, null)), pivotNode));
 });
 Progress.displayName = 'Progress';
 var _default = exports.default = Progress;

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

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ProgressFilledTrack", {
+  enumerable: true,
+  get: function () {
+    return _Progress.ProgressFilledTrack;
+  }
+});
 exports.default = void 0;
 var _Progress = require("./Progress");
 var _default = exports.default = _Progress.Progress;

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

@@ -73,7 +73,8 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
   const shape = shapeProp ?? tokens.defaults.shape;
   const standaloneKey = serializedValue ?? 'standalone';
   const inputRef = (0, _react().useRef)(null);
-  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? ((0, _utils.isText)(children) ? String(children) : undefined) ?? serializedValue ?? 'radio';
+  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 {
     isSelected: standaloneSelected,
     setSelected: setStandaloneSelected
@@ -102,6 +103,7 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
     onFocus,
     ...compatibleRest
   } = rest;
+  const ariaRef = _reactNative().Platform.OS === 'web' ? inputElementRef : inputRef;
   const {
     inputProps
   } = (0, _radio().useRadio)({
@@ -110,7 +112,7 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
     'aria-label': resolvedAccessibilityLabel,
     accessibilityLabel: resolvedAccessibilityLabel,
     ...compatibleRest
-  }, state, inputRef);
+  }, state, ariaRef);
   const isChecked = isGroup && group && serializedValue !== undefined ? group.state.selectedValue === serializedValue : checked !== undefined ? checked : standaloneSelected;
   const inputOnPress = inputProps?.onPress;
   const handlePress = (0, _react().useCallback)(e => {
@@ -136,14 +138,14 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
   } : {};
   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 spacingStyle = (0, _react().useMemo)(() => 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().default.createElement(_reactNative().View, {
+  }, [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, {
     style: [tokens.layout.labelWrapper, spacingStyle],
     pointerEvents: "none",
     accessible: false
@@ -156,9 +158,9 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
       fontFamily: tokens.typography.fontFamily,
       fontWeight: tokens.typography.fontWeight
     }, labelStyle]
-  }, children) : children);
+  }, 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;
-  const defaultIcon = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const defaultIcon = (0, _react().useMemo)(() => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.icon, {
       width: resolvedIconSize,
       height: resolvedIconSize,
@@ -174,14 +176,35 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
       borderRadius,
       backgroundColor: resolvedCheckedColor
     }
-  }) : null);
+  }) : null), [backgroundColor, borderColor, borderRadius, isChecked, resolvedCheckedColor, resolvedIconSize, tokens.borders.width, tokens.layout.icon, tokens.sizing.dotScale]);
   const iconVisual = iconRender ? iconRender({
     checked: Boolean(isChecked),
     disabled: Boolean(resolvedDisabled)
   }) ?? null : defaultIcon;
+  const webInputStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    border: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap'
+  };
+  const {
+    ref: _ignoredAriaRefProp,
+    ...webInputProps
+  } = inputProps ?? {};
+  const webInputNode = _reactNative().Platform.OS === 'web' ? /*#__PURE__*/_react().default.createElement("input", _extends({
+    ref: inputElementRef
+  }, webInputProps, {
+    style: webInputStyle
+  })) : null;
   const iconNode = interactive ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.iconWrapper
-  }, iconVisual) : /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, mergedInputProps, {
+  }, iconVisual, webInputNode) : /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, mergedInputProps, {
     ref: inputRef,
     testID: serializedValue !== undefined ? `radio-icon-${serializedValue}` : undefined,
     disabled: resolvedDisabled,
@@ -191,7 +214,7 @@ const Radio = exports.Radio = /*#__PURE__*/_react().default.memo(props => {
       disabled: resolvedDisabled
     },
     style: tokens.layout.iconWrapper
-  }), iconVisual);
+  }), iconVisual, webInputNode);
   const left = resolvedLabelPosition === 'left';
   const first = left ? labelNode : iconNode;
   const second = left ? iconNode : labelNode;

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

@@ -3,13 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RadioGroupContext = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/_react().default.createContext(null);
+Object.defineProperty(exports, "RadioGroupContext", {
+  enumerable: true,
+  get: function () {
+    return _RadioGroup.RadioGroupContext;
+  }
+});
+var _RadioGroup = require("./RadioGroup");

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RadioGroup = void 0;
+exports.RadioGroupContext = exports.RadioGroup = void 0;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -32,10 +32,10 @@ function _radio2() {
   };
   return data;
 }
-var _RadioContext = require("./RadioContext");
 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 {
     value,
@@ -83,18 +83,19 @@ const RadioGroup = props => {
     'aria-label': accessibilityLabel,
     name
   }, state);
-  const resolvedRadioGroupProps = {
+  const resolvedRadioGroupProps = (0, _react().useMemo)(() => ({
     ...(radioGroupProps ?? {}),
     ...(accessibilityHint && {
       'aria-describedby': accessibilityHint
     }),
     'aria-disabled': disabled
-  };
+  }), [accessibilityHint, disabled, radioGroupProps]);
   const supportsGap = _reactNative().Platform.OS === 'web';
-  const childrenArray = _react().default.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean');
-  const itemStyleForIndex = index => {
+  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 === childrenArray.length - 1;
+    const isLast = index === childrenLength - 1;
     if (direction === 'horizontal') {
       return [tokens.layout.groupItem, !isLast && {
         marginRight: gap
@@ -103,12 +104,12 @@ const RadioGroup = props => {
     return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
       marginBottom: gap
     }];
-  };
-  const containerGapStyle = supportsGap ? {
+  }, [childrenLength, direction, gap, supportsGap, tokens.layout.groupItem]);
+  const containerGapStyle = (0, _react().useMemo)(() => supportsGap ? {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
-  } : null;
-  const contextValue = {
+  } : null, [direction, gap, supportsGap]);
+  const contextValue = (0, _react().useMemo)(() => ({
     state,
     direction,
     iconSize,
@@ -116,14 +117,9 @@ const RadioGroup = props => {
     labelDisabled,
     registerValue,
     unregisterValue
-  };
-  return /*#__PURE__*/_react().default.createElement(_RadioContext.RadioGroupContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().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) => {
+  }), [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) {
@@ -137,6 +133,13 @@ const RadioGroup = props => {
       key: key,
       style: itemStyle
     }, child);
-  })));
+  }), [childrenArray, itemStyleForIndex, supportsGap]);
+  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));
 };
 exports.RadioGroup = RadioGroup;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSafeAreaViewTokens = void 0;
+var _designSystem = require("../../design-system");
+const createSafeAreaViewTokens = _foundations => {
+  return {};
+};
+const useSafeAreaViewTokens = exports.useSafeAreaViewTokens = (0, _designSystem.createComponentTokensHook)('safeAreaView', createSafeAreaViewTokens);

package/dist/cjs/components/search/Search.js

@@ -67,7 +67,7 @@ const SearchComponent = (props, ref) => {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = align ?? inputAlign;
+  const resolvedInputAlign = (0, _react().useMemo)(() => align ?? inputAlign, [align, inputAlign]);
   const handleChange = (0, _react().useCallback)(next => {
     triggerChange(next);
     onChangeText?.(next);
@@ -80,18 +80,18 @@ const SearchComponent = (props, ref) => {
     onSearch?.(inputValue);
     onSubmitEditing?.(event);
   }, [inputValue, onSearch, onSubmitEditing]);
-  const resolvedBackground = background ?? tokens.colors.background;
-  const resolvedLeftIcon = leftIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Search, {
+  const resolvedBackground = (0, _react().useMemo)(() => background ?? tokens.colors.background, [background, tokens.colors.background]);
+  const resolvedLeftIcon = (0, _react().useMemo)(() => leftIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Search, {
     size: tokens.icon.size,
     fill: tokens.colors.icon,
     color: tokens.colors.icon
-  });
-  const resolvedClearTrigger = clearTrigger ?? tokens.defaults.clearTrigger;
-  const resolvedReturnKeyType = returnKeyType ?? 'search';
-  const shouldShowAction = !!action || showAction;
-  const isCustomActionText = /*#__PURE__*/_react().default.isValidElement(actionText);
-  const shouldRenderCancelAction = shouldShowAction && !action && !isCustomActionText;
-  const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
+  }), [leftIcon, tokens.colors.icon, tokens.icon.size]);
+  const resolvedClearTrigger = (0, _react().useMemo)(() => clearTrigger ?? tokens.defaults.clearTrigger, [clearTrigger, tokens.defaults.clearTrigger]);
+  const resolvedReturnKeyType = (0, _react().useMemo)(() => returnKeyType ?? 'search', [returnKeyType]);
+  const shouldShowAction = (0, _react().useMemo)(() => !!action || showAction, [action, showAction]);
+  const isCustomActionText = (0, _react().useMemo)(() => /*#__PURE__*/_react().default.isValidElement(actionText), [actionText]);
+  const shouldRenderCancelAction = (0, _react().useMemo)(() => shouldShowAction && !action && !isCustomActionText, [action, isCustomActionText, shouldShowAction]);
+  const radius = (0, _react().useMemo)(() => shape === 'round' ? tokens.radius.round : tokens.radius.square, [shape, tokens.radius.round, tokens.radius.square]);
   const inputRef = (0, _react().useRef)(null);
   (0, _react().useImperativeHandle)(ref, () => ({
     focus: () => inputRef.current?.focus(),
@@ -106,18 +106,18 @@ const SearchComponent = (props, ref) => {
       testID: 'rnsu-search-action'
     }
   });
-  const containerStyles = [styles.container, {
+  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
     backgroundColor: resolvedBackground
-  }, containerStyle];
-  const contentStyles = [styles.content, {
+  }, containerStyle], [containerStyle, resolvedBackground, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
+  const contentStyles = (0, _react().useMemo)(() => [styles.content, {
     borderRadius: radius,
     paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
     paddingVertical: tokens.spacing.contentPaddingVertical,
     backgroundColor: tokens.colors.contentBackground
-  }];
-  const labelNode = !label ? null : (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  }], [radius, tokens.colors.contentBackground, tokens.spacing.contentPaddingHorizontal, tokens.spacing.contentPaddingVertical]);
+  const labelNode = (0, _react().useMemo)(() => !label ? null : (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: {
       marginRight: tokens.spacing.labelGap,
       color: tokens.colors.label,
@@ -128,7 +128,7 @@ const SearchComponent = (props, ref) => {
     style: {
       marginRight: tokens.spacing.labelGap
     }
-  }, label);
+  }, label), [label, tokens.colors.label, tokens.spacing.labelGap, tokens.typography.label, tokens.typography.labelWeight]);
   const actionNode = action ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.actionWrapper, {
       marginLeft: tokens.spacing.actionGap

package/dist/cjs/components/selector/Selector.js

@@ -141,15 +141,15 @@ const SelectorImpl = props => {
   const [value = [], triggerChange] = (0, _hooks.useControllableValue)(props, {
     defaultValue: []
   });
-  const optionByValue = (() => {
+  const optionByValue = (0, _react().useMemo)(() => {
     const map = new Map();
     for (const option of options) map.set(option.value, option);
     return map;
-  })();
-  const resolvedColumns = Math.max(1, Math.floor(columns));
-  const basis = `${100 / resolvedColumns}%`;
-  const itemMargin = tokens.spacing.gap / 2;
-  const selectedSet = new Set(value);
+  }, [options]);
+  const resolvedColumns = (0, _react().useMemo)(() => Math.max(1, Math.floor(columns)), [columns]);
+  const basis = (0, _react().useMemo)(() => `${100 / resolvedColumns}%`, [resolvedColumns]);
+  const itemMargin = (0, _react().useMemo)(() => tokens.spacing.gap / 2, [tokens.spacing.gap]);
+  const selectedSet = (0, _react().useMemo)(() => new Set(value), [value]);
   const toggleOption = (0, _react().useCallback)(option => {
     if (disabled || option.disabled) return;
     const active = selectedSet.has(option.value);