react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/{image-preview → 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

@@ -0,0 +1,35 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    radii,
+    fontSize,
+    spacing
+  } = foundations;
+  return {
+    colors: {
+      background: 'rgba(0,0,0,0.95)',
+      indexBackground: 'rgba(0,0,0,0.35)',
+      indexText: '#fff',
+      indicatorActive: palette.primary?.[500] ?? '#1989fa',
+      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
+    }
+  };
+};
+export const useImagePreviewTokens = createComponentTokensHook('imagePreview', createTokens);

package/dist/es/{index-bar → 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/{index-bar → components/index-bar}/IndexBar.js

@@ -1,8 +1,9 @@
 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 { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+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';
+import { SafeAreaView } from '../safe-area-view';
 import { useIndexBarTokens } from './tokens';
 const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -27,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);
@@ -43,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,
@@ -220,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;
@@ -317,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, {
@@ -337,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,
@@ -355,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),
@@ -363,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);
@@ -378,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%',
@@ -400,7 +398,6 @@ const styles = StyleSheet.create({
     pointerEvents: 'none'
   },
   indicatorText: {
-    fontSize: 18,
     fontWeight: '600'
   },
   stickyWrapper: {
@@ -410,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

@@ -0,0 +1,39 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    fontSize,
+    spacing
+  } = foundations;
+  return {
+    colors: {
+      text: palette.default[600],
+      activeText: palette.primary[600],
+      indicatorBackground: palette.primary[500],
+      indicatorText: palette.primary.foreground ?? '#ffffff',
+      stickyBackground: palette.default[50],
+      anchorBackground: palette.default[50],
+      anchorText: palette.default[800]
+    },
+    layout: {
+      indexWidth: 28,
+      paddingVertical: spacing.sm,
+      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
+    }
+  };
+};
+export const useIndexBarTokens = createComponentTokensHook('indexBar', createTokens);

package/dist/es/components/index.js

@@ -0,0 +1,123 @@
+export { default as Button } from './button';
+export { useButtonTokens } from './button/tokens';
+export { default as Cell } from './cell';
+export { useCellTokens } from './cell/tokens';
+export { CellGroup } from './cell';
+export { default as Flex } from './flex';
+export { useFlexTokens } from './flex/tokens';
+export { default as Space } from './space';
+export { useSpaceTokens } from './space/tokens';
+export { default as Divider } from './divider';
+export { useDividerTokens } from './divider/tokens';
+export { default as Tag } from './tag';
+export { useTagTokens } from './tag/tokens';
+export { Checkbox } from './checkbox';
+export { CheckboxGroup } from './checkbox';
+export { useCheckboxTokens } from './checkbox/tokens';
+export { Radio } from './radio';
+export { RadioGroup } from './radio';
+export { useRadioTokens } from './radio/tokens';
+export { default as Field } from './field';
+export { FieldGroup } from './field';
+export { useFieldTokens } from './field/tokens';
+export { default as Input } from './input';
+export { useInputTokens } from './input/tokens';
+export { default as Form } from './form';
+export { default as Switch } from './switch';
+export { useSwitchTokens } from './switch/tokens';
+export { default as Badge } from './badge';
+export { useBadgeTokens } from './badge/tokens';
+export { default as Avatar } from './avatar';
+export { useAvatarTokens } from './avatar/tokens';
+export { default as Grid } from './grid';
+export { useGridTokens } from './grid/tokens';
+export { default as Typography } from './typography';
+export { useTypographyTokens } from './typography/tokens';
+export { default as Loading } from './loading';
+export { useLoadingTokens } from './loading/tokens';
+export { default as Empty } from './empty';
+export { useEmptyTokens } from './empty/tokens';
+export { default as Image } from './image';
+export { useImageTokens } from './image';
+export { default as Progress } from './progress';
+export { useProgressTokens } from './progress/tokens';
+export { default as Circle } from './circle';
+export { useCircleTokens } from './circle/tokens';
+export { default as NoticeBar } from './notice-bar';
+export { useNoticeBarTokens } from './notice-bar/tokens';
+export { default as Slider } from './slider';
+export { useSliderTokens } from './slider/tokens';
+export { default as Stepper } from './stepper';
+export { useStepperTokens } from './stepper/tokens';
+export { default as Rate } from './rate';
+export { useRateTokens } from './rate/tokens';
+export { default as Selector } from './selector';
+export { useSelectorTokens } from './selector/tokens';
+export { default as Search } from './search';
+export { useSearchTokens } from './search/tokens';
+export { default as PasswordInput } from './password-input';
+export { default as Picker } from './picker';
+export { usePickerTokens } from './picker/tokens';
+export { default as NumberKeyboard } from './number-keyboard';
+export { useNumberKeyboardTokens } from './number-keyboard/tokens';
+export { default as Collapse } from './collapse';
+export { useCollapseTokens } from './collapse/tokens';
+export { default as Popup } from './popup';
+export { usePopupTokens } from './popup/tokens';
+export { default as Overlay } from './overlay';
+export { useOverlayTokens } from './overlay/tokens';
+export { default as Dialog } from './dialog';
+export { useDialogTokens } from './dialog/tokens';
+export { default as Toast } from './toast';
+export { useToastTokens } from './toast/tokens';
+export { default as Notify } from './notify';
+export { useNotifyTokens } from './notify/tokens';
+export { Portal } from './portal';
+export { PortalHost } from './portal';
+export { SafeAreaView } from './safe-area-view';
+export { ConfigProvider } from './config-provider';
+export { useLocale } from './config-provider';
+export { zhCN } from './config-provider';
+export { enUS } from './config-provider';
+export { default as DatetimePicker } from './datetime-picker';
+export { default as Calendar } from './calendar';
+export { useCalendarTokens } from './calendar/tokens';
+export { default as Cascader } from './cascader';
+export { useCascaderTokens } from './cascader/tokens';
+export { default as Tabs } from './tabs';
+export { useTabsTokens } from './tabs/tokens';
+export { default as Tabbar } from './tabbar';
+export { useTabbarTokens } from './tabbar/tokens';
+export { default as NavBar } from './nav-bar';
+export { useNavBarTokens } from './nav-bar/tokens';
+export { default as Sidebar } from './sidebar';
+export { useSidebarTokens } from './sidebar/tokens';
+export { default as IndexBar } from './index-bar';
+export { useIndexBarTokens } from './index-bar/tokens';
+export { default as ActionSheet } from './action-sheet';
+export { useActionSheetTokens } from './action-sheet/tokens';
+export { default as ShareSheet } from './share-sheet';
+export { useShareSheetTokens } from './share-sheet/tokens';
+export { default as DropdownMenu } from './dropdown-menu';
+export { useDropdownMenuTokens } from './dropdown-menu/tokens';
+export { default as Area } from './area';
+export { default as List } from './list';
+export { useListTokens } from './list/tokens';
+export { default as PullRefresh } from './pull-refresh';
+export { usePullRefreshTokens } from './pull-refresh/tokens';
+export { default as ImagePreview } from './image-preview';
+export { useImagePreviewTokens } from './image-preview/tokens';
+export { default as Swiper } from './swiper';
+export { SwiperItem } from './swiper';
+export { SwiperPagIndicator } from './swiper';
+export { useSwiperPagIndicatorTokens } from './swiper';
+export { default as Uploader } from './uploader';
+export { useUploaderTokens } from './uploader';
+export { default as Skeleton } from './skeleton';
+export { useSkeletonTokens } from './skeleton';
+export { default as CountDown } from './count-down';
+export { useCountDownTokens } from './count-down/tokens';
+export { default as WaterMark } from './water-mark';
+export { useWaterMarkTokens } from './water-mark/tokens';
+export { default as Pagination } from './pagination';
+export { usePaginationTokens } from './pagination/tokens';

package/dist/es/{input → components/input}/Input.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, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useRef } from 'react';
 import { isBoolean, isFiniteNumber } from '../../utils/validate';
 import Field from '../field';
 import { useFieldTokens } from '../field/tokens';
@@ -33,14 +33,14 @@ const InputComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
       return inputRef.current?.nativeElement ?? null;
     }
   }), []);
-  const resolvedInputAlign = useMemo(() => align ?? inputAlignProp ?? tokens.defaults.inputAlign, [align, inputAlignProp, tokens.defaults.inputAlign]);
-  const resolvedClearTrigger = useMemo(() => clearTriggerOverride ?? tokens.defaults.clearTrigger, [clearTriggerOverride, tokens.defaults.clearTrigger]);
-  const resolvedKeyboardType = useMemo(() => keyboardTypeProp ?? (type === 'number' ? 'decimal-pad' : undefined), [keyboardTypeProp, type]);
-  const fieldStyle = useMemo(() => [{
+  const resolvedInputAlign = align ?? inputAlignProp ?? tokens.defaults.inputAlign;
+  const resolvedClearTrigger = clearTriggerOverride ?? tokens.defaults.clearTrigger;
+  const resolvedKeyboardType = keyboardTypeProp ?? (type === 'number' ? 'decimal-pad' : undefined);
+  const fieldStyle = [{
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
     backgroundColor: tokens.colors.background
-  }, style], [style, tokens.colors.background, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
+  }, style];
   return /*#__PURE__*/React.createElement(Field, _extends({
     ref: inputRef
   }, rest, {
@@ -67,17 +67,14 @@ const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (!isFiniteNumber(height) || height <= 0) return undefined;
     return Math.max(1, Math.round(height / lineHeight));
   }, [lineHeight]);
-  const resolvedAutoSize = useMemo(() => {
-    if (!autoSize || isBoolean(autoSize)) {
-      return autoSize;
-    }
+  const resolvedAutoSize = !autoSize || isBoolean(autoSize) ? autoSize : (() => {
     const minRows = toRows(autoSize.minHeight);
     const maxRows = toRows(autoSize.maxHeight);
     return minRows || maxRows ? {
       minRows,
       maxRows
     } : undefined;
-  }, [autoSize, toRows]);
+  })();
   return /*#__PURE__*/React.createElement(InputComponent, _extends({
     ref: ref
   }, rest, {