react-native-system-ui 0.0.7 → 1.0.0

package/dist/cjs/components/water-mark/WaterMark.js

@@ -22,7 +22,10 @@ var _utils = require("../../utils");
 var _tokens = require("./tokens");
 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); }
 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); }
-const WaterMark = props => {
+const resolveFiniteNumber = (value, fallback) => (0, _utils.isFiniteNumber)(value) ? value : fallback;
+const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
+const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
+const WaterMarkImpl = props => {
   const {
     content: contentProp,
     width,
@@ -44,9 +47,6 @@ const WaterMark = props => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useWaterMarkTokens)(tokensOverride);
-  const resolveFiniteNumber = (value, fallback) => (0, _utils.isFiniteNumber)(value) ? value : fallback;
-  const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
-  const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
   const content = contentProp ?? tokens.defaults.content;
   const zIndex = resolveFiniteNumber(zIndexProp, tokens.defaults.zIndex);
   const fullPage = fullPageProp ?? tokens.defaults.fullPage;
@@ -64,9 +64,8 @@ const WaterMark = props => {
   const resolvedGapY = resolveNonNegativeNumber(gapY, tokens.defaults.gapY);
   const resolvedRotate = resolveFiniteNumber(rotate, tokens.defaults.rotate);
   const resolvedOpacity = Math.max(0, Math.min(1, resolveFiniteNumber(opacity, tokens.defaults.opacity)));
-  const fontSizeFromFont = (0, _utils.isFiniteNumber)(font?.size) ? font?.size : (0, _utils.isString)(font?.size) ? Number.parseFloat(font?.size) : undefined;
-  const resolvedFontSize = resolveFiniteNumber((Number.isFinite(fontSizeFromFont ?? Number.NaN) ? fontSizeFromFont : undefined) ?? fontSize, tokens.defaults.fontSize);
-  const normalizedFontSize = Math.max(0, resolvedFontSize);
+  const fontSizeFromFont = (0, _utils.isFiniteNumber)(font?.size) ? font.size : (0, _utils.isString)(font?.size) ? Number.parseFloat(font.size) : undefined;
+  const normalizedFontSize = Math.max(0, resolveFiniteNumber((Number.isFinite(fontSizeFromFont ?? Number.NaN) ? fontSizeFromFont : undefined) ?? fontSize, tokens.defaults.fontSize));
   const resolvedColor = font?.color ?? color ?? tokens.colors.mark;
   const markWidth = resolvePositiveNumber(image?.width ?? width, tokens.defaults.width);
   const markHeight = resolvePositiveNumber(image?.height ?? height, tokens.defaults.height);
@@ -74,15 +73,17 @@ const WaterMark = props => {
   const cellHeight = Math.max(1, markHeight + resolvedGapY);
   const rows = size.height ? Math.ceil(size.height / cellHeight) + 1 : 1;
   const cols = size.width ? Math.ceil(size.width / cellWidth) + 1 : 1;
-  const handleLayout = event => {
+  const onLayoutCalculatedRef = (0, _react().useRef)(onLayoutCalculated);
+  onLayoutCalculatedRef.current = onLayoutCalculated;
+  const handleLayout = (0, _react().useCallback)(event => {
     if (fullPage) return;
     const {
       width,
       height
     } = event.nativeEvent.layout;
     if (!(0, _utils.isFiniteNumber)(width) || !(0, _utils.isFiniteNumber)(height)) return;
-    const nextWidth = Math.max(0, width);
-    const nextHeight = Math.max(0, height);
+    const nextWidth = Math.max(0, width),
+      nextHeight = Math.max(0, height);
     if (lastLayoutRef.current.width === nextWidth && lastLayoutRef.current.height === nextHeight) return;
     lastLayoutRef.current = {
       width: nextWidth,
@@ -92,49 +93,47 @@ const WaterMark = props => {
       width: nextWidth,
       height: nextHeight
     });
-    onLayoutCalculated?.({
+    onLayoutCalculatedRef.current?.({
       width: nextWidth,
       height: nextHeight
     });
-  };
+  }, [fullPage]);
   (0, _react().useEffect)(() => {
-    if (!fullPage) return;
-    if (!(0, _utils.isFiniteNumber)(window.width) || !(0, _utils.isFiniteNumber)(window.height)) return;
-    if (window.width <= 0 || window.height <= 0) return;
-    onLayoutCalculated?.({
+    if (!fullPage || !(0, _utils.isFiniteNumber)(window.width) || !(0, _utils.isFiniteNumber)(window.height) || window.width <= 0 || window.height <= 0) return;
+    onLayoutCalculatedRef.current?.({
       width: window.width,
       height: window.height
     });
-  }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = {
+  }, [fullPage, window.width, window.height]);
+  const zIndexStyle = (0, _react().useMemo)(() => ({
     zIndex
-  };
-  const cellStyle = {
+  }), [zIndex]);
+  const cellStyle = (0, _react().useMemo)(() => ({
     width: cellWidth,
     height: cellHeight
-  };
-  const oddRowStyle = {
+  }), [cellWidth, cellHeight]);
+  const oddRowStyle = (0, _react().useMemo)(() => ({
     paddingLeft: cellWidth / 2
-  };
-  const markStyle = {
+  }), [cellWidth]);
+  const markStyle = (0, _react().useMemo)(() => ({
     width: markWidth,
     height: markHeight,
     transform: [{
       rotate: `${resolvedRotate}deg`
     }]
-  };
-  const imageStyle = {
+  }), [markWidth, markHeight, resolvedRotate]);
+  const imageStyle = (0, _react().useMemo)(() => ({
     width: markWidth,
     height: markHeight,
     opacity: resolvedOpacity
-  };
-  const textBaseStyle = {
+  }), [markWidth, markHeight, resolvedOpacity]);
+  const textBaseStyle = (0, _react().useMemo)(() => ({
     fontSize: normalizedFontSize,
     color: resolvedColor,
     opacity: resolvedOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
-  };
+  }), [normalizedFontSize, resolvedColor, resolvedOpacity, font?.family, font?.weight]);
   const rowIndexes = Array.from({
     length: rows
   }, (_, i) => i);
@@ -143,6 +142,8 @@ const WaterMark = props => {
   }, (_, i) => i);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     pointerEvents: "none",
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
     style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],
     onLayout: handleLayout
   }, rest), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -166,5 +167,6 @@ const WaterMark = props => {
     style: [textBaseStyle, textStyle]
   }, content))))))));
 };
+const WaterMark = /*#__PURE__*/_react().default.memo(WaterMarkImpl);
 WaterMark.displayName = 'WaterMark';
 var _default = exports.default = WaterMark;

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

@@ -15,21 +15,15 @@ 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 isTokens = v => Boolean((0, _validate.isObject)(v) && 'palette' in v && 'spacing' in v);
 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]);
+  const resolved = (0, _react().useMemo)(() => ({
+    foundations: isTokens(value) ? value : (0, _tokens.createTokens)(value?.foundations),
+    components: isTokens(value) ? undefined : value?.components
+  }), [value]);
   return /*#__PURE__*/_react().default.createElement(_ThemeContext.ThemeContext.Provider, {
     value: resolved
   }, children);

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

@@ -13,18 +13,16 @@ function _react() {
 }
 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]);
-  };
+const createComponentTokensHook = (key, createBaseTokens) => overrides => {
+  const {
+    foundations,
+    components
+  } = (0, _useTheme.useTheme)();
+  const co = components?.[key];
+  return (0, _react().useMemo)(() => {
+    const base = createBaseTokens(foundations);
+    const merged = co && overrides ? (0, _deepMerge.deepMerge)(co, overrides) : co ?? overrides;
+    return merged ? (0, _deepMerge.deepMerge)(base, merged) : base;
+  }, [co, foundations, overrides]);
 };
 exports.createComponentTokensHook = createComponentTokensHook;

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

@@ -137,11 +137,10 @@ const auroraOverrides = {
     lineHeightMultiplier: 1.25
   }
 };
-const buildPreset = overrides => (0, _tokens.createTokens)(overrides);
 const themePresets = exports.themePresets = {
   light: _tokens.defaultTokens,
-  dark: buildPreset(darkOverrides),
-  aurora: buildPreset(auroraOverrides)
+  dark: (0, _tokens.createTokens)(darkOverrides),
+  aurora: (0, _tokens.createTokens)(auroraOverrides)
 };
 const getThemePreset = name => themePresets[name];
 exports.getThemePreset = getThemePreset;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultTokens = exports.defaultFoundations = exports.createTokens = exports.buildFoundations = void 0;
+exports.defaultTokens = exports.defaultFoundations = exports.createTokens = void 0;
 var _deepMerge = require("../utils/deepMerge");
 const defaultFoundations = exports.defaultFoundations = {
   palette: {
@@ -130,15 +130,6 @@ const defaultFoundations = exports.defaultFoundations = {
     pressed: 0.85
   }
 };
-const buildFoundations = overrides => {
-  if (!overrides) {
-    return defaultFoundations;
-  }
-  return (0, _deepMerge.deepMerge)(defaultFoundations, overrides);
-};
-exports.buildFoundations = buildFoundations;
-const createTokens = overrides => {
-  return buildFoundations(overrides);
-};
+const createTokens = overrides => overrides ? (0, _deepMerge.deepMerge)(defaultFoundations, overrides) : defaultFoundations;
 exports.createTokens = createTokens;
 const defaultTokens = exports.defaultTokens = defaultFoundations;

package/dist/cjs/hooks/animation/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _useReducedMotion.getReducedMotion;
+  }
+});
+Object.defineProperty(exports, "useAnimatedTransition", {
+  enumerable: true,
+  get: function () {
+    return _useAnimatedTransition.useAnimatedTransition;
+  }
+});
+Object.defineProperty(exports, "useReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _useReducedMotion.useReducedMotion;
+  }
+});
+var _useReducedMotion = require("./useReducedMotion");
+var _useAnimatedTransition = require("./useAnimatedTransition");

package/dist/cjs/hooks/animation/useAnimatedTransition.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedTransition = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _platform = require("../../platform");
+var _useReducedMotion = require("./useReducedMotion");
+const EASE_OUT = _reactNative().Easing.bezier(0.075, 0.82, 0.165, 1.0);
+const EASE_IN = _reactNative().Easing.bezier(0.55, 0.055, 0.675, 0.19);
+const useAnimatedTransition = ({
+  visible,
+  duration = 300,
+  enterEasing = EASE_OUT,
+  exitEasing = EASE_IN,
+  useNativeDriver: driver = _platform.nativeDriverEnabled
+}) => {
+  const reduceMotion = (0, _useReducedMotion.useReducedMotion)();
+  const [mounted, setMounted] = (0, _react().useState)(visible);
+  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible ? 1 : 0)).current;
+  const animRef = (0, _react().useRef)(null);
+  const seqRef = (0, _react().useRef)(0);
+  const run = (0, _react().useCallback)((show, dur, easeIn, easeOut, nd) => {
+    seqRef.current += 1;
+    const seq = seqRef.current;
+    animRef.current?.stop();
+    if (show) setMounted(true);
+    if (dur <= 0) {
+      progress.setValue(show ? 1 : 0);
+      if (!show) setMounted(false);
+      return;
+    }
+    const anim = _reactNative().Animated.timing(progress, {
+      toValue: show ? 1 : 0,
+      duration: dur,
+      easing: show ? easeIn : easeOut,
+      useNativeDriver: nd,
+      isInteraction: false
+    });
+    animRef.current = anim;
+    anim.start(({
+      finished
+    }) => {
+      if (finished && seq === seqRef.current && !show) setMounted(false);
+    });
+  }, [progress]);
+  (0, _react().useEffect)(() => {
+    run(visible, reduceMotion ? 0 : duration, enterEasing, exitEasing, driver);
+  }, [visible, reduceMotion, duration, enterEasing, exitEasing, driver, run]);
+  (0, _react().useEffect)(() => () => {
+    animRef.current?.stop();
+  }, []);
+  return {
+    mounted,
+    progress
+  };
+};
+exports.useAnimatedTransition = useAnimatedTransition;

package/dist/cjs/hooks/animation/useReducedMotion.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = exports.getReducedMotion = exports._resetForTesting = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+let _reduced = false;
+let _inited = false;
+const _subs = new Set();
+const set = v => {
+  if (v === _reduced) return;
+  _reduced = v;
+  _subs.forEach(fn => fn(v));
+};
+const init = () => {
+  if (_inited) return;
+  _inited = true;
+  if (_reactNative().Platform.OS === 'web') {
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      try {
+        const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+        _reduced = mql.matches;
+        const h = e => set(e.matches);
+        mql.addEventListener?.('change', h) ?? mql.addListener?.(h);
+      } catch {}
+    }
+    return;
+  }
+  _reactNative().AccessibilityInfo.isReduceMotionEnabled?.().then(v => set(!!v)).catch(() => {});
+  try {
+    _reactNative().AccessibilityInfo.addEventListener('reduceMotionChanged', v => set(v));
+  } catch {}
+};
+const useReducedMotion = () => {
+  const r = (0, _react().useRef)(false);
+  if (!r.current) {
+    r.current = true;
+    init();
+  }
+  const [v, sv] = (0, _react().useState)(_reduced);
+  (0, _react().useEffect)(() => {
+    if (_reduced !== v) sv(_reduced);
+    _subs.add(sv);
+    return () => {
+      _subs.delete(sv);
+    };
+  }, []);
+  return v;
+};
+exports.useReducedMotion = useReducedMotion;
+const getReducedMotion = () => {
+  init();
+  return _reduced;
+};
+exports.getReducedMotion = getReducedMotion;
+const _resetForTesting = () => {
+  _reduced = false;
+  _inited = false;
+  _subs.clear();
+};
+exports._resetForTesting = _resetForTesting;

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

@@ -31,27 +31,19 @@ const useAriaListBox = props => {
     label,
     ...rest
   } = props;
-  const resolvedProps = (0, _react().useMemo)(() => {
-    if (label == null) return rest;
-    const ariaLabel = typeof label === 'string' ? label : undefined;
-    return {
-      ...rest,
-      ...(ariaLabel ? {
-        'aria-label': ariaLabel
-      } : null)
-    };
-  }, [label, rest]);
-  const state = (0, _list().useListState)(resolvedProps);
+  const resolved = typeof label === 'string' ? {
+    ...rest,
+    'aria-label': label
+  } : rest;
+  const state = (0, _list().useListState)(resolved);
   const {
     listBoxProps,
     labelProps
-  } = (0, _listbox().useListBox)(resolvedProps, state, ref);
-  const resolvedListBoxProps = (0, _react().useMemo)(() => listBoxProps, [listBoxProps]);
-  const resolvedLabelProps = (0, _react().useMemo)(() => labelProps, [labelProps]);
+  } = (0, _listbox().useListBox)(resolved, state, ref);
   return {
     state,
-    listBoxProps: resolvedListBoxProps,
-    labelProps: resolvedLabelProps,
+    listBoxProps: (0, _react().useMemo)(() => listBoxProps, [listBoxProps]),
+    labelProps: (0, _react().useMemo)(() => labelProps, [labelProps]),
     ref
   };
 };

package/dist/cjs/hooks/aria/useAriaOverlay.js

@@ -30,7 +30,7 @@ const useAriaOverlay = ({
   onClose,
   isDismissable = true,
   shouldCloseOnInteractOutside,
-  overlayProps: overlayPropOverrides
+  overlayProps: overrides
 }) => {
   const overlayRef = (0, _react().useRef)(null);
   const {
@@ -41,10 +41,10 @@ const useAriaOverlay = ({
     isDismissable,
     shouldCloseOnInteractOutside
   }, overlayRef);
-  const resolvedOverlayProps = (0, _react().useMemo)(() => (0, _utils().mergeProps)(overlayProps ?? {}, overlayPropOverrides ?? {}), [overlayPropOverrides, overlayProps]);
+  const resolved = (0, _react().useMemo)(() => (0, _utils().mergeProps)(overlayProps ?? {}, overrides ?? {}), [overrides, overlayProps]);
   return {
     overlayRef,
-    overlayProps: resolvedOverlayProps
+    overlayProps: resolved
   };
 };
 exports.useAriaOverlay = useAriaOverlay;

package/dist/cjs/hooks/aria/useAriaPress.js

@@ -39,12 +39,7 @@ function _utils() {
   };
   return data;
 }
-const mergePropsCompat = (...args) => {
-  if (typeof _utils().mergeProps === 'function') {
-    return (0, _utils().mergeProps)(...args);
-  }
-  return Object.assign({}, ...args);
-};
+const mp = (...args) => typeof _utils().mergeProps === 'function' ? (0, _utils().mergeProps)(...args) : Object.assign({}, ...args);
 const useAriaPress = ({
   disabled = false,
   allowHover = _reactNative().Platform.OS === 'web',
@@ -65,32 +60,24 @@ const useAriaPress = ({
   } = (0, _interactions().useHover)({
     isDisabled: disabled || !allowHover
   });
-  const useFocusCompat = _focus().useFocus;
   const {
     isFocused,
     focusProps
-  } = useFocusCompat({
+  } = (0, _focus().useFocus)({
     isDisabled: disabled
   });
-  const useFocusRingCompat = _focus().useFocusRing;
   const {
     focusProps: focusRingProps,
     isFocusVisible
-  } = useFocusRingCompat({
+  } = (0, _focus().useFocusRing)({
     isDisabled: disabled
   });
   const interactionProps = (0, _react().useMemo)(() => {
-    let merged = pressProps;
-    if (allowHover) {
-      merged = mergePropsCompat(merged, hoverProps);
-    }
-    if (allowFocus && !disabled) {
-      merged = mergePropsCompat(merged, focusProps, focusRingProps);
-    }
-    if (extraProps) {
-      merged = mergePropsCompat(merged, extraProps);
-    }
-    return merged;
+    let m = pressProps;
+    if (allowHover) m = mp(m, hoverProps);
+    if (allowFocus && !disabled) m = mp(m, focusProps, focusRingProps);
+    if (extraProps) m = mp(m, extraProps);
+    return m;
   }, [allowFocus, allowHover, disabled, extraProps, focusProps, focusRingProps, hoverProps, pressProps]);
   const states = (0, _react().useMemo)(() => ({
     hovered: !!isHovered,

package/dist/cjs/hooks/aria/useAriaToggle.js

@@ -26,15 +26,15 @@ function _toggle2() {
   return data;
 }
 const useAriaToggle = props => {
-  const inputRef = props.inputRef ?? (0, _react().useRef)(null);
+  const fallbackRef = (0, _react().useRef)(null);
+  const inputRef = props.inputRef ?? fallbackRef;
   const state = (0, _toggle2().useToggleState)(props);
   const {
     inputProps
   } = (0, _toggle().useToggle)(props, state, inputRef);
-  const resolvedInputProps = (0, _react().useMemo)(() => inputProps, [inputProps]);
   return {
     state,
-    inputProps: resolvedInputProps,
+    inputProps: (0, _react().useMemo)(() => inputProps, [inputProps]),
     inputRef
   };
 };