react-native-system-ui 0.0.2 → 0.0.4

package/dist/cjs/{uploader → components/uploader}/Uploader.js

@@ -278,9 +278,7 @@ const Uploader = /*#__PURE__*/_react().default.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);
   (0, _react().useImperativeHandle)(ref, () => ({
@@ -326,7 +324,7 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   };
   const renderStatus = status => {
     if (!status) return null;
-    const baseStyle = [styles.status, {
+    const baseStyle = [statusStyle, {
       backgroundColor: tokens.colors.maskBackground
     }];
     if (status === 'pending') {
@@ -337,7 +335,8 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         color: tokens.colors.maskText
       }), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [styles.statusText, {
-          color: tokens.colors.maskText
+          color: tokens.colors.maskText,
+          fontSize: tokens.typography.statusTextSize
         }]
       }, statusTextRender?.(status) ?? statusDefaults.pending));
     }
@@ -347,7 +346,8 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         testID: "rv-uploader-status-failed"
       }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [styles.statusText, {
-          color: tokens.colors.failed
+          color: tokens.colors.failed,
+          fontSize: tokens.typography.statusTextSize
         }]
       }, statusTextRender?.(status) ?? statusDefaults.failed));
     }
@@ -364,19 +364,38 @@ const Uploader = /*#__PURE__*/_react().default.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().default.createElement(_reactNative().View, {
-    style: styles.placeholder
+    style: placeholderStyle
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: styles.placeholderIcon
+    style: [styles.placeholderIcon, {
+      fontSize: tokens.typography.placeholderIconSize
+    }]
   }, "FILE"), name && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: placeholderNameStyle,
     numberOfLines: 1
@@ -414,7 +433,9 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }, /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_image.default, {
@@ -444,19 +465,25 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   }, renderDelete(() => removeTask(task.id), `rv-uploader-task-delete-${task.id}`)))))) : null, canShowUpload ? /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().View, {
-    style: styles.uploadContent
+    style: uploadContentStyle
   }, uploadIcon ?? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.uploadIcon, {
-      color: tokens.colors.icon
+      color: tokens.colors.icon,
+      fontSize: tokens.typography.uploadIconSize
     }]
   }, "+"), uploadText ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.uploadText, {
-      color: tokens.colors.text
+      color: tokens.colors.text,
+      fontSize: tokens.typography.uploadTextSize
     }]
   }, uploadText) : null)) : null), previewFullImage ? /*#__PURE__*/_react().default.createElement(_imagePreview.default, _extends({}, previewOptions, {
     visible: previewVisible,
@@ -483,12 +510,6 @@ const styles = _reactNative().StyleSheet.create({
     borderWidth: _reactNative().StyleSheet.hairlineWidth,
     overflow: 'hidden'
   },
-  pressed: {
-    opacity: 0.85
-  },
-  disabled: {
-    opacity: 0.65
-  },
   image: {
     width: '100%',
     height: '100%'
@@ -496,17 +517,12 @@ const styles = _reactNative().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: {
     ..._reactNative().StyleSheet.absoluteFillObject,
     justifyContent: 'center',
@@ -515,22 +531,13 @@ const styles = _reactNative().StyleSheet.create({
   status: {
     ..._reactNative().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: _reactNative().StyleSheet.hairlineWidth,
@@ -539,16 +546,12 @@ const styles = _reactNative().StyleSheet.create({
   },
   uploadContent: {
     justifyContent: 'center',
-    alignItems: 'center',
-    gap: 4
+    alignItems: 'center'
   },
   uploadIcon: {
-    fontSize: 24,
     fontWeight: '600'
   },
-  uploadText: {
-    fontSize: 12
-  }
+  uploadText: {}
 });
 Uploader.displayName = 'Uploader';
 var _default = exports.default = Uploader;

package/dist/cjs/{uploader → components/uploader}/tokens.js

@@ -9,13 +9,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/cjs/{water-mark → components/water-mark}/WaterMark.js

@@ -106,41 +106,41 @@ const WaterMark = props => {
       height: window.height
     });
   }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = (0, _react().useMemo)(() => ({
+  const zIndexStyle = {
     zIndex
-  }), [zIndex]);
-  const cellStyle = (0, _react().useMemo)(() => ({
+  };
+  const cellStyle = {
     width: cellWidth,
     height: cellHeight
-  }), [cellWidth, cellHeight]);
-  const oddRowStyle = (0, _react().useMemo)(() => ({
+  };
+  const oddRowStyle = {
     paddingLeft: cellWidth / 2
-  }), [cellWidth]);
-  const markStyle = (0, _react().useMemo)(() => ({
+  };
+  const markStyle = {
     width: markWidth,
     height: markHeight,
     transform: [{
       rotate: `${resolvedRotate}deg`
     }]
-  }), [markHeight, markWidth, resolvedRotate]);
-  const imageStyle = (0, _react().useMemo)(() => ({
+  };
+  const imageStyle = {
     width: markWidth,
     height: markHeight,
     opacity: resolvedOpacity
-  }), [markHeight, markWidth, resolvedOpacity]);
-  const textBaseStyle = (0, _react().useMemo)(() => ({
+  };
+  const textBaseStyle = {
     fontSize: normalizedFontSize,
     color: resolvedColor,
     opacity: resolvedOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
-  }), [font?.family, font?.weight, normalizedFontSize, resolvedColor, resolvedOpacity]);
-  const rowIndexes = (0, _react().useMemo)(() => Array.from({
+  };
+  const rowIndexes = Array.from({
     length: rows
-  }, (_, i) => i), [rows]);
-  const colIndexes = (0, _react().useMemo)(() => Array.from({
+  }, (_, i) => i);
+  const colIndexes = Array.from({
     length: cols
-  }, (_, i) => i), [cols]);
+  }, (_, i) => i);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     pointerEvents: "none",
     style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],

package/dist/cjs/design-system/ThemeContext.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeContext = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ThemeContext = exports.ThemeContext = /*#__PURE__*/_react().default.createContext({
+  foundations: _tokens.defaultTokens,
+  components: undefined
+});

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeProvider = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _ThemeContext = require("./ThemeContext");
+var _tokens = require("./tokens");
+var _validate = require("../utils/validate");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const isThemeTokens = value => {
+  return Boolean((0, _validate.isObject)(value) && 'palette' in value && 'spacing' in value);
+};
+const ThemeProvider = ({
+  value,
+  children
+}) => {
+  const resolved = (0, _react().useMemo)(() => {
+    const foundations = isThemeTokens(value) ? value : (0, _tokens.createTokens)(value?.foundations);
+    const components = !isThemeTokens(value) ? value?.components : undefined;
+    return {
+      foundations,
+      components
+    };
+  }, [value]);
+  return /*#__PURE__*/_react().default.createElement(_ThemeContext.ThemeContext.Provider, {
+    value: resolved
+  }, children);
+};
+exports.ThemeProvider = ThemeProvider;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createComponentTokensHook = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _deepMerge = require("../utils/deepMerge");
+var _useTheme = require("./useTheme");
+const createComponentTokensHook = (key, createBaseTokens) => {
+  return overrides => {
+    const {
+      foundations,
+      components
+    } = (0, _useTheme.useTheme)();
+    const componentOverrides = components?.[key];
+    return (0, _react().useMemo)(() => {
+      const base = createBaseTokens(foundations);
+      const merged = componentOverrides && overrides ? (0, _deepMerge.deepMerge)(componentOverrides, overrides) : componentOverrides ?? overrides;
+      return merged ? (0, _deepMerge.deepMerge)(base, merged) : base;
+    }, [componentOverrides, foundations, overrides]);
+  };
+};
+exports.createComponentTokensHook = createComponentTokensHook;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.ThemeProvider;
+  }
+});
+Object.defineProperty(exports, "createComponentTokensHook", {
+  enumerable: true,
+  get: function () {
+    return _createComponentTokensHook.createComponentTokensHook;
+  }
+});
+Object.defineProperty(exports, "createTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.createTokens;
+  }
+});
+Object.defineProperty(exports, "defaultTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.defaultTokens;
+  }
+});
+Object.defineProperty(exports, "getThemePreset", {
+  enumerable: true,
+  get: function () {
+    return _presets.getThemePreset;
+  }
+});
+Object.defineProperty(exports, "mergeTokensOverride", {
+  enumerable: true,
+  get: function () {
+    return _mergeTokensOverride.mergeTokensOverride;
+  }
+});
+Object.defineProperty(exports, "themePresets", {
+  enumerable: true,
+  get: function () {
+    return _presets.themePresets;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.useTheme;
+  }
+});
+var _ThemeProvider = require("./ThemeProvider");
+var _useTheme = require("./useTheme");
+var _createComponentTokensHook = require("./createComponentTokensHook");
+var _mergeTokensOverride = require("./mergeTokensOverride");
+var _tokens = require("./tokens");
+var _presets = require("./presets");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeTokensOverride = void 0;
+var _deepMerge = require("../utils/deepMerge");
+const mergeTokensOverride = (base, override) => {
+  if (base && override) return (0, _deepMerge.deepMerge)(base, override);
+  return base ?? override;
+};
+exports.mergeTokensOverride = mergeTokensOverride;

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

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themePresets = exports.getThemePreset = void 0;
+var _tokens = require("./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 => (0, _tokens.createTokens)(overrides);
+const themePresets = exports.themePresets = {
+  light: _tokens.defaultTokens,
+  dark: buildPreset(darkOverrides),
+  aurora: buildPreset(auroraOverrides)
+};
+const getThemePreset = name => themePresets[name];
+exports.getThemePreset = getThemePreset;