react-native-system-ui 0.0.3 → 0.0.4

package/dist/es/components/typography/Typography.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, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Linking, Text, View } from 'react-native';
 import { isBoolean, isNumber, isPlainObject } from '../../utils';
 import { isWeb as isWebPlatform } from '../../platform';
@@ -54,21 +54,18 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   const fontSize = level ? tokens.sizing.titles[level].fontSize : tokens.sizing.sizes[size];
   const lineHeight = level ? tokens.sizing.titles[level].lineHeight : fontSize * tokens.sizing.lineHeightMultiplier;
-  const baseStyle = useMemo(() => {
-    const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
-    const computedStyle = {
-      color: resolvedColor,
-      fontSize,
-      lineHeight,
-      fontFamily: tokens.typography.fontFamily,
-      fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
-      includeFontPadding: false,
-      textDecorationLine,
-      textAlign: center ? 'center' : undefined,
-      opacity: disabled ? tokens.opacity.disabled : 1
-    };
-    return [computedStyle, style];
-  }, [resolvedColor, fontSize, lineHeight, tokens.typography.fontFamily, tokens.opacity.disabled, tokens.typography.weight.regular, tokens.typography.weight.strong, strong, center, disabled, underline, deleted, style]);
+  const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
+  const baseStyle = [{
+    color: resolvedColor,
+    fontSize,
+    lineHeight,
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
+    includeFontPadding: false,
+    textDecorationLine,
+    textAlign: center ? 'center' : undefined,
+    opacity: disabled ? tokens.opacity.disabled : 1
+  }, style];
   const hasActionText = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
   const shouldShowAction = hasActionText && (isTruncated || expanded || isWeb);
   const handleToggleEllipsis = useCallback(() => {
@@ -79,21 +76,15 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
       return next;
     });
   }, [ellipsisConfig]);
-  const actionLabel = useMemo(() => {
-    if (!ellipsisConfig) return undefined;
-    return expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
-  }, [ellipsisConfig, expanded]);
-  const actionTextStyle = useMemo(() => ({
+  const actionLabel = !ellipsisConfig ? undefined : expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
+  const actionTextStyle = {
     color: tokens.colors.primary,
     fontSize: tokens.sizing.sizes.sm,
     fontWeight: tokens.typography.weight.medium,
     marginLeft: tokens.sizing.actionMarginLeft,
     includeFontPadding: false
-  }), [tokens.colors.primary, tokens.sizing.sizes.sm, tokens.typography.weight.medium, tokens.sizing.actionMarginLeft]);
-  const textStyle = useMemo(() => {
-    if (!shouldShowAction) return baseStyle;
-    return [baseStyle, FLEX_SHRINK_STYLE];
-  }, [shouldShowAction, baseStyle]);
+  };
+  const textStyle = shouldShowAction ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
   const textNode = /*#__PURE__*/React.createElement(Text, _extends({
     ref: ref,
     style: textStyle,
@@ -151,11 +142,7 @@ const TypographyLink = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (href) {
       try {
         await Linking.openURL(href);
-      } catch (error) {
-        if (typeof __DEV__ !== 'undefined' && __DEV__) {
-          console.warn('[Typography.Link] Failed to open url', error);
-        }
-      }
+      } catch {}
     }
   }, [onPress, href]);
   return /*#__PURE__*/React.createElement(TypographyTextBase, _extends({

package/dist/es/components/uploader/Uploader.js

@@ -258,9 +258,7 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (available <= 0) return prev;
         return [...prev, ...next.slice(0, available).map(item => normalizeItem(item))];
       });
-    }).catch(error => {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.warn('[Uploader] onUpload rejected:', error);
-    });
+    }).catch(() => {});
   };
   const closeImagePreview = () => setPreviewVisible(false);
   useImperativeHandle(ref, () => ({
@@ -306,7 +304,7 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const renderStatus = status => {
     if (!status) return null;
-    const baseStyle = [styles.status, {
+    const baseStyle = [statusStyle, {
       backgroundColor: tokens.colors.maskBackground
     }];
     if (status === 'pending') {
@@ -317,7 +315,8 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
         color: tokens.colors.maskText
       }), /*#__PURE__*/React.createElement(Text, {
         style: [styles.statusText, {
-          color: tokens.colors.maskText
+          color: tokens.colors.maskText,
+          fontSize: tokens.typography.statusTextSize
         }]
       }, statusTextRender?.(status) ?? statusDefaults.pending));
     }
@@ -327,7 +326,8 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
         testID: "rv-uploader-status-failed"
       }, /*#__PURE__*/React.createElement(Text, {
         style: [styles.statusText, {
-          color: tokens.colors.failed
+          color: tokens.colors.failed,
+          fontSize: tokens.typography.statusTextSize
         }]
       }, statusTextRender?.(status) ?? statusDefaults.failed));
     }
@@ -344,19 +344,38 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     backgroundColor: tokens.colors.background,
     borderColor: tokens.colors.border
   };
+  const placeholderStyle = [styles.placeholder, {
+    paddingHorizontal: tokens.spacing.placeholderPaddingHorizontal
+  }];
   const placeholderNameStyle = [styles.placeholderName, {
-    color: tokens.colors.text
+    color: tokens.colors.text,
+    fontSize: tokens.typography.placeholderNameSize,
+    marginTop: tokens.spacing.placeholderNameMarginTop
   }];
   const deleteStyle = [styles.delete, {
-    backgroundColor: tokens.colors.deleteBackground
+    backgroundColor: tokens.colors.deleteBackground,
+    borderRadius: tokens.radii.deleteButton,
+    top: tokens.spacing.deleteOffset,
+    right: tokens.spacing.deleteOffset,
+    minWidth: tokens.sizing.deleteMinSize,
+    minHeight: tokens.sizing.deleteMinSize,
+    paddingHorizontal: tokens.spacing.deletePaddingHorizontal
   }];
   const deleteIconStyle = {
     color: tokens.colors.deleteIcon
   };
+  const statusStyle = [styles.status, {
+    gap: tokens.spacing.statusGap
+  }];
+  const uploadContentStyle = [styles.uploadContent, {
+    gap: tokens.spacing.uploadContentGap
+  }];
   const renderPlaceholder = name => /*#__PURE__*/React.createElement(View, {
-    style: styles.placeholder
+    style: placeholderStyle
   }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.placeholderIcon
+    style: [styles.placeholderIcon, {
+      fontSize: tokens.typography.placeholderIconSize
+    }]
   }, "FILE"), name && /*#__PURE__*/React.createElement(Text, {
     style: placeholderNameStyle,
     numberOfLines: 1
@@ -394,7 +413,9 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, /*#__PURE__*/React.createElement(Pressable, {
       style: ({
         pressed
-      }) => [styles.preview, frameStyle, pressed && styles.pressed],
+      }) => [styles.preview, frameStyle, pressed && {
+        opacity: tokens.opacity.pressed
+      }],
       onPress: () => handlePreview(item, index),
       testID: `rv-uploader-preview-${index}`
     }, source ? /*#__PURE__*/React.createElement(Image, {
@@ -424,19 +445,25 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, renderDelete(() => removeTask(task.id), `rv-uploader-task-delete-${task.id}`)))))) : null, canShowUpload ? /*#__PURE__*/React.createElement(Pressable, {
     style: ({
       pressed
-    }) => [styles.upload, boxStyle, frameStyle, pressed && styles.pressed, uploadDisabled && styles.disabled],
+    }) => [styles.upload, boxStyle, frameStyle, pressed && {
+      opacity: tokens.opacity.pressed
+    }, uploadDisabled && {
+      opacity: tokens.opacity.disabled
+    }],
     onPress: handleUploadPress,
     disabled: uploadDisabled,
     testID: "rv-uploader-upload"
   }, children ?? /*#__PURE__*/React.createElement(View, {
-    style: styles.uploadContent
+    style: uploadContentStyle
   }, uploadIcon ?? /*#__PURE__*/React.createElement(Text, {
     style: [styles.uploadIcon, {
-      color: tokens.colors.icon
+      color: tokens.colors.icon,
+      fontSize: tokens.typography.uploadIconSize
     }]
   }, "+"), uploadText ? /*#__PURE__*/React.createElement(Text, {
     style: [styles.uploadText, {
-      color: tokens.colors.text
+      color: tokens.colors.text,
+      fontSize: tokens.typography.uploadTextSize
     }]
   }, uploadText) : null)) : null), previewFullImage ? /*#__PURE__*/React.createElement(ImagePreview, _extends({}, previewOptions, {
     visible: previewVisible,
@@ -463,12 +490,6 @@ const styles = StyleSheet.create({
     borderWidth: StyleSheet.hairlineWidth,
     overflow: 'hidden'
   },
-  pressed: {
-    opacity: 0.85
-  },
-  disabled: {
-    opacity: 0.65
-  },
   image: {
     width: '100%',
     height: '100%'
@@ -476,17 +497,12 @@ const styles = StyleSheet.create({
   placeholder: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 6
+    alignItems: 'center'
   },
   placeholderIcon: {
-    fontSize: 20,
     fontWeight: '600'
   },
-  placeholderName: {
-    marginTop: 6,
-    fontSize: 11
-  },
+  placeholderName: {},
   cover: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
@@ -495,22 +511,13 @@ const styles = StyleSheet.create({
   status: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
-    alignItems: 'center',
-    gap: 4
-  },
-  statusText: {
-    fontSize: 12
+    alignItems: 'center'
   },
+  statusText: {},
   delete: {
     position: 'absolute',
-    top: 4,
-    right: 4,
-    minWidth: 20,
-    minHeight: 20,
-    borderRadius: 12,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 4
+    alignItems: 'center'
   },
   upload: {
     borderWidth: StyleSheet.hairlineWidth,
@@ -519,16 +526,12 @@ const styles = StyleSheet.create({
   },
   uploadContent: {
     justifyContent: 'center',
-    alignItems: 'center',
-    gap: 4
+    alignItems: 'center'
   },
   uploadIcon: {
-    fontSize: 24,
     fontWeight: '600'
   },
-  uploadText: {
-    fontSize: 12
-  }
+  uploadText: {}
 });
 Uploader.displayName = 'Uploader';
 export default Uploader;

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

@@ -3,13 +3,39 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    radii
+    radii,
+    fontSize
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     size: 80,
     gap: spacing.sm,
     radius: radii.md,
+    spacing: {
+      placeholderPaddingHorizontal: spacing.ssm,
+      placeholderNameMarginTop: spacing.ssm,
+      statusGap: spacing.xs,
+      uploadContentGap: spacing.xs,
+      deleteOffset: spacing.xs,
+      deletePaddingHorizontal: spacing.xs
+    },
+    sizing: {
+      deleteMinSize: spacing.xl
+    },
+    opacity: {
+      pressed: 0.85,
+      disabled: 0.65
+    },
+    radii: {
+      deleteButton: radii.lg
+    },
+    typography: {
+      placeholderIconSize: fontSize.xl,
+      placeholderNameSize: 11,
+      statusTextSize: fontSize.xs,
+      uploadIconSize: 24,
+      uploadTextSize: fontSize.xs
+    },
     colors: {
       background: palette.default[100],
       border: palette.default[200],

package/dist/es/components/water-mark/WaterMark.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, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Image, Text, View, useWindowDimensions } from 'react-native';
 import { isFiniteNumber, isString } from '../../utils';
 import { useWaterMarkTokens } from './tokens';
@@ -87,41 +87,41 @@ const WaterMark = props => {
       height: window.height
     });
   }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = useMemo(() => ({
+  const zIndexStyle = {
     zIndex
-  }), [zIndex]);
-  const cellStyle = useMemo(() => ({
+  };
+  const cellStyle = {
     width: cellWidth,
     height: cellHeight
-  }), [cellWidth, cellHeight]);
-  const oddRowStyle = useMemo(() => ({
+  };
+  const oddRowStyle = {
     paddingLeft: cellWidth / 2
-  }), [cellWidth]);
-  const markStyle = useMemo(() => ({
+  };
+  const markStyle = {
     width: markWidth,
     height: markHeight,
     transform: [{
       rotate: `${resolvedRotate}deg`
     }]
-  }), [markHeight, markWidth, resolvedRotate]);
-  const imageStyle = useMemo(() => ({
+  };
+  const imageStyle = {
     width: markWidth,
     height: markHeight,
     opacity: resolvedOpacity
-  }), [markHeight, markWidth, resolvedOpacity]);
-  const textBaseStyle = useMemo(() => ({
+  };
+  const textBaseStyle = {
     fontSize: normalizedFontSize,
     color: resolvedColor,
     opacity: resolvedOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
-  }), [font?.family, font?.weight, normalizedFontSize, resolvedColor, resolvedOpacity]);
-  const rowIndexes = useMemo(() => Array.from({
+  };
+  const rowIndexes = Array.from({
     length: rows
-  }, (_, i) => i), [rows]);
-  const colIndexes = useMemo(() => Array.from({
+  }, (_, i) => i);
+  const colIndexes = Array.from({
     length: cols
-  }, (_, i) => i), [cols]);
+  }, (_, i) => i);
   return /*#__PURE__*/React.createElement(View, _extends({
     pointerEvents: "none",
     style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],

package/dist/es/hooks/usePresenceAnimation.js

@@ -4,7 +4,8 @@ import { nativeDriverEnabled } from '../platform';
 export const usePresenceAnimation = (visible, {
   duration = 180,
   easing = Easing.out(Easing.cubic),
-  appear = false
+  appear = false,
+  canAnimate = true
 } = {}) => {
   const [mounted, setMounted] = useState(visible);
   const animated = useRef(new Animated.Value(visible && !appear ? 1 : 0)).current;
@@ -16,6 +17,10 @@ export const usePresenceAnimation = (visible, {
     animated.stopAnimation();
     if (visible) {
       setMounted(true);
+      if (!canAnimate) {
+        animated.setValue(0);
+        return;
+      }
       Animated.timing(animated, {
         toValue: 1,
         duration,
@@ -23,6 +28,11 @@ export const usePresenceAnimation = (visible, {
         useNativeDriver
       }).start();
     } else {
+      if (!canAnimate) {
+        animated.setValue(0);
+        setMounted(false);
+        return;
+      }
       Animated.timing(animated, {
         toValue: 0,
         duration,
@@ -33,7 +43,7 @@ export const usePresenceAnimation = (visible, {
         setMounted(false);
       });
     }
-  }, [animated, duration, easing, useNativeDriver, visible]);
+  }, [animated, canAnimate, duration, easing, useNativeDriver, visible]);
   return {
     mounted,
     animated

package/dist/types/components/dialog/tokens.d.ts

@@ -23,6 +23,7 @@ export interface DialogTokens {
         footerGap: number;
         roundFooterPadding: number;
         roundFooterGap: number;
+        closeIconPadding: number;
     };
     sizes: {
         minWidth: number;

package/dist/types/components/dropdown-menu/tokens.d.ts

@@ -9,17 +9,34 @@ export interface DropdownMenuTokens {
         mask: string;
         divider: string;
         barBackground: string;
+        transparent: string;
     };
     spacing: {
         horizontal: number;
         vertical: number;
         titlePadding: number;
+        customPanelPadding: number;
+        optionRowPaddingHorizontal: number;
+        optionRowPaddingVertical: number;
+        itemScrollablePaddingHorizontal: number;
+        arrowMarginLeft: number;
+        optionIconMarginRight: number;
+        indicatorMarginLeft: number;
+        panelPaddingHorizontal: number;
     };
     sizing: {
         barHeight: number;
         titleFontSize: number;
         titleLineHeight: number;
         panelMaxHeight: number;
+        optionFontSize: number;
+        arrowSize: number;
+        arrowBorderWidth: number;
+        arrowBorderHeight: number;
+    };
+    opacity: {
+        arrowInactive: number;
+        arrowActive: number;
     };
     shadow: {
         shadowColor: string;

package/dist/types/components/field/index.d.ts

@@ -1,7 +1,7 @@
 import Field from './Field';
 import { CellGroup as FieldGroup } from '../cell';
-export { useFieldTokens } from './tokens';
 export { FieldGroup };
 export type { FieldProps, FieldInstance, FieldType, FieldClearTrigger, FieldFormatTrigger, FieldAutosizeConfig, FieldTooltipProps, FieldShowWordLimit, FieldInputAlign, FieldControlAlign, FieldGroupProps, } from './types';
+export { useFieldTokens } from './tokens';
 export default Field;
 export { Field };

package/dist/types/components/image-preview/tokens.d.ts

@@ -5,6 +5,22 @@ export interface ImagePreviewTokens {
         indexText: string;
         indicatorActive: string;
         indicatorInactive: string;
+        transparent: string;
+    };
+    spacing: {
+        indexTop: number;
+        indexPaddingHorizontal: number;
+        indexPaddingVertical: number;
+    };
+    layout: {
+        popupPadding: number;
+        popupRadius: number;
+    };
+    radii: {
+        indexBadge: number;
+    };
+    typography: {
+        indexTextSize: number;
     };
 }
 export declare const useImagePreviewTokens: (overrides?: import("../..").DeepPartial<ImagePreviewTokens> | undefined) => ImagePreviewTokens;

package/dist/types/components/index-bar/tokens.d.ts

@@ -5,18 +5,27 @@ export interface IndexBarTokens {
         indicatorBackground: string;
         indicatorText: string;
         stickyBackground: string;
-        stickyText: string;
         anchorBackground: string;
         anchorText: string;
-        border: string;
     };
     layout: {
         indexWidth: number;
-        indicatorSize: number;
-        stickyHeight: number;
         paddingVertical: number;
+        indexListPaddingHorizontal: number;
+        indexItemPaddingVertical: number;
+        indexItemPaddingHorizontal: number;
         spacing: number;
+        indicatorSize: number;
+        stickyHeight: number;
+        stickyPaddingHorizontal: number;
         anchorHeight: number;
+        anchorPaddingHorizontal: number;
+    };
+    typography: {
+        indexTextSize: number;
+        indicatorTextSize: number;
+        stickyTextSize: number;
+        anchorTitleSize: number;
     };
 }
 export declare const useIndexBarTokens: (overrides?: import("../..").DeepPartial<IndexBarTokens> | undefined) => IndexBarTokens;