@mrmeg/expo-ui 0.27.0 → 0.28.0

package/dist/hooks/useResources.d.ts

@@ -1,25 +1,26 @@
+import type { SerifPreset } from "../constants/fonts.js";
 interface LoadResourcesResult {
     loaded: boolean;
     error: Error | null;
 }
-/**
- * Loads essential app resources on startup.
- *
- * Native platforms load four static Inter weights (via
- * @expo-google-fonts/inter) so StyledText's weight range resolves to real
- * font files. Web loads Inter from Google Fonts as a single CSS family;
- * weight differentiation there comes from a numeric fontWeight instead.
- *
- * Icons need nothing here: `Icon` renders `lucide-react-native` SVGs, which
- * have no font face to register on any platform, so server-rendered HTML
- * carries the glyph markup and hydrates without a font round trip.
- *
- * A host app that overrides the sans-serif families via `setFonts` owns
- * loading its own faces (typically through `expo-font`), so the Inter fetch
- * is skipped entirely — nothing would reference those files. For the skip to
- * apply, call `setFonts` before this hook mounts (module scope or ahead of
- * rendering the root); a later call still re-skins text, it just doesn't
- * un-download Inter.
- */
-export declare const useResources: () => LoadResourcesResult;
+export interface UseResourcesOptions {
+    /**
+     * Which serif to load and switch the `serif` variant to. `"georgia"`
+     * (default) loads nothing: the system face. `"newsreader"` injects the
+     * Google Fonts Newsreader stylesheet on web and, on native, registers the
+     * files passed as `serifFonts`, then sets the theme store's `serifPreset`
+     * so serif text resolves to Newsreader. An app `setFonts` serif override
+     * skips the preset entirely (the override wins anyway).
+     */
+    serif?: SerifPreset;
+    /**
+     * Native font map for the serif preset, from the app's own dependency:
+     * `@expo-google-fonts/newsreader/400Regular` … `700Bold` and
+     * `400Regular_Italic` (the names `newsreaderFamilies.native` expects). The
+     * package does not depend on the font package, so an app that never opts in
+     * ships none of it; on web this is ignored (the stylesheet serves the faces).
+     */
+    serifFonts?: Record<string, number | string> | null;
+}
+export declare const useResources: (options?: UseResourcesOptions) => LoadResourcesResult;
 export {};

package/dist/hooks/useResources.js

@@ -1,96 +1,100 @@
 import { useEffect, useState } from "react";
 import * as Font from "expo-font";
-import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_700Bold, } from "@expo-google-fonts/inter";
 import { Platform } from "react-native";
+import { interFontMap } from "../lib/interFonts";
 import { useThemeStore } from "../state/themeStore.js";
-// The four static Inter weights StyledText's native family keys point at
-// (see constants/fonts.ts). Native-only: web never renders these family names
-// ("Inter_400Regular" etc.) — fontFamilies.sansSerif resolves every weight to
-// the single "Inter" CSS family on web (loaded via ensureWebFontStylesheet
-// below), so fetching these .ttf assets there would just be ~1.3MB of dead
-// weight with nothing pointing at them.
-const interFontMap = {
-    Inter_400Regular,
-    Inter_500Medium,
-    Inter_600SemiBold,
-    Inter_700Bold,
-};
 function loadNativeInterFonts() {
-    if (Platform.OS === "web") {
+    if (Platform.OS === "web" || !interFontMap) {
         return Promise.resolve();
     }
     return Font.loadAsync(interFontMap);
 }
 const INTER_STYLESHEET_ID = "mrmeg-expo-ui-inter";
-const INTER_STYLESHEET_URL = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
-function ensureWebFontStylesheet() {
+// Four upright weights plus the 400 italic, so `italic` renders a real italic
+// on web at body weight (other weights synthesize).
+const INTER_STYLESHEET_URL = "https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
+const NEWSREADER_STYLESHEET_ID = "mrmeg-expo-ui-newsreader";
+const NEWSREADER_STYLESHEET_URL = "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
+function ensureWebFontStylesheet(id, href, label) {
     if (Platform.OS !== "web" || typeof document === "undefined") {
         return Promise.resolve();
     }
-    if (document.getElementById(INTER_STYLESHEET_ID)) {
+    if (document.getElementById(id)) {
         return Promise.resolve();
     }
     return new Promise((resolve, reject) => {
         const link = document.createElement("link");
-        link.id = INTER_STYLESHEET_ID;
+        link.id = id;
         link.rel = "stylesheet";
-        link.href = INTER_STYLESHEET_URL;
+        link.href = href;
         link.onload = () => resolve();
-        link.onerror = () => reject(new Error("Inter stylesheet failed to load"));
+        link.onerror = () => reject(new Error(`${label} stylesheet failed to load`));
         document.head.appendChild(link);
     });
 }
+let warnedMissingSerifFonts = false;
 /**
- * Loads essential app resources on startup.
- *
- * Native platforms load four static Inter weights (via
- * @expo-google-fonts/inter) so StyledText's weight range resolves to real
- * font files. Web loads Inter from Google Fonts as a single CSS family;
- * weight differentiation there comes from a numeric fontWeight instead.
- *
- * Icons need nothing here: `Icon` renders `lucide-react-native` SVGs, which
- * have no font face to register on any platform, so server-rendered HTML
- * carries the glyph markup and hydrates without a font round trip.
- *
- * A host app that overrides the sans-serif families via `setFonts` owns
- * loading its own faces (typically through `expo-font`), so the Inter fetch
- * is skipped entirely — nothing would reference those files. For the skip to
- * apply, call `setFonts` before this hook mounts (module scope or ahead of
- * rendering the root); a later call still re-skins text, it just doesn't
- * un-download Inter.
+ * The Newsreader preset: the stylesheet on web (the preset switches at once;
+ * the stack falls back to Georgia until the faces arrive), the app-supplied
+ * files on native (the preset switches after they register, since a native
+ * font name that is not loaded is an error, not a fallback).
  */
-export const useResources = () => {
+async function loadSerifPreset(options) {
+    if (options.serif !== "newsreader")
+        return;
+    if (useThemeStore.getState().fontOverrides.families?.serif)
+        return;
+    if (Platform.OS === "web") {
+        useThemeStore.getState().setSerifPreset("newsreader");
+        await ensureWebFontStylesheet(NEWSREADER_STYLESHEET_ID, NEWSREADER_STYLESHEET_URL, "Newsreader");
+        return;
+    }
+    if (!options.serifFonts) {
+        if (!warnedMissingSerifFonts) {
+            warnedMissingSerifFonts = true;
+            console.warn("useResources({ serif: \"newsreader\" }) needs `serifFonts` on native: pass the map of " +
+                "@expo-google-fonts/newsreader faces (400Regular, 500Medium, 600SemiBold, 700Bold, " +
+                "400Regular_Italic). Keeping Georgia.");
+        }
+        return;
+    }
+    await Font.loadAsync(options.serifFonts);
+    useThemeStore.getState().setSerifPreset("newsreader");
+}
+export const useResources = (options = {}) => {
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(null);
-    useEffect(() => {
-        let timeoutId;
-        // Read once at mount, not subscribed: font loading is a one-shot startup
-        // effect and cannot be undone by a later override.
-        const sansSerifOverridden = !!useThemeStore.getState().fontOverrides.families?.sansSerif;
-        async function loadResourcesAndDataAsync() {
-            try {
-                const fontPromise = Promise.all([
-                    sansSerifOverridden ? Promise.resolve() : loadNativeInterFonts(),
-                    sansSerifOverridden ? Promise.resolve() : ensureWebFontStylesheet(),
-                ]);
-                // Timeout after 5 seconds — proceed with system fallback fonts
-                const timeoutPromise = new Promise((_, reject) => {
-                    timeoutId = setTimeout(() => reject(new Error("Font loading timed out after 5s")), 5000);
-                });
-                await Promise.race([fontPromise, timeoutPromise]);
-            }
-            catch (e) {
-                const error = e instanceof Error ? e : new Error(String(e));
-                console.warn("Font loading issue (proceeding with fallback):", error.message);
-                setError(error);
-            }
-            finally {
-                clearTimeout(timeoutId);
-                setLoaded(true);
-            }
-        }
-        loadResourcesAndDataAsync();
-        return () => clearTimeout(timeoutId);
-    }, []);
+    const { serif, serifFonts } = options;
+    useEffect(() => startResourceLoad({ serif, serifFonts }, setError, () => setLoaded(true)), [serif, serifFonts]);
     return { loaded, error };
 };
+function startResourceLoad(options, onError, onLoaded) {
+    let timeoutId;
+    const sansSerifOverridden = !!useThemeStore.getState().fontOverrides.families?.sansSerif;
+    async function loadResourcesAndDataAsync() {
+        try {
+            const fontPromise = Promise.all([
+                sansSerifOverridden ? Promise.resolve() : loadNativeInterFonts(),
+                sansSerifOverridden
+                    ? Promise.resolve()
+                    : ensureWebFontStylesheet(INTER_STYLESHEET_ID, INTER_STYLESHEET_URL, "Inter"),
+                loadSerifPreset(options),
+            ]);
+            const timeoutPromise = new Promise((_, reject) => {
+                timeoutId = setTimeout(() => reject(new Error("Font loading timed out after 5s")), 5000);
+            });
+            await Promise.race([fontPromise, timeoutPromise]);
+        }
+        catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            console.warn("Font loading issue (proceeding with fallback):", error.message);
+            onError(error);
+        }
+        finally {
+            clearTimeout(timeoutId);
+            onLoaded();
+        }
+    }
+    loadResourcesAndDataAsync();
+    return () => clearTimeout(timeoutId);
+}

package/dist/hooks/useScalePress.d.ts

@@ -6,10 +6,12 @@ interface ScalePressOptions {
      */
     scaleTo?: number;
     /**
-     * Whether to fire haptic feedback on press
-     * @default true
+     * Haptic on press-in. `"setting"` follows the provider-level `haptics`
+     * setting (a light tap only under `"all"`); `true` always taps; `false`
+     * never does.
+     * @default "setting"
      */
-    haptic?: boolean;
+    haptic?: boolean | "setting";
     /**
      * Spring damping for bounce-back
      * @default 20
@@ -29,8 +31,9 @@ interface ScalePressOptions {
 /**
  * Hook for press-feedback scale animation using React Native Animated.
  *
- * Returns an animated style and onPressIn/onPressOut handlers to spread onto a Pressable.
- * Respects reduced motion preferences.
+ * Returns an animated style and onPressIn/onPressOut handlers to spread onto a
+ * Pressable. Under reduced motion the scale stays at 1 — the pressed opacity
+ * the components layer on carries the feedback instead.
  *
  * @example
  * ```tsx

package/dist/hooks/useScalePress.js

@@ -1,12 +1,15 @@
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useMemo } from "react";
 import { Animated } from "react-native";
-import { hapticLight } from "../lib/haptics.js";
+import { hapticLight, hapticPress } from "../lib/haptics.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 import { useReducedMotion } from "./useReduceMotion.js";
 /**
  * Hook for press-feedback scale animation using React Native Animated.
  *
- * Returns an animated style and onPressIn/onPressOut handlers to spread onto a Pressable.
- * Respects reduced motion preferences.
+ * Returns an animated style and onPressIn/onPressOut handlers to spread onto a
+ * Pressable. Under reduced motion the scale stays at 1 — the pressed opacity
+ * the components layer on carries the feedback instead.
  *
  * @example
  * ```tsx
@@ -20,27 +23,31 @@ import { useReducedMotion } from "./useReduceMotion.js";
  * ```
  */
 export function useScalePress(options = {}) {
-    const { scaleTo = 0.97, haptic = true, damping = 20, stiffness = 300, disabled = false, } = options;
+    const { scaleTo = 0.97, haptic = "setting", damping = 20, stiffness = 300, disabled = false, } = options;
     const reduceMotion = useReducedMotion();
-    const scale = useRef(new Animated.Value(1)).current;
+    const scale = useAnimatedValue(1);
     const animateTo = useCallback((toValue) => {
         scale.stopAnimation();
+        // Reduced motion: no scale change at all (not even an instant jump), so
+        // the surface stays still while its pressed opacity does the signalling.
         if (reduceMotion) {
-            scale.setValue(toValue);
+            scale.setValue(1);
             return;
         }
         Animated.spring(scale, {
             toValue,
             damping,
             stiffness,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [damping, reduceMotion, scale, stiffness]);
     const onPressIn = useCallback(() => {
         if (disabled)
             return;
-        if (haptic)
+        if (haptic === true)
             hapticLight();
+        else if (haptic === "setting")
+            hapticPress();
         animateTo(scaleTo);
     }, [animateTo, disabled, haptic, scaleTo]);
     const onPressOut = useCallback(() => {

package/dist/hooks/useShape.d.ts

@@ -0,0 +1,24 @@
+import { type ShapeOverrides, type ShapeSlot } from "../state/themeStore.js";
+/**
+ * The host app's `setShape` override for one slot, or `undefined` when the
+ * slot is untouched. One store subscription per component, re-rendering only
+ * when that slot changes.
+ *
+ * Layer it right after the component's static radius and before the caller's
+ * `style`, so the precedence stays caller → app → package:
+ *
+ * ```tsx
+ * const cardShape = useShape("card");
+ * <View style={[styles.card, shapeRadius(cardShape), style]} />
+ * ```
+ */
+export declare function useShape<S extends ShapeSlot>(slot: S): ShapeOverrides[S] | undefined;
+/**
+ * `{ borderRadius }` when the override sets one (zero included — square
+ * corners are a choice), otherwise `undefined` so a style array skips it.
+ */
+export declare function shapeRadius(override: {
+    borderRadius?: number;
+} | undefined): {
+    borderRadius: number;
+} | undefined;

package/dist/hooks/useShape.js

@@ -0,0 +1,24 @@
+import { useThemeStore } from "../state/themeStore.js";
+/**
+ * The host app's `setShape` override for one slot, or `undefined` when the
+ * slot is untouched. One store subscription per component, re-rendering only
+ * when that slot changes.
+ *
+ * Layer it right after the component's static radius and before the caller's
+ * `style`, so the precedence stays caller → app → package:
+ *
+ * ```tsx
+ * const cardShape = useShape("card");
+ * <View style={[styles.card, shapeRadius(cardShape), style]} />
+ * ```
+ */
+export function useShape(slot) {
+    return useThemeStore((s) => s.shapeOverrides[slot]);
+}
+/**
+ * `{ borderRadius }` when the override sets one (zero included — square
+ * corners are a choice), otherwise `undefined` so a style array skips it.
+ */
+export function shapeRadius(override) {
+    return override?.borderRadius === undefined ? undefined : { borderRadius: override.borderRadius };
+}

package/dist/hooks/useStaggeredEntrance.js

@@ -1,7 +1,9 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 import { Animated, Easing } from "react-native";
 import { useReducedMotion } from "./useReduceMotion.js";
 import { durations } from "../constants/motion.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 /**
  * Hook for entrance animations with stagger support using React Native Animated.
  *
@@ -24,15 +26,15 @@ import { durations } from "../constants/motion.js";
 export function useStaggeredEntrance(options = {}) {
     const { type = "fadeSlideUp", delay = 0, duration = durations.normal, slideDistance = 8, initialScale = 0.95, } = options;
     const reduceMotion = useReducedMotion();
-    const opacity = useRef(new Animated.Value(reduceMotion ? 1 : 0)).current;
-    const translateY = useRef(new Animated.Value(reduceMotion
+    const opacity = useAnimatedValue(reduceMotion ? 1 : 0);
+    const translateY = useAnimatedValue(reduceMotion
         ? 0
         : type === "fadeSlideUp"
             ? slideDistance
             : type === "fadeSlideDown"
                 ? -slideDistance
-                : 0)).current;
-    const scale = useRef(new Animated.Value(reduceMotion ? 1 : type === "scale" ? initialScale : 1)).current;
+                : 0);
+    const scale = useAnimatedValue(reduceMotion ? 1 : type === "scale" ? initialScale : 1);
     useEffect(() => {
         if (reduceMotion) {
             opacity.setValue(1);
@@ -50,7 +52,7 @@ export function useStaggeredEntrance(options = {}) {
         const timingConfig = {
             duration,
             easing: Easing.out(Easing.cubic),
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         };
         const animations = [
             Animated.timing(opacity, {
@@ -69,7 +71,7 @@ export function useStaggeredEntrance(options = {}) {
                 toValue: 1,
                 damping: 14,
                 stiffness: 250,
-                useNativeDriver: true,
+                useNativeDriver: shouldUseNativeDriver,
             }));
         }
         const animation = delay > 0

package/dist/hooks/useTheme.d.ts

@@ -1,6 +1,6 @@
-import { Colors } from "../constants/colors";
+import { Colors } from "../constants/colors.js";
 import { ImageStyle, TextStyle, ViewStyle } from "react-native";
-import { spacing as spacingConstants } from "../constants/spacing";
+import { spacing as spacingConstants } from "../constants/spacing.js";
 type ShadowType = "base" | "soft" | "sharp" | "subtle" | "elevated" | "glow" | "glass" | "card" | "cardHover" | "cardSubtle";
 interface ExtendedColorScheme {
     theme: Colors["light" | "dark"];
@@ -32,7 +32,7 @@ interface ExtendedColorScheme {
  * - getTextColorForBackground("#000") → "light"
  * - getContrastingColor("#f4f4f4", "#222", "#fff") → "#222"
  * - withAlpha("#336699", 0.6) → "rgba(51,102,153,0.6)"
- * - getShadowStyle('base') → { boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.03)" }
+ * - getShadowStyle('base') → { boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.1), 0px 4px 12px rgba(0, 0, 0, 0.06)" } (light)
  */
 export declare function useTheme(): ExtendedColorScheme & {
     toggleTheme: () => void;