react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/typography/Typography.js

@@ -19,11 +19,11 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     tokensOverride,
     children,
-    type: typeProp,
-    color: colorProp,
-    size: sizeProp,
+    type: typeP,
+    color: colorP,
+    size: sizeP,
     level,
-    disabled: disabledProp,
+    disabled: disP,
     delete: deleted,
     underline,
     center,
@@ -34,9 +34,9 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...textProps
   } = props;
   const tokens = useTypographyTokens(tokensOverride);
-  const type = typeProp ?? tokens.defaults.type;
-  const size = sizeProp ?? tokens.defaults.size;
-  const disabled = disabledProp ?? tokens.defaults.disabled;
+  const type = typeP ?? tokens.defaults.type;
+  const size = sizeP ?? tokens.defaults.size;
+  const disabled = disP ?? tokens.defaults.disabled;
   const ellipsisRows = resolveEllipsisRows(ellipsis);
   const ellipsisConfig = isEllipsisObject(ellipsis) ? ellipsis : undefined;
   const [isTruncated, setIsTruncated] = useState(false);
@@ -48,13 +48,14 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
     setIsTruncated(prev => prev === exceeded ? prev : exceeded);
   }, [ellipsisRows, expanded]);
   let resolvedColor = tokens.colors[type] ?? tokens.colors.default;
-  if (colorProp !== undefined && colorProp !== null) {
-    const colorKey = String(colorProp);
-    resolvedColor = hasTypographyColorKey(tokens.colors, colorKey) ? tokens.colors[colorKey] : colorKey;
+  if (colorP !== undefined && colorP !== null) {
+    const ck = String(colorP);
+    resolvedColor = hasTypographyColorKey(tokens.colors, ck) ? tokens.colors[ck] : ck;
   }
+  ;
   const fontSize = level ? tokens.sizing.titles[level].fontSize : tokens.sizing.sizes[size];
   const lineHeight = level ? tokens.sizing.titles[level].lineHeight : fontSize * tokens.sizing.lineHeightMultiplier;
-  const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
+  const textDeco = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
   const baseStyle = [{
     color: resolvedColor,
     fontSize,
@@ -62,12 +63,12 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
     fontFamily: tokens.typography.fontFamily,
     fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
     includeFontPadding: false,
-    textDecorationLine,
+    textDecorationLine: textDeco,
     textAlign: center ? 'center' : undefined,
     opacity: disabled ? tokens.opacity.disabled : 1
   }, style];
-  const hasActionText = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
-  const shouldShowAction = hasActionText && (isTruncated || expanded || isWeb);
+  const hasActTxt = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
+  const showAct = hasActTxt && (isTruncated || expanded || isWeb);
   const handleToggleEllipsis = useCallback(() => {
     if (!ellipsisConfig) return;
     setExpanded(prev => {
@@ -76,35 +77,33 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
       return next;
     });
   }, [ellipsisConfig]);
-  const actionLabel = !ellipsisConfig ? undefined : expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
-  const actionTextStyle = {
+  const actLabel = !ellipsisConfig ? undefined : expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
+  const actTxtStyle = {
     color: tokens.colors.primary,
     fontSize: tokens.sizing.sizes.sm,
     fontWeight: tokens.typography.weight.medium,
     marginLeft: tokens.sizing.actionMarginLeft,
     includeFontPadding: false
   };
-  const textStyle = shouldShowAction ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
+  const textStyle = showAct ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
   const textNode = /*#__PURE__*/React.createElement(Text, _extends({
     ref: ref,
     style: textStyle,
     onPress: onPress,
     numberOfLines: !expanded ? ellipsisRows : undefined,
     ellipsizeMode: "tail",
-    onTextLayout: hasActionText && ellipsisRows && !expanded && !isWeb ? handleTextLayout : undefined
+    onTextLayout: hasActTxt && ellipsisRows && !expanded && !isWeb ? handleTextLayout : undefined
   }, textProps), children);
-  if (!shouldShowAction) {
-    return center ? /*#__PURE__*/React.createElement(View, {
-      style: tokens.layout.centerWrapper
-    }, textNode) : textNode;
-  }
+  if (!showAct) return center ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.centerWrapper
+  }, textNode) : textNode;
   const actionNode = /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.actionRow
   }, textNode, /*#__PURE__*/React.createElement(Text, {
     onPress: handleToggleEllipsis,
     suppressHighlighting: true,
-    style: actionTextStyle
-  }, actionLabel));
+    style: actTxtStyle
+  }, actLabel));
   return center ? /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.centerWrapper
   }, actionNode) : actionNode;
@@ -139,6 +138,7 @@ const TypographyLink = /*#__PURE__*/React.forwardRef((props, ref) => {
       onPress(event);
       return;
     }
+    ;
     if (href) {
       try {
         await Linking.openURL(href);

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

@@ -1,11 +1,14 @@
 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); }
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Image, Text, View, useWindowDimensions } from 'react-native';
 import { isFiniteNumber, isString } from '../../utils';
 import { useWaterMarkTokens } from './tokens';
-const WaterMark = props => {
+const resolveFiniteNumber = (value, fallback) => 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,
+    content: contentP,
     width,
     height,
     gapX,
@@ -16,8 +19,8 @@ const WaterMark = props => {
     fontSize,
     color,
     opacity,
-    zIndex: zIndexProp,
-    fullPage: fullPageProp,
+    zIndex: zIdxP,
+    fullPage: fullP,
     tokensOverride,
     style,
     onLayoutCalculated,
@@ -25,12 +28,9 @@ const WaterMark = props => {
     ...rest
   } = props;
   const tokens = useWaterMarkTokens(tokensOverride);
-  const resolveFiniteNumber = (value, fallback) => 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;
+  const content = contentP ?? tokens.defaults.content;
+  const zIndex = resolveFiniteNumber(zIdxP, tokens.defaults.zIndex);
+  const fullPage = fullP ?? tokens.defaults.fullPage;
   const window = useWindowDimensions();
   const [layoutSize, setLayoutSize] = useState({
     width: 0,
@@ -41,98 +41,99 @@ const WaterMark = props => {
     height: 0
   });
   const size = fullPage ? window : layoutSize;
-  const resolvedGapX = resolveNonNegativeNumber(gapX, tokens.defaults.gapX);
-  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 = isFiniteNumber(font?.size) ? font?.size : 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 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);
-  const cellWidth = Math.max(1, markWidth + resolvedGapX);
-  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 rGapX = resolveNonNegativeNumber(gapX, tokens.defaults.gapX);
+  const rGapY = resolveNonNegativeNumber(gapY, tokens.defaults.gapY);
+  const rRotate = resolveFiniteNumber(rotate, tokens.defaults.rotate);
+  const rOpacity = Math.max(0, Math.min(1, resolveFiniteNumber(opacity, tokens.defaults.opacity)));
+  const fontSzFromFont = isFiniteNumber(font?.size) ? font.size : isString(font?.size) ? Number.parseFloat(font.size) : undefined;
+  const normFontSz = Math.max(0, resolveFiniteNumber((Number.isFinite(fontSzFromFont ?? Number.NaN) ? fontSzFromFont : undefined) ?? fontSize, tokens.defaults.fontSize));
+  const rColor = font?.color ?? color ?? tokens.colors.mark;
+  const markW = resolvePositiveNumber(image?.width ?? width, tokens.defaults.width);
+  const markH = resolvePositiveNumber(image?.height ?? height, tokens.defaults.height);
+  const cellW = Math.max(1, markW + rGapX);
+  const cellH = Math.max(1, markH + rGapY);
+  const rows = size.height ? Math.ceil(size.height / cellH) + 1 : 1;
+  const cols = size.width ? Math.ceil(size.width / cellW) + 1 : 1;
+  const onLayoutCalcRef = useRef(onLayoutCalculated);
+  onLayoutCalcRef.current = onLayoutCalculated;
+  const handleLayout = useCallback(event => {
     if (fullPage) return;
     const {
-      width,
-      height
+      width: w,
+      height: h
     } = event.nativeEvent.layout;
-    if (!isFiniteNumber(width) || !isFiniteNumber(height)) return;
-    const nextWidth = Math.max(0, width);
-    const nextHeight = Math.max(0, height);
-    if (lastLayoutRef.current.width === nextWidth && lastLayoutRef.current.height === nextHeight) return;
+    if (!isFiniteNumber(w) || !isFiniteNumber(h)) return;
+    const nw = Math.max(0, w),
+      nh = Math.max(0, h);
+    if (lastLayoutRef.current.width === nw && lastLayoutRef.current.height === nh) return;
     lastLayoutRef.current = {
-      width: nextWidth,
-      height: nextHeight
+      width: nw,
+      height: nh
     };
     setLayoutSize({
-      width: nextWidth,
-      height: nextHeight
+      width: nw,
+      height: nh
     });
-    onLayoutCalculated?.({
-      width: nextWidth,
-      height: nextHeight
+    onLayoutCalcRef.current?.({
+      width: nw,
+      height: nh
     });
-  };
+  }, [fullPage]);
   useEffect(() => {
-    if (!fullPage) return;
-    if (!isFiniteNumber(window.width) || !isFiniteNumber(window.height)) return;
-    if (window.width <= 0 || window.height <= 0) return;
-    onLayoutCalculated?.({
+    if (!fullPage || !isFiniteNumber(window.width) || !isFiniteNumber(window.height) || window.width <= 0 || window.height <= 0) return;
+    onLayoutCalcRef.current?.({
       width: window.width,
       height: window.height
     });
-  }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = {
+  }, [fullPage, window.width, window.height]);
+  const zIdxStyle = useMemo(() => ({
     zIndex
-  };
-  const cellStyle = {
-    width: cellWidth,
-    height: cellHeight
-  };
-  const oddRowStyle = {
-    paddingLeft: cellWidth / 2
-  };
-  const markStyle = {
-    width: markWidth,
-    height: markHeight,
+  }), [zIndex]);
+  const cellStyle = useMemo(() => ({
+    width: cellW,
+    height: cellH
+  }), [cellW, cellH]);
+  const oddRowStyle = useMemo(() => ({
+    paddingLeft: cellW / 2
+  }), [cellW]);
+  const markStyle = useMemo(() => ({
+    width: markW,
+    height: markH,
     transform: [{
-      rotate: `${resolvedRotate}deg`
+      rotate: `${rRotate}deg`
     }]
-  };
-  const imageStyle = {
-    width: markWidth,
-    height: markHeight,
-    opacity: resolvedOpacity
-  };
-  const textBaseStyle = {
-    fontSize: normalizedFontSize,
-    color: resolvedColor,
-    opacity: resolvedOpacity,
+  }), [markW, markH, rRotate]);
+  const imgStyle = useMemo(() => ({
+    width: markW,
+    height: markH,
+    opacity: rOpacity
+  }), [markW, markH, rOpacity]);
+  const txtBaseStyle = useMemo(() => ({
+    fontSize: normFontSz,
+    color: rColor,
+    opacity: rOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
-  };
-  const rowIndexes = Array.from({
+  }), [normFontSz, rColor, rOpacity, font?.family, font?.weight]);
+  const rowIdx = Array.from({
     length: rows
   }, (_, i) => i);
-  const colIndexes = Array.from({
+  const colIdx = Array.from({
     length: cols
   }, (_, i) => i);
   return /*#__PURE__*/React.createElement(View, _extends({
     pointerEvents: "none",
-    style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
+    style: [fullPage ? tokens.layout.absoluteFill : null, zIdxStyle, style],
     onLayout: handleLayout
   }, rest), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.wrapper
-  }, rowIndexes.map(rowIndex => /*#__PURE__*/React.createElement(View, {
-    key: `row-${rowIndex}`,
-    style: [tokens.layout.row, rowIndex % 2 === 0 ? null : oddRowStyle]
-  }, colIndexes.map(colIndex => /*#__PURE__*/React.createElement(View, {
-    key: `col-${rowIndex}-${colIndex}`,
+  }, rowIdx.map(ri => /*#__PURE__*/React.createElement(View, {
+    key: `row-${ri}`,
+    style: [tokens.layout.row, ri % 2 === 0 ? null : oddRowStyle]
+  }, colIdx.map(ci => /*#__PURE__*/React.createElement(View, {
+    key: `col-${ri}-${ci}`,
     style: [tokens.layout.cell, cellStyle]
   }, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.mark, markStyle]
@@ -140,12 +141,13 @@ const WaterMark = props => {
     source: {
       uri: image.src
     },
-    style: imageStyle,
+    style: imgStyle,
     resizeMode: "contain"
   }) : /*#__PURE__*/React.createElement(Text, {
     allowFontScaling: false,
-    style: [textBaseStyle, textStyle]
+    style: [txtBaseStyle, textStyle]
   }, content))))))));
 };
+const WaterMark = /*#__PURE__*/React.memo(WaterMarkImpl);
 WaterMark.displayName = 'WaterMark';
 export default WaterMark;

package/dist/es/design-system/Text.js

@@ -0,0 +1,19 @@
+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); }
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import { useTheme } from './useTheme';
+export const Text = /*#__PURE__*/React.forwardRef(({
+  style,
+  ...rest
+}, ref) => {
+  const {
+    foundations
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(RNText, _extends({
+    ref: ref,
+    style: [{
+      fontFamily: foundations.typography.fontFamily
+    }, style]
+  }, rest));
+});
+Text.displayName = 'Text';

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

@@ -2,21 +2,15 @@ import React, { useMemo } from 'react';
 import { ThemeContext } from './ThemeContext';
 import { createTokens } from './tokens';
 import { isObject } from '../utils/validate';
-const isThemeTokens = value => {
-  return Boolean(isObject(value) && 'palette' in value && 'spacing' in value);
-};
+const isTokens = v => Boolean(isObject(v) && 'palette' in v && 'spacing' in v);
 export const ThemeProvider = ({
   value,
   children
 }) => {
-  const resolved = useMemo(() => {
-    const foundations = isThemeTokens(value) ? value : createTokens(value?.foundations);
-    const components = !isThemeTokens(value) ? value?.components : undefined;
-    return {
-      foundations,
-      components
-    };
-  }, [value]);
+  const resolved = useMemo(() => ({
+    foundations: isTokens(value) ? value : createTokens(value?.foundations),
+    components: isTokens(value) ? undefined : value?.components
+  }), [value]);
   return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
     value: resolved
   }, children);

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

@@ -1,17 +1,15 @@
 import { useMemo } from 'react';
 import { deepMerge } from '../utils/deepMerge';
 import { useTheme } from './useTheme';
-export const createComponentTokensHook = (key, createBaseTokens) => {
-  return overrides => {
-    const {
-      foundations,
-      components
-    } = useTheme();
-    const componentOverrides = components?.[key];
-    return useMemo(() => {
-      const base = createBaseTokens(foundations);
-      const merged = componentOverrides && overrides ? deepMerge(componentOverrides, overrides) : componentOverrides ?? overrides;
-      return merged ? deepMerge(base, merged) : base;
-    }, [componentOverrides, foundations, overrides]);
-  };
+export const createComponentTokensHook = (key, createBaseTokens) => overrides => {
+  const {
+    foundations,
+    components
+  } = useTheme();
+  const co = components?.[key];
+  return useMemo(() => {
+    const base = createBaseTokens(foundations);
+    const m = co && overrides ? deepMerge(co, overrides) : co ?? overrides;
+    return m ? deepMerge(base, m) : base;
+  }, [co, foundations, overrides]);
 };

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

@@ -1,4 +1,5 @@
 export { ThemeProvider } from './ThemeProvider';
+export { Text } from './Text';
 export { useTheme } from './useTheme';
 export { createComponentTokensHook } from './createComponentTokensHook';
 export { mergeTokensOverride } from './mergeTokensOverride';

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

@@ -1,5 +1,2 @@
 import { deepMerge } from '../utils/deepMerge';
-export const mergeTokensOverride = (base, override) => {
-  if (base && override) return deepMerge(base, override);
-  return base ?? override;
-};
+export const mergeTokensOverride = (base, override) => base && override ? deepMerge(base, override) : base ?? override;

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

@@ -131,10 +131,9 @@ const auroraOverrides = {
     lineHeightMultiplier: 1.25
   }
 };
-const buildPreset = overrides => createTokens(overrides);
 export const themePresets = {
   light: defaultTokens,
-  dark: buildPreset(darkOverrides),
-  aurora: buildPreset(auroraOverrides)
+  dark: createTokens(darkOverrides),
+  aurora: createTokens(auroraOverrides)
 };
 export const getThemePreset = name => themePresets[name];

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

@@ -124,13 +124,5 @@ export const defaultFoundations = {
     pressed: 0.85
   }
 };
-export const buildFoundations = overrides => {
-  if (!overrides) {
-    return defaultFoundations;
-  }
-  return deepMerge(defaultFoundations, overrides);
-};
-export const createTokens = overrides => {
-  return buildFoundations(overrides);
-};
+export const createTokens = overrides => overrides ? deepMerge(defaultFoundations, overrides) : defaultFoundations;
 export const defaultTokens = defaultFoundations;

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

@@ -0,0 +1,2 @@
+export { useReducedMotion, getReducedMotion } from './useReducedMotion';
+export { useAnimatedTransition } from './useAnimatedTransition';

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

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, Easing } from 'react-native';
+import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from './useReducedMotion';
+const EASE_OUT = Easing.bezier(0.075, 0.82, 0.165, 1.0);
+const EASE_IN = Easing.bezier(0.55, 0.055, 0.675, 0.19);
+export const useAnimatedTransition = ({
+  visible,
+  duration = 300,
+  enterEasing = EASE_OUT,
+  exitEasing = EASE_IN,
+  useNativeDriver: driver = nativeDriverEnabled
+}) => {
+  const reduceMotion = useReducedMotion();
+  const [mounted, setMounted] = useState(visible);
+  const progress = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const animRef = useRef(null);
+  const seqRef = useRef(0);
+  const run = 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 = 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]);
+  useEffect(() => {
+    run(visible, reduceMotion ? 0 : duration, enterEasing, exitEasing, driver);
+  }, [visible, reduceMotion, duration, enterEasing, exitEasing, driver, run]);
+  useEffect(() => () => {
+    animRef.current?.stop();
+  }, []);
+  return {
+    mounted,
+    progress
+  };
+};

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

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Platform } from 'react-native';
+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 (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;
+  }
+  AccessibilityInfo.isReduceMotionEnabled?.().then(v => set(!!v)).catch(() => {});
+  try {
+    AccessibilityInfo.addEventListener('reduceMotionChanged', v => set(v));
+  } catch {}
+};
+export const useReducedMotion = () => {
+  const r = useRef(false);
+  if (!r.current) {
+    r.current = true;
+    init();
+  }
+  const [v, sv] = useState(_reduced);
+  useEffect(() => {
+    if (_reduced !== v) sv(_reduced);
+    _subs.add(sv);
+    return () => {
+      _subs.delete(sv);
+    };
+  }, []);
+  return v;
+};
+export const getReducedMotion = () => {
+  init();
+  return _reduced;
+};
+export const _resetForTesting = () => {
+  _reduced = false;
+  _inited = false;
+  _subs.clear();
+};

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

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

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

@@ -6,7 +6,7 @@ export const useAriaOverlay = ({
   onClose,
   isDismissable = true,
   shouldCloseOnInteractOutside,
-  overlayProps: overlayPropOverrides
+  overlayProps: overrides
 }) => {
   const overlayRef = useRef(null);
   const {
@@ -17,9 +17,9 @@ export const useAriaOverlay = ({
     isDismissable,
     shouldCloseOnInteractOutside
   }, overlayRef);
-  const resolvedOverlayProps = useMemo(() => mergeProps(overlayProps ?? {}, overlayPropOverrides ?? {}), [overlayPropOverrides, overlayProps]);
+  const resolved = useMemo(() => mergeProps(overlayProps ?? {}, overrides ?? {}), [overrides, overlayProps]);
   return {
     overlayRef,
-    overlayProps: resolvedOverlayProps
+    overlayProps: resolved
   };
 };