react-native-system-ui 0.0.7 → 1.0.1

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

@@ -1,12 +1,12 @@
 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, { useMemo } from 'react';
+import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { isRenderable, isText } from '../../utils';
 import Badge from '../badge';
 import { useSidebarContext } from './SidebarContext';
 import { useSidebarTokens } from './tokens';
-const SidebarItem = props => {
+const SidebarItemImpl = props => {
   const {
     title,
     badge,
@@ -23,18 +23,16 @@ const SidebarItem = 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 = useMemo(() => disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title, [disabled, isActive, tokens.colors.disabled, tokens.colors.title, tokens.colors.titleActive]);
+  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',
@@ -45,28 +43,29 @@ const SidebarItem = props => {
       testID: `rv-sidebar-item-${index}`
     }
   });
-  const indicatorStyle = useMemo(() => [tokens.layout.indicator, {
+  const indStyle = [tokens.layout.indicator, {
     width: tokens.sizing.indicatorWidth,
     borderRadius: tokens.sizing.indicatorWidth,
     backgroundColor: tokens.colors.indicator
-  }], [tokens.colors.indicator, tokens.layout.indicator, tokens.sizing.indicatorWidth]);
-  const titleNode = useMemo(() => isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
+  }];
+  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]
-  }, title) : title : null, [textStyle, title, titleColor, tokens.layout.title, tokens.typography.fontSize, tokens.typography.fontWeight]);
-  const badgeNode = useMemo(() => isRenderable(badge) ? /*#__PURE__*/React.createElement(View, {
+  }, title) : title : null;
+  const badgeNode = isRenderable(badge) ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.badge, badgeStyle]
   }, isText(badge) ? /*#__PURE__*/React.createElement(Badge, {
     content: badge
-  }) : badge) : null, [badge, badgeStyle, tokens.layout.badge]);
-  const dotNode = useMemo(() => dot ? /*#__PURE__*/React.createElement(View, {
+  }) : badge) : null;
+  const dotNode = dot ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.dot, {
       backgroundColor: tokens.colors.indicator
     }]
-  }) : null, [dot, tokens.colors.indicator, tokens.layout.dot]);
+  }) : null;
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, press.interactionProps, {
     style: [tokens.layout.item, {
       height: tokens.sizing.itemHeight
@@ -74,12 +73,12 @@ const SidebarItem = 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, {
     style: tokens.layout.titleRow
   }, titleNode, badgeNode, dotNode)));
 };
-SidebarItem.displayName = 'Sidebar.Item';
+const SidebarItem = /*#__PURE__*/React.memo(SidebarItemImpl);
 export default SidebarItem;

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

@@ -15,9 +15,7 @@ export const createSidebarTokens = foundations => {
       container: {
         flexDirection: 'row'
       },
-      side: {
-        borderRightWidth: borderWidth
-      },
+      side: {},
       content: {
         flex: 1,
         minWidth: 0
@@ -64,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

@@ -2,148 +2,142 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
 import { isFiniteNumber, isString } from '../../utils';
 import { useSkeletonTokens } from './tokens';
 const normalize = (value, fallback) => isFiniteNumber(value) ? Math.max(0, value) : isString(value) && value.trim() ? value.trim() : fallback;
-const resolveSeries = (count, input, fallback) => {
-  return Array.from({
-    length: count
-  }, (_, idx) => normalize(Array.isArray(input) ? input[idx] : input, fallback));
-};
-const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
+const resolveSeries = (count, input, fallback) => Array.from({
+  length: count
+}, (_, idx) => normalize(Array.isArray(input) ? input[idx] : input, fallback));
+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 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 = useMemo(() => {
-    if (isFiniteNumber(speedProp)) return Math.max(0.01, speedProp);
-    if (isString(speedProp)) {
-      const parsed = Number(speedProp);
-      return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
-    }
-    return 1;
-  }, [speedProp]);
-  const duration = useMemo(() => Math.max(0, tokens.animation.duration / speed), [speed, tokens.animation.duration]);
+  const reducedMotion = useReducedMotion();
+  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;
   const rowWidths = useMemo(() => {
     const widths = resolveSeries(rows, rowWidth, tokens.defaults.rowWidth);
-    if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || isString(props.rowWidth) && props.rowWidth.trim() === '100%')) {
-      widths[rows - 1] = tokens.defaults.lastRowWidth;
-    }
+    if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || isString(props.rowWidth) && props.rowWidth.trim() === '100%')) widths[rows - 1] = tokens.defaults.lastRowWidth;
     return widths;
   }, [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) {
+    if (!loading || !animate || duration <= 0 || reducedMotion) {
       animated.setValue(0);
       return;
     }
+    ;
     const loop = Animated.loop(Animated.sequence([Animated.timing(animated, {
       toValue: 1,
       duration: duration / 2,
-      useNativeDriver: nativeDriverEnabled
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
     }), Animated.timing(animated, {
       toValue: 0,
       duration: duration / 2,
-      useNativeDriver: nativeDriverEnabled
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
     })]));
     loop.start();
     return () => loop.stop();
-  }, [animate, animated, duration, loading]);
-  const animatedStyle = useMemo(() => !loading || !animate ? undefined : {
+  }, [animate, animated, duration, loading, reducedMotion]);
+  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 = useMemo(() => [styles.container, {
+  const ctrStyles = [S.ctr, {
     gap: tokens.spacing.containerGap
-  }, style], [style, 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: styles.rows
-  }, rowWidths.map((width, index) => /*#__PURE__*/React.createElement(Animated.View, {
-    key: index,
-    testID: `rv-skeleton-row-${index}`,
+    style: S.rows
+  }, 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]);
-  if (!loading) {
-    return /*#__PURE__*/React.createElement(View, _extends({
-      ref: ref,
-      style: style
-    }, rest), children);
-  }
+    }, 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: styles.content
+    style: S.cnt
   }, titleNode, rowNodes));
-});
-const styles = StyleSheet.create({
-  container: {
+};
+const S = StyleSheet.create({
+  ctr: {
     flexDirection: 'row',
     alignItems: 'flex-start'
   },
-  content: {
+  cnt: {
     flex: 1
   },
   rows: {
     width: '100%'
   }
 });
-Skeleton.displayName = 'Skeleton';
+const SkeletonForwardRef = /*#__PURE__*/React.forwardRef(SkeletonImpl);
+SkeletonForwardRef.displayName = 'Skeleton';
+const Skeleton = /*#__PURE__*/React.memo(SkeletonForwardRef);
 export default Skeleton;

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

@@ -5,7 +5,6 @@ const createTokens = foundations => {
     spacing,
     radii
   } = foundations;
-  const surfaceMuted = palette.default[100];
   return {
     defaults: {
       rowCount: 3,
@@ -16,7 +15,7 @@ const createTokens = foundations => {
       titleWidth: '40%'
     },
     colors: {
-      block: surfaceMuted,
+      block: palette.default[100],
       highlight: '#ffffff'
     },
     radius: radii.sm,