react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/{pull-refresh → components/pull-refresh}/PullRefresh.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, PanResponder, Platform, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { nativeDriverEnabled } from '../../platform';
 import { parseNumberLike } from '../../utils/number';
@@ -35,10 +35,10 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
     sizing
   } = tokens;
   const translateY = useRef(new Animated.Value(0)).current;
-  const headHeightNumber = useMemo(() => Math.max(0, parseNumberLike(headHeight, sizing.headHeight) ?? sizing.headHeight), [headHeight, sizing.headHeight]);
-  const pullDistanceNumber = useMemo(() => Math.max(0, parseNumberLike(pullDistance, headHeightNumber) ?? headHeightNumber), [headHeightNumber, pullDistance]);
-  const successDurationMs = useMemo(() => Math.max(0, parseNumberLike(successDuration, DEFAULT_SUCCESS_DURATION) ?? DEFAULT_SUCCESS_DURATION), [successDuration]);
-  const animationDurationMs = useMemo(() => Math.max(0, parseNumberLike(animationDuration, 300) ?? 300), [animationDuration]);
+  const headHeightNumber = Math.max(0, parseNumberLike(headHeight, sizing.headHeight) ?? sizing.headHeight);
+  const pullDistanceNumber = Math.max(0, parseNumberLike(pullDistance, headHeightNumber) ?? headHeightNumber);
+  const successDurationMs = Math.max(0, parseNumberLike(successDuration, DEFAULT_SUCCESS_DURATION) ?? DEFAULT_SUCCESS_DURATION);
+  const animationDurationMs = Math.max(0, parseNumberLike(animationDuration, 300) ?? 300);
   const isControlled = !isUndefined(refreshing);
   const [innerRefreshing, setInnerRefreshing] = useState(!!defaultRefreshing);
   const mergedRefreshing = isControlled ? !!refreshing : innerRefreshing;
@@ -46,6 +46,8 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
   const draggingRef = useRef(false);
   const webDragRafRef = useRef(null);
   const webDragPendingRef = useRef(null);
+  const webStateUpdateAtRef = useRef(0);
+  const webStateUpdateValueRef = useRef(0);
   const [distance, setDistance] = useState(0);
   const [showSuccess, setShowSuccess] = useState(false);
   const timerRef = useRef(null);
@@ -53,28 +55,45 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mergedRefreshingRef = useRef(mergedRefreshing);
   const refreshTriggeredRef = useRef(false);
   const refreshSucceededRef = useRef(false);
+  const normalizeDistance = useCallback(nextDistance => Math.max(0, Math.round(nextDistance)), []);
+  const updateDistanceState = useCallback(normalized => {
+    setDistance(prev => Math.abs(prev - normalized) < 1 ? prev : normalized);
+  }, []);
+  const applyWebTranslate = useCallback((normalized, animate = false) => {
+    translateY.stopAnimation();
+    if (animate && animationDurationMs > 0) {
+      Animated.timing(translateY, {
+        toValue: normalized,
+        duration: animationDurationMs,
+        useNativeDriver: false
+      }).start();
+    } else {
+      translateY.setValue(normalized);
+    }
+  }, [animationDurationMs, translateY]);
   const setDistanceValue = useCallback((nextDistance, animate = false) => {
-    const normalized = Math.max(0, Math.round(nextDistance));
+    const normalized = normalizeDistance(nextDistance);
     if (isWeb) {
-      translateY.stopAnimation();
-      if (animate && animationDurationMs > 0) {
-        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 = 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 = useCallback(() => {
     if (webDragRafRef.current != null && typeof cancelAnimationFrame === 'function') {
       cancelAnimationFrame(webDragRafRef.current);
@@ -188,7 +207,7 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
     refreshTriggeredRef.current = false;
     refreshSucceededRef.current = false;
   }, [mergedRefreshing, showSuccess, triggerSuccess]);
-  const status = 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 = useRef(new Animated.Value(status === 'normal' ? 0 : 1)).current;
   useEffect(() => {
     const toValue = status === 'normal' ? 0 : 1;
@@ -203,7 +222,7 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
       useNativeDriver: nativeDriverEnabled
     }).start();
   }, [animationDurationMs, opacity, status]);
-  const statusNode = useMemo(() => {
+  const statusNode = (() => {
     switch (status) {
       case 'pulling':
         return resolveStatusText(pullingText, locale.vanPullRefresh.pulling);
@@ -216,13 +235,13 @@ const PullRefresh = /*#__PURE__*/React.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 = useMemo(() => StyleSheet.flatten(scrollProps.contentContainerStyle), [scrollProps.contentContainerStyle]);
+  const flattenedContainerStyle = StyleSheet.flatten(scrollProps.contentContainerStyle);
   const basePaddingTop = isNumber(flattenedContainerStyle?.paddingTop) ? flattenedContainerStyle.paddingTop : 0;
-  const contentContainerStyle = 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 = useCallback(event => {
     onScrollProp?.(event);
@@ -238,7 +257,7 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     setDistanceValue(offset < 0 ? -offset : 0);
   }, [disabled, isWeb, mergedRefreshing, onRefresh, onScrollProp, setDistanceValue, showSuccess]);
-  const panResponder = useMemo(() => {
+  const panResponder = (() => {
     if (!isWeb || !isFunction(onRefresh)) return null;
     const easeDistance = raw => {
       const pullDistance = pullDistanceNumber;
@@ -295,7 +314,7 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
         setDistanceValue(0, true);
       }
     });
-  }, [disabled, handleRefresh, headHeightNumber, isWeb, pullDistanceNumber, cancelWebDrag, scheduleWebDrag, setDistanceValue, showSuccess]);
+  })();
   return /*#__PURE__*/React.createElement(ScrollView, _extends({}, scrollProps, {
     ref: ref,
     style: style,

package/dist/es/{radio → components/radio}/RadioGroup.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Platform, View } from 'react-native';
 import { useRadioGroup } from '@react-native-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
@@ -77,7 +77,7 @@ export const RadioGroup = props => {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
   } : null;
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     state,
     direction,
     iconSize,
@@ -85,7 +85,7 @@ export const RadioGroup = props => {
     labelDisabled,
     registerValue,
     unregisterValue
-  }), [state, direction, iconSize, checkedColor, labelDisabled]);
+  };
   return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedRadioGroupProps, viewProps, {

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useSafeAreaPadding } from '../../hooks/useSafeAreaPadding';
+export const SafeAreaView = ({
+  edge,
+  style,
+  children,
+  onLayout,
+  pointerEvents
+}) => {
+  const p = useSafeAreaPadding({});
+  if (edge === 'top') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        minHeight: p.paddingTop
+      }, style],
+      onLayout: onLayout,
+      pointerEvents: pointerEvents ?? 'none'
+    });
+  }
+  if (edge === 'bottom') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        minHeight: p.paddingBottom
+      }, style],
+      pointerEvents: pointerEvents ?? 'none'
+    });
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      width: '100%',
+      paddingTop: p.paddingTop,
+      paddingBottom: p.paddingBottom,
+      paddingLeft: p.paddingLeft,
+      paddingRight: p.paddingRight
+    }, style],
+    onLayout: onLayout,
+    pointerEvents: pointerEvents
+  }, children);
+};
+SafeAreaView.displayName = 'SafeAreaView';

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

@@ -0,0 +1 @@
+export { SafeAreaView } from './SafeAreaView';

package/dist/es/{search → components/search}/Search.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useRef } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { Search as SearchIcon } from 'react-native-system-icon';
 import { useAriaPress, useControllableValue } from '../../hooks';
@@ -41,7 +41,7 @@ const SearchComponent = (props, ref) => {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = useMemo(() => align ?? inputAlign, [align, inputAlign]);
+  const resolvedInputAlign = align ?? inputAlign;
   const handleChange = useCallback(next => {
     triggerChange(next);
     onChangeText?.(next);
@@ -54,14 +54,14 @@ const SearchComponent = (props, ref) => {
     onSearch?.(inputValue);
     onSubmitEditing?.(event);
   }, [inputValue, onSearch, onSubmitEditing]);
-  const resolvedBackground = useMemo(() => background ?? tokens.colors.background, [background, tokens.colors.background]);
-  const resolvedLeftIcon = useMemo(() => leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
+  const resolvedBackground = background ?? tokens.colors.background;
+  const resolvedLeftIcon = leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
     size: tokens.icon.size,
     fill: tokens.colors.icon,
     color: tokens.colors.icon
-  }), [leftIcon, tokens.colors.icon, tokens.icon.size]);
-  const resolvedClearTrigger = useMemo(() => clearTrigger ?? tokens.defaults.clearTrigger, [clearTrigger, tokens.defaults.clearTrigger]);
-  const resolvedReturnKeyType = useMemo(() => returnKeyType ?? 'search', [returnKeyType]);
+  });
+  const resolvedClearTrigger = clearTrigger ?? tokens.defaults.clearTrigger;
+  const resolvedReturnKeyType = returnKeyType ?? 'search';
   const shouldShowAction = !!action || showAction;
   const isCustomActionText = /*#__PURE__*/React.isValidElement(actionText);
   const shouldRenderCancelAction = shouldShowAction && !action && !isCustomActionText;
@@ -80,64 +80,49 @@ const SearchComponent = (props, ref) => {
       testID: 'rnsu-search-action'
     }
   });
-  const containerStyles = 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 = 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 = useMemo(() => {
-    if (!label) return null;
-    if (isText(label)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        style: {
-          marginRight: tokens.spacing.labelGap,
-          color: tokens.colors.label,
-          fontSize: tokens.typography.label,
-          fontWeight: tokens.typography.labelWeight
-        }
-      }, label);
+  }];
+  const labelNode = !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginRight: tokens.spacing.labelGap,
+      color: tokens.colors.label,
+      fontSize: tokens.typography.label,
+      fontWeight: tokens.typography.labelWeight
     }
-    return /*#__PURE__*/React.createElement(View, {
-      style: {
-        marginRight: tokens.spacing.labelGap
-      }
-    }, label);
-  }, [label, tokens.colors.label, tokens.spacing.labelGap, tokens.typography.label, tokens.typography.labelWeight]);
-  const actionNode = useMemo(() => {
-    if (action) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: [styles.actionWrapper, {
-          marginLeft: tokens.spacing.actionGap
-        }]
-      }, action);
+  }, label) : /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginRight: tokens.spacing.labelGap
     }
-    if (!shouldShowAction) return null;
-    if (isCustomActionText) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: [styles.actionWrapper, {
-          marginLeft: tokens.spacing.actionGap
-        }]
-      }, actionText);
+  }, label);
+  const actionNode = action ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.actionWrapper, {
+      marginLeft: tokens.spacing.actionGap
+    }]
+  }, action) : !shouldShowAction ? null : isCustomActionText ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.actionWrapper, {
+      marginLeft: tokens.spacing.actionGap
+    }]
+  }, actionText) : /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [styles.actionWrapper, {
+      marginLeft: tokens.spacing.actionGap,
+      opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
+    }]
+  }, cancelActionPress.interactionProps), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: tokens.colors.action,
+      fontSize: tokens.typography.action,
+      fontWeight: tokens.typography.actionWeight
     }
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      style: [styles.actionWrapper, {
-        marginLeft: tokens.spacing.actionGap,
-        opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
-      }]
-    }, cancelActionPress.interactionProps), /*#__PURE__*/React.createElement(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.createElement(View, {
     style: containerStyles
   }, /*#__PURE__*/React.createElement(View, {
@@ -157,9 +142,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);
@@ -179,16 +171,9 @@ const styles = StyleSheet.create({
   fieldWrapper: {
     flex: 1
   },
-  field: {
-    paddingHorizontal: 0,
-    paddingVertical: 0
-  },
-  fieldContent: {
-    paddingVertical: 0
-  },
-  input: {
-    paddingVertical: 0
-  },
+  field: {},
+  fieldContent: {},
+  input: {},
   actionWrapper: {
     justifyContent: 'center'
   }

package/dist/es/{search → components/search}/tokens.js

@@ -24,7 +24,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/es/{selector → components/selector}/Selector.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useSelectorTokens } from './tokens';
 import { useAriaPress, useControllableValue } from '../../hooks';
@@ -122,15 +122,15 @@ const SelectorImpl = props => {
   const [value = [], triggerChange] = useControllableValue(props, {
     defaultValue: []
   });
-  const optionByValue = 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 = useMemo(() => new Set(value), [value]);
+  const selectedSet = new Set(value);
   const toggleOption = useCallback(option => {
     if (disabled || option.disabled) return;
     const active = selectedSet.has(option.value);

package/dist/es/{share-sheet → components/share-sheet}/ShareSheet.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { createHairlineView } from '../../utils/hairline';
@@ -20,13 +20,13 @@ const ShareSheetOptionItem = ({
   tokens,
   onSelect
 }) => {
-  const optionWidthStyle = useMemo(() => ({
+  const optionWidthStyle = {
     width: `${100 / columns}%`
-  }), [columns]);
-  const iconStyle = useMemo(() => ({
+  };
+  const iconStyle = {
     width: tokens.sizing.icon,
     height: tokens.sizing.icon
-  }), [tokens.sizing.icon]);
+  };
   const press = useAriaPress({
     onPress: () => onSelect(option, index),
     extraProps: {
@@ -37,21 +37,26 @@ const ShareSheetOptionItem = ({
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     style: [styles.option, optionWidthStyle]
   }, press.interactionProps), /*#__PURE__*/React.createElement(View, {
-    style: [styles.icon, iconStyle]
+    style: [styles.icon, iconStyle, {
+      marginHorizontal: tokens.spacing.iconMarginHorizontal
+    }]
   }, option.icon), isValidNode(option.name) ? isText(option.name) ? /*#__PURE__*/React.createElement(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, isValidNode(option.description) ? isText(option.description) ? /*#__PURE__*/React.createElement(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.createElement(View, {
     style: [styles.optionDescNode, {
-      marginTop: tokens.spacing.gap
+      marginTop: tokens.spacing.gap,
+      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
     }]
   }, option.description) : null);
 };
@@ -73,11 +78,14 @@ const ShareSheetCancel = ({
     }
   }, /*#__PURE__*/React.createElement(Pressable, _extends({
     style: [styles.cancel, {
-      backgroundColor: tokens.colors.background
+      backgroundColor: tokens.colors.background,
+      paddingVertical: tokens.spacing.cancelPaddingVertical,
+      marginTop: tokens.spacing.cancelMarginTop
     }]
   }, cancelPress.interactionProps), isText(cancelText) ? /*#__PURE__*/React.createElement(Text, {
     style: [styles.cancelText, {
-      color: tokens.colors.option
+      color: tokens.colors.option,
+      fontSize: tokens.typography.cancel
     }]
   }, cancelText) : cancelText));
 };
@@ -105,8 +113,8 @@ const ShareSheet = props => {
     ...popupProps
   } = props;
   const tokens = useShareSheetTokens(tokensOverride);
-  const groups = useMemo(() => normalizeOptions(options), [options]);
-  const resolvedColumns = useMemo(() => isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4, [columns]);
+  const groups = normalizeOptions(options);
+  const resolvedColumns = isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4;
   const hasTitle = isValidNode(title);
   const hasDescription = isValidNode(description);
   const hasCancelText = isValidNode(cancelText);
@@ -120,14 +128,14 @@ const ShareSheet = props => {
     if (closeOnSelect) close();
   }, [close, closeOnSelect, onSelect]);
   const onPopupClose = useCallback(() => close(true), [close]);
-  const wrapperStyle = useMemo(() => [styles.wrapper, {
+  const wrapperStyle = [styles.wrapper, {
     backgroundColor: tokens.colors.background
-  }], [tokens.colors.background]);
-  const groupRowStyle = useMemo(() => [styles.optionsRow, {
+  }];
+  const groupRowStyle = [styles.optionsRow, {
     paddingLeft: tokens.spacing.gap,
     paddingVertical: 12
-  }], [tokens.spacing.gap]);
-  const groupNodes = useMemo(() => {
+  }];
+  const groupNodes = (() => {
     if (!groups.length) return null;
     let globalIndex = 0;
     return groups.map((group, groupIndex) => /*#__PURE__*/React.createElement(View, {
@@ -152,27 +160,34 @@ const ShareSheet = props => {
         onSelect: handleSelect
       });
     }))));
-  }, [groupRowStyle, groups, handleSelect, resolvedColumns, tokens, tokens.colors.border, tokens.spacing.horizontal]);
-  const headerNode = useMemo(() => {
-    if (!hasTitle && !hasDescription) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      style: styles.header
-    }, hasTitle ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-      style: [styles.title, {
-        color: tokens.colors.title,
-        fontSize: tokens.typography.title
-      }]
-    }, title) : /*#__PURE__*/React.createElement(View, {
-      style: styles.node
-    }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
-      style: [styles.description, {
-        color: tokens.colors.description,
-        fontSize: tokens.typography.description
-      }]
-    }, description) : /*#__PURE__*/React.createElement(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.createElement(View, {
+    style: [styles.header, {
+      paddingTop: tokens.spacing.headerPaddingTop,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal,
+      paddingBottom: tokens.spacing.headerPaddingBottom
+    }]
+  }, hasTitle ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.title, {
+      color: tokens.colors.title,
+      fontSize: tokens.typography.title,
+      marginTop: tokens.spacing.titleMarginTop
+    }]
+  }, title) : /*#__PURE__*/React.createElement(View, {
+    style: [styles.node, {
+      marginTop: tokens.spacing.nodeMarginTop
+    }]
+  }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.description, {
+      color: tokens.colors.description,
+      fontSize: tokens.typography.description,
+      marginTop: tokens.spacing.descriptionMarginTop
+    }]
+  }, description) : /*#__PURE__*/React.createElement(View, {
+    style: [styles.node, {
+      marginTop: tokens.spacing.nodeMarginTop
+    }]
+  }, description) : null);
   return /*#__PURE__*/React.createElement(Popup, _extends({}, popupProps, {
     visible: visible,
     placement: "bottom",
@@ -181,7 +196,9 @@ const ShareSheet = props => {
     overlay: overlay,
     lockScroll: lockScroll,
     onClose: onPopupClose,
-    style: [styles.popupOverride, popupStyle]
+    style: [styles.popupOverride, {
+      padding: tokens.spacing.popupPadding
+    }, popupStyle]
   }), /*#__PURE__*/React.createElement(View, {
     style: wrapperStyle
   }, headerNode, groupNodes, children, hasCancelText ? /*#__PURE__*/React.createElement(ShareSheetCancel, {
@@ -191,30 +208,22 @@ const ShareSheet = props => {
   }) : null));
 };
 const styles = 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',
@@ -226,29 +235,22 @@ const styles = 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'
   }
 });