@thewhileloop/whileui 4.1.0 → 4.1.2

package/dist/lib/overlay-presence.d.ts

@@ -0,0 +1,15 @@
+interface OverlayPresenceOptions {
+    visible: boolean;
+    openDuration: number;
+    closeDuration: number;
+}
+/**
+ * Keeps an overlay mounted through its exit animation. `progress` runs 0 → 1 on open and
+ * back to 0 on close; `mounted` drops once the exit finishes. Reduced motion and the
+ * disabled test policy collapse both durations to zero.
+ */
+export declare function useOverlayPresence({ visible, openDuration, closeDuration, }: OverlayPresenceOptions): {
+    mounted: boolean;
+    progress: import("react-native-reanimated").SharedValue<number>;
+};
+export {};

package/dist/lib/overlay-presence.js

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useMotionPolicy } from './motion-policy';
+/**
+ * Keeps an overlay mounted through its exit animation. `progress` runs 0 → 1 on open and
+ * back to 0 on close; `mounted` drops once the exit finishes. Reduced motion and the
+ * disabled test policy collapse both durations to zero.
+ */
+export function useOverlayPresence({ visible, openDuration, closeDuration, }) {
+    const motion = useMotionPolicy();
+    const progress = useSharedValue(0);
+    const [mounted, setMounted] = useState(visible);
+    const closeTimerRef = useRef(null);
+    const [prevVisible, setPrevVisible] = useState(visible);
+    // Open in the prop-change render so the first animation frame has a mounted panel;
+    // closing stays mounted on the timer until the exit animation finishes.
+    if (prevVisible !== visible) {
+        setPrevVisible(visible);
+        if (visible)
+            setMounted(true);
+    }
+    useEffect(() => {
+        if (!mounted)
+            return;
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+        const duration = motion.reduceMotion || !motion.animationsEnabled ? 0 : visible ? openDuration : closeDuration;
+        progress.value = withTiming(visible ? 1 : 0, {
+            duration,
+            reduceMotion: motion.reanimatedReduceMotion,
+            easing: visible ? Easing.bezier(0.2, 0.8, 0.2, 1) : Easing.bezier(0.4, 0, 1, 1),
+        });
+        if (!visible) {
+            closeTimerRef.current = setTimeout(() => setMounted(false), duration);
+        }
+        return () => {
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+                closeTimerRef.current = null;
+            }
+        };
+    }, [
+        mounted,
+        visible,
+        progress,
+        openDuration,
+        closeDuration,
+        motion.animationsEnabled,
+        motion.reduceMotion,
+        motion.reanimatedReduceMotion,
+    ]);
+    return { mounted, progress };
+}

package/dist/lib/recipes.d.ts

@@ -1,4 +1,4 @@
-import type { TextStyle, ViewStyle } from 'react-native';
+import { type TextStyle, type ViewStyle } from 'react-native';
 import { type ThemeColors } from './theme-colors';
 import { type VisualTokens } from './visual-tokens';
 /**

package/dist/lib/recipes.js

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+import { formatRgb, parse } from 'culori';
 import { useThemeColors } from './theme-colors';
 import { useVisualTokens } from './visual-tokens';
 export function controlRecipe(visual, size = 'default') {
@@ -92,14 +94,31 @@ export function shadowStyle(visual, colors, tier) {
             : visual.shadowElevationLg;
     if (opacity <= 0)
         return {};
+    // Android below 9 cannot draw an outset box shadow and keeps the elevation fallback.
+    if (Platform.OS === 'android' && typeof Platform.Version === 'number' && Platform.Version < 28) {
+        return { elevation };
+    }
+    // A box shadow is clipped outside the border box, so it never shows through a
+    // translucent surface. Elevation and the legacy `shadow*` props draw under the whole
+    // view, which greyed every translucent card on Android. CSS blur is twice the
+    // Core Animation radius the tokens were tuned for.
     return {
-        shadowColor: colors.shadow,
-        shadowOpacity: opacity,
-        shadowRadius: radius,
-        shadowOffset: { width: 0, height: offsetY },
-        elevation,
+        boxShadow: [
+            {
+                offsetX: 0,
+                offsetY,
+                blurRadius: radius * 2,
+                color: shadowColorWithOpacity(colors.shadow, opacity),
+            },
+        ],
     };
 }
+function shadowColorWithOpacity(color, opacity) {
+    const parsed = parse(color);
+    if (!parsed)
+        return color;
+    return formatRgb({ ...parsed, alpha: opacity });
+}
 // Component-owned text sizes. Font family/weight stays on className
 // (font-medium etc.) so app font mappings keep working.
 export function typographyStyle(visual, role) {

package/dist/lib/theme-bridge.d.ts

@@ -23,7 +23,7 @@ export declare function applyThemeMode(mode: ThemeMode): void;
 export declare function resolveThemeMode(adapter?: ThemeBridgeAdapter, fallback?: ThemeMode): Promise<ThemeMode>;
 export declare function syncThemeMode(mode: ThemeMode, adapter?: ThemeBridgeAdapter): Promise<ThemeMode>;
 export declare function useThemeBridge({ initialMode, adapter, }?: UseThemeBridgeOptions): UseThemeBridgeResult;
-export declare function ThemeBridge({ mode, initialMode, adapter }: ThemeBridgeProps): import("react").FunctionComponentElement<Pick<ThemeBridgeProps, "initialMode" | "adapter">> | import("react").FunctionComponentElement<{
+export declare function ThemeBridge({ mode, initialMode, adapter }: ThemeBridgeProps): import("react").FunctionComponentElement<Pick<ThemeBridgeProps, "adapter" | "initialMode">> | import("react").FunctionComponentElement<{
     mode: ThemeMode;
     adapter?: ThemeBridgeAdapter;
 }>;

package/dist/lib/theme-bridge.js

@@ -1,6 +1,37 @@
-import { createElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { createElement, useCallback, useEffect, useMemo, useReducer } from 'react';
 import { Uniwind, useUniwind } from 'uniwind';
 const modeCycle = ['light', 'dark', 'system'];
+function themeBridgeReducer(state, action) {
+    if (action.type === 'cycle') {
+        return {
+            ...state,
+            status: 'ready',
+            mode: modeCycle[(modeCycle.indexOf(state.mode) + 1) % modeCycle.length],
+        };
+    }
+    if (action.type === 'select') {
+        return { ...state, status: 'ready', mode: action.mode };
+    }
+    if (action.type === 'hydrate') {
+        if (state.adapter === action.adapter &&
+            state.initialMode === action.initialMode &&
+            state.status === (action.adapter ? 'hydrating' : 'ready')) {
+            return state;
+        }
+        return {
+            status: action.adapter ? 'hydrating' : 'ready',
+            mode: state.mode,
+            adapter: action.adapter,
+            initialMode: action.initialMode,
+        };
+    }
+    if (state.status !== 'hydrating' ||
+        state.adapter !== action.adapter ||
+        state.initialMode !== action.initialMode) {
+        return state;
+    }
+    return { ...state, status: 'ready', mode: action.mode };
+}
 export function applyThemeMode(mode) {
     Uniwind.setTheme(mode);
 }
@@ -23,16 +54,21 @@ export async function syncThemeMode(mode, adapter) {
 }
 export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
     const { theme } = useUniwind();
-    const [mode, setMode] = useState(initialMode);
-    const [hydrated, setHydrated] = useState(!adapter);
+    const [state, dispatch] = useReducer(themeBridgeReducer, {
+        status: adapter ? 'hydrating' : 'ready',
+        mode: initialMode,
+        adapter,
+        initialMode,
+    });
     useEffect(() => {
         let mounted = true;
+        dispatch({ type: 'hydrate', adapter, initialMode });
         if (!adapter) {
             return;
         }
         // `loadThemeMode` is the consumer's storage. If it rejects — a corrupt store, a
         // keychain prompt the user dismissed — the app must still render in the initial
-        // mode; leaving `hydrated` false would strand anything gated on it forever.
+        // mode rather than remaining in the hydrating phase forever.
         void (async () => {
             let next;
             try {
@@ -44,35 +80,33 @@ export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
             if (!mounted) {
                 return;
             }
-            setMode(next);
-            setHydrated(true);
+            dispatch({ type: 'hydrated', adapter, initialMode, mode: next });
         })();
         return () => {
             mounted = false;
         };
     }, [adapter, initialMode]);
     useEffect(() => {
-        if (!hydrated) {
+        if (state.status !== 'ready' ||
+            state.adapter !== adapter ||
+            state.initialMode !== initialMode) {
             return;
         }
-        applyThemeMode(mode);
+        applyThemeMode(state.mode);
         if (adapter) {
-            void adapter.saveThemeMode(mode);
+            void adapter.saveThemeMode(state.mode);
         }
-    }, [adapter, hydrated, mode]);
-    const cycleMode = useCallback(() => {
-        setMode((currentMode) => {
-            const currentIndex = modeCycle.indexOf(currentMode);
-            const nextIndex = (currentIndex + 1) % modeCycle.length;
-            return modeCycle[nextIndex];
-        });
+    }, [adapter, initialMode, state]);
+    const setMode = useCallback((mode) => {
+        dispatch({ type: 'select', mode });
     }, []);
+    const cycleMode = useCallback(() => dispatch({ type: 'cycle' }), []);
     return useMemo(() => ({
-        mode,
+        mode: state.mode,
         resolvedTheme: theme,
         setMode,
         cycleMode,
-    }), [cycleMode, mode, theme]);
+    }), [cycleMode, setMode, state.mode, theme]);
 }
 function ControlledThemeBridge({ mode, adapter, }) {
     useEffect(() => {

package/dist/metro.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+const { withUniwindConfig } = require('uniwind/metro');
+
+/**
+ * Packages that must resolve the real `react-native`. Uniwind's native resolver
+ * rewrites every `from 'react-native'` to its component wrapper, which re-exports
+ * components and nothing else, so a package importing a non-component export gets
+ * `undefined` with no build error. `expo-asset` imports `AssetRegistry` that way, and
+ * without it every `@expo/vector-icons` glyph is silently absent on iOS and Android.
+ */
+const NEEDS_REAL_REACT_NATIVE = ['expo-asset', 'expo-font', '@expo/vector-icons'];
+
+function withWhileUIMetro(config, options) {
+  const { exemptFromUniwindRewrite = [], ...uniwindOptions } = options;
+  const wrapped = withUniwindConfig(config, uniwindOptions);
+  const exempt = [...NEEDS_REAL_REACT_NATIVE, ...exemptFromUniwindRewrite];
+  const uniwindResolveRequest = wrapped.resolver.resolveRequest;
+
+  wrapped.resolver.resolveRequest = (context, moduleName, platform) => {
+    if (moduleName === 'react-native') {
+      const origin = context.originModulePath ?? '';
+      if (exempt.some((pkg) => origin.includes(`node_modules/${pkg}/`))) {
+        return context.resolveRequest(context, moduleName, platform);
+      }
+    }
+    return uniwindResolveRequest(context, moduleName, platform);
+  };
+
+  return wrapped;
+}
+
+module.exports = { withWhileUIMetro, NEEDS_REAL_REACT_NATIVE };

package/dist/metro.d.cts

@@ -0,0 +1,21 @@
+import type { withUniwindConfig } from 'uniwind/metro';
+
+type UniwindMetroOptions = Parameters<typeof withUniwindConfig>[1];
+
+export interface WithWhileUIMetroOptions extends UniwindMetroOptions {
+  /** Extra packages that must import the real `react-native` instead of Uniwind's wrapper. */
+  exemptFromUniwindRewrite?: string[];
+}
+
+/** Packages exempted from Uniwind's `react-native` rewrite by default. */
+export const NEEDS_REAL_REACT_NATIVE: readonly string[];
+
+/**
+ * Wraps an Expo Metro config with Uniwind and keeps `expo-asset`, `expo-font` and
+ * `@expo/vector-icons` on the real `react-native`, so icon fonts load on device.
+ * Use this in `metro.config.js` instead of calling `withUniwindConfig` yourself.
+ */
+export function withWhileUIMetro<T extends Parameters<typeof withUniwindConfig>[0]>(
+  config: T,
+  options: WithWhileUIMetroOptions
+): ReturnType<typeof withUniwindConfig>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhileloop/whileui",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "WhileUI Native — Copy-paste components for React Native. You own the code.",
   "license": "MIT",
   "repository": {
@@ -36,6 +36,10 @@
       "types": "./dist/vite.d.ts",
       "import": "./dist/vite.js"
     },
+    "./metro": {
+      "types": "./dist/metro.d.cts",
+      "default": "./dist/metro.cjs"
+    },
     "./tokens": {
       "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.js"
@@ -59,7 +63,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && cp src/metro.cjs src/metro.d.cts dist/",
     "prepack": "cp ../../README.md README.md",
     "postpack": "rm -f README.md",
     "prepare": "bun run build",