react-native-system-ui 1.0.0 → 1.0.2

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

@@ -41,7 +41,7 @@ const SearchComponent = (props, ref) => {
     action,
     actionText,
     showAction = false,
-    shape: shapeProp,
+    shape: shapeP,
     background,
     style: containerStyle,
     fieldStyle,
@@ -62,12 +62,12 @@ const SearchComponent = (props, ref) => {
     ...restFieldProps
   } = props;
   const tokens = (0, _tokens.useSearchTokens)(tokensOverride);
-  const shape = shapeProp ?? tokens.defaults.shape;
+  const shape = shapeP ?? tokens.defaults.shape;
   const [value, triggerChange] = (0, _hooks.useControllableValue)(props, {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = align ?? inputAlign;
+  const rInputAlign = align ?? inputAlign;
   const onChangeTextRef = (0, _react().useRef)(onChangeText),
     onCancelRef = (0, _react().useRef)(onCancel),
     onSearchRef = (0, _react().useRef)(onSearch),
@@ -90,17 +90,17 @@ const SearchComponent = (props, ref) => {
     onSearchRef.current?.(inputValueRef.current);
     onSubmitEditingRef.current?.(event);
   }, []);
-  const resolvedBackground = background ?? tokens.colors.background;
-  const resolvedLeftIcon = leftIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Search, {
+  const rBg = background ?? tokens.colors.background;
+  const rLeftIcon = 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 rClearTrigger = clearTrigger ?? tokens.defaults.clearTrigger;
+  const rReturnKey = returnKeyType ?? 'search';
+  const showAct = !!action || showAction;
+  const customActTxt = /*#__PURE__*/_react().default.isValidElement(actionText);
+  const renderCancelAct = showAct && !action && !customActTxt;
   const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
   const inputRef = (0, _react().useRef)(null);
   (0, _react().useImperativeHandle)(ref, () => ({
@@ -108,26 +108,26 @@ const SearchComponent = (props, ref) => {
     blur: () => inputRef.current?.blur(),
     clear: () => handleChange('')
   }), [handleChange]);
-  const cancelActionPress = (0, _hooks.useAriaPress)({
-    disabled: !shouldRenderCancelAction,
+  const cancelActPress = (0, _hooks.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 : (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  const labelEl = !label ? null : (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: {
       marginRight: tokens.spacing.labelGap,
       color: tokens.colors.label,
@@ -139,20 +139,20 @@ const SearchComponent = (props, ref) => {
       marginRight: tokens.spacing.labelGap
     }
   }, label);
-  const actionElement = action ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const actEl = action ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [S.act, {
       marginLeft: tokens.spacing.actionGap
     }]
-  }, action) : !shouldShowAction ? null : isCustomActionText ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, action) : !showAct ? null : customActTxt ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [S.act, {
       marginLeft: tokens.spacing.actionGap
     }]
   }, actionText) : /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().Text, {
+  }, cancelActPress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: {
       color: tokens.colors.action,
       fontSize: tokens.typography.action,
@@ -160,10 +160,10 @@ const SearchComponent = (props, ref) => {
     }
   }, actionText ?? locale.cancel));
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: containerStyles
+    style: ctrStyles
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: contentStyles
-  }, labelElement, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: cntStyles
+  }, labelEl, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: S.field
   }, /*#__PURE__*/_react().default.createElement(_field.default, _extends({
     ref: inputRef,
@@ -171,12 +171,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,
@@ -189,8 +189,8 @@ const SearchComponent = (props, ref) => {
       paddingVertical: tokens.spacing.none
     }, inputStyle],
     onSubmitEditing: handleSubmit,
-    returnKeyType: resolvedReturnKeyType
-  }, restFieldProps)))), actionElement);
+    returnKeyType: rReturnKey
+  }, restFieldProps)))), actEl);
 };
 const SearchForwardRef = /*#__PURE__*/_react().default.forwardRef(SearchComponent);
 SearchForwardRef.displayName = 'Search';

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

@@ -122,10 +122,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,
@@ -134,37 +134,30 @@ const SelectorImpl = props => {
     ...rest
   } = props;
   const tokens = (0, _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] = (0, _hooks.useControllableValue)(props, {
     defaultValue: []
   });
-  const optionsByValue = (0, _react().useMemo)(() => {
-    const map = new Map();
-    for (const option of options) map.set(option.value, option);
-    return map;
+  const optionsByVal = (0, _react().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 = (0, _react().useMemo)(() => new Set(value), [value]);
   const toggleOption = (0, _react().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().default.createElement(_reactNative().View, _extends({}, rest, {
     style: [tokens.layout.container, {
       marginHorizontal: -itemMargin,

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

@@ -55,18 +55,21 @@ const ShareSheetOptionItem = /*#__PURE__*/_react().default.memo(({
       testID: `rv-share-sheet-item-${i}`
     }
   });
+  const iconNode = (0, _validate.isText)(o.icon) ? (0, _utils.renderTextOrNode)(o.icon, []) : o.icon;
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: [S.o, ows]
   }, p.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [S.ic, is, {
       marginHorizontal: t.spacing.iconMarginHorizontal
     }]
-  }, o.icon), (0, _validate.isValidNode)(o.name) && (0, _utils.renderTextOrNode)(o.name, [S.ot, {
+  }, iconNode), (0, _validate.isValidNode)(o.name) && (0, _utils.renderTextOrNode)(o.name, [S.ot, {
     color: t.colors.option,
+    fontFamily: t.typography.fontFamily,
     fontSize: t.typography.option,
     paddingHorizontal: t.spacing.optionTextPaddingHorizontal
   }]), (0, _validate.isValidNode)(o.description) && ((0, _validate.isText)(o.description) ? (0, _utils.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
@@ -101,6 +104,7 @@ const ShareSheetCancel = /*#__PURE__*/_react().default.memo(({
     }]
   }, cp.interactionProps), (0, _utils.renderTextOrNode)(ct, [S.ct, {
     color: t.colors.option,
+    fontFamily: t.typography.fontFamily,
     fontSize: t.typography.cancel
   }])));
 });
@@ -193,6 +197,7 @@ const ShareSheetImpl = p => {
       }]
     }, ht && ((0, _validate.isText)(title) ? (0, _utils.renderTextOrNode)(title, [S.t, {
       color: t.colors.title,
+      fontFamily: t.typography.fontFamily,
       fontSize: t.typography.title,
       marginTop: t.spacing.titleMarginTop
     }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -201,6 +206,7 @@ const ShareSheetImpl = p => {
       }]
     }, title)), hd && ((0, _validate.isText)(description) ? (0, _utils.renderTextOrNode)(description, [S.d, {
       color: t.colors.description,
+      fontFamily: t.typography.fontFamily,
       fontSize: t.typography.description,
       marginTop: t.spacing.descriptionMarginTop
     }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -208,7 +214,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/cjs/components/share-sheet/tokens.js

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

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

@@ -39,38 +39,44 @@ const SidebarBaseImpl = props => {
   const dir = (0, _useDirection.useDirection)();
   const sidebarItems = (0, _react().useMemo)(() => {
     const items = [];
-    _react().default.Children.toArray(children).forEach((child, index) => {
+    _react().default.Children.toArray(children).forEach((child, i) => {
       if (/*#__PURE__*/_react().default.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] = (0, _hooks.useControllableValue)(props, {
-    defaultValue: firstIndex,
+    defaultValue: firstIdx,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const currentIndex = (0, _react().useMemo)(() => {
+  const curIdx = (0, _react().useMemo)(() => {
     for (const item of sidebarItems) {
       if (item.index === activeIndex) return activeIndex;
     }
-    return firstIndex;
-  }, [activeIndex, firstIndex, sidebarItems]);
-  const contextValue = (0, _react().useMemo)(() => ({
-    activeIndex: currentIndex,
+    ;
+    return firstIdx;
+  }, [activeIndex, firstIdx, sidebarItems]);
+  const ctxVal = (0, _react().useMemo)(() => ({
+    activeIndex: curIdx,
     onSelect: setActiveIndex
-  }), [currentIndex, setActiveIndex]);
-  const clonedItems = (0, _react().useMemo)(() => sidebarItems.map(item => /*#__PURE__*/_react().default.cloneElement(item.element, {
+  }), [curIdx, setActiveIndex]);
+  const cloned = (0, _react().useMemo)(() => sidebarItems.map(item => /*#__PURE__*/_react().default.cloneElement(item.element, {
     key: item.element.key ?? item.index,
     index: item.index,
     tokensOverride: (0, _designSystem.mergeTokensOverride)(tokensOverride, item.element.props.tokensOverride)
   })), [sidebarItems, tokensOverride]);
-  const activeItem = sidebarItems.find(item => item.index === currentIndex)?.element;
-  const activeContentNode = !(0, _validate.isRenderable)(activeItem?.props?.children) ? null : (0, _utils.renderTextOrNode)(activeItem.props.children);
+  const activeItem = sidebarItems.find(item => item.index === curIdx)?.element;
+  const contentTxtStyle = (0, _react().useMemo)(() => ({
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.contentFontSize,
+    fontWeight: tokens.typography.fontWeight
+  }), [tokens.typography.fontFamily, tokens.typography.contentFontSize, tokens.typography.fontWeight]);
+  const activeContent = !(0, _validate.isRenderable)(activeItem?.props?.children) ? null : (0, _utils.renderTextOrNode)(activeItem.props.children, contentTxtStyle);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
     style: [tokens.layout.container, {
       backgroundColor: tokens.colors.background
@@ -81,8 +87,8 @@ const SidebarBaseImpl = props => {
     }, sideStyle],
     accessibilityRole: "tablist"
   }, /*#__PURE__*/_react().default.createElement(_SidebarContext.SidebarContext.Provider, {
-    value: contextValue
-  }, clonedItems), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    value: ctxVal
+  }, cloned), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: (0, _utils.createHairlineView)({
       position: dir === 'rtl' ? 'left' : 'right',
       color: tokens.colors.border,
@@ -91,7 +97,7 @@ const SidebarBaseImpl = props => {
     })
   })), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.content, activeItem?.props?.contentStyle]
-  }, activeContentNode));
+  }, activeContent));
 };
 const SidebarBase = /*#__PURE__*/_react().default.memo(SidebarBaseImpl);
 var _default = exports.default = SidebarBase;

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

@@ -42,16 +42,16 @@ const SidebarItemImpl = props => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useSidebarTokens)(tokensOverride);
-  const context = (0, _SidebarContext.useSidebarContext)();
-  if (!context) return null;
+  const ctx = (0, _SidebarContext.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 = (0, _hooks.useAriaPress)({
     disabled,
     onPress: () => {
       onClick?.(index);
-      context.onSelect(index);
+      ctx.onSelect(index);
     },
     extraProps: {
       accessibilityRole: 'tab',
@@ -62,14 +62,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 = (0, _utils.isRenderable)(title) ? (0, _utils.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.title, {
-      color: titleColor,
+      color: titleClr,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize,
       fontWeight: tokens.typography.fontWeight
     }, textStyle]
@@ -91,7 +92,7 @@ const SidebarItemImpl = props => {
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.indicatorWrapper
   }, isActive && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: indicatorStyle
+    style: indStyle
   })), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.itemContent
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {

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

@@ -74,8 +74,10 @@ 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/cjs/components/skeleton/Skeleton.js

@@ -32,36 +32,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 = (0, _tokens.useSkeletonTokens)(tokensOverride);
   const reducedMotion = (0, _animation.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 = (0, _utils.isFiniteNumber)(speedProp) ? Math.max(0.01, speedProp) : (0, _utils.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 = (0, _utils.isFiniteNumber)(speedP) ? Math.max(0.01, speedP) : (0, _utils.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 = (0, _utils.isFiniteNumber)(row) ? Math.max(0, Math.floor(row)) : 0;
@@ -72,14 +72,15 @@ const SkeletonImpl = (props, ref) => {
   }, [props.rowWidth, rowWidth, rows, tokens.defaults.lastRowWidth, tokens.defaults.rowWidth]);
   const rowHeights = (0, _react().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 = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
   (0, _react().useEffect)(() => {
     if (!loading || !animate || duration <= 0 || reducedMotion) {
       animated.setValue(0);
       return;
     }
+    ;
     const loop = _reactNative().Animated.loop(_reactNative().Animated.sequence([_reactNative().Animated.timing(animated, {
       toValue: 1,
       duration: duration / 2,
@@ -94,51 +95,51 @@ const SkeletonImpl = (props, ref) => {
     loop.start();
     return () => loop.stop();
   }, [animate, animated, duration, loading, reducedMotion]);
-  const animatedStyle = (0, _react().useMemo)(() => !loading || !animate ? undefined : {
+  const animStyle = (0, _react().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 = (0, _react().useMemo)(() => !avatar ? null : /*#__PURE__*/_react().default.createElement(_reactNative().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 = (0, _react().useMemo)(() => !title ? null : /*#__PURE__*/_react().default.createElement(_reactNative().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 = (0, _react().useMemo)(() => rows <= 0 ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: S.rows
-  }, rowWidths.map((width, index) => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    key: index,
-    testID: `rv-skeleton-row-${index}`,
+  }, rowWidths.map((w, i) => /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().View, _extends({
     ref: ref,
     style: style
   }, rest), children);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     ref: ref,
-    style: containerStyles
+    style: ctrStyles
   }, rest), avatarNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: S.cnt
   }, titleNode, rowNodes));

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

@@ -205,7 +205,7 @@ const ThumbNode = /*#__PURE__*/_react().default.memo(({
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
     style: [content ? S.thw : S.t, webGestureStyle, thumbStyle]
-  }), content ?? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }), content != null ? (0, _validate.isText)(content) ? (0, _utils2.renderTextOrNode)(content, []) : content : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: indicatorStyle
   }), !content && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: (0, _hairline.createHairlineView)({