react-native-system-ui 0.0.6 → 1.0.0

package/dist/es/hooks/overlay/OverlayStackStore.js

@@ -1,94 +1,78 @@
 import { BackHandler, Platform } from 'react-native';
 import { setBodyScrollLocked } from '../../platform';
 import { isNumber } from '../../utils';
-const DEFAULT_BASE_Z_INDEX = 1000;
-const DEFAULT_Z_INDEX_STEP = 2;
 export class OverlayStackStore {
   listeners = new Set();
   entries = [];
   keySeed = 0;
-  constructor(baseZIndex = DEFAULT_BASE_Z_INDEX, zIndexStep = DEFAULT_Z_INDEX_STEP) {
-    this.baseZIndex = baseZIndex;
-    this.zIndexStep = zIndexStep;
+  constructor(baseZ = 1000, zStep = 2) {
+    this.baseZ = baseZ;
+    this.zStep = zStep;
   }
-  subscribe = listener => {
-    this.listeners.add(listener);
+  subscribe = l => {
+    this.listeners.add(l);
     return () => {
-      this.listeners.delete(listener);
+      this.listeners.delete(l);
     };
   };
   getSnapshot = () => this.entries;
-  mount = options => {
-    const key = ++this.keySeed;
+  peek = () => this.entries[this.entries.length - 1];
+  size = () => this.entries.length;
+  getBaseZIndex = () => this.baseZ;
+  mount = o => {
     const entry = {
-      key,
-      zIndex: this.resolveZIndex(options.zIndex),
-      onClose: options.onClose,
-      closeOnBack: options.closeOnBack,
-      lockScroll: options.lockScroll,
-      type: options.type,
-      meta: options.meta
+      key: ++this.keySeed,
+      zIndex: this.resolveZ(o.zIndex),
+      onClose: o.onClose,
+      closeOnBack: o.closeOnBack,
+      lockScroll: o.lockScroll,
+      type: o.type,
+      meta: o.meta
     };
     this.entries = [...this.entries, entry];
     this.emit();
     return entry;
   };
-  update = (key, options) => {
-    const index = this.entries.findIndex(item => item.key === key);
-    if (index === -1) return undefined;
-    const prev = this.entries[index];
+  update = (key, o) => {
+    const i = this.entries.findIndex(e => e.key === key);
+    if (i === -1) return undefined;
     const next = {
-      ...prev,
-      ...options,
-      zIndex: isNumber(options.zIndex) ? this.resolveZIndex(options.zIndex) : prev.zIndex
+      ...this.entries[i],
+      ...o,
+      zIndex: isNumber(o.zIndex) ? this.resolveZ(o.zIndex) : this.entries[i].zIndex
     };
-    this.entries = [...this.entries.slice(0, index), next, ...this.entries.slice(index + 1)];
+    this.entries = [...this.entries.slice(0, i), next, ...this.entries.slice(i + 1)];
     this.emit();
     return next;
   };
   unmount = key => {
-    const next = this.entries.filter(entry => entry.key !== key);
-    if (next.length === this.entries.length) {
-      return;
+    const next = this.entries.filter(e => e.key !== key);
+    if (next.length !== this.entries.length) {
+      this.entries = next;
+      this.emit();
     }
-    this.entries = next;
-    this.emit();
   };
-  peek = () => this.entries[this.entries.length - 1];
-  size = () => this.entries.length;
-  getBaseZIndex = () => this.baseZIndex;
-  resolveZIndex = provided => {
-    if (isNumber(provided)) {
-      if (!Number.isFinite(provided) || provided < 0) {
-        return this.baseZIndex;
-      }
-      return provided >= this.baseZIndex ? provided : this.baseZIndex + provided;
-    }
+  resolveZ = v => {
+    if (isNumber(v)) return !Number.isFinite(v) || v < 0 ? this.baseZ : v >= this.baseZ ? v : this.baseZ + v;
     const top = this.peek();
-    if (!top) {
-      return this.baseZIndex;
-    }
-    return top.zIndex + this.zIndexStep;
+    return top ? top.zIndex + this.zStep : this.baseZ;
   };
   emit = () => {
-    this.listeners.forEach(listener => {
-      listener();
-    });
+    this.listeners.forEach(l => l());
   };
 }
 export const overlayStackStore = new OverlayStackStore();
-let backHandlerSubscription = null;
-const syncBackHandler = () => {
+let backSub = null;
+const syncBack = () => {
   if (Platform.OS === 'web') return;
   const entries = overlayStackStore.getSnapshot();
-  const hasClosable = entries.some(entry => entry.closeOnBack && entry.onClose);
-  if (hasClosable && !backHandlerSubscription && BackHandler?.addEventListener) {
-    backHandlerSubscription = BackHandler.addEventListener('hardwareBackPress', () => {
-      const currentEntries = overlayStackStore.getSnapshot();
-      for (let i = currentEntries.length - 1; i >= 0; i -= 1) {
-        const entry = currentEntries[i];
-        if (entry.closeOnBack && entry.onClose) {
-          entry.onClose();
+  const has = entries.some(e => e.closeOnBack && e.onClose);
+  if (has && !backSub && BackHandler?.addEventListener) {
+    backSub = BackHandler.addEventListener('hardwareBackPress', () => {
+      const cur = overlayStackStore.getSnapshot();
+      for (let i = cur.length - 1; i >= 0; i--) {
+        if (cur[i].closeOnBack && cur[i].onClose) {
+          cur[i].onClose();
           return true;
         }
       }
@@ -96,18 +80,14 @@ const syncBackHandler = () => {
     });
     return;
   }
-  if (!hasClosable && backHandlerSubscription) {
-    backHandlerSubscription.remove();
-    backHandlerSubscription = null;
+  if (!has && backSub) {
+    backSub.remove();
+    backSub = null;
   }
 };
-const syncScrollLock = () => {
-  const shouldLock = overlayStackStore.getSnapshot().some(entry => entry.lockScroll);
-  setBodyScrollLocked(shouldLock);
-};
-const handleStoreChange = () => {
-  syncBackHandler();
-  syncScrollLock();
+const onChange = () => {
+  syncBack();
+  setBodyScrollLocked(overlayStackStore.getSnapshot().some(e => e.lockScroll));
 };
-overlayStackStore.subscribe(handleStoreChange);
-handleStoreChange();
+overlayStackStore.subscribe(onChange);
+onChange();

package/dist/es/hooks/overlay/useOverlayStack.js

@@ -1,17 +1,15 @@
 import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { overlayStackStore } from './OverlayStackStore';
-const useOverlayEntries = () => useSyncExternalStore(overlayStackStore.subscribe, overlayStackStore.getSnapshot, overlayStackStore.getSnapshot);
+const useEntries = () => useSyncExternalStore(overlayStackStore.subscribe, overlayStackStore.getSnapshot, overlayStackStore.getSnapshot);
 export const useOverlayStack = ({
   visible,
   ...options
 }) => {
-  const entries = useOverlayEntries();
+  const entries = useEntries();
   const entryRef = useRef(null);
-  const optionsRef = useRef(options);
-  if (optionsRef.current.onClose !== options.onClose || optionsRef.current.closeOnBack !== options.closeOnBack || optionsRef.current.lockScroll !== options.lockScroll || optionsRef.current.zIndex !== options.zIndex || optionsRef.current.type !== options.type || optionsRef.current.meta !== options.meta) {
-    optionsRef.current = options;
-  }
-  const stableOptions = optionsRef.current;
+  const optRef = useRef(options);
+  if (optRef.current.onClose !== options.onClose || optRef.current.closeOnBack !== options.closeOnBack || optRef.current.lockScroll !== options.lockScroll || optRef.current.zIndex !== options.zIndex || optRef.current.type !== options.type || optRef.current.meta !== options.meta) optRef.current = options;
+  const opts = optRef.current;
   useEffect(() => {
     if (!visible) {
       if (entryRef.current) {
@@ -20,8 +18,7 @@ export const useOverlayStack = ({
       }
       return;
     }
-    const entry = overlayStackStore.mount(stableOptions);
-    entryRef.current = entry;
+    entryRef.current = overlayStackStore.mount(opts);
     return () => {
       if (entryRef.current) {
         overlayStackStore.unmount(entryRef.current.key);
@@ -30,17 +27,14 @@ export const useOverlayStack = ({
     };
   }, [visible]);
   useEffect(() => {
-    if (!visible || !entryRef.current) {
-      return;
-    }
-    overlayStackStore.update(entryRef.current.key, stableOptions);
-  }, [stableOptions, visible]);
-  const current = entryRef.current;
-  const snapshotEntry = current ? entries.find(entry => entry.key === current.key) : undefined;
+    if (visible && entryRef.current) overlayStackStore.update(entryRef.current.key, opts);
+  }, [opts, visible]);
+  const cur = entryRef.current;
+  const snap = cur ? entries.find(e => e.key === cur.key) : undefined;
   const top = entries[entries.length - 1];
   return {
-    entryKey: snapshotEntry?.key ?? null,
-    zIndex: snapshotEntry?.zIndex ?? stableOptions.zIndex,
-    isTopMost: !!snapshotEntry && !!top && top.key === snapshotEntry.key
+    entryKey: snap?.key ?? null,
+    zIndex: snap?.zIndex ?? opts.zIndex,
+    isTopMost: !!snap && !!top && top.key === snap.key
   };
 };

package/dist/es/hooks/useControllableValue.js

@@ -8,33 +8,22 @@ function useControllableValue(props = {}, options = {}) {
     valuePropName = 'value',
     trigger = 'onChange'
   } = options;
-  const propsRecord = props;
+  const p = props;
   const isControlled = hasProp(props, valuePropName);
-  const value = propsRecord[valuePropName];
+  const value = p[valuePropName];
   const [internalValue, setInternalValue] = useState(() => {
-    if (isControlled) {
-      return value;
-    }
-    if (hasProp(props, defaultValuePropName)) {
-      return propsRecord[defaultValuePropName];
-    }
+    if (isControlled) return value;
+    if (hasProp(props, defaultValuePropName)) return p[defaultValuePropName];
     return defaultValue;
   });
-  const mergedValue = isControlled ? value : internalValue;
-  const handlerRef = useRef(propsRecord[trigger]);
+  const handlerRef = useRef(p[trigger]);
   useEffect(() => {
-    handlerRef.current = propsRecord[trigger];
+    handlerRef.current = p[trigger];
   }, [props, trigger]);
-  const triggerChange = useCallback((nextValue, ...args) => {
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    const handler = handlerRef.current;
-    if (isFunction(handler)) {
-      ;
-      handler(nextValue, ...args);
-    }
+  const triggerChange = useCallback((next, ...args) => {
+    if (!isControlled) setInternalValue(next);
+    if (isFunction(handlerRef.current)) handlerRef.current(next, ...args);
   }, [isControlled]);
-  return [mergedValue, triggerChange];
+  return [isControlled ? value : internalValue, triggerChange];
 }
 export default useControllableValue;

package/dist/es/hooks/useCountDown.js

@@ -1,19 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { isNumber } from '../utils/validate';
 const parseTime = time => {
-  const total = Math.max(time, 0);
-  const days = Math.floor(total / (24 * 60 * 60 * 1000));
-  const hours = Math.floor(total % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));
-  const minutes = Math.floor(total % (60 * 60 * 1000) / (60 * 1000));
-  const seconds = Math.floor(total % (60 * 1000) / 1000);
-  const milliseconds = total % 1000;
+  const t = Math.max(time, 0);
   return {
-    total,
-    days,
-    hours,
-    minutes,
-    seconds,
-    milliseconds
+    total: t,
+    days: Math.floor(t / 86400000),
+    hours: Math.floor(t % 86400000 / 3600000),
+    minutes: Math.floor(t % 3600000 / 60000),
+    seconds: Math.floor(t % 60000 / 1000),
+    milliseconds: t % 1000
   };
 };
 const useCountDown = options => {
@@ -24,11 +19,11 @@ const useCountDown = options => {
     onFinish
   } = options;
   const timeRef = useRef(time);
-  const millisecondRef = useRef(millisecond);
+  const msRef = useRef(millisecond);
   const onChangeRef = useRef(onChange);
   const onFinishRef = useRef(onFinish);
   timeRef.current = time;
-  millisecondRef.current = millisecond;
+  msRef.current = millisecond;
   onChangeRef.current = onChange;
   onFinishRef.current = onFinish;
   const remainRef = useRef(Math.max(0, time));
@@ -59,10 +54,7 @@ const useCountDown = options => {
     const remain = Math.max(endTimeRef.current - Date.now(), 0);
     update(remain);
     if (remain <= 0) return;
-    const delay = millisecondRef.current ? Math.max(1, Math.min(30, remain)) : Math.max(1, Math.min(remain, remain % 1000 + 1));
-    timerRef.current = setTimeout(() => {
-      tick();
-    }, delay);
+    timerRef.current = setTimeout(tick, msRef.current ? Math.max(1, Math.min(30, remain)) : Math.max(1, Math.min(remain, remain % 1000 + 1)));
   }, [clearTimer, update]);
   const start = useCallback(() => {
     if (countingRef.current || remainRef.current <= 0) return;
@@ -78,10 +70,10 @@ const useCountDown = options => {
   }, [clearTimer]);
   const reset = useCallback(newTime => {
     pause();
-    const next = Math.max(0, isNumber(newTime) ? newTime : timeRef.current);
-    remainRef.current = next;
-    endTimeRef.current = Date.now() + next;
-    setCurrent(parseTime(next));
+    const n = Math.max(0, isNumber(newTime) ? newTime : timeRef.current);
+    remainRef.current = n;
+    endTimeRef.current = Date.now() + n;
+    setCurrent(parseTime(n));
   }, [pause]);
   useEffect(() => () => clearTimer(), [clearTimer]);
   return {

package/dist/es/hooks/useHairline.js

@@ -8,31 +8,19 @@ export const useHairline = ({
   color,
   width,
   defaultPaddingHorizontal = 0
-}) => {
-  return useMemo(() => {
-    if (!show) return null;
-    const flattened = StyleSheet.flatten(containerStyle);
-    const paddingHorizontal = isNumber(flattened?.paddingHorizontal) ? flattened.paddingHorizontal : undefined;
-    const resolveInset = (primary, secondary) => isNumber(primary) ? primary : isNumber(secondary) ? secondary : isNumber(paddingHorizontal) ? paddingHorizontal : defaultPaddingHorizontal;
-    const resolvedPadding = {
-      left: resolveInset(flattened?.paddingLeft, flattened?.paddingStart),
-      right: resolveInset(flattened?.paddingRight, flattened?.paddingEnd)
-    };
-    return /*#__PURE__*/React.createElement(View, {
-      style: [styles.hairline, createHairlineView({
-        position: 'bottom',
-        color,
-        left: resolvedPadding.left,
-        right: resolvedPadding.right,
-        enabled: width > 0,
-        width
-      })]
-    });
-  }, [show, containerStyle, color, width, defaultPaddingHorizontal]);
-};
-const styles = StyleSheet.create({
-  hairline: {
-    position: 'absolute',
-    bottom: 0
-  }
-});
+}) => useMemo(() => {
+  if (!show) return null;
+  const f = StyleSheet.flatten(containerStyle);
+  const ph = isNumber(f?.paddingHorizontal) ? f.paddingHorizontal : undefined;
+  const r = (a, b) => isNumber(a) ? a : isNumber(b) ? b : isNumber(ph) ? ph : defaultPaddingHorizontal;
+  return /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color,
+      left: r(f?.paddingLeft, f?.paddingStart),
+      right: r(f?.paddingRight, f?.paddingEnd),
+      enabled: width > 0,
+      width
+    })
+  });
+}, [show, containerStyle, color, width, defaultPaddingHorizontal]);

package/dist/es/hooks/useSafeAreaPadding.js

@@ -3,10 +3,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 export function useSafeAreaPadding(min) {
   const insets = useSafeAreaInsets();
   if (Platform.OS === 'web') {
-    const t = min?.top ?? 0,
-      b = min?.bottom ?? 0,
-      l = min?.left ?? 0,
-      r = min?.right ?? 0;
+    const [t, b, l, r] = [min?.top ?? 0, min?.bottom ?? 0, min?.left ?? 0, min?.right ?? 0];
     return {
       paddingTop: `max(env(safe-area-inset-top, 0px), ${t}px)`,
       paddingBottom: `max(env(safe-area-inset-bottom, 0px), ${b}px)`,

package/dist/es/index.js

@@ -1,4 +1,11 @@
 export * from './components';
 export * from './design-system';
 export * from './hooks';
-export {};
+// Utilities
+export { flipStyle, rtlRow } from './utils/rtl';
+export { deepMerge } from './utils/deepMerge';
+export { createPlatformShadow } from './utils/createPlatformShadow';
+
+// Platform helpers
+export { nativeDriverEnabled } from './platform/animation';
+export { isWeb, isIOS, isAndroid } from './platform/runtime';

package/dist/es/platform/animation.js

@@ -1,2 +1,10 @@
 import { Platform } from 'react-native';
-export const nativeDriverEnabled = Platform.OS !== 'web';
+export const nativeDriverEnabled = Platform.OS !== 'web';
+export const defaultAnimationConfig = {
+  useNativeDriver: nativeDriverEnabled,
+  isInteraction: false
+};
+export const hardwareAccelerationProps = {
+  renderToHardwareTextureAndroid: Platform.OS === 'android',
+  shouldRasterizeIOS: Platform.OS === 'ios'
+};

package/dist/es/platform/measure.js

@@ -1,48 +1,30 @@
 import { isFunction } from '../utils/validate';
-export const measureInWindow = (node, callback) => {
+const toRect = (x, y, w, h) => [x, y, w, h].every(Number.isFinite) ? {
+  x: x,
+  y: y,
+  width: w,
+  height: h
+} : null;
+export const measureInWindow = (node, cb) => {
   if (!node) {
-    callback(null);
+    cb(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
-        });
-      });
+    const mn = node;
+    if (isFunction(mn.measureInWindow)) {
+      mn.measureInWindow((x, y, w, h) => cb(toRect(x, y, w, h)));
       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
-      });
+    const dn = node;
+    if (isFunction(dn.getBoundingClientRect)) {
+      const r = dn.getBoundingClientRect();
+      cb(toRect(r?.left, r?.top, r?.width, r?.height));
       return;
     }
-  } catch (_error) {
-    callback(null);
+  } catch {
+    cb(null);
     return;
   }
-  callback(null);
+  cb(null);
 };

package/dist/es/utils/color.js

@@ -1,42 +1,28 @@
 import { clamp01 } from './number';
-const hexRegex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const HEX_RE = /^#([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];
+  if (!HEX_RE.test(input)) return null;
+  const h = input.length === 4 ? `#${input[1]}${input[1]}${input[2]}${input[2]}${input[3]}${input[3]}` : input;
+  const v = parseInt(h.slice(1), 16);
+  return [v >> 16 & 255, v >> 8 & 255, v & 255];
 };
-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]];
+const parseRgb = input => {
+  const m = input.match(/^rgba?\(([^)]*)\)$/i);
+  if (!m) return null;
+  const n = m[1].split(',').map(s => Number(s.trim()));
+  return n.length >= 3 && n.every(Number.isFinite) ? [n[0], n[1], n[2]] : null;
 };
 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 a = clamp01(alpha);
+  const t = color?.trim?.() ?? '';
+  if (!t) return color;
+  if (t.startsWith('#')) {
+    const rgb = hexToRgb(t);
+    return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${a})` : color;
   }
-  const rgb = parseRgbChannels(trimmed);
-  if (rgb) return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamped})`;
-  return trimmed;
+  const rgb = parseRgb(t);
+  return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${a})` : t;
 };
-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;
-};
+export const ensureRgba = (color, alpha) => color.trim().toLowerCase().startsWith('rgba') ? color : withAlpha(color, alpha);
+const GRADIENT_RE = /(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\))/i;
+export const extractFirstColorToken = input => input ? input.match(GRADIENT_RE)?.[0] : undefined;

package/dist/es/utils/compare.js

@@ -1,18 +1,13 @@
 export const shallowEqualArray = (a = [], b = []) => {
   if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i += 1) {
-    if (a[i] !== b[i]) return false;
-  }
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
   return true;
 };
-export const shallowEqualObject = (prev, next) => {
-  if (prev === next) return true;
-  if (!prev || !next) return false;
-  const prevKeys = Object.keys(prev);
-  const nextKeys = Object.keys(next);
-  if (prevKeys.length !== nextKeys.length) return false;
-  for (const key of prevKeys) {
-    if (prev[key] !== next[key]) return false;
-  }
+export const shallowEqualObject = (a, b) => {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const ak = Object.keys(a);
+  if (ak.length !== Object.keys(b).length) return false;
+  for (const k of ak) if (a[k] !== b[k]) return false;
   return true;
 };