react-native-system-ui 0.0.2 → 0.0.3

package/dist/es/index.js

@@ -1,73 +1,4 @@
-export { default as Button } from './button';
-export { default as Cell } from './cell';
-export { CellGroup } from './cell';
-export { default as Flex } from './flex';
-export { default as Space } from './space';
-export { default as Divider } from './divider';
-export { default as Tag } from './tag';
-export { Checkbox } from './checkbox';
-export { CheckboxGroup } from './checkbox';
-export { Radio } from './radio';
-export { RadioGroup } from './radio';
-export { default as Field } from './field';
-export { FieldGroup } from './field';
-export { default as Input } from './input';
-export { default as Form } from './form';
-export { default as Switch } from './switch';
-export { default as Badge } from './badge';
-export { default as Avatar } from './avatar';
-export { default as Grid } from './grid';
-export { default as Typography } from './typography';
-export { default as Loading } from './loading';
-export { default as Empty } from './empty';
-export { default as Image } from './image';
-export { useImageTokens } from './image';
-export { default as Progress } from './progress';
-export { default as Circle } from './circle';
-export { default as NoticeBar } from './notice-bar';
-export { default as Slider } from './slider';
-export { default as Stepper } from './stepper';
-export { default as Rate } from './rate';
-export { default as Selector } from './selector';
-export { default as Search } from './search';
-export { default as PasswordInput } from './password-input';
-export { default as Picker } from './picker';
-export { default as NumberKeyboard } from './number-keyboard';
-export { default as Collapse } from './collapse';
-export { default as Popup } from './popup';
-export { default as Overlay } from './overlay';
-export { default as Dialog } from './dialog';
-export { default as Toast } from './toast';
-export { default as Notify } from './notify';
-export { Portal } from './portal';
-export { PortalHost } from './portal';
-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 { default as Cascader } from './cascader';
-export { default as Tabs } from './tabs';
-export { default as Tabbar } from './tabbar';
-export { default as NavBar } from './nav-bar';
-export { default as Sidebar } from './sidebar';
-export { default as IndexBar } from './index-bar';
-export { default as ActionSheet } from './action-sheet';
-export { default as ShareSheet } from './share-sheet';
-export { default as DropdownMenu } from './dropdown-menu';
-export { default as Area } from './area';
-export { default as List } from './list';
-export { default as PullRefresh } from './pull-refresh';
-export { default as ImagePreview } from './image-preview';
-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 { default as WaterMark } from './water-mark';
-export { default as Pagination } from './pagination';
+export * from './components';
+export * from './design-system';
+export * from './hooks';
+export {};

package/dist/es/platform/animation.js

@@ -0,0 +1,2 @@
+import { Platform } from 'react-native';
+export const nativeDriverEnabled = Platform.OS !== 'web';

package/dist/es/platform/history.js

@@ -0,0 +1,7 @@
+export const addPopStateListener = listener => {
+  if (typeof window === 'undefined' || !window.addEventListener) return () => {};
+  window.addEventListener('popstate', listener);
+  return () => {
+    window.removeEventListener('popstate', listener);
+  };
+};

package/dist/es/platform/index.js

@@ -0,0 +1,6 @@
+export * from './animation';
+export * from './history';
+export * from './measure';
+export * from './runtime';
+export * from './scrollLock';
+export {};

package/dist/es/platform/measure.js

@@ -0,0 +1,48 @@
+import { isFunction } from '../utils/validate';
+export const measureInWindow = (node, callback) => {
+  if (!node) {
+    callback(null);
+    return;
+  }
+  try {
+    const maybeMeasureNode = node;
+    if (isFunction(maybeMeasureNode.measureInWindow)) {
+      maybeMeasureNode.measureInWindow((x, y, width, height) => {
+        if (![x, y, width, height].every(Number.isFinite)) {
+          callback(null);
+          return;
+        }
+        callback({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+      return;
+    }
+    const maybeDomNode = node;
+    if (isFunction(maybeDomNode.getBoundingClientRect)) {
+      const rect = maybeDomNode.getBoundingClientRect();
+      const x = rect?.left;
+      const y = rect?.top;
+      const width = rect?.width;
+      const height = rect?.height;
+      if (![x, y, width, height].every(Number.isFinite)) {
+        callback(null);
+        return;
+      }
+      callback({
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      });
+      return;
+    }
+  } catch (_error) {
+    callback(null);
+    return;
+  }
+  callback(null);
+};

package/dist/es/platform/runtime.js

@@ -0,0 +1,4 @@
+import { Platform } from 'react-native';
+export const isWeb = () => Platform.OS === 'web';
+export const isIOS = () => Platform.OS === 'ios';
+export const isAndroid = () => Platform.OS === 'android';

package/dist/es/platform/scrollLock.js

@@ -0,0 +1,16 @@
+let locked = false;
+let previousOverflow = '';
+export const setBodyScrollLocked = nextLocked => {
+  if (typeof document === 'undefined') return;
+  if (nextLocked && !locked) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    locked = true;
+    return;
+  }
+  if (!nextLocked && locked) {
+    document.body.style.overflow = previousOverflow;
+    locked = false;
+  }
+};
+export const isBodyScrollLocked = () => locked;

package/dist/es/utils/array.js

@@ -0,0 +1,5 @@
+export const toArray = value => {
+  if (value === undefined || value === null) return [];
+  if (Array.isArray(value)) return value;
+  return [value];
+};

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/index.d.ts

@@ -81,6 +81,8 @@ export type { NotifyProps, NotifyType, NotifyPosition } from './notify';
 export { Portal } from './portal';
 export { PortalHost } from './portal';
 export type { PortalProps } from './portal/Portal';
+export { SafeAreaView } from './safe-area-view';
+export type { SafeAreaViewProps } from './safe-area-view';
 export { ConfigProvider } from './config-provider';
 export { useLocale } from './config-provider';
 export { zhCN } from './config-provider';

package/dist/types/components/safe-area-view/SafeAreaView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';
+export interface SafeAreaViewProps {
+    edge?: 'top' | 'bottom';
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
+}
+export declare const SafeAreaView: React.FC<SafeAreaViewProps>;

package/dist/types/components/safe-area-view/index.d.ts

@@ -0,0 +1,2 @@
+export { SafeAreaView } from './SafeAreaView';
+export type { SafeAreaViewProps } from './SafeAreaView';

package/dist/types/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './usePresenceAnimation';
+export * from './useSafeAreaPadding';
 export * from './aria';
 export * from './gesture';
 export { default as useControllableValue } from './useControllableValue';

package/dist/types/hooks/useSafeAreaPadding.d.ts

@@ -0,0 +1,13 @@
+export type SafeAreaPaddingMin = {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+export type SafeAreaPaddingResult = {
+    paddingTop: number | string;
+    paddingBottom: number | string;
+    paddingLeft: number | string;
+    paddingRight: number | string;
+};
+export declare function useSafeAreaPadding(min?: SafeAreaPaddingMin): SafeAreaPaddingResult;