@mrmeg/expo-ui 0.3.0 → 0.4.1

package/dist/components/Icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import type { StyleProp, TextProps, TextStyle } from "react-native";
 import Feather from "@expo/vector-icons/Feather";
 /**
  * Theme color names that can be used as shortcuts
@@ -13,10 +13,16 @@ type IconBaseProps = {
     /** Icon color - can be a hex color or a theme color name. Defaults to theme's text color */
     color?: string | ThemeColorName;
     /** Additional styles for positioning, transforms, etc. */
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
     /** When true, hides the icon from the accessibility tree. @default false */
     decorative?: boolean;
 };
+type IconAccessibilityProps = Pick<TextProps, "accessible" | "importantForAccessibility" | "accessibilityElementsHidden" | "aria-hidden">;
+type CustomIconComponentProps = {
+    size: number;
+    color: string;
+    style?: StyleProp<TextStyle>;
+} & Partial<IconAccessibilityProps>;
 type FeatherIconProps = IconBaseProps & {
     /** The icon name to render (Feather icons) */
     name: IconName;
@@ -25,15 +31,12 @@ type FeatherIconProps = IconBaseProps & {
 type CustomIconProps = IconBaseProps & {
     name?: never;
     /** Custom component to render instead of Feather. Receives size and color as props. */
-    component: React.ComponentType<{
-        size: number;
-        color: string;
-    }>;
+    component: React.ComponentType<CustomIconComponentProps>;
 };
 export type IconProps = FeatherIconProps | CustomIconProps;
 /**
  * Universal Icon Component
- * Wraps @expo/vector-icons Feather with theme integration and style support
+ * Renders @expo/vector-icons Feather with theme integration and style support
  *
  * Usage:
  * ```tsx

package/dist/components/Icon.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import Feather from "@expo/vector-icons/Feather";
 const THEME_COLOR_KEYS = [
@@ -16,7 +15,7 @@ function resolveIconColor(color, themeColors) {
 }
 /**
  * Universal Icon Component
- * Wraps @expo/vector-icons Feather with theme integration and style support
+ * Renders @expo/vector-icons Feather with theme integration and style support
  *
  * Usage:
  * ```tsx
@@ -30,11 +29,17 @@ export function Icon(props) {
     const { theme } = useTheme();
     const iconColor = resolveIconColor(color, theme.colors);
     const CustomComponent = "component" in props ? props.component : undefined;
-    // Wrap in View with pointerEvents="none" to prevent icons from
-    // intercepting touches when used inside TouchableOpacity on iOS
-    return (_jsx(View, { style: [style, { pointerEvents: "none" }], accessible: !decorative, ...(decorative && {
-            importantForAccessibility: "no",
+    const accessibilityProps = decorative
+        ? {
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
             accessibilityElementsHidden: true,
             "aria-hidden": true,
-        }), children: CustomComponent ? (_jsx(CustomComponent, { size: size, color: iconColor })) : (_jsx(Feather, { name: props.name, size: size, color: iconColor })) }));
+        }
+        : { accessible: true };
+    const iconStyle = [style, { pointerEvents: "none" }];
+    if (CustomComponent) {
+        return (_jsx(CustomComponent, { size: size, color: iconColor, style: iconStyle, ...accessibilityProps }));
+    }
+    return (_jsx(Feather, { name: props.name, size: size, color: iconColor, style: iconStyle, ...accessibilityProps }));
 }

package/dist/constants/fonts.js

@@ -1,7 +1,13 @@
+import { Platform } from "react-native";
 // Web font stack fallback
 const WEB_FONT_STACK = "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
-const isReactNativeRuntime = typeof navigator !== "undefined" && navigator.product === "ReactNative";
-const isWebRuntime = typeof document !== "undefined" && !isReactNativeRuntime;
+// IMPORTANT: do NOT key these on `typeof document` / `typeof navigator`.
+// On a web bundle, Node SSR sees `undefined` for both and the client sees them,
+// producing different snapshot values at module load -> hydration mismatch on
+// every <StyledText>. `Platform.OS` (from react-native-web) returns "web" in
+// both environments, so the value is stable.
+const isWebRuntime = Platform.OS === "web";
+const isReactNativeRuntime = Platform.OS !== "web";
 const serifFamilies = isWebRuntime
     ? { regular: "Georgia, 'Times New Roman', serif", bold: "Georgia, 'Times New Roman', serif" }
     : { regular: "Georgia", bold: "Georgia" };

package/dist/hooks/useDimensions.d.ts

@@ -12,8 +12,18 @@ type WindowDimensions = {
     isLargeScreen: boolean;
 };
 /**
-* Provides a consistent way to access window dimensions and screen size information across mobile and web.
+* Provides a consistent way to access window dimensions and screen size
+* information across mobile and web.
 *
+* On web SSR, the initial width comes from `SsrViewportContext`, which a
+* route's loader can populate from a `mrmeg-vw` cookie (precise, from
+* previous visit) or User-Agent heuristics. Both server and the initial
+* client render read the same context value so hydration matches; after
+* mount, real dimensions take over and the cookie is updated for next time.
+*
+* Routes that don't provide the context get the package default
+* (`SSR_VIEWPORT_DEFAULT_WIDTH` = 1280) — desktop-correct, mobile gets one
+* frame of desktop layout before snapping.
 */
 export declare const useDimensions: () => WindowDimensions;
 export {};

package/dist/hooks/useDimensions.js

@@ -1,43 +1,72 @@
-import { useState, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Dimensions, Platform } from "react-native";
+import { SsrViewportContext, SSR_VIEWPORT_DEFAULT_HEIGHT, } from "../state/SsrViewportContext.js";
 export const SCREEN_SIZES = {
     SMALL: 768,
     MEDIUM: 1000,
     LARGE: 1200,
 };
 /**
-* Provides a consistent way to access window dimensions and screen size information across mobile and web.
+* Helper function to calculate dimension-based flags
+*/
+const calculateDimensionFlags = (width, height) => {
+    const orientation = width > height ? "landscape" : "portrait";
+    return {
+        width,
+        height,
+        orientation,
+        isSmallScreen: width <= SCREEN_SIZES.SMALL,
+        isMediumScreen: width > SCREEN_SIZES.SMALL && width <= SCREEN_SIZES.MEDIUM,
+        isLargeScreen: width > SCREEN_SIZES.MEDIUM,
+    };
+};
+// Persist the real viewport width as a cookie on first mount so subsequent
+// SSR requests can render with the user's actual layout (no flash on repeat
+// visits). The server reads this cookie via your route loader using
+// `detectSsrViewportWidth(request)` from server/lib/ssrViewport.ts.
+const SSR_VIEWPORT_COOKIE = "mrmeg-vw";
+const SSR_VIEWPORT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+function writeViewportCookie(width) {
+    if (typeof document === "undefined")
+        return;
+    // Round to nearest 10 so resize-driven writes don't bust HTTP caching on
+    // every pixel of horizontal movement.
+    const rounded = Math.round(width / 10) * 10;
+    document.cookie = `${SSR_VIEWPORT_COOKIE}=${rounded}; path=/; max-age=${SSR_VIEWPORT_COOKIE_MAX_AGE}; SameSite=Lax`;
+}
+/**
+* Provides a consistent way to access window dimensions and screen size
+* information across mobile and web.
+*
+* On web SSR, the initial width comes from `SsrViewportContext`, which a
+* route's loader can populate from a `mrmeg-vw` cookie (precise, from
+* previous visit) or User-Agent heuristics. Both server and the initial
+* client render read the same context value so hydration matches; after
+* mount, real dimensions take over and the cookie is updated for next time.
 *
+* Routes that don't provide the context get the package default
+* (`SSR_VIEWPORT_DEFAULT_WIDTH` = 1280) — desktop-correct, mobile gets one
+* frame of desktop layout before snapping.
 */
 export const useDimensions = () => {
     const isWeb = Platform.OS === "web";
-    const [dimensions, setDimensions] = useState({
-        width: 0,
-        height: 0,
-        orientation: "portrait",
-        isSmallScreen: true,
-        isMediumScreen: false,
-        isLargeScreen: false,
-    });
+    const ssrWidth = useContext(SsrViewportContext);
+    // Lazy initializer: both server and client first render compute identical
+    // flags from the context value, so hydration matches.
+    const [dimensions, setDimensions] = useState(() => calculateDimensionFlags(ssrWidth, SSR_VIEWPORT_DEFAULT_HEIGHT));
     useEffect(() => {
         const initialDimensions = isWeb
             ? { width: window.innerWidth, height: window.innerHeight }
             : Dimensions.get("window");
         const updateDimensions = (width, height) => {
-            const orientation = width > height ? "landscape" : "portrait";
-            setDimensions({
-                width,
-                height,
-                orientation,
-                isSmallScreen: width <= SCREEN_SIZES.SMALL,
-                isMediumScreen: width > SCREEN_SIZES.SMALL,
-                isLargeScreen: width > SCREEN_SIZES.MEDIUM,
-            });
+            setDimensions(calculateDimensionFlags(width, height));
         };
         updateDimensions(initialDimensions.width, initialDimensions.height);
         if (isWeb) {
+            writeViewportCookie(initialDimensions.width);
             const handleResize = () => {
                 updateDimensions(window.innerWidth, window.innerHeight);
+                writeViewportCookie(window.innerWidth);
             };
             window.addEventListener("resize", handleResize);
             return () => {

package/dist/hooks/useResources.js

@@ -2,6 +2,15 @@ import { useEffect, useState } from "react";
 import * as Font from "expo-font";
 import Feather from "@expo/vector-icons/Feather";
 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
+// an @font-face <style> into the head — without this kickoff, server-rendered
+// <Icon> components paint as empty glyphs until hydration runs the effect
+// below, producing a visible icon-pop flash on icon-heavy SSR screens
+// (e.g. OnboardingFlow). On the client this also primes the font ahead of
+// 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";
 function ensureWebFontStylesheet() {

package/dist/state/SsrViewportContext.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Default viewport used during SSR and the initial client render. Desktop is
+ * chosen because:
+ *   1. Most web traffic for app dashboards / marketing pages skews desktop.
+ *   2. Desktop visitors see no layout reflow on hydration (SSR layout matches
+ *      their actual viewport's breakpoint).
+ *   3. Mobile visitors get one frame of desktop-styled content before
+ *      `useDimensions`'s post-mount effect snaps to real dimensions — better
+ *      than the inverse (every desktop visitor sees mobile-tiny then snap).
+ *
+ * Projects that skew mobile can override with their own Provider higher in
+ * the tree, or per-page via a loader that detects from cookie / User-Agent.
+ */
+export declare const SSR_VIEWPORT_DEFAULT_WIDTH = 1280;
+export declare const SSR_VIEWPORT_DEFAULT_HEIGHT = 800;
+/**
+ * Per-request SSR viewport width. Consumed by `useDimensions` to seed the
+ * initial responsive render so it matches what the user sees.
+ *
+ * Set the provider near the top of your tree (typically in a route component
+ * whose loader detects the viewport from a cookie or User-Agent):
+ *
+ * ```tsx
+ * import { SsrViewportContext } from "@mrmeg/expo-ui/state";
+ * import { detectSsrViewportWidth } from "@/server/lib/ssrViewport";
+ *
+ * export const loader: LoaderFunction<{ ssrViewportWidth?: number }> = (request) => ({
+ *   ssrViewportWidth: detectSsrViewportWidth(request),
+ * });
+ *
+ * export default function Page() {
+ *   const { ssrViewportWidth } = useLoaderData<typeof loader>();
+ *   return (
+ *     <SsrViewportContext.Provider value={ssrViewportWidth ?? SSR_VIEWPORT_DEFAULT_WIDTH}>
+ *       ...
+ *     </SsrViewportContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+export declare const SsrViewportContext: import("react").Context<number>;

package/dist/state/SsrViewportContext.js

@@ -0,0 +1,42 @@
+import { createContext } from "react";
+/**
+ * Default viewport used during SSR and the initial client render. Desktop is
+ * chosen because:
+ *   1. Most web traffic for app dashboards / marketing pages skews desktop.
+ *   2. Desktop visitors see no layout reflow on hydration (SSR layout matches
+ *      their actual viewport's breakpoint).
+ *   3. Mobile visitors get one frame of desktop-styled content before
+ *      `useDimensions`'s post-mount effect snaps to real dimensions — better
+ *      than the inverse (every desktop visitor sees mobile-tiny then snap).
+ *
+ * Projects that skew mobile can override with their own Provider higher in
+ * the tree, or per-page via a loader that detects from cookie / User-Agent.
+ */
+export const SSR_VIEWPORT_DEFAULT_WIDTH = 1280;
+export const SSR_VIEWPORT_DEFAULT_HEIGHT = 800;
+/**
+ * Per-request SSR viewport width. Consumed by `useDimensions` to seed the
+ * initial responsive render so it matches what the user sees.
+ *
+ * Set the provider near the top of your tree (typically in a route component
+ * whose loader detects the viewport from a cookie or User-Agent):
+ *
+ * ```tsx
+ * import { SsrViewportContext } from "@mrmeg/expo-ui/state";
+ * import { detectSsrViewportWidth } from "@/server/lib/ssrViewport";
+ *
+ * export const loader: LoaderFunction<{ ssrViewportWidth?: number }> = (request) => ({
+ *   ssrViewportWidth: detectSsrViewportWidth(request),
+ * });
+ *
+ * export default function Page() {
+ *   const { ssrViewportWidth } = useLoaderData<typeof loader>();
+ *   return (
+ *     <SsrViewportContext.Provider value={ssrViewportWidth ?? SSR_VIEWPORT_DEFAULT_WIDTH}>
+ *       ...
+ *     </SsrViewportContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+export const SsrViewportContext = createContext(SSR_VIEWPORT_DEFAULT_WIDTH);

package/dist/state/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./globalUIStore";
 export * from "./themeStore";
+export * from "./SsrViewportContext";

package/dist/state/index.js

@@ -1,2 +1,3 @@
 export * from "./globalUIStore.js";
 export * from "./themeStore.js";
+export * from "./SsrViewportContext.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -103,18 +103,18 @@
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.2.0 <2.3.0",
-    "expo": "~55.0.0",
-    "expo-font": "~55.0.0",
-    "expo-haptics": "~55.0.0",
+    "expo": ">=55.0.0 <57.0.0",
+    "expo-font": ">=55.0.0 <57.0.0",
+    "expo-haptics": ">=55.0.0 <57.0.0",
     "react": ">=19.2.0 <20.0.0",
-    "react-native": ">=0.83.0 <0.84.0",
-    "react-native-gesture-handler": "~2.30.0",
+    "react-native": ">=0.83.0 <0.86.0",
+    "react-native-gesture-handler": ">=2.30.0 <2.32.0",
     "react-native-keyboard-controller": ">=1.20.0 <2.0.0",
-    "react-native-reanimated": "~4.2.0",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.23.0",
+    "react-native-reanimated": ">=4.2.0 <5.0.0",
+    "react-native-safe-area-context": ">=5.6.0 <6.0.0",
+    "react-native-screens": ">=4.23.0 <5.0.0",
     "react-native-web": ">=0.21.0 <0.22.0",
-    "react-native-worklets": "~0.7.0",
+    "react-native-worklets": ">=0.7.0 <0.9.0",
     "zustand": ">=5.0.0 <6.0.0"
   },
   "devDependencies": {