react-native-system-ui 1.0.0 → 1.0.2

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

@@ -15,7 +15,7 @@ const SearchComponent = (props, ref) => {
     action,
     actionText,
     showAction = false,
-    shape: shapeProp,
+    shape: shapeP,
     background,
     style: containerStyle,
     fieldStyle,
@@ -36,12 +36,12 @@ const SearchComponent = (props, ref) => {
     ...restFieldProps
   } = props;
   const tokens = useSearchTokens(tokensOverride);
-  const shape = shapeProp ?? tokens.defaults.shape;
+  const shape = shapeP ?? tokens.defaults.shape;
   const [value, triggerChange] = useControllableValue(props, {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = align ?? inputAlign;
+  const rInputAlign = align ?? inputAlign;
   const onChangeTextRef = useRef(onChangeText),
     onCancelRef = useRef(onCancel),
     onSearchRef = useRef(onSearch),
@@ -64,17 +64,17 @@ const SearchComponent = (props, ref) => {
     onSearchRef.current?.(inputValueRef.current);
     onSubmitEditingRef.current?.(event);
   }, []);
-  const resolvedBackground = background ?? tokens.colors.background;
-  const resolvedLeftIcon = leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
+  const rBg = background ?? tokens.colors.background;
+  const rLeftIcon = leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
     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.isValidElement(actionText);
-  const shouldRenderCancelAction = shouldShowAction && !action && !isCustomActionText;
+  const rClearTrigger = clearTrigger ?? tokens.defaults.clearTrigger;
+  const rReturnKey = returnKeyType ?? 'search';
+  const showAct = !!action || showAction;
+  const customActTxt = /*#__PURE__*/React.isValidElement(actionText);
+  const renderCancelAct = showAct && !action && !customActTxt;
   const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
   const inputRef = useRef(null);
   useImperativeHandle(ref, () => ({
@@ -82,26 +82,26 @@ const SearchComponent = (props, ref) => {
     blur: () => inputRef.current?.blur(),
     clear: () => handleChange('')
   }), [handleChange]);
-  const cancelActionPress = useAriaPress({
-    disabled: !shouldRenderCancelAction,
+  const cancelActPress = useAriaPress({
+    disabled: !renderCancelAct,
     onPress: handleCancel,
     extraProps: {
       accessibilityRole: 'button',
       testID: 'rnsu-search-action'
     }
   });
-  const containerStyles = [S.ctr, {
+  const ctrStyles = [S.ctr, {
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
-    backgroundColor: resolvedBackground
+    backgroundColor: rBg
   }, containerStyle];
-  const contentStyles = [S.cnt, {
+  const cntStyles = [S.cnt, {
     borderRadius: radius,
     paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
     paddingVertical: tokens.spacing.contentPaddingVertical,
     backgroundColor: tokens.colors.contentBackground
   }];
-  const labelElement = !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
+  const labelEl = !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
     style: {
       marginRight: tokens.spacing.labelGap,
       color: tokens.colors.label,
@@ -113,20 +113,20 @@ const SearchComponent = (props, ref) => {
       marginRight: tokens.spacing.labelGap
     }
   }, label);
-  const actionElement = action ? /*#__PURE__*/React.createElement(View, {
+  const actEl = action ? /*#__PURE__*/React.createElement(View, {
     style: [S.act, {
       marginLeft: tokens.spacing.actionGap
     }]
-  }, action) : !shouldShowAction ? null : isCustomActionText ? /*#__PURE__*/React.createElement(View, {
+  }, action) : !showAct ? null : customActTxt ? /*#__PURE__*/React.createElement(View, {
     style: [S.act, {
       marginLeft: tokens.spacing.actionGap
     }]
   }, actionText) : /*#__PURE__*/React.createElement(Pressable, _extends({
     style: [S.act, {
       marginLeft: tokens.spacing.actionGap,
-      opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
+      opacity: cancelActPress.states.pressed ? tokens.opacity.actionPressed : 1
     }]
-  }, cancelActionPress.interactionProps), /*#__PURE__*/React.createElement(Text, {
+  }, cancelActPress.interactionProps), /*#__PURE__*/React.createElement(Text, {
     style: {
       color: tokens.colors.action,
       fontSize: tokens.typography.action,
@@ -134,10 +134,10 @@ const SearchComponent = (props, ref) => {
     }
   }, actionText ?? locale.cancel));
   return /*#__PURE__*/React.createElement(View, {
-    style: containerStyles
+    style: ctrStyles
   }, /*#__PURE__*/React.createElement(View, {
-    style: contentStyles
-  }, labelElement, /*#__PURE__*/React.createElement(View, {
+    style: cntStyles
+  }, labelEl, /*#__PURE__*/React.createElement(View, {
     style: S.field
   }, /*#__PURE__*/React.createElement(Field, _extends({
     ref: inputRef,
@@ -145,12 +145,12 @@ const SearchComponent = (props, ref) => {
     value: inputValue,
     onChangeText: handleChange,
     clearable: clearable,
-    clearTrigger: resolvedClearTrigger,
-    leftIcon: resolvedLeftIcon,
+    clearTrigger: rClearTrigger,
+    leftIcon: rLeftIcon,
     rightIcon: rightIcon,
     center: !errorMessage,
     errorMessage: errorMessage,
-    inputAlign: resolvedInputAlign,
+    inputAlign: rInputAlign,
     border: false,
     style: [{
       paddingHorizontal: tokens.spacing.none,
@@ -163,8 +163,8 @@ const SearchComponent = (props, ref) => {
       paddingVertical: tokens.spacing.none
     }, inputStyle],
     onSubmitEditing: handleSubmit,
-    returnKeyType: resolvedReturnKeyType
-  }, restFieldProps)))), actionElement);
+    returnKeyType: rReturnKey
+  }, restFieldProps)))), actEl);
 };
 const SearchForwardRef = /*#__PURE__*/React.forwardRef(SearchComponent);
 SearchForwardRef.displayName = 'Search';

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

@@ -103,10 +103,10 @@ const SelectorImpl = props => {
   const {
     tokensOverride,
     options,
-    columns: columnsProp,
-    multiple: multipleProp,
-    showCheckMark: showCheckMarkProp,
-    disabled: disabledProp,
+    columns: colP,
+    multiple: multP,
+    showCheckMark: showChkP,
+    disabled: disP,
     onChange,
     itemStyle,
     labelStyle,
@@ -115,37 +115,30 @@ const SelectorImpl = props => {
     ...rest
   } = props;
   const tokens = useSelectorTokens(tokensOverride);
-  const columns = columnsProp ?? tokens.defaults.columns ?? 1;
-  const multiple = multipleProp ?? tokens.defaults.multiple;
-  const showCheckMark = showCheckMarkProp ?? tokens.defaults.showCheckMark;
-  const disabled = Boolean(disabledProp ?? tokens.defaults.disabled);
+  const columns = colP ?? tokens.defaults.columns ?? 1;
+  const multiple = multP ?? tokens.defaults.multiple;
+  const showCheckMark = showChkP ?? tokens.defaults.showCheckMark;
+  const disabled = Boolean(disP ?? tokens.defaults.disabled);
   const [value = [], triggerChange] = useControllableValue(props, {
     defaultValue: []
   });
-  const optionsByValue = useMemo(() => {
-    const map = new Map();
-    for (const option of options) map.set(option.value, option);
-    return map;
+  const optionsByVal = useMemo(() => {
+    const m = new Map();
+    for (const o of options) m.set(o.value, o);
+    return m;
   }, [options]);
-  const resolvedColumns = Math.max(1, Math.floor(columns));
-  const basis = `${100 / resolvedColumns}%`;
+  const rCols = Math.max(1, Math.floor(columns));
+  const basis = `${100 / rCols}%`;
   const itemMargin = tokens.spacing.gap / 2;
   const selectedSet = useMemo(() => new Set(value), [value]);
   const toggleOption = useCallback(option => {
     if (disabled || option.disabled) return;
-    const isActive = selectedSet.has(option.value);
-    let nextValue;
-    if (multiple) {
-      nextValue = isActive ? value.filter(item => item !== option.value) : [...value, option.value];
-    } else {
-      nextValue = isActive ? [] : [option.value];
-    }
-    ;
-    const items = nextValue.map(val => optionsByValue.get(val)).filter(Boolean);
-    triggerChange(nextValue, {
-      items
+    const active = selectedSet.has(option.value);
+    const nextVal = multiple ? active ? value.filter(item => item !== option.value) : [...value, option.value] : active ? [] : [option.value];
+    triggerChange(nextVal, {
+      items: nextVal.map(v => optionsByVal.get(v)).filter(Boolean)
     });
-  }, [disabled, multiple, optionsByValue, selectedSet, triggerChange, value]);
+  }, [disabled, multiple, optionsByVal, selectedSet, triggerChange, value]);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     style: [tokens.layout.container, {
       marginHorizontal: -itemMargin,

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

@@ -35,18 +35,21 @@ const ShareSheetOptionItem = /*#__PURE__*/React.memo(({
       testID: `rv-share-sheet-item-${i}`
     }
   });
+  const iconNode = isText(o.icon) ? renderTextOrNode(o.icon, []) : o.icon;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     style: [S.o, ows]
   }, p.interactionProps), /*#__PURE__*/React.createElement(View, {
     style: [S.ic, is, {
       marginHorizontal: t.spacing.iconMarginHorizontal
     }]
-  }, o.icon), isValidNode(o.name) && renderTextOrNode(o.name, [S.ot, {
+  }, iconNode), isValidNode(o.name) && renderTextOrNode(o.name, [S.ot, {
     color: t.colors.option,
+    fontFamily: t.typography.fontFamily,
     fontSize: t.typography.option,
     paddingHorizontal: t.spacing.optionTextPaddingHorizontal
   }]), isValidNode(o.description) && (isText(o.description) ? renderTextOrNode(o.description, [S.od, {
     color: t.colors.optionDesc,
+    fontFamily: t.typography.fontFamily,
     marginTop: t.spacing.gap,
     fontSize: t.typography.optionDesc,
     paddingHorizontal: t.spacing.optionDescPaddingHorizontal
@@ -81,6 +84,7 @@ const ShareSheetCancel = /*#__PURE__*/React.memo(({
     }]
   }, cp.interactionProps), renderTextOrNode(ct, [S.ct, {
     color: t.colors.option,
+    fontFamily: t.typography.fontFamily,
     fontSize: t.typography.cancel
   }])));
 });
@@ -173,6 +177,7 @@ const ShareSheetImpl = p => {
       }]
     }, ht && (isText(title) ? renderTextOrNode(title, [S.t, {
       color: t.colors.title,
+      fontFamily: t.typography.fontFamily,
       fontSize: t.typography.title,
       marginTop: t.spacing.titleMarginTop
     }]) : /*#__PURE__*/React.createElement(View, {
@@ -181,6 +186,7 @@ const ShareSheetImpl = p => {
       }]
     }, title)), hd && (isText(description) ? renderTextOrNode(description, [S.d, {
       color: t.colors.description,
+      fontFamily: t.typography.fontFamily,
       fontSize: t.typography.description,
       marginTop: t.spacing.descriptionMarginTop
     }]) : /*#__PURE__*/React.createElement(View, {
@@ -188,7 +194,7 @@ const ShareSheetImpl = p => {
         marginTop: t.spacing.nodeMarginTop
       }]
     }, description)));
-  }, [description, hd, ht, title, t.colors.description, t.colors.title, t.spacing.descriptionMarginTop, t.spacing.headerPaddingBottom, t.spacing.headerPaddingHorizontal, t.spacing.headerPaddingTop, t.spacing.nodeMarginTop, t.spacing.titleMarginTop, t.typography.description, t.typography.title]);
+  }, [description, hd, ht, title, t.colors.description, t.colors.title, t.spacing.descriptionMarginTop, t.spacing.headerPaddingBottom, t.spacing.headerPaddingHorizontal, t.spacing.headerPaddingTop, t.spacing.nodeMarginTop, t.spacing.titleMarginTop, t.typography.description, t.typography.fontFamily, t.typography.title]);
   const psm = [{
     padding: t.spacing.popupPadding
   }, ps];

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

@@ -3,7 +3,8 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    fontSize
+    fontSize,
+    typography
   } = foundations;
   return {
     colors: {
@@ -36,6 +37,7 @@ const createTokens = foundations => {
       icon: 48
     },
     typography: {
+      fontFamily: typography.fontFamily,
       title: fontSize.md,
       description: fontSize.xs,
       option: fontSize.xs,

package/dist/es/components/sidebar/Sidebar.js

@@ -20,38 +20,44 @@ const SidebarBaseImpl = props => {
   const dir = useDirection();
   const sidebarItems = useMemo(() => {
     const items = [];
-    React.Children.toArray(children).forEach((child, index) => {
+    React.Children.toArray(children).forEach((child, i) => {
       if (/*#__PURE__*/React.isValidElement(child)) items.push({
         element: child,
-        index
+        index: i
       });
     });
     return items;
   }, [children]);
-  const firstIndex = sidebarItems[0]?.index ?? 0;
+  const firstIdx = sidebarItems[0]?.index ?? 0;
   const [activeIndex, setActiveIndex] = useControllableValue(props, {
-    defaultValue: firstIndex,
+    defaultValue: firstIdx,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const currentIndex = useMemo(() => {
+  const curIdx = useMemo(() => {
     for (const item of sidebarItems) {
       if (item.index === activeIndex) return activeIndex;
     }
-    return firstIndex;
-  }, [activeIndex, firstIndex, sidebarItems]);
-  const contextValue = useMemo(() => ({
-    activeIndex: currentIndex,
+    ;
+    return firstIdx;
+  }, [activeIndex, firstIdx, sidebarItems]);
+  const ctxVal = useMemo(() => ({
+    activeIndex: curIdx,
     onSelect: setActiveIndex
-  }), [currentIndex, setActiveIndex]);
-  const clonedItems = useMemo(() => sidebarItems.map(item => /*#__PURE__*/React.cloneElement(item.element, {
+  }), [curIdx, setActiveIndex]);
+  const cloned = useMemo(() => sidebarItems.map(item => /*#__PURE__*/React.cloneElement(item.element, {
     key: item.element.key ?? item.index,
     index: item.index,
     tokensOverride: mergeTokensOverride(tokensOverride, item.element.props.tokensOverride)
   })), [sidebarItems, tokensOverride]);
-  const activeItem = sidebarItems.find(item => item.index === currentIndex)?.element;
-  const activeContentNode = !isRenderable(activeItem?.props?.children) ? null : renderTextOrNode(activeItem.props.children);
+  const activeItem = sidebarItems.find(item => item.index === curIdx)?.element;
+  const contentTxtStyle = useMemo(() => ({
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.contentFontSize,
+    fontWeight: tokens.typography.fontWeight
+  }), [tokens.typography.fontFamily, tokens.typography.contentFontSize, tokens.typography.fontWeight]);
+  const activeContent = !isRenderable(activeItem?.props?.children) ? null : renderTextOrNode(activeItem.props.children, contentTxtStyle);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     style: [tokens.layout.container, {
       backgroundColor: tokens.colors.background
@@ -62,8 +68,8 @@ const SidebarBaseImpl = props => {
     }, sideStyle],
     accessibilityRole: "tablist"
   }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
-    value: contextValue
-  }, clonedItems), /*#__PURE__*/React.createElement(View, {
+    value: ctxVal
+  }, cloned), /*#__PURE__*/React.createElement(View, {
     style: createHairlineView({
       position: dir === 'rtl' ? 'left' : 'right',
       color: tokens.colors.border,
@@ -72,7 +78,7 @@ const SidebarBaseImpl = props => {
     })
   })), /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.content, activeItem?.props?.contentStyle]
-  }, activeContentNode));
+  }, activeContent));
 };
 const SidebarBase = /*#__PURE__*/React.memo(SidebarBaseImpl);
 export default SidebarBase;

package/dist/es/components/sidebar/SidebarItem.js

@@ -23,16 +23,16 @@ const SidebarItemImpl = props => {
     ...rest
   } = props;
   const tokens = useSidebarTokens(tokensOverride);
-  const context = useSidebarContext();
-  if (!context) return null;
+  const ctx = useSidebarContext();
+  if (!ctx) return null;
   const disabled = disabledProp ?? tokens.defaults.disabled;
-  const isActive = context.activeIndex === index;
-  const titleColor = disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title;
+  const isActive = ctx.activeIndex === index;
+  const titleClr = disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title;
   const press = useAriaPress({
     disabled,
     onPress: () => {
       onClick?.(index);
-      context.onSelect(index);
+      ctx.onSelect(index);
     },
     extraProps: {
       accessibilityRole: 'tab',
@@ -43,14 +43,15 @@ const SidebarItemImpl = props => {
       testID: `rv-sidebar-item-${index}`
     }
   });
-  const indicatorStyle = [tokens.layout.indicator, {
+  const indStyle = [tokens.layout.indicator, {
     width: tokens.sizing.indicatorWidth,
     borderRadius: tokens.sizing.indicatorWidth,
     backgroundColor: tokens.colors.indicator
   }];
   const titleNode = isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
     style: [tokens.layout.title, {
-      color: titleColor,
+      color: titleClr,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize,
       fontWeight: tokens.typography.fontWeight
     }, textStyle]
@@ -72,7 +73,7 @@ const SidebarItemImpl = props => {
   }), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.indicatorWrapper
   }, isActive && /*#__PURE__*/React.createElement(View, {
-    style: indicatorStyle
+    style: indStyle
   })), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.itemContent
   }, /*#__PURE__*/React.createElement(View, {

package/dist/es/components/sidebar/tokens.js

@@ -62,8 +62,10 @@ export const createSidebarTokens = foundations => {
       indicator: palette.primary[600]
     },
     typography: {
+      fontFamily: typography.fontFamily,
       fontSize: fontSize.sm,
-      fontWeight: typography.weight.medium
+      fontWeight: typography.weight.medium,
+      contentFontSize: fontSize.sm
     },
     sizing: {
       width: 120,

package/dist/es/components/skeleton/Skeleton.js

@@ -13,36 +13,36 @@ const SkeletonImpl = (props, ref) => {
   const {
     tokensOverride,
     isLoaded,
-    loading: loadingProp,
-    animate: animateProp,
+    loading: loadP,
+    animate: animP,
     startColor,
-    speed: speedProp,
-    avatar: avatarProp,
-    avatarSize: avatarSizeProp,
-    avatarShape: avatarShapeProp,
-    title: titleProp,
-    titleWidth: titleWidthProp,
-    row: rowProp,
-    rowWidth: rowWidthProp,
+    speed: speedP,
+    avatar: avP,
+    avatarSize: avSzP,
+    avatarShape: avShapeP,
+    title: titleP,
+    titleWidth: titleWP,
+    row: rowP,
+    rowWidth: rowWP,
     rowHeight,
-    round: roundProp,
+    round: roundP,
     style,
     children,
     ...rest
   } = props;
   const tokens = useSkeletonTokens(tokensOverride);
   const reducedMotion = useReducedMotion();
-  const loading = loadingProp ?? (isLoaded != null ? !isLoaded : true);
-  const animate = animateProp ?? true;
-  const avatar = avatarProp ?? false;
-  const avatarSize = avatarSizeProp ?? tokens.defaults.avatarSize;
-  const avatarShape = avatarShapeProp ?? 'round';
-  const title = titleProp ?? false;
-  const titleWidth = titleWidthProp ?? tokens.defaults.titleWidth;
-  const row = rowProp ?? tokens.defaults.rowCount;
-  const rowWidth = rowWidthProp ?? tokens.defaults.rowWidth;
-  const round = roundProp ?? false;
-  const speed = isFiniteNumber(speedProp) ? Math.max(0.01, speedProp) : isString(speedProp) && Number.isFinite(Number(speedProp)) && Number(speedProp) > 0 ? Number(speedProp) : 1;
+  const loading = loadP ?? (isLoaded != null ? !isLoaded : true);
+  const animate = animP ?? true;
+  const avatar = avP ?? false;
+  const avatarSize = avSzP ?? tokens.defaults.avatarSize;
+  const avatarShape = avShapeP ?? 'round';
+  const title = titleP ?? false;
+  const titleWidth = titleWP ?? tokens.defaults.titleWidth;
+  const row = rowP ?? tokens.defaults.rowCount;
+  const rowWidth = rowWP ?? tokens.defaults.rowWidth;
+  const round = roundP ?? false;
+  const speed = isFiniteNumber(speedP) ? Math.max(0.01, speedP) : isString(speedP) && Number.isFinite(Number(speedP)) && Number(speedP) > 0 ? Number(speedP) : 1;
   const duration = Math.max(0, tokens.animation.duration / speed);
   const blockColor = startColor ?? tokens.colors.block;
   const rows = isFiniteNumber(row) ? Math.max(0, Math.floor(row)) : 0;
@@ -53,14 +53,15 @@ const SkeletonImpl = (props, ref) => {
   }, [props.rowWidth, rowWidth, rows, tokens.defaults.lastRowWidth, tokens.defaults.rowWidth]);
   const rowHeights = useMemo(() => resolveSeries(rows, rowHeight, tokens.defaults.rowHeight), [rowHeight, rows, tokens.defaults.rowHeight]);
   const titleHeight = rowHeights[0] ?? tokens.defaults.rowHeight;
-  const resolvedAvatarSize = normalize(avatarSize, tokens.defaults.avatarSize);
-  const resolvedTitleWidth = normalize(titleWidth, tokens.defaults.titleWidth);
+  const rAvSz = normalize(avatarSize, tokens.defaults.avatarSize);
+  const rTitleW = normalize(titleWidth, tokens.defaults.titleWidth);
   const animated = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     if (!loading || !animate || duration <= 0 || reducedMotion) {
       animated.setValue(0);
       return;
     }
+    ;
     const loop = Animated.loop(Animated.sequence([Animated.timing(animated, {
       toValue: 1,
       duration: duration / 2,
@@ -75,51 +76,51 @@ const SkeletonImpl = (props, ref) => {
     loop.start();
     return () => loop.stop();
   }, [animate, animated, duration, loading, reducedMotion]);
-  const animatedStyle = useMemo(() => !loading || !animate ? undefined : {
+  const animStyle = useMemo(() => !loading || !animate ? undefined : {
     opacity: animated.interpolate({
       inputRange: [0, 1],
       outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
     })
   }, [animate, animated, loading, tokens.animation.maxOpacity, tokens.animation.minOpacity]);
-  const containerStyles = [S.ctr, {
+  const ctrStyles = [S.ctr, {
     gap: tokens.spacing.containerGap
   }, style];
   const avatarNode = useMemo(() => !avatar ? null : /*#__PURE__*/React.createElement(Animated.View, {
     style: [{
-      width: resolvedAvatarSize,
-      height: resolvedAvatarSize,
+      width: rAvSz,
+      height: rAvSz,
       borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
       backgroundColor: blockColor
-    }, animatedStyle]
-  }), [animatedStyle, avatar, avatarShape, blockColor, resolvedAvatarSize, tokens.radius]);
+    }, animStyle]
+  }), [animStyle, avatar, avatarShape, blockColor, rAvSz, tokens.radius]);
   const titleNode = useMemo(() => !title ? null : /*#__PURE__*/React.createElement(Animated.View, {
     style: [{
-      width: resolvedTitleWidth,
+      width: rTitleW,
       height: titleHeight,
       backgroundColor: blockColor,
       borderRadius: round ? tokens.radius : 0
-    }, animatedStyle]
-  }), [animatedStyle, blockColor, resolvedTitleWidth, round, title, titleHeight, tokens.radius]);
+    }, animStyle]
+  }), [animStyle, blockColor, rTitleW, round, title, titleHeight, tokens.radius]);
   const rowNodes = useMemo(() => rows <= 0 ? null : /*#__PURE__*/React.createElement(View, {
     style: S.rows
-  }, rowWidths.map((width, index) => /*#__PURE__*/React.createElement(Animated.View, {
-    key: index,
-    testID: `rv-skeleton-row-${index}`,
+  }, rowWidths.map((w, i) => /*#__PURE__*/React.createElement(Animated.View, {
+    key: i,
+    testID: `rv-skeleton-row-${i}`,
     style: [{
-      width: width,
-      height: rowHeights[index],
-      marginTop: index === 0 && !title ? 0 : tokens.spacing.rowGap,
+      width: w,
+      height: rowHeights[i],
+      marginTop: i === 0 && !title ? 0 : tokens.spacing.rowGap,
       backgroundColor: blockColor,
       borderRadius: round ? tokens.radius : 0
-    }, animatedStyle]
-  }))), [animatedStyle, blockColor, rowHeights, rowWidths, rows, round, title, tokens.radius, tokens.spacing.rowGap]);
+    }, animStyle]
+  }))), [animStyle, blockColor, rowHeights, rowWidths, rows, round, title, tokens.radius, tokens.spacing.rowGap]);
   if (!loading) return /*#__PURE__*/React.createElement(View, _extends({
     ref: ref,
     style: style
   }, rest), children);
   return /*#__PURE__*/React.createElement(View, _extends({
     ref: ref,
-    style: containerStyles
+    style: ctrStyles
   }, rest), avatarNode, /*#__PURE__*/React.createElement(View, {
     style: S.cnt
   }, titleNode, rowNodes));

package/dist/es/components/slider/Slider.js

@@ -7,8 +7,8 @@ import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { useSliderTokens } from './tokens';
 import { parseNumber } from '../../utils/number';
 import { createHairlineView } from '../../utils/hairline';
-import { clamp } from '../../utils';
-import { isFunction, isFiniteNumber } from '../../utils/validate';
+import { clamp, renderTextOrNode } from '../../utils';
+import { isFunction, isFiniteNumber, isText } from '../../utils/validate';
 import { useAriaPress } from '../../hooks';
 const isSameLayout = (a, b) => a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
 const normalizeValue = (value, range, min, max) => {
@@ -168,7 +168,7 @@ const ThumbNode = /*#__PURE__*/React.memo(({
   return /*#__PURE__*/React.createElement(View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
     style: [content ? S.thw : S.t, webGestureStyle, thumbStyle]
-  }), content ?? /*#__PURE__*/React.createElement(View, {
+  }), content != null ? isText(content) ? renderTextOrNode(content, []) : content : /*#__PURE__*/React.createElement(View, {
     style: indicatorStyle
   }), !content && /*#__PURE__*/React.createElement(View, {
     style: createHairlineView({