react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/utils/color.js

@@ -0,0 +1,42 @@
+import { clamp01 } from './number';
+const hexRegex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+export const hexToRgb = input => {
+  if (!hexRegex.test(input)) return null;
+  const normalized = input.length === 4 ? `#${input[1]}${input[1]}${input[2]}${input[2]}${input[3]}${input[3]}` : input;
+  const intVal = parseInt(normalized.slice(1), 16);
+  const r = intVal >> 16 & 255;
+  const g = intVal >> 8 & 255;
+  const b = intVal & 255;
+  return [r, g, b];
+};
+const parseRgbChannels = input => {
+  const match = input.match(/^rgba?\(([^)]*)\)$/i);
+  if (!match) return null;
+  const parts = match[1].split(',').map(part => part.trim()).slice(0, 3);
+  const numeric = parts.map(value => Number(value));
+  if (!numeric.every(channel => Number.isFinite(channel))) return null;
+  return [numeric[0], numeric[1], numeric[2]];
+};
+export const withAlpha = (color, alpha) => {
+  const clamped = clamp01(alpha);
+  const trimmed = color?.trim?.() ?? '';
+  if (!trimmed) return color;
+  if (trimmed.startsWith('#')) {
+    const rgb = hexToRgb(trimmed);
+    return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamped})` : color;
+  }
+  const rgb = parseRgbChannels(trimmed);
+  if (rgb) return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamped})`;
+  return trimmed;
+};
+export const ensureRgba = (color, alpha) => {
+  const trimmed = color.trim().toLowerCase();
+  if (trimmed.startsWith('rgba')) return color;
+  return withAlpha(color, alpha);
+};
+const gradientColorRegex = /(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\))/i;
+export const extractFirstColorToken = input => {
+  if (!input) return undefined;
+  const match = input.match(gradientColorRegex);
+  return match ? match[0] : undefined;
+};

package/dist/es/utils/createPlatformShadow.js

@@ -0,0 +1,50 @@
+import { Platform } from 'react-native';
+const hexToRgba = (hex, alpha) => {
+  const normalized = hex.replace('#', '');
+  const expand = normalized.length === 3 ? normalized.split('').map(char => char + char).join('') : normalized;
+  if (expand.length < 6) {
+    return hex;
+  }
+  const bigint = parseInt(expand.slice(0, 6), 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  const clampedAlpha = Math.max(0, Math.min(1, alpha));
+  return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
+};
+const ensureRgbaColor = (color, alpha) => {
+  const trimmed = color.trim().toLowerCase();
+  if (trimmed.startsWith('#')) {
+    return hexToRgba(trimmed, alpha);
+  }
+  if (trimmed.startsWith('rgba')) {
+    return color;
+  }
+  if (trimmed.startsWith('rgb(')) {
+    return color.replace(/rgb\(([^)]*)\)/i, (_, inner) => `rgba(${inner}, ${alpha})`);
+  }
+  return color;
+};
+export const createPlatformShadow = config => {
+  const nativeShadow = {
+    shadowColor: config.color,
+    shadowOpacity: config.opacity,
+    shadowRadius: config.radius,
+    shadowOffset: {
+      width: config.offsetX ?? 0,
+      height: config.offsetY
+    },
+    ...(config.elevation !== undefined ? {
+      elevation: config.elevation
+    } : null)
+  };
+  if (Platform.OS !== 'web') {
+    return nativeShadow;
+  }
+  const blur = Math.max(config.radius * 1.5, config.radius);
+  const boxShadowColor = ensureRgbaColor(config.color, config.opacity);
+  return {
+    boxShadow: `${config.offsetX ?? 0}px ${config.offsetY}px ${blur}px ${boxShadowColor}`
+  };
+};
+export default createPlatformShadow;

package/dist/es/utils/date.js

@@ -0,0 +1,63 @@
+export const padZero = (value, length = 2) => {
+  const str = String(value);
+  return str.length >= length ? str : `${'0'.repeat(length - str.length)}${str}`;
+};
+export const times = (count, iteratee) => {
+  return Array.from({
+    length: count
+  }, (_, index) => iteratee(index));
+};
+export const getTrueValue = value => {
+  if (!value) return 0;
+  const parsed = parseInt(value, 10);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+export const getMonthEndDay = (year, month) => {
+  return 32 - new Date(year, month - 1, 32).getDate();
+};
+export const isValidDate = value => {
+  return value instanceof Date && !Number.isNaN(value.getTime());
+};
+export const formatDuration = (format, currentTime) => {
+  const {
+    days
+  } = currentTime;
+  let {
+    hours,
+    minutes,
+    seconds,
+    milliseconds
+  } = currentTime;
+  let template = format;
+  if (template.includes('DD')) {
+    template = template.replace('DD', padZero(days));
+  } else {
+    hours += days * 24;
+  }
+  if (template.includes('HH')) {
+    template = template.replace('HH', padZero(hours));
+  } else {
+    minutes += hours * 60;
+  }
+  if (template.includes('mm')) {
+    template = template.replace('mm', padZero(minutes));
+  } else {
+    seconds += minutes * 60;
+  }
+  if (template.includes('ss')) {
+    template = template.replace('ss', padZero(seconds));
+  } else {
+    milliseconds += seconds * 1000;
+  }
+  if (template.includes('S')) {
+    const ms = padZero(milliseconds, 3);
+    if (template.includes('SSS')) {
+      template = template.replace('SSS', ms);
+    } else if (template.includes('SS')) {
+      template = template.replace('SS', ms.slice(0, 2));
+    } else {
+      template = template.replace('S', ms.charAt(0));
+    }
+  }
+  return template;
+};

package/dist/es/utils/deepMerge.js

@@ -0,0 +1,31 @@
+const isPlainObject = value => {
+  return Object.prototype.toString.call(value) === '[object Object]';
+};
+export function deepMerge(target, source) {
+  if (!source) {
+    return target;
+  }
+  if (!Array.isArray(target) && !isPlainObject(target)) {
+    return source;
+  }
+  const output = Array.isArray(target) ? [...target] : {
+    ...target
+  };
+  Object.keys(source).forEach(key => {
+    const sourceValue = source[key];
+    if (sourceValue === undefined) {
+      return;
+    }
+    const targetValue = target[key];
+    if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
+      ;
+      output[key] = deepMerge(targetValue, sourceValue);
+      return;
+    }
+    ;
+    output[key] = Array.isArray(sourceValue) ? [...sourceValue] : isPlainObject(sourceValue) ? {
+      ...sourceValue
+    } : sourceValue;
+  });
+  return output;
+}

package/dist/es/utils/hairline.js

@@ -0,0 +1,84 @@
+import { Platform, StyleSheet } from 'react-native';
+export const getHairlineWidth = () => Platform.OS === 'web' ? 1 : StyleSheet.hairlineWidth;
+export const createHairlineBorder = ({
+  color,
+  position = 'all',
+  enabled = true
+} = {}) => {
+  if (!enabled) return {};
+  const width = getHairlineWidth();
+  const key = position === 'all' ? 'border' : `border${position[0].toUpperCase()}${position.slice(1)}`;
+  return {
+    [`${key}Width`]: width,
+    ...(color && {
+      [`${key}Color`]: color
+    })
+  };
+};
+export const createHairlineBorderTop = color => createHairlineBorder({
+  color,
+  position: 'top'
+});
+export const createHairlineBorderRight = color => createHairlineBorder({
+  color,
+  position: 'right'
+});
+export const createHairlineBorderBottom = color => createHairlineBorder({
+  color,
+  position: 'bottom'
+});
+export const createHairlineBorderLeft = color => createHairlineBorder({
+  color,
+  position: 'left'
+});
+export const createHairlineView = ({
+  left,
+  right,
+  top,
+  bottom,
+  width,
+  color,
+  position = 'bottom'
+} = {}) => {
+  const isWeb = Platform.OS === 'web';
+  const borderWidth = width ?? (isWeb ? 1 : StyleSheet.hairlineWidth);
+  const style = {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left,
+    right,
+    top,
+    bottom
+  };
+  if (position !== 'all') {
+    const s = style;
+    if (s[position] === undefined) s[position] = 0;
+  }
+  const key = position === 'all' ? 'border' : `border${position[0].toUpperCase()}${position.slice(1)}`;
+  const mutableStyle = style;
+  mutableStyle[`${key}Width`] = borderWidth;
+  if (color) mutableStyle[`${key}Color`] = color;
+  if (isWeb && (!width || width === 1 || width === StyleSheet.hairlineWidth)) {
+    const scales = {
+      top: {
+        scaleY: 0.5
+      },
+      bottom: {
+        scaleY: 0.5
+      },
+      left: {
+        scaleX: 0.5
+      },
+      right: {
+        scaleX: 0.5
+      },
+      all: {
+        scale: 0.5
+      }
+    };
+    if (scales[position]) {
+      style.transform = [scales[position]];
+    }
+  }
+  return style;
+};

package/dist/es/utils/index.js

@@ -0,0 +1,12 @@
+// 统一导出所有工具函数，简化导入路径
+export * from './array';
+export * from './color';
+export * from './createPlatformShadow';
+export * from './date';
+export * from './deepMerge';
+export * from './hairline';
+export * from './number';
+export * from './promise';
+export * from './string';
+export * from './validate';
+export {};

package/dist/es/utils/number.js

@@ -0,0 +1,56 @@
+import { isFiniteNumber, isNumber, isString } from './validate';
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const clamp01 = value => clamp(value, 0, 1);
+export const parseNumberLike = (value, fallback) => {
+  if (isFiniteNumber(value)) return value;
+  if (isString(value)) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+export const parseNumber = (value, fallback = 0) => parseNumberLike(value, fallback) ?? fallback;
+export const parsePercentage = percentage => {
+  if (isNumber(percentage)) return percentage;
+  if (isString(percentage)) {
+    const normalized = percentage.trim().replace('%', '');
+    const parsed = Number(normalized);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+};
+export const isNumericLike = value => isNumber(value) || isString(value) && value.trim() !== '' && !Number.isNaN(Number(value));
+export const addNumber = (num1, num2) => {
+  const cardinal = 10 ** 10;
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+};
+export const formatNumber = (value, integer, decimalLength) => {
+  let next = value;
+  if (integer) next = Math.trunc(next);
+  if (decimalLength !== undefined) {
+    const factor = 10 ** decimalLength;
+    next = Math.round(next * factor) / factor;
+  }
+  return next;
+};
+export const numberToString = (value, decimalLength) => {
+  if (value === null || value === undefined || !Number.isFinite(value)) return '';
+  if (decimalLength !== undefined) return value.toFixed(decimalLength);
+  return String(value);
+};
+export const parseDecimalLength = value => {
+  if (value === undefined) return undefined;
+  const parsed = isNumber(value) ? value : Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed)) return undefined;
+  return Math.max(0, Math.floor(parsed));
+};
+export const clampValue = (value, min, max) => {
+  let next = value;
+  if (isFiniteNumber(min)) {
+    next = Math.max(next, min);
+  }
+  if (isFiniteNumber(max)) {
+    next = Math.min(next, max);
+  }
+  return next;
+};

package/dist/es/utils/promise.js

@@ -0,0 +1,2 @@
+import { isFunction, isObject } from './validate';
+export const isPromiseLike = value => isObject(value) && isFunction(value.then);

package/dist/es/utils/string.js

@@ -0,0 +1,30 @@
+import { isTwoCNChar } from './validate';
+export const ensureSpace = (value, autoInsertSpace) => {
+  if (!autoInsertSpace) {
+    return value;
+  }
+  return isTwoCNChar(value) ? value.split('').join(' ') : value;
+};
+export const trimExtraChar = (value, char, regExp) => {
+  const index = value.indexOf(char);
+  if (index === -1) return value;
+  if (char === '-' && index !== 0) {
+    return value.slice(0, index);
+  }
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+};
+export const formatNumberInput = (value, allowDot = true, allowMinus = true) => {
+  let next = value;
+  if (allowDot) {
+    next = trimExtraChar(next, '.', /\./g);
+  } else {
+    next = next.split('.')[0];
+  }
+  if (allowMinus) {
+    next = trimExtraChar(next, '-', /-/g);
+  } else {
+    next = next.replace(/-/g, '');
+  }
+  const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+  return next.replace(regExp, '');
+};

package/dist/es/utils/validate.js

@@ -0,0 +1,15 @@
+import { isValidElement } from 'react';
+export const isDef = val => val !== undefined && val !== null;
+export const isRenderable = node => node != null && typeof node !== 'boolean';
+export const isText = node => typeof node === 'string' || typeof node === 'number';
+export const isNumber = val => typeof val === 'number' && !Number.isNaN(val);
+export const isFiniteNumber = val => isNumber(val) && Number.isFinite(val);
+export const isString = val => typeof val === 'string';
+export const isBoolean = val => typeof val === 'boolean';
+export const isFunction = val => typeof val === 'function';
+export const isUndefined = val => typeof val === 'undefined';
+export const isObject = val => val !== null && typeof val === 'object';
+export const isValidNode = node => isRenderable(node) && (typeof node !== 'string' || node.length > 0);
+export const isPlainObject = val => !!val && typeof val === 'object' && !Array.isArray(val) && ! /*#__PURE__*/isValidElement(val);
+export const isTwoCNChar = value => /^(?:[\u4e00-\u9fa5]){2}$/.test(value);
+export const isImageUrlString = url => /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i.test(url);

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;