react-native-system-ui 0.0.3 → 0.0.4

package/dist/cjs/components/image-preview/ImagePreview.js

@@ -75,7 +75,11 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     beforeClose
   } = props;
   const {
-    colors
+    colors,
+    layout,
+    radii,
+    typography,
+    spacing
   } = (0, _tokens.useImagePreviewTokens)(tokensOverride);
   const swiperRef = (0, _react().useRef)(null);
   const popupCloseReason = (0, _react().useRef)('close');
@@ -96,9 +100,9 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     beforeClose,
     onClose
   };
-  const resolvedImages = (0, _react().useMemo)(() => images.map(img => (0, _validate.isString)(img) ? {
+  const resolvedImages = images.map(img => (0, _validate.isString)(img) ? {
     uri: img
-  } : img), [images]);
+  } : img);
   (0, _react().useEffect)(() => {
     setActive(current => clampIndex(current, imagesLen));
   }, [imagesLen]);
@@ -196,67 +200,70 @@ const ImagePreview = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     if (dx * dx + dy * dy >= TAP_MOVE_THRESHOLD_SQ) return;
     handleImagePress();
   }, [handleImagePress, resetTap]);
-  const pressableHandlers = (0, _react().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 = (0, _react().useCallback)((current, total) => {
     if (!showIndex || total === 0) return null;
     const indexText = `${current + 1} / ${total}`;
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.index,
+      style: [styles.index, {
+        top: spacing.indexTop
+      }],
       testID: "rv-image-preview-index"
     }, /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().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().default.createElement(_popup.default, {
     visible: visible,
@@ -275,7 +282,11 @@ const ImagePreview = /*#__PURE__*/_react().default.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
@@ -320,8 +331,6 @@ ImagePreview.displayName = 'ImagePreview';
 var _default = exports.default = ImagePreview;
 const styles = _reactNative().StyleSheet.create({
   popup: {
-    padding: 0,
-    borderRadius: 0,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -330,8 +339,7 @@ const styles = _reactNative().StyleSheet.create({
     width: '100%',
     height: '100%',
     maxWidth: '100%',
-    maxHeight: '100%',
-    backgroundColor: 'transparent'
+    maxHeight: '100%'
   },
   content: {
     flex: 1
@@ -364,19 +372,13 @@ const styles = _reactNative().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/cjs/components/image-preview/tokens.js

@@ -7,7 +7,10 @@ exports.useImagePreviewTokens = void 0;
 var _designSystem = require("../../design-system");
 const createTokens = foundations => {
   const {
-    palette
+    palette,
+    radii,
+    fontSize,
+    spacing
   } = foundations;
   return {
     colors: {
@@ -15,7 +18,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/cjs/components/index-bar/IndexAnchor.js

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

package/dist/cjs/components/index-bar/IndexBar.js

@@ -47,7 +47,8 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   } = props;
   const {
     colors,
-    layout
+    layout,
+    typography
   } = (0, _tokens.useIndexBarTokens)(tokensOverride);
   const scrollRef = (0, _react().useRef)(null);
   const scrollYRef = (0, _react().useRef)(0);
@@ -63,12 +64,8 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const [indicator, setIndicator] = (0, _react().useState)({
     visible: false
   });
-  const anchors = (0, _react().useMemo)(() => {
-    return _react().default.Children.toArray(children).filter(_react().default.isValidElement);
-  }, [children]);
-  const navItems = (0, _react().useMemo)(() => {
-    return indexList?.length ? indexList : anchors.map(anchor => anchor.props.index);
-  }, [anchors, indexList]);
+  const anchors = _react().default.Children.toArray(children).filter(_react().default.isValidElement);
+  const navItems = indexList?.length ? indexList : anchors.map(anchor => anchor.props.index);
   const firstIndex = navItems[0];
   const [activeIndex, setActiveIndex] = (0, _hooks.useControllableValue)(props, {
     defaultValue: (0, _validate.isUndefined)(firstIndex) ? anchors[0]?.props.index : firstIndex,
@@ -240,35 +237,35 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const stickyNode = sticky && stickyVisible && activeAnchor ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.sticky, {
       backgroundColor: colors.stickyBackground,
-      height: layout.stickyHeight
+      height: layout.stickyHeight,
+      paddingHorizontal: layout.stickyPaddingHorizontal
     }]
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.stickyText, {
-      color: highlight
+      color: highlight,
+      fontSize: typography.stickyTextSize
     }]
   }, activeAnchor.props.title ?? activeAnchor.props.index)) : null;
   const indicatorSize = layout.indicatorSize;
-  const indicatorNode = (0, _react().useMemo)(() => {
-    if (!showIndicator || !indicator.visible) return null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().Text, {
-      style: [styles.indicatorText, {
-        color: colors.indicatorText
+  const indicatorNode = !showIndicator || !indicator.visible ? null : /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().Text, {
+    style: [styles.indicatorText, {
+      color: colors.indicatorText,
+      fontSize: typography.indicatorTextSize
+    }]
+  }, indicator.label));
   const pickIndexFromEvent = (0, _react().useCallback)(evt => {
     if (!navItems.length) return null;
     const locationY = evt?.nativeEvent?.locationY;
@@ -337,12 +334,12 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     } = e.nativeEvent.layout;
     indexListHeightRef.current = height;
   }, []);
-  const anchorNodes = (0, _react().useMemo)(() => anchors.map(anchor => /*#__PURE__*/_react().default.cloneElement(anchor, {
+  const anchorNodes = anchors.map(anchor => /*#__PURE__*/_react().default.cloneElement(anchor, {
     key: anchor.key ?? anchor.props.index,
     active: anchor.props.index === displayIndex,
     highlightColor: highlight,
     onLayoutCapture: handleAnchorLayout
-  })), [anchors, displayIndex, handleAnchorLayout, highlight]);
+  }));
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
     style: [styles.container, style]
   }), /*#__PURE__*/_react().default.createElement(_reactNative().ScrollView, {
@@ -357,6 +354,7 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     style: [styles.indexList, {
       width: layout.indexWidth,
       paddingVertical: layout.paddingVertical,
+      paddingHorizontal: layout.indexListPaddingHorizontal,
       zIndex
     }],
     onLayout: handleIndexListLayout,
@@ -375,7 +373,10 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     return /*#__PURE__*/_react().default.createElement(_reactNative().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),
@@ -383,7 +384,8 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       onPressOut: handlePressOut
     }, node ?? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: [styles.indexText, {
-        color: isActive ? highlight : colors.text
+        color: isActive ? highlight : colors.text,
+        fontSize: typography.indexTextSize
       }, indexTextStyle]
     }, String(item)));
   })), indicatorNode);
@@ -398,19 +400,14 @@ const styles = _reactNative().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%',
@@ -420,7 +417,6 @@ const styles = _reactNative().StyleSheet.create({
     pointerEvents: 'none'
   },
   indicatorText: {
-    fontSize: 18,
     fontWeight: '600'
   },
   stickyWrapper: {
@@ -430,11 +426,9 @@ const styles = _reactNative().StyleSheet.create({
     right: 0
   },
   sticky: {
-    justifyContent: 'center',
-    paddingHorizontal: 16
+    justifyContent: 'center'
   },
   stickyText: {
-    fontSize: 14,
     fontWeight: '600'
   }
 });

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

@@ -8,28 +8,37 @@ var _designSystem = require("../../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
     }
   };
 };