@mrmeg/expo-ui 0.14.0 → 0.16.0

package/dist/hooks/useResources.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import * as Font from "expo-font";
 import Feather from "@expo/vector-icons/Feather";
+import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_700Bold, } from "@expo-google-fonts/inter";
 import { Platform } from "react-native";
 // Eager, module-scope load so expo-font registers Feather in its SSR
 // serverContext. When the server renders the HTML document, expo-font emits
@@ -11,30 +12,50 @@ import { Platform } from "react-native";
 // the effect; the effect's loadAsync becomes a no-op for the already-loaded
 // font.
 void Font.loadAsync(Feather.font);
-const LATO_STYLESHEET_ID = "mrmeg-expo-ui-lato";
-const LATO_STYLESHEET_URL = "https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap";
+// 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") {
+        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() {
     if (Platform.OS !== "web" || typeof document === "undefined") {
         return Promise.resolve();
     }
-    if (document.getElementById(LATO_STYLESHEET_ID)) {
+    if (document.getElementById(INTER_STYLESHEET_ID)) {
         return Promise.resolve();
     }
     return new Promise((resolve, reject) => {
         const link = document.createElement("link");
-        link.id = LATO_STYLESHEET_ID;
+        link.id = INTER_STYLESHEET_ID;
         link.rel = "stylesheet";
-        link.href = LATO_STYLESHEET_URL;
+        link.href = INTER_STYLESHEET_URL;
         link.onload = () => resolve();
-        link.onerror = () => reject(new Error("Lato stylesheet failed to load"));
+        link.onerror = () => reject(new Error("Inter stylesheet failed to load"));
         document.head.appendChild(link);
     });
 }
 /**
  * Loads essential app resources on startup.
  *
- * The UI package does not bundle font files. Web loads Lato from Google Fonts;
- * native platforms use their system sans-serif fallback.
+ * 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.
  */
 export const useResources = () => {
     const [loaded, setLoaded] = useState(false);
@@ -45,6 +66,7 @@ export const useResources = () => {
             try {
                 const fontPromise = Promise.all([
                     Font.loadAsync(Feather.font),
+                    loadNativeInterFonts(),
                     ensureWebFontStylesheet(),
                 ]);
                 // Timeout after 5 seconds — proceed with system fallback fonts

package/dist/hooks/useStaggeredEntrance.d.ts

@@ -14,7 +14,7 @@ interface StaggeredEntranceOptions {
     delay?: number;
     /**
      * Duration of the entrance animation (ms)
-     * @default 200
+     * @default durations.normal (200)
      */
     duration?: number;
     /**

package/dist/hooks/useStaggeredEntrance.js

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef } from "react";
 import { Animated, Easing } from "react-native";
 import { useReducedMotion } from "./useReduceMotion.js";
+import { durations } from "../constants/motion.js";
 /**
  * Hook for entrance animations with stagger support using React Native Animated.
  *
@@ -21,7 +22,7 @@ import { useReducedMotion } from "./useReduceMotion.js";
  * ```
  */
 export function useStaggeredEntrance(options = {}) {
-    const { type = "fadeSlideUp", delay = 0, duration = 200, slideDistance = 8, initialScale = 0.95, } = 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

package/dist/hooks/useTheme.d.ts

@@ -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 1px 3px rgba(0, 0, 0, 0.1)" }
+ * - getShadowStyle('base') → { boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.03)" }
  */
 export declare function useTheme(): ExtendedColorScheme & {
     toggleTheme: () => void;

package/dist/hooks/useTheme.js

@@ -42,7 +42,7 @@ function getCachedOrCompute(key, compute) {
  * - getTextColorForBackground("#000") → "light"
  * - getContrastingColor("#f4f4f4", "#222", "#fff") → "#222"
  * - withAlpha("#336699", 0.6) → "rgba(51,102,153,0.6)"
- * - getShadowStyle('base') → { boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)" }
+ * - getShadowStyle('base') → { boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.03)" }
  */
 export function useTheme() {
     const userTheme = useThemeStore((s) => s.userTheme);
@@ -100,29 +100,66 @@ export function useTheme() {
      * `boxShadow` has no separate opacity field, each preset's opacity is folded
      * into the color's alpha via `withAlpha`. `elevation` is dropped — `boxShadow`
      * renders shadows on Android in 0.85+.
+     *
+     * Every preset (except `sharp` and `glow`, which are deliberately
+     * single-layer) is a dual-layer shadow: a tight "contact" layer plus a
+     * wider, softer "ambient" layer, pitsi-ui-style. Layers are comma-joined
+     * into one `boxShadow` value.
      */
     const getShadowStyle = useCallback((type) => {
-        // Each preset: [offsetX, offsetY, blurRadius, color, opacity].
+        // Each preset is one or more layers of [offsetX, offsetY, blurRadius, color, opacity].
         // Darker themes get a stronger alpha so shadows stay visible.
         const boost = theme.dark ? 3 : 1;
         const overlay = theme.colors.overlay;
         const shadowConfigs = {
-            base: { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.1 },
-            soft: { x: 0, y: 4, blur: 6, color: overlay, opacity: 0.1 },
-            sharp: { x: 0, y: 1, blur: 1, color: overlay, opacity: 0.15 },
-            subtle: { x: 0, y: 1, blur: 2, color: overlay, opacity: 0.05 },
-            elevated: { x: 0, y: 20, blur: 40, color: overlay, opacity: 0.15 },
-            glow: { x: 0, y: 4, blur: 20, color: theme.colors.primary, opacity: 0.4 },
-            glass: { x: 0, y: 4, blur: 30, color: overlay, opacity: 0.05 },
-            card: { x: 0, y: 2, blur: 8, color: overlay, opacity: 0.08 },
-            cardHover: { x: 0, y: 8, blur: 24, color: overlay, opacity: 0.12 },
-            cardSubtle: { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.08 },
+            subtle: [
+                { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.04 },
+                { x: 0, y: 2, blur: 8, color: overlay, opacity: 0.03 },
+            ],
+            base: [
+                { x: 0, y: 2, blur: 6, color: overlay, opacity: 0.05 },
+                { x: 0, y: 4, blur: 12, color: overlay, opacity: 0.03 },
+            ],
+            soft: [
+                { x: 0, y: 4, blur: 10, color: overlay, opacity: 0.05 },
+                { x: 0, y: 8, blur: 20, color: overlay, opacity: 0.03 },
+            ],
+            card: [
+                { x: 0, y: 4, blur: 12, color: overlay, opacity: 0.05 },
+                { x: 0, y: 8, blur: 24, color: overlay, opacity: 0.03 },
+            ],
+            cardSubtle: [
+                { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.05 },
+                { x: 0, y: 3, blur: 9, color: overlay, opacity: 0.03 },
+            ],
+            cardHover: [
+                { x: 0, y: 8, blur: 24, color: overlay, opacity: 0.06 },
+                { x: 0, y: 16, blur: 48, color: overlay, opacity: 0.04 },
+            ],
+            elevated: [
+                { x: 0, y: 16, blur: 48, color: overlay, opacity: 0.08 },
+                { x: 0, y: 32, blur: 96, color: overlay, opacity: 0.05 },
+            ],
+            glass: [
+                { x: 0, y: 4, blur: 30, color: overlay, opacity: 0.05 },
+                { x: 0, y: 8, blur: 60, color: overlay, opacity: 0.03 },
+            ],
+            // Single layer — intentional crispness, not a soft dual-layer shadow.
+            sharp: [
+                { x: 0, y: 1, blur: 1, color: overlay, opacity: 0.15 },
+            ],
+            // Single layer — already a deliberate, vivid accent glow.
+            glow: [
+                { x: 0, y: 4, blur: 20, color: theme.colors.primary, opacity: 0.4 },
+            ],
         };
-        const { x, y, blur, color, opacity } = shadowConfigs[type];
-        // Don't boost the glow accent — it's already a deliberate, vivid alpha.
-        const alpha = color === theme.colors.primary ? opacity : Math.min(opacity * boost, 1);
+        const layers = shadowConfigs[type].map(({ x, y, blur, color, opacity }) => {
+            // Don't boost the glow accent — it's already a deliberate, vivid alpha.
+            const alpha = color === theme.colors.primary ? opacity : Math.min(opacity * boost, 1);
+            return `${x}px ${y}px ${blur}px ${withAlpha(color, alpha)}`;
+        });
         return {
-            boxShadow: `${x}px ${y}px ${blur}px ${withAlpha(color, alpha)}`,
+            boxShadow: layers.join(", "),
         };
     }, [theme]);
     const getFocusRingStyle = useCallback((offset = 2) => {

package/dist/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./animations";
 export * from "./haptics";
 export * from "./i18n";
+export * from "./themedStyles";

package/dist/lib/index.js

@@ -1,3 +1,4 @@
 export * from "./animations.js";
 export * from "./haptics.js";
 export * from "./i18n.js";
+export * from "./themedStyles.js";

package/dist/lib/themedStyles.d.ts

@@ -0,0 +1,21 @@
+import { type Theme } from "../constants/colors";
+/**
+ * Registers theme-dependent styles at module scope so react-native-web
+ * inserts their CSS rules into the server-side sheet before the document
+ * <head> is serialized.
+ *
+ * Styles created lazily during render — the
+ * `useMemo(() => createStyles(theme), [theme])` idiom — are inserted into
+ * RNW's sheet *after* expo-router has already captured the
+ * `<style id="react-native-stylesheet">` snapshot for the head. The SSR
+ * HTML then references class names that have no rules, which paints
+ * completely unstyled until hydration re-inserts them client-side (worst
+ * on the first request after a server cold start, and on every dev
+ * rebundle). See docs/ssr-hydration.md.
+ *
+ * Both base themes are computed eagerly at module load. Themes carrying
+ * color overrides (global brand or scoped) are computed once per theme
+ * object identity — `useTheme` keeps that identity stable, so the WeakMap
+ * behaves like the old `useMemo` without the render-time registration.
+ */
+export declare function createThemedStyles<T extends object>(factory: (theme: Theme) => T): (theme: Theme) => T;

package/dist/lib/themedStyles.js

@@ -0,0 +1,33 @@
+import { colors } from "../constants/colors.js";
+/**
+ * Registers theme-dependent styles at module scope so react-native-web
+ * inserts their CSS rules into the server-side sheet before the document
+ * <head> is serialized.
+ *
+ * Styles created lazily during render — the
+ * `useMemo(() => createStyles(theme), [theme])` idiom — are inserted into
+ * RNW's sheet *after* expo-router has already captured the
+ * `<style id="react-native-stylesheet">` snapshot for the head. The SSR
+ * HTML then references class names that have no rules, which paints
+ * completely unstyled until hydration re-inserts them client-side (worst
+ * on the first request after a server cold start, and on every dev
+ * rebundle). See docs/ssr-hydration.md.
+ *
+ * Both base themes are computed eagerly at module load. Themes carrying
+ * color overrides (global brand or scoped) are computed once per theme
+ * object identity — `useTheme` keeps that identity stable, so the WeakMap
+ * behaves like the old `useMemo` without the render-time registration.
+ */
+export function createThemedStyles(factory) {
+    const cache = new WeakMap();
+    cache.set(colors.light, factory(colors.light));
+    cache.set(colors.dark, factory(colors.dark));
+    return (theme) => {
+        const cached = cache.get(theme);
+        if (cached)
+            return cached;
+        const created = factory(theme);
+        cache.set(theme, created);
+        return created;
+    };
+}

package/dist/state/themeStore.d.ts

@@ -1,4 +1,5 @@
 import type { ThemeColors } from "../constants/colors";
+import type { FontOverrides } from "../constants/fonts";
 export type ThemePreference = "system" | "light" | "dark";
 export type ResolvedTheme = "light" | "dark";
 /**
@@ -28,6 +29,12 @@ export type ThemeStore = {
      * behaves exactly as before this field existed (fully backward compatible).
      */
     colorOverrides: ColorOverrides;
+    /**
+     * App-injected font overrides, applied by `StyledText` on top of the package
+     * defaults. Empty by default — zero override means the package behaves
+     * exactly as before this field existed (fully backward compatible).
+     */
+    fontOverrides: FontOverrides;
     setTheme: (theme: ThemePreference) => void;
     setSystemTheme: (theme: ResolvedTheme) => void;
     /**
@@ -35,6 +42,16 @@ export type ThemeStore = {
      * clear overrides and fall back to the package defaults.
      */
     setColors: (overrides: ColorOverrides) => void;
+    /**
+     * Replace the active font overrides. Pass `{}` to clear them and fall back
+     * to the package's bundled faces.
+     *
+     * Call this once at startup, after the app's fonts have been registered
+     * (e.g. alongside `setColors` in a theme-sync component). Apps loading
+     * per-weight faces via `expo-font` should also pass
+     * `webWeightStrategy: "family"` — see `FontWeightStrategy`.
+     */
+    setFonts: (overrides: FontOverrides) => void;
     loadTheme: () => void;
 };
 export declare function resolveThemePreference(userTheme: ThemePreference, systemTheme: ResolvedTheme): ResolvedTheme;

package/dist/state/themeStore.js

@@ -19,9 +19,15 @@ export const useThemeStore = create((set) => ({
     // No overrides by default: the package renders with its built-in palette
     // until a host app calls `setColors`.
     colorOverrides: {},
+    // Same contract as `colorOverrides`: the package renders with its bundled
+    // faces until a host app calls `setFonts`.
+    fontOverrides: {},
     setColors: (overrides) => {
         set({ colorOverrides: overrides ?? {} });
     },
+    setFonts: (overrides) => {
+        set({ fontOverrides: overrides ?? {} });
+    },
     setTheme: (theme) => {
         set({
             userTheme: theme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -88,25 +88,26 @@
     "publish:dry-run": "bun pm pack --dry-run"
   },
   "dependencies": {
+    "@expo-google-fonts/inter": "^0.4.2",
     "@expo/vector-icons": ">=15.0.0 <16.0.0",
-    "@rn-primitives/accordion": "~1.4.0",
-    "@rn-primitives/alert-dialog": "~1.4.0",
-    "@rn-primitives/checkbox": "~1.4.0",
-    "@rn-primitives/collapsible": "~1.4.0",
-    "@rn-primitives/dialog": "~1.4.0",
-    "@rn-primitives/dropdown-menu": "~1.4.0",
-    "@rn-primitives/label": "~1.4.0",
-    "@rn-primitives/popover": "~1.4.0",
-    "@rn-primitives/portal": "~1.4.0",
-    "@rn-primitives/radio-group": "~1.4.0",
-    "@rn-primitives/select": "~1.4.0",
-    "@rn-primitives/separator": "~1.4.0",
-    "@rn-primitives/slot": "~1.4.0",
-    "@rn-primitives/switch": "~1.4.0",
-    "@rn-primitives/tabs": "~1.4.0",
-    "@rn-primitives/toggle": "~1.4.0",
-    "@rn-primitives/toggle-group": "~1.4.0",
-    "@rn-primitives/tooltip": "~1.4.0"
+    "@rn-primitives/accordion": "~1.5.2",
+    "@rn-primitives/alert-dialog": "~1.5.2",
+    "@rn-primitives/checkbox": "~1.5.2",
+    "@rn-primitives/collapsible": "~1.5.2",
+    "@rn-primitives/dialog": "~1.5.2",
+    "@rn-primitives/dropdown-menu": "~1.5.2",
+    "@rn-primitives/label": "~1.5.2",
+    "@rn-primitives/popover": "~1.5.2",
+    "@rn-primitives/portal": "~1.5.2",
+    "@rn-primitives/radio-group": "~1.5.2",
+    "@rn-primitives/select": "~1.5.2",
+    "@rn-primitives/separator": "~1.5.2",
+    "@rn-primitives/slot": "~1.5.2",
+    "@rn-primitives/switch": "~1.5.2",
+    "@rn-primitives/tabs": "~1.5.2",
+    "@rn-primitives/toggle": "~1.5.2",
+    "@rn-primitives/toggle-group": "~1.5.2",
+    "@rn-primitives/tooltip": "~1.5.2"
   },
   "peerDependencies": {
     "@expo/ui": ">=56.0.0 <58.0.0",