react-native-system-ui 0.0.3 → 0.0.4

package/dist/es/components/image/Image.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, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 import { isNumber, isString, isText } from '../../utils';
@@ -100,24 +100,30 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
   const fit = fitProp ?? tokens.defaults.fit;
   const showLoading = showLoadingProp ?? tokens.defaults.showLoading;
   const showError = showErrorProp ?? tokens.defaults.showError;
-  const loadingText = loadingTextProp ?? tokens.defaults.loadingText;
-  const errorText = errorTextProp ?? tokens.defaults.errorText;
+  const loadingText = loadingTextProp !== undefined ? loadingTextProp : tokens.defaults.loadingText;
+  const errorText = errorTextProp !== undefined ? errorTextProp : tokens.defaults.errorText;
   const {
     container: containerLayoutStyle,
     image: imageStyleWithoutLayout
-  } = useMemo(() => splitImageStyle(style), [style]);
-  const actualSource = useMemo(() => {
-    if (source) return source;
-    if (src) return {
-      uri: src
-    };
-    return undefined;
-  }, [source, src]);
+  } = splitImageStyle(style);
+  const actualSource = source ? source : src ? {
+    uri: src
+  } : undefined;
+  const sourceKey = (() => {
+    if (source) {
+      if (typeof source === 'number') return `res:${source}`;
+      const uri = resolveSourceUri(source);
+      if (uri) return `uri:${uri}`;
+      return 'source:unknown';
+    }
+    if (src) return `src:${src}`;
+    return 'none';
+  })();
   const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
   const [status, setStatus] = useState(() => actualSource ? 'loading' : 'idle');
   useEffect(() => {
     setStatus(actualSource ? 'loading' : 'idle');
-  }, [actualSource]);
+  }, [sourceKey]);
   const handleLoad = useCallback(event => {
     setStatus('loaded');
     onLoad?.(event);
@@ -139,10 +145,8 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
   }, [handleError]);
   const uri = resolveSourceUri(actualSource);
-  const isSvg = useMemo(() => {
-    const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
-    return isString(normalizedUri) && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  }, [uri]);
+  const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
+  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
   const resolvedLoadingSize = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
   const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
   const containerRole = onPress ? 'button' : undefined;

package/dist/es/components/image-preview/ImagePreview.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, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import Popup from '../popup';
 import Swiper from '../swiper';
@@ -55,7 +55,11 @@ const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
     beforeClose
   } = props;
   const {
-    colors
+    colors,
+    layout,
+    radii,
+    typography,
+    spacing
   } = useImagePreviewTokens(tokensOverride);
   const swiperRef = useRef(null);
   const popupCloseReason = useRef('close');
@@ -76,9 +80,9 @@ const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
     beforeClose,
     onClose
   };
-  const resolvedImages = useMemo(() => images.map(img => isString(img) ? {
+  const resolvedImages = images.map(img => isString(img) ? {
     uri: img
-  } : img), [images]);
+  } : img);
   useEffect(() => {
     setActive(current => clampIndex(current, imagesLen));
   }, [imagesLen]);
@@ -176,67 +180,70 @@ const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (dx * dx + dy * dy >= TAP_MOVE_THRESHOLD_SQ) return;
     handleImagePress();
   }, [handleImagePress, resetTap]);
-  const pressableHandlers = useMemo(() => {
-    const handlers = {
-      onTouchStart: e => {
-        const {
-          pageX,
-          pageY
-        } = e.nativeEvent;
-        if (pageX != null && pageY != null) markTapStart(pageX, pageY);
-      },
-      onTouchMove: e => {
-        const {
-          pageX,
-          pageY
-        } = e.nativeEvent;
-        if (pageX != null && pageY != null) markTapMove(pageX, pageY);
-      },
-      onTouchEnd: e => {
-        const {
-          pageX,
-          pageY
-        } = e.nativeEvent;
-        if (pageX != null && pageY != null) tryTapEnd(pageX, pageY);
-      },
-      onTouchCancel: resetTap
+  const pressableHandlers = {
+    onTouchStart: e => {
+      const {
+        pageX,
+        pageY
+      } = e.nativeEvent;
+      if (pageX != null && pageY != null) markTapStart(pageX, pageY);
+    },
+    onTouchMove: e => {
+      const {
+        pageX,
+        pageY
+      } = e.nativeEvent;
+      if (pageX != null && pageY != null) markTapMove(pageX, pageY);
+    },
+    onTouchEnd: e => {
+      const {
+        pageX,
+        pageY
+      } = e.nativeEvent;
+      if (pageX != null && pageY != null) tryTapEnd(pageX, pageY);
+    },
+    onTouchCancel: resetTap
+  };
+  if (IS_WEB) {
+    pressableHandlers.onMouseDown = e => {
+      const ne = e.nativeEvent;
+      if (ne?.pageX != null && ne?.pageY != null) markTapStart(ne.pageX, ne.pageY);
     };
-    if (IS_WEB) {
-      handlers.onMouseDown = e => {
-        const ne = e.nativeEvent;
-        if (ne?.pageX != null && ne?.pageY != null) markTapStart(ne.pageX, ne.pageY);
-      };
-      handlers.onMouseMove = e => {
-        const ne = e.nativeEvent;
-        if (ne?.buttons !== 1) return;
-        if (ne?.pageX != null && ne?.pageY != null) markTapMove(ne.pageX, ne.pageY);
-      };
-      handlers.onMouseUp = e => {
-        const ne = e.nativeEvent;
-        if (ne?.pageX != null && ne?.pageY != null) tryTapEnd(ne.pageX, ne.pageY);
-      };
-    }
-    return handlers;
-  }, [markTapMove, markTapStart, resetTap, tryTapEnd]);
+    pressableHandlers.onMouseMove = e => {
+      const ne = e.nativeEvent;
+      if (ne?.buttons !== 1) return;
+      if (ne?.pageX != null && ne?.pageY != null) markTapMove(ne.pageX, ne.pageY);
+    };
+    pressableHandlers.onMouseUp = e => {
+      const ne = e.nativeEvent;
+      if (ne?.pageX != null && ne?.pageY != null) tryTapEnd(ne.pageX, ne.pageY);
+    };
+  }
   const renderIndex = useCallback((current, total) => {
     if (!showIndex || total === 0) return null;
     const indexText = `${current + 1} / ${total}`;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles.index,
+      style: [styles.index, {
+        top: spacing.indexTop
+      }],
       testID: "rv-image-preview-index"
     }, /*#__PURE__*/React.createElement(View, {
       style: [styles.indexBadge, {
-        backgroundColor: colors.indexBackground
+        backgroundColor: colors.indexBackground,
+        borderRadius: radii.indexBadge,
+        paddingHorizontal: spacing.indexPaddingHorizontal,
+        paddingVertical: spacing.indexPaddingVertical
       }]
     }, indexRender ? indexRender({
       index: current,
       len: total
     }) : /*#__PURE__*/React.createElement(Text, {
       style: [styles.indexText, {
-        color: colors.indexText
+        color: colors.indexText,
+        fontSize: typography.indexTextSize
       }]
     }, indexText)));
-  }, [colors.indexBackground, colors.indexText, indexRender, showIndex]);
+  }, [colors.indexBackground, colors.indexText, indexRender, radii.indexBadge, showIndex, spacing.indexPaddingHorizontal, spacing.indexPaddingVertical, spacing.indexTop, typography.indexTextSize]);
   const lazyBuffer = lazyRender ? Math.max(0, lazyRenderBuffer | 0) : 0;
   return /*#__PURE__*/React.createElement(Popup, {
     visible: visible,
@@ -255,7 +262,11 @@ const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
     safeAreaInsetTop: safeAreaInsetTop,
     safeAreaInsetBottom: safeAreaInsetBottom,
     overlayTestID: "rv-image-preview-overlay",
-    style: styles.popup,
+    style: [styles.popup, {
+      backgroundColor: colors.transparent,
+      padding: layout.popupPadding,
+      borderRadius: layout.popupRadius
+    }],
     beforeClose: handlePopupBeforeClose,
     onClose: handlePopupClose,
     onClosed: onClosed
@@ -300,8 +311,6 @@ ImagePreview.displayName = 'ImagePreview';
 export default ImagePreview;
 const styles = StyleSheet.create({
   popup: {
-    padding: 0,
-    borderRadius: 0,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -310,8 +319,7 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     maxWidth: '100%',
-    maxHeight: '100%',
-    backgroundColor: 'transparent'
+    maxHeight: '100%'
   },
   content: {
     flex: 1
@@ -344,19 +352,13 @@ const styles = StyleSheet.create({
   },
   index: {
     position: 'absolute',
-    top: 24,
     left: 0,
     right: 0,
     alignItems: 'center',
     zIndex: 1
   },
-  indexBadge: {
-    borderRadius: 999,
-    paddingHorizontal: 12,
-    paddingVertical: 4
-  },
+  indexBadge: {},
   indexText: {
-    fontSize: 14,
     fontWeight: '500'
   }
 });

package/dist/es/components/image-preview/tokens.js

@@ -1,7 +1,10 @@
 import { createComponentTokensHook } from '../../design-system';
 const createTokens = foundations => {
   const {
-    palette
+    palette,
+    radii,
+    fontSize,
+    spacing
   } = foundations;
   return {
     colors: {
@@ -9,7 +12,23 @@ const createTokens = foundations => {
       indexBackground: 'rgba(0,0,0,0.35)',
       indexText: '#fff',
       indicatorActive: palette.primary?.[500] ?? '#1989fa',
-      indicatorInactive: 'rgba(255,255,255,0.4)'
+      indicatorInactive: 'rgba(255,255,255,0.4)',
+      transparent: 'transparent'
+    },
+    spacing: {
+      indexTop: 24,
+      indexPaddingHorizontal: spacing.lg,
+      indexPaddingVertical: spacing.xs
+    },
+    layout: {
+      popupPadding: 0,
+      popupRadius: 0
+    },
+    radii: {
+      indexBadge: radii.pill
+    },
+    typography: {
+      indexTextSize: fontSize.sm
     }
   };
 };

package/dist/es/components/index-bar/IndexAnchor.js

@@ -17,7 +17,8 @@ const IndexAnchor = props => {
   } = props;
   const {
     colors,
-    layout
+    layout,
+    typography
   } = useIndexBarTokens(tokensOverride);
   const textColor = active && highlightColor ? highlightColor : colors.anchorText;
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
@@ -29,11 +30,13 @@ const IndexAnchor = props => {
   }), /*#__PURE__*/React.createElement(View, {
     style: [styles.header, {
       height: layout.anchorHeight,
-      backgroundColor: colors.anchorBackground
+      backgroundColor: colors.anchorBackground,
+      paddingHorizontal: layout.anchorPaddingHorizontal
     }]
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.title, {
-      color: textColor
+      color: textColor,
+      fontSize: typography.anchorTitleSize
     }]
   }, title ?? index)), children);
 };
@@ -42,11 +45,9 @@ const styles = StyleSheet.create({
     width: '100%'
   },
   header: {
-    justifyContent: 'center',
-    paddingHorizontal: 16
+    justifyContent: 'center'
   },
   title: {
-    fontSize: 14,
     fontWeight: '600'
   }
 });

package/dist/es/components/index-bar/IndexBar.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, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { isFiniteNumber, isUndefined } from '../../utils/validate';
@@ -28,7 +28,8 @@ const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const {
     colors,
-    layout
+    layout,
+    typography
   } = useIndexBarTokens(tokensOverride);
   const scrollRef = useRef(null);
   const scrollYRef = useRef(0);
@@ -44,12 +45,8 @@ const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [indicator, setIndicator] = useState({
     visible: false
   });
-  const anchors = useMemo(() => {
-    return React.Children.toArray(children).filter(React.isValidElement);
-  }, [children]);
-  const navItems = useMemo(() => {
-    return indexList?.length ? indexList : anchors.map(anchor => anchor.props.index);
-  }, [anchors, indexList]);
+  const anchors = React.Children.toArray(children).filter(React.isValidElement);
+  const navItems = indexList?.length ? indexList : anchors.map(anchor => anchor.props.index);
   const firstIndex = navItems[0];
   const [activeIndex, setActiveIndex] = useControllableValue(props, {
     defaultValue: isUndefined(firstIndex) ? anchors[0]?.props.index : firstIndex,
@@ -221,35 +218,35 @@ const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
   const stickyNode = sticky && stickyVisible && activeAnchor ? /*#__PURE__*/React.createElement(View, {
     style: [styles.sticky, {
       backgroundColor: colors.stickyBackground,
-      height: layout.stickyHeight
+      height: layout.stickyHeight,
+      paddingHorizontal: layout.stickyPaddingHorizontal
     }]
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.stickyText, {
-      color: highlight
+      color: highlight,
+      fontSize: typography.stickyTextSize
     }]
   }, activeAnchor.props.title ?? activeAnchor.props.index)) : null;
   const indicatorSize = layout.indicatorSize;
-  const indicatorNode = useMemo(() => {
-    if (!showIndicator || !indicator.visible) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      style: [styles.indicator, {
-        width: indicatorSize,
-        height: indicatorSize,
-        borderRadius: indicatorSize / 2,
-        backgroundColor: colors.indicatorBackground,
-        zIndex,
-        transform: [{
-          translateX: -indicatorSize / 2
-        }, {
-          translateY: -indicatorSize / 2
-        }]
-      }, indicatorStyle]
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: [styles.indicatorText, {
-        color: colors.indicatorText
+  const indicatorNode = !showIndicator || !indicator.visible ? null : /*#__PURE__*/React.createElement(View, {
+    style: [styles.indicator, {
+      width: indicatorSize,
+      height: indicatorSize,
+      borderRadius: indicatorSize / 2,
+      backgroundColor: colors.indicatorBackground,
+      zIndex,
+      transform: [{
+        translateX: -indicatorSize / 2
+      }, {
+        translateY: -indicatorSize / 2
       }]
-    }, indicator.label));
-  }, [colors.indicatorBackground, colors.indicatorText, indicator.label, indicator.visible, indicatorSize, indicatorStyle, showIndicator, zIndex]);
+    }, indicatorStyle]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.indicatorText, {
+      color: colors.indicatorText,
+      fontSize: typography.indicatorTextSize
+    }]
+  }, indicator.label));
   const pickIndexFromEvent = useCallback(evt => {
     if (!navItems.length) return null;
     const locationY = evt?.nativeEvent?.locationY;
@@ -318,12 +315,12 @@ const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = e.nativeEvent.layout;
     indexListHeightRef.current = height;
   }, []);
-  const anchorNodes = useMemo(() => anchors.map(anchor => /*#__PURE__*/React.cloneElement(anchor, {
+  const anchorNodes = anchors.map(anchor => /*#__PURE__*/React.cloneElement(anchor, {
     key: anchor.key ?? anchor.props.index,
     active: anchor.props.index === displayIndex,
     highlightColor: highlight,
     onLayoutCapture: handleAnchorLayout
-  })), [anchors, displayIndex, handleAnchorLayout, highlight]);
+  }));
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     style: [styles.container, style]
   }), /*#__PURE__*/React.createElement(ScrollView, {
@@ -338,6 +335,7 @@ const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
     style: [styles.indexList, {
       width: layout.indexWidth,
       paddingVertical: layout.paddingVertical,
+      paddingHorizontal: layout.indexListPaddingHorizontal,
       zIndex
     }],
     onLayout: handleIndexListLayout,
@@ -356,7 +354,10 @@ const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
     return /*#__PURE__*/React.createElement(Pressable, {
       key: String(item),
       testID: `rv-indexbar-nav-${String(item)}`,
-      style: styles.indexItem,
+      style: [styles.indexItem, {
+        paddingVertical: layout.indexItemPaddingVertical,
+        paddingHorizontal: layout.indexItemPaddingHorizontal
+      }],
       hitSlop: layout.spacing,
       onLayout: event => handleIndexItemLayout(item, event),
       onPress: () => handlePressIn(item),
@@ -364,7 +365,8 @@ const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
       onPressOut: handlePressOut
     }, node ?? /*#__PURE__*/React.createElement(Text, {
       style: [styles.indexText, {
-        color: isActive ? highlight : colors.text
+        color: isActive ? highlight : colors.text,
+        fontSize: typography.indexTextSize
       }, indexTextStyle]
     }, String(item)));
   })), indicatorNode);
@@ -379,19 +381,14 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 2
+    alignItems: 'center'
   },
   indexItem: {
-    paddingVertical: 1,
-    paddingHorizontal: 0,
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center'
   },
-  indexText: {
-    fontSize: 12
-  },
+  indexText: {},
   indicator: {
     position: 'absolute',
     left: '50%',
@@ -401,7 +398,6 @@ const styles = StyleSheet.create({
     pointerEvents: 'none'
   },
   indicatorText: {
-    fontSize: 18,
     fontWeight: '600'
   },
   stickyWrapper: {
@@ -411,11 +407,9 @@ const styles = StyleSheet.create({
     right: 0
   },
   sticky: {
-    justifyContent: 'center',
-    paddingHorizontal: 16
+    justifyContent: 'center'
   },
   stickyText: {
-    fontSize: 14,
     fontWeight: '600'
   }
 });

package/dist/es/components/index-bar/tokens.js

@@ -2,28 +2,37 @@ import { createComponentTokensHook } from '../../design-system';
 const createTokens = foundations => {
   const {
     palette,
+    fontSize,
     spacing
   } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     colors: {
       text: palette.default[600],
       activeText: palette.primary[600],
-      indicatorBackground: 'rgba(0,0,0,0.6)',
-      indicatorText: onPrimary,
-      stickyBackground: '#ffffff',
-      stickyText: palette.default[900],
-      anchorBackground: '#ffffff',
-      anchorText: palette.default[900],
-      border: palette.default[200]
+      indicatorBackground: palette.primary[500],
+      indicatorText: palette.primary.foreground ?? '#ffffff',
+      stickyBackground: palette.default[50],
+      anchorBackground: palette.default[50],
+      anchorText: palette.default[800]
     },
     layout: {
-      indexWidth: 24,
-      indicatorSize: 60,
-      stickyHeight: 32,
+      indexWidth: 28,
       paddingVertical: spacing.sm,
-      spacing: 4,
-      anchorHeight: 32
+      indexListPaddingHorizontal: spacing.xxs,
+      indexItemPaddingVertical: spacing.xxs,
+      indexItemPaddingHorizontal: spacing.xxs,
+      spacing: spacing.xs,
+      indicatorSize: 48,
+      stickyHeight: 32,
+      stickyPaddingHorizontal: spacing.md,
+      anchorHeight: 32,
+      anchorPaddingHorizontal: spacing.md
+    },
+    typography: {
+      indexTextSize: fontSize.xs,
+      indicatorTextSize: fontSize.lg,
+      stickyTextSize: fontSize.md,
+      anchorTitleSize: fontSize.sm
     }
   };
 };