react-native-system-ui 0.0.3 → 0.0.5

package/dist/cjs/components/pull-refresh/PullRefresh.js

@@ -54,10 +54,10 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     sizing
   } = tokens;
   const translateY = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const headHeightNumber = (0, _react().useMemo)(() => Math.max(0, (0, _number.parseNumberLike)(headHeight, sizing.headHeight) ?? sizing.headHeight), [headHeight, sizing.headHeight]);
-  const pullDistanceNumber = (0, _react().useMemo)(() => Math.max(0, (0, _number.parseNumberLike)(pullDistance, headHeightNumber) ?? headHeightNumber), [headHeightNumber, pullDistance]);
-  const successDurationMs = (0, _react().useMemo)(() => Math.max(0, (0, _number.parseNumberLike)(successDuration, DEFAULT_SUCCESS_DURATION) ?? DEFAULT_SUCCESS_DURATION), [successDuration]);
-  const animationDurationMs = (0, _react().useMemo)(() => Math.max(0, (0, _number.parseNumberLike)(animationDuration, 300) ?? 300), [animationDuration]);
+  const headHeightNumber = Math.max(0, (0, _number.parseNumberLike)(headHeight, sizing.headHeight) ?? sizing.headHeight);
+  const pullDistanceNumber = Math.max(0, (0, _number.parseNumberLike)(pullDistance, headHeightNumber) ?? headHeightNumber);
+  const successDurationMs = Math.max(0, (0, _number.parseNumberLike)(successDuration, DEFAULT_SUCCESS_DURATION) ?? DEFAULT_SUCCESS_DURATION);
+  const animationDurationMs = Math.max(0, (0, _number.parseNumberLike)(animationDuration, 300) ?? 300);
   const isControlled = !(0, _validate.isUndefined)(refreshing);
   const [innerRefreshing, setInnerRefreshing] = (0, _react().useState)(!!defaultRefreshing);
   const mergedRefreshing = isControlled ? !!refreshing : innerRefreshing;
@@ -65,6 +65,8 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const draggingRef = (0, _react().useRef)(false);
   const webDragRafRef = (0, _react().useRef)(null);
   const webDragPendingRef = (0, _react().useRef)(null);
+  const webStateUpdateAtRef = (0, _react().useRef)(0);
+  const webStateUpdateValueRef = (0, _react().useRef)(0);
   const [distance, setDistance] = (0, _react().useState)(0);
   const [showSuccess, setShowSuccess] = (0, _react().useState)(false);
   const timerRef = (0, _react().useRef)(null);
@@ -72,28 +74,45 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const mergedRefreshingRef = (0, _react().useRef)(mergedRefreshing);
   const refreshTriggeredRef = (0, _react().useRef)(false);
   const refreshSucceededRef = (0, _react().useRef)(false);
+  const normalizeDistance = (0, _react().useCallback)(nextDistance => Math.max(0, Math.round(nextDistance)), []);
+  const updateDistanceState = (0, _react().useCallback)(normalized => {
+    setDistance(prev => Math.abs(prev - normalized) < 1 ? prev : normalized);
+  }, []);
+  const applyWebTranslate = (0, _react().useCallback)((normalized, animate = false) => {
+    translateY.stopAnimation();
+    if (animate && animationDurationMs > 0) {
+      _reactNative().Animated.timing(translateY, {
+        toValue: normalized,
+        duration: animationDurationMs,
+        useNativeDriver: false
+      }).start();
+    } else {
+      translateY.setValue(normalized);
+    }
+  }, [animationDurationMs, translateY]);
   const setDistanceValue = (0, _react().useCallback)((nextDistance, animate = false) => {
-    const normalized = Math.max(0, Math.round(nextDistance));
+    const normalized = normalizeDistance(nextDistance);
     if (isWeb) {
-      translateY.stopAnimation();
-      if (animate && animationDurationMs > 0) {
-        _reactNative().Animated.timing(translateY, {
-          toValue: normalized,
-          duration: animationDurationMs,
-          useNativeDriver: false
-        }).start();
-      } else {
-        translateY.setValue(normalized);
-      }
+      applyWebTranslate(normalized, animate);
     }
-    setDistance(prev => Math.abs(prev - normalized) < 1 ? prev : normalized);
-  }, [animationDurationMs, isWeb, translateY]);
+    updateDistanceState(normalized);
+    return normalized;
+  }, [applyWebTranslate, isWeb, normalizeDistance, updateDistanceState]);
   const flushWebDrag = (0, _react().useCallback)(() => {
     const pending = webDragPendingRef.current;
     if (pending == null) return;
     webDragPendingRef.current = null;
-    setDistanceValue(pending);
-  }, [setDistanceValue]);
+    const normalized = normalizeDistance(pending);
+    if (isWeb) {
+      applyWebTranslate(normalized);
+    }
+    const now = Date.now();
+    if (now - webStateUpdateAtRef.current >= 32 || Math.abs(normalized - webStateUpdateValueRef.current) >= 4) {
+      webStateUpdateAtRef.current = now;
+      webStateUpdateValueRef.current = normalized;
+      updateDistanceState(normalized);
+    }
+  }, [applyWebTranslate, isWeb, normalizeDistance, updateDistanceState]);
   const cancelWebDrag = (0, _react().useCallback)(() => {
     if (webDragRafRef.current != null && typeof cancelAnimationFrame === 'function') {
       cancelAnimationFrame(webDragRafRef.current);
@@ -207,7 +226,7 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     refreshTriggeredRef.current = false;
     refreshSucceededRef.current = false;
   }, [mergedRefreshing, showSuccess, triggerSuccess]);
-  const status = (0, _react().useMemo)(() => mergedRefreshing ? 'loading' : showSuccess ? 'success' : disabled || distance === 0 ? 'normal' : distance < pullDistanceNumber ? 'pulling' : 'loosing', [disabled, distance, mergedRefreshing, pullDistanceNumber, showSuccess]);
+  const status = mergedRefreshing ? 'loading' : showSuccess ? 'success' : disabled || distance === 0 ? 'normal' : distance < pullDistanceNumber ? 'pulling' : 'loosing';
   const opacity = (0, _react().useRef)(new (_reactNative().Animated.Value)(status === 'normal' ? 0 : 1)).current;
   (0, _react().useEffect)(() => {
     const toValue = status === 'normal' ? 0 : 1;
@@ -222,7 +241,7 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       useNativeDriver: _platform.nativeDriverEnabled
     }).start();
   }, [animationDurationMs, opacity, status]);
-  const statusNode = (0, _react().useMemo)(() => {
+  const statusNode = (() => {
     switch (status) {
       case 'pulling':
         return resolveStatusText(pullingText, locale.vanPullRefresh.pulling);
@@ -235,13 +254,13 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       default:
         return null;
     }
-  }, [loadingText, locale.vanPullRefresh.loading, locale.vanPullRefresh.loosing, locale.vanPullRefresh.pulling, loosingText, pullingText, resolveStatusText, status, successText]);
+  })();
   const shouldReserveHead = (status === 'loading' || status === 'success') && distance === 0;
-  const flattenedContainerStyle = (0, _react().useMemo)(() => _reactNative().StyleSheet.flatten(scrollProps.contentContainerStyle), [scrollProps.contentContainerStyle]);
+  const flattenedContainerStyle = _reactNative().StyleSheet.flatten(scrollProps.contentContainerStyle);
   const basePaddingTop = (0, _validate.isNumber)(flattenedContainerStyle?.paddingTop) ? flattenedContainerStyle.paddingTop : 0;
-  const contentContainerStyle = (0, _react().useMemo)(() => shouldReserveHead ? [scrollProps.contentContainerStyle, {
+  const contentContainerStyle = shouldReserveHead ? [scrollProps.contentContainerStyle, {
     paddingTop: basePaddingTop + headHeightNumber
-  }] : scrollProps.contentContainerStyle, [basePaddingTop, headHeightNumber, scrollProps.contentContainerStyle, shouldReserveHead]);
+  }] : scrollProps.contentContainerStyle;
   const onScrollProp = scrollProps.onScroll;
   const handleScroll = (0, _react().useCallback)(event => {
     onScrollProp?.(event);
@@ -257,7 +276,7 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }
     setDistanceValue(offset < 0 ? -offset : 0);
   }, [disabled, isWeb, mergedRefreshing, onRefresh, onScrollProp, setDistanceValue, showSuccess]);
-  const panResponder = (0, _react().useMemo)(() => {
+  const panResponder = (() => {
     if (!isWeb || !(0, _validate.isFunction)(onRefresh)) return null;
     const easeDistance = raw => {
       const pullDistance = pullDistanceNumber;
@@ -314,7 +333,7 @@ const PullRefresh = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         setDistanceValue(0, true);
       }
     });
-  }, [disabled, handleRefresh, headHeightNumber, isWeb, pullDistanceNumber, cancelWebDrag, scheduleWebDrag, setDistanceValue, showSuccess]);
+  })();
   return /*#__PURE__*/_react().default.createElement(_reactNative().ScrollView, _extends({}, scrollProps, {
     ref: ref,
     style: style,

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

@@ -108,7 +108,7 @@ const RadioGroup = props => {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
   } : null;
-  const contextValue = (0, _react().useMemo)(() => ({
+  const contextValue = {
     state,
     direction,
     iconSize,
@@ -116,7 +116,7 @@ const RadioGroup = props => {
     labelDisabled,
     registerValue,
     unregisterValue
-  }), [state, direction, iconSize, checkedColor, labelDisabled]);
+  };
   return /*#__PURE__*/_react().default.createElement(_RadioContext.RadioGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedRadioGroupProps, viewProps, {

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

@@ -67,7 +67,7 @@ const SearchComponent = (props, ref) => {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = (0, _react().useMemo)(() => align ?? inputAlign, [align, inputAlign]);
+  const resolvedInputAlign = align ?? inputAlign;
   const handleChange = (0, _react().useCallback)(next => {
     triggerChange(next);
     onChangeText?.(next);
@@ -80,14 +80,14 @@ const SearchComponent = (props, ref) => {
     onSearch?.(inputValue);
     onSubmitEditing?.(event);
   }, [inputValue, onSearch, onSubmitEditing]);
-  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, {
+  const resolvedBackground = background ?? tokens.colors.background;
+  const resolvedLeftIcon = leftIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Search, {
     size: tokens.icon.size,
     fill: tokens.colors.icon,
     color: tokens.colors.icon
-  }), [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 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;
@@ -106,64 +106,49 @@ const SearchComponent = (props, ref) => {
       testID: 'rnsu-search-action'
     }
   });
-  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
+  const containerStyles = [styles.container, {
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
     backgroundColor: resolvedBackground
-  }, containerStyle], [containerStyle, resolvedBackground, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
-  const contentStyles = (0, _react().useMemo)(() => [styles.content, {
+  }, containerStyle];
+  const contentStyles = [styles.content, {
     borderRadius: radius,
     paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
     paddingVertical: tokens.spacing.contentPaddingVertical,
     backgroundColor: tokens.colors.contentBackground
-  }], [radius, tokens.colors.contentBackground, tokens.spacing.contentPaddingHorizontal, tokens.spacing.contentPaddingVertical]);
-  const labelNode = (0, _react().useMemo)(() => {
-    if (!label) return null;
-    if ((0, _validate.isText)(label)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: {
-          marginRight: tokens.spacing.labelGap,
-          color: tokens.colors.label,
-          fontSize: tokens.typography.label,
-          fontWeight: tokens.typography.labelWeight
-        }
-      }, label);
+  }];
+  const labelNode = !label ? null : (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: {
+      marginRight: tokens.spacing.labelGap,
+      color: tokens.colors.label,
+      fontSize: tokens.typography.label,
+      fontWeight: tokens.typography.labelWeight
     }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: {
-        marginRight: tokens.spacing.labelGap
-      }
-    }, label);
-  }, [label, tokens.colors.label, tokens.spacing.labelGap, tokens.typography.label, tokens.typography.labelWeight]);
-  const actionNode = (0, _react().useMemo)(() => {
-    if (action) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: [styles.actionWrapper, {
-          marginLeft: tokens.spacing.actionGap
-        }]
-      }, action);
+  }, label) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      marginRight: tokens.spacing.labelGap
     }
-    if (!shouldShowAction) return null;
-    if (isCustomActionText) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: [styles.actionWrapper, {
-          marginLeft: tokens.spacing.actionGap
-        }]
-      }, actionText);
+  }, label);
+  const actionNode = action ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.actionWrapper, {
+      marginLeft: tokens.spacing.actionGap
+    }]
+  }, action) : !shouldShowAction ? null : isCustomActionText ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.actionWrapper, {
+      marginLeft: tokens.spacing.actionGap
+    }]
+  }, actionText) : /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: [styles.actionWrapper, {
+      marginLeft: tokens.spacing.actionGap,
+      opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
+    }]
+  }, cancelActionPress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: {
+      color: tokens.colors.action,
+      fontSize: tokens.typography.action,
+      fontWeight: tokens.typography.actionWeight
     }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-      style: [styles.actionWrapper, {
-        marginLeft: tokens.spacing.actionGap,
-        opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
-      }]
-    }, cancelActionPress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: {
-        color: tokens.colors.action,
-        fontSize: tokens.typography.action,
-        fontWeight: tokens.typography.actionWeight
-      }
-    }, actionText ?? locale.cancel));
-  }, [action, actionText, cancelActionPress.interactionProps, cancelActionPress.states.pressed, isCustomActionText, locale.cancel, shouldShowAction, tokens.colors.action, tokens.opacity.actionPressed, tokens.spacing.actionGap, tokens.typography.action, tokens.typography.actionWeight]);
+  }, actionText ?? locale.cancel));
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: containerStyles
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -183,9 +168,16 @@ const SearchComponent = (props, ref) => {
     errorMessage: errorMessage,
     inputAlign: resolvedInputAlign,
     border: false,
-    style: [styles.field, fieldStyle],
-    contentStyle: [styles.fieldContent, fieldContentStyle],
-    inputStyle: [styles.input, inputStyle],
+    style: [styles.field, {
+      paddingHorizontal: tokens.spacing.none,
+      paddingVertical: tokens.spacing.none
+    }, fieldStyle],
+    contentStyle: [styles.fieldContent, {
+      paddingVertical: tokens.spacing.none
+    }, fieldContentStyle],
+    inputStyle: [styles.input, {
+      paddingVertical: tokens.spacing.none
+    }, inputStyle],
     onSubmitEditing: handleSubmit,
     returnKeyType: resolvedReturnKeyType
   }, restFieldProps)))), actionNode);
@@ -205,16 +197,9 @@ const styles = _reactNative().StyleSheet.create({
   fieldWrapper: {
     flex: 1
   },
-  field: {
-    paddingHorizontal: 0,
-    paddingVertical: 0
-  },
-  fieldContent: {
-    paddingVertical: 0
-  },
-  input: {
-    paddingVertical: 0
-  },
+  field: {},
+  fieldContent: {},
+  input: {},
   actionWrapper: {
     justifyContent: 'center'
   }

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

@@ -30,7 +30,8 @@ const createSearchTokens = foundations => {
       labelGap: spacing.sm,
       actionGap: spacing.sm,
       contentPaddingHorizontal: spacing.sm,
-      contentPaddingVertical: spacing.xs
+      contentPaddingVertical: spacing.xs,
+      none: spacing.none
     },
     radius: {
       square: radii.md,

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

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

package/dist/cjs/components/share-sheet/ShareSheet.js

@@ -40,13 +40,13 @@ const ShareSheetOptionItem = ({
   tokens,
   onSelect
 }) => {
-  const optionWidthStyle = (0, _react().useMemo)(() => ({
+  const optionWidthStyle = {
     width: `${100 / columns}%`
-  }), [columns]);
-  const iconStyle = (0, _react().useMemo)(() => ({
+  };
+  const iconStyle = {
     width: tokens.sizing.icon,
     height: tokens.sizing.icon
-  }), [tokens.sizing.icon]);
+  };
   const press = (0, _hooks.useAriaPress)({
     onPress: () => onSelect(option, index),
     extraProps: {
@@ -57,21 +57,26 @@ const ShareSheetOptionItem = ({
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: [styles.option, optionWidthStyle]
   }, press.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.icon, iconStyle]
+    style: [styles.icon, iconStyle, {
+      marginHorizontal: tokens.spacing.iconMarginHorizontal
+    }]
   }, option.icon), (0, _validate.isValidNode)(option.name) ? (0, _validate.isText)(option.name) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.optionText, {
       color: tokens.colors.option,
-      fontSize: tokens.typography.option
+      fontSize: tokens.typography.option,
+      paddingHorizontal: tokens.spacing.optionTextPaddingHorizontal
     }]
   }, option.name) : option.name : null, (0, _validate.isValidNode)(option.description) ? (0, _validate.isText)(option.description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.optionDesc, {
       color: tokens.colors.optionDesc,
       marginTop: tokens.spacing.gap,
-      fontSize: tokens.typography.optionDesc
+      fontSize: tokens.typography.optionDesc,
+      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
     }]
   }, option.description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.optionDescNode, {
-      marginTop: tokens.spacing.gap
+      marginTop: tokens.spacing.gap,
+      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
     }]
   }, option.description) : null);
 };
@@ -93,11 +98,14 @@ const ShareSheetCancel = ({
     }
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: [styles.cancel, {
-      backgroundColor: tokens.colors.background
+      backgroundColor: tokens.colors.background,
+      paddingVertical: tokens.spacing.cancelPaddingVertical,
+      marginTop: tokens.spacing.cancelMarginTop
     }]
   }, cancelPress.interactionProps), (0, _validate.isText)(cancelText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.cancelText, {
-      color: tokens.colors.option
+      color: tokens.colors.option,
+      fontSize: tokens.typography.cancel
     }]
   }, cancelText) : cancelText));
 };
@@ -125,8 +133,8 @@ const ShareSheet = props => {
     ...popupProps
   } = props;
   const tokens = (0, _tokens.useShareSheetTokens)(tokensOverride);
-  const groups = (0, _react().useMemo)(() => normalizeOptions(options), [options]);
-  const resolvedColumns = (0, _react().useMemo)(() => (0, _validate.isFiniteNumber)(columns) ? Math.max(1, Math.floor(columns)) : 4, [columns]);
+  const groups = normalizeOptions(options);
+  const resolvedColumns = (0, _validate.isFiniteNumber)(columns) ? Math.max(1, Math.floor(columns)) : 4;
   const hasTitle = (0, _validate.isValidNode)(title);
   const hasDescription = (0, _validate.isValidNode)(description);
   const hasCancelText = (0, _validate.isValidNode)(cancelText);
@@ -140,14 +148,14 @@ const ShareSheet = props => {
     if (closeOnSelect) close();
   }, [close, closeOnSelect, onSelect]);
   const onPopupClose = (0, _react().useCallback)(() => close(true), [close]);
-  const wrapperStyle = (0, _react().useMemo)(() => [styles.wrapper, {
+  const wrapperStyle = [styles.wrapper, {
     backgroundColor: tokens.colors.background
-  }], [tokens.colors.background]);
-  const groupRowStyle = (0, _react().useMemo)(() => [styles.optionsRow, {
+  }];
+  const groupRowStyle = [styles.optionsRow, {
     paddingLeft: tokens.spacing.gap,
     paddingVertical: 12
-  }], [tokens.spacing.gap]);
-  const groupNodes = (0, _react().useMemo)(() => {
+  }];
+  const groupNodes = (() => {
     if (!groups.length) return null;
     let globalIndex = 0;
     return groups.map((group, groupIndex) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -172,27 +180,34 @@ const ShareSheet = props => {
         onSelect: handleSelect
       });
     }))));
-  }, [groupRowStyle, groups, handleSelect, resolvedColumns, tokens, tokens.colors.border, tokens.spacing.horizontal]);
-  const headerNode = (0, _react().useMemo)(() => {
-    if (!hasTitle && !hasDescription) return null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.header
-    }, hasTitle ? (0, _validate.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [styles.title, {
-        color: tokens.colors.title,
-        fontSize: tokens.typography.title
-      }]
-    }, title) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.node
-    }, title) : null, hasDescription ? (0, _validate.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [styles.description, {
-        color: tokens.colors.description,
-        fontSize: tokens.typography.description
-      }]
-    }, description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.node
-    }, description) : null);
-  }, [description, hasDescription, hasTitle, title, tokens.colors.description, tokens.colors.title, tokens.typography.description, tokens.typography.title]);
+  })();
+  const headerNode = !hasTitle && !hasDescription ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.header, {
+      paddingTop: tokens.spacing.headerPaddingTop,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal,
+      paddingBottom: tokens.spacing.headerPaddingBottom
+    }]
+  }, hasTitle ? (0, _validate.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.title, {
+      color: tokens.colors.title,
+      fontSize: tokens.typography.title,
+      marginTop: tokens.spacing.titleMarginTop
+    }]
+  }, title) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.node, {
+      marginTop: tokens.spacing.nodeMarginTop
+    }]
+  }, title) : null, hasDescription ? (0, _validate.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.description, {
+      color: tokens.colors.description,
+      fontSize: tokens.typography.description,
+      marginTop: tokens.spacing.descriptionMarginTop
+    }]
+  }, description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.node, {
+      marginTop: tokens.spacing.nodeMarginTop
+    }]
+  }, description) : null);
   return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({}, popupProps, {
     visible: visible,
     placement: "bottom",
@@ -201,7 +216,9 @@ const ShareSheet = props => {
     overlay: overlay,
     lockScroll: lockScroll,
     onClose: onPopupClose,
-    style: [styles.popupOverride, popupStyle]
+    style: [styles.popupOverride, {
+      padding: tokens.spacing.popupPadding
+    }, popupStyle]
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: wrapperStyle
   }, headerNode, groupNodes, children, hasCancelText ? /*#__PURE__*/_react().default.createElement(ShareSheetCancel, {
@@ -211,30 +228,22 @@ const ShareSheet = props => {
   }) : null));
 };
 const styles = _reactNative().StyleSheet.create({
-  popupOverride: {
-    padding: 0
-  },
+  popupOverride: {},
   wrapper: {
     width: '100%'
   },
   header: {
-    paddingTop: 8,
-    paddingHorizontal: 16,
-    paddingBottom: 12,
     alignItems: 'center'
   },
   title: {
     fontWeight: 'normal',
-    textAlign: 'center',
-    marginTop: 4
+    textAlign: 'center'
   },
   description: {
-    textAlign: 'center',
-    marginTop: 4
+    textAlign: 'center'
   },
   node: {
-    alignItems: 'center',
-    marginTop: 4
+    alignItems: 'center'
   },
   optionsRow: {
     flexDirection: 'row',
@@ -246,29 +255,22 @@ const styles = _reactNative().StyleSheet.create({
   },
   icon: {
     alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 12
+    justifyContent: 'center'
   },
   optionText: {
     fontWeight: '500',
-    textAlign: 'center',
-    paddingHorizontal: 4
+    textAlign: 'center'
   },
   optionDesc: {
-    textAlign: 'center',
-    paddingHorizontal: 16
+    textAlign: 'center'
   },
   optionDescNode: {
-    alignItems: 'center',
-    paddingHorizontal: 16
+    alignItems: 'center'
   },
   cancel: {
-    paddingVertical: 14,
-    marginTop: 8,
     alignItems: 'center'
   },
   cancelText: {
-    fontSize: 16,
     fontWeight: '500'
   }
 });

package/dist/cjs/components/share-sheet/tokens.js

@@ -24,7 +24,19 @@ const createTokens = foundations => {
     spacing: {
       horizontal: spacing.md,
       vertical: spacing.sm,
-      gap: spacing.xs
+      gap: spacing.xs,
+      popupPadding: 0,
+      headerPaddingTop: spacing.sm,
+      headerPaddingHorizontal: spacing.lg,
+      headerPaddingBottom: spacing.md,
+      titleMarginTop: spacing.xs,
+      descriptionMarginTop: spacing.xs,
+      nodeMarginTop: spacing.xs,
+      iconMarginHorizontal: spacing.md,
+      optionTextPaddingHorizontal: spacing.xs,
+      optionDescPaddingHorizontal: spacing.lg,
+      cancelPaddingVertical: 14,
+      cancelMarginTop: spacing.sm
     },
     sizing: {
       icon: 48
@@ -33,7 +45,8 @@ const createTokens = foundations => {
       title: fontSize.md,
       description: fontSize.xs,
       option: fontSize.xs,
-      optionDesc: fontSize.xxs
+      optionDesc: fontSize.xxs,
+      cancel: fontSize.md
     }
   };
 };