react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/{uploader → 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/{uploader → 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/{water-mark → 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/design-system/ThemeContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { defaultTokens } from './tokens';
+export const ThemeContext = /*#__PURE__*/React.createContext({
+  foundations: defaultTokens,
+  components: undefined
+});

package/dist/es/design-system/ThemeProvider.js

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { ThemeContext } from './ThemeContext';
+import { createTokens } from './tokens';
+import { isObject } from '../utils/validate';
+const isThemeTokens = value => {
+  return Boolean(isObject(value) && 'palette' in value && 'spacing' in value);
+};
+export const ThemeProvider = ({
+  value,
+  children
+}) => {
+  const resolved = useMemo(() => {
+    const foundations = isThemeTokens(value) ? value : createTokens(value?.foundations);
+    const components = !isThemeTokens(value) ? value?.components : undefined;
+    return {
+      foundations,
+      components
+    };
+  }, [value]);
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: resolved
+  }, children);
+};

package/dist/es/design-system/createComponentTokensHook.js

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { deepMerge } from '../utils/deepMerge';
+import { useTheme } from './useTheme';
+export const createComponentTokensHook = (key, createBaseTokens) => {
+  return overrides => {
+    const {
+      foundations,
+      components
+    } = useTheme();
+    const componentOverrides = components?.[key];
+    return useMemo(() => {
+      const base = createBaseTokens(foundations);
+      const merged = componentOverrides && overrides ? deepMerge(componentOverrides, overrides) : componentOverrides ?? overrides;
+      return merged ? deepMerge(base, merged) : base;
+    }, [componentOverrides, foundations, overrides]);
+  };
+};

package/dist/es/design-system/index.js

@@ -0,0 +1,6 @@
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';
+export { createComponentTokensHook } from './createComponentTokensHook';
+export { mergeTokensOverride } from './mergeTokensOverride';
+export { createTokens, defaultTokens } from './tokens';
+export { themePresets, getThemePreset } from './presets';

package/dist/es/design-system/mergeTokensOverride.js

@@ -0,0 +1,5 @@
+import { deepMerge } from '../utils/deepMerge';
+export const mergeTokensOverride = (base, override) => {
+  if (base && override) return deepMerge(base, override);
+  return base ?? override;
+};

package/dist/es/design-system/presets.js

@@ -0,0 +1,140 @@
+import { createTokens, defaultTokens } from './tokens';
+const darkOverrides = {
+  palette: {
+    default: {
+      50: '#05070b',
+      100: '#0b0f16',
+      200: '#131a23',
+      300: '#1c2632',
+      400: '#263342',
+      500: '#35455a',
+      600: '#4b5d73',
+      700: '#5f758c',
+      800: '#7e91a7',
+      900: '#b2c1cf',
+      foreground: '#f4f6fb'
+    },
+    primary: {
+      50: '#141632',
+      100: '#161c49',
+      200: '#152262',
+      300: '#162d88',
+      400: '#1d3ca6',
+      500: '#3055d8',
+      600: '#4c6ef5',
+      700: '#7d93ff',
+      800: '#a8b5ff',
+      900: '#d8e0ff',
+      foreground: '#f6f8ff'
+    },
+    info: {
+      50: '#101a2c',
+      100: '#0f203e',
+      200: '#0d2a55',
+      300: '#12376f',
+      400: '#1d4d9a',
+      500: '#2a66c3',
+      600: '#3f86ec',
+      700: '#69a6ff',
+      800: '#99c3ff',
+      900: '#d7e6ff',
+      foreground: '#f4f8ff'
+    },
+    success: {
+      50: '#07160f',
+      100: '#0b2416',
+      200: '#123221',
+      300: '#15452c',
+      400: '#1d5e3a',
+      500: '#27784a',
+      600: '#32a064',
+      700: '#5ac68f',
+      800: '#8adeb1',
+      900: '#c8f3d9',
+      foreground: '#effff5'
+    },
+    warning: {
+      50: '#2e1405',
+      100: '#3b1b08',
+      200: '#52260c',
+      300: '#6b3311',
+      400: '#8a4416',
+      500: '#ab561c',
+      600: '#cc6a1f',
+      700: '#e78a3a',
+      800: '#f5a85f',
+      900: '#ffd9a8',
+      foreground: '#ffffff'
+    },
+    danger: {
+      50: '#2d090e',
+      100: '#3a0d13',
+      200: '#50121c',
+      300: '#6a1a27',
+      400: '#882434',
+      500: '#a92c40',
+      600: '#cb3750',
+      700: '#ef4b63',
+      800: '#ff7d8f',
+      900: '#ffc6d0',
+      foreground: '#fff5f6'
+    }
+  }
+};
+const auroraOverrides = {
+  palette: {
+    default: {
+      50: '#f4fbff',
+      100: '#e3f5ff',
+      200: '#d1eef9',
+      300: '#b8e1ef',
+      400: '#a2d1e2',
+      500: '#89bbcf',
+      600: '#6ba3b8',
+      700: '#508aa0',
+      800: '#3a6f84',
+      900: '#254a57',
+      foreground: '#0b1d23'
+    },
+    primary: {
+      50: '#e8fbff',
+      100: '#c1f4ff',
+      200: '#96e7ff',
+      300: '#6bdbff',
+      400: '#40cfff',
+      500: '#18b8f2',
+      600: '#1296d3',
+      700: '#0d74ad',
+      800: '#095885',
+      900: '#053658'
+    },
+    success: {
+      50: '#f1fff6',
+      100: '#cff9e3',
+      200: '#a2f0ca',
+      300: '#75e4b1',
+      400: '#45d799',
+      500: '#1dbe80',
+      600: '#129c67',
+      700: '#097852',
+      800: '#05583b',
+      900: '#033427'
+    }
+  },
+  radii: {
+    sm: 8,
+    md: 12,
+    lg: 18
+  },
+  typography: {
+    fontFamily: 'System, "Helvetica Neue", "PingFang SC"',
+    lineHeightMultiplier: 1.25
+  }
+};
+const buildPreset = overrides => createTokens(overrides);
+export const themePresets = {
+  light: defaultTokens,
+  dark: buildPreset(darkOverrides),
+  aurora: buildPreset(auroraOverrides)
+};
+export const getThemePreset = name => themePresets[name];

package/dist/es/design-system/tokens.js

@@ -0,0 +1,136 @@
+import { deepMerge } from '../utils/deepMerge';
+export const defaultFoundations = {
+  palette: {
+    default: {
+      50: '#f7f8fa',
+      100: '#f1f2f5',
+      200: '#ebedf0',
+      300: '#c8ccd6',
+      400: '#a8aebb',
+      500: '#888f9f',
+      600: '#6d7483',
+      700: '#505560',
+      800: '#353840',
+      900: '#191a1f',
+      foreground: '#222222'
+    },
+    primary: {
+      50: '#f5f8ff',
+      100: '#e1e9ff',
+      200: '#c2d4ff',
+      300: '#9bb8ff',
+      400: '#6d94ff',
+      500: '#4770ff',
+      600: '#2f51e0',
+      700: '#243eb1',
+      800: '#1a2d82',
+      900: '#111d55',
+      foreground: '#ffffff'
+    },
+    info: {
+      50: '#f0f8ff',
+      100: '#d9ecff',
+      200: '#b9dcff',
+      300: '#8bc3ff',
+      400: '#5aa7ff',
+      500: '#328dff',
+      600: '#1d6fde',
+      700: '#1753a9',
+      800: '#113a75',
+      900: '#0a2143',
+      foreground: '#ffffff'
+    },
+    success: {
+      50: '#f2fbf6',
+      100: '#dcf5e7',
+      200: '#b8e9cf',
+      300: '#8ddbb1',
+      400: '#5fcf93',
+      500: '#31c174',
+      600: '#1da45e',
+      700: '#128047',
+      800: '#0a5c32',
+      900: '#043719',
+      foreground: '#ffffff'
+    },
+    warning: {
+      50: '#fff8ec',
+      100: '#ffecc7',
+      200: '#ffd595',
+      300: '#ffbc63',
+      400: '#ffa035',
+      500: '#ff8414',
+      600: '#d9650b',
+      700: '#ad4905',
+      800: '#7f3101',
+      900: '#4d1c00',
+      foreground: '#ffffff'
+    },
+    danger: {
+      50: '#fff1f2',
+      100: '#ffd8dd',
+      200: '#ffadb7',
+      300: '#ff8090',
+      400: '#ff556c',
+      500: '#f2324c',
+      600: '#ce1733',
+      700: '#a30f27',
+      800: '#770819',
+      900: '#47040b',
+      foreground: '#ffffff'
+    }
+  },
+  spacing: {
+    none: 0,
+    xxs: 2,
+    xs: 4,
+    ssm: 6,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    xxl: 28
+  },
+  radii: {
+    none: 0,
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 12,
+    pill: 999,
+    full: 9999
+  },
+  fontSize: {
+    xxs: 10,
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20
+  },
+  typography: {
+    fontFamily: 'System',
+    weight: {
+      regular: '400',
+      medium: '500',
+      semiBold: '600',
+      bold: '700'
+    },
+    lineHeightMultiplier: 1.2
+  },
+  opacity: {
+    disabled: 0.45,
+    loading: 0.65,
+    pressed: 0.85
+  }
+};
+export const buildFoundations = overrides => {
+  if (!overrides) {
+    return defaultFoundations;
+  }
+  return deepMerge(defaultFoundations, overrides);
+};
+export const createTokens = overrides => {
+  return buildFoundations(overrides);
+};
+export const defaultTokens = defaultFoundations;

package/dist/es/design-system/useTheme.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
+export const useTheme = () => useContext(ThemeContext);

package/dist/es/hooks/aria/index.js

@@ -0,0 +1,5 @@
+export * from './useAriaPress';
+export * from './useAriaToggle';
+export * from './useAriaListBox';
+export * from './useAriaOverlay';
+export {};

package/dist/es/hooks/aria/useAriaListBox.js

@@ -0,0 +1,33 @@
+import { useMemo, useRef } from 'react';
+import { useListBox } from '@react-native-aria/listbox';
+import { useListState } from '@react-stately/list';
+export const useAriaListBox = props => {
+  const ref = useRef(null);
+  const {
+    label,
+    ...rest
+  } = props;
+  const resolvedProps = useMemo(() => {
+    if (label == null) return rest;
+    const ariaLabel = typeof label === 'string' ? label : undefined;
+    return {
+      ...rest,
+      ...(ariaLabel ? {
+        'aria-label': ariaLabel
+      } : null)
+    };
+  }, [label, rest]);
+  const state = useListState(resolvedProps);
+  const {
+    listBoxProps,
+    labelProps
+  } = useListBox(resolvedProps, state, ref);
+  const resolvedListBoxProps = useMemo(() => listBoxProps, [listBoxProps]);
+  const resolvedLabelProps = useMemo(() => labelProps, [labelProps]);
+  return {
+    state,
+    listBoxProps: resolvedListBoxProps,
+    labelProps: resolvedLabelProps,
+    ref
+  };
+};