@mrmeg/expo-ui 0.25.1 → 0.27.0

package/dist/design-system.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "package": "@mrmeg/expo-ui",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "tokens": {
     "spacing": {
       "entries": [
@@ -2232,5 +2232,154 @@
       "variantValues": null,
       "sizeValues": null
     }
-  ]
+  ],
+  "icons": {
+    "names": [
+      "archive",
+      "arrow-down",
+      "arrow-left",
+      "arrow-right",
+      "arrow-up",
+      "award",
+      "beer",
+      "bell",
+      "bell-off",
+      "bold",
+      "bookmark",
+      "box",
+      "briefcase",
+      "calendar",
+      "calendar-check",
+      "camera",
+      "camera-off",
+      "chart-no-axes-column",
+      "check",
+      "chevron-down",
+      "chevron-left",
+      "chevron-right",
+      "chevron-up",
+      "circle-alert",
+      "circle-check-big",
+      "circle-plus",
+      "circle-question-mark",
+      "circle-stop",
+      "circle-x",
+      "clock",
+      "cloud",
+      "cloud-off",
+      "code",
+      "coffee",
+      "compass",
+      "copy",
+      "credit-card",
+      "crosshair",
+      "database",
+      "dollar-sign",
+      "download",
+      "droplet",
+      "ellipsis-vertical",
+      "external-link",
+      "eye",
+      "eye-off",
+      "face-slightly-smiling",
+      "file",
+      "file-text",
+      "folder",
+      "gift",
+      "git-branch",
+      "git-pull-request",
+      "globe",
+      "grid-3x3",
+      "hash",
+      "heart",
+      "hexagon",
+      "house",
+      "image",
+      "inbox",
+      "info",
+      "italic",
+      "key",
+      "layers",
+      "layout-grid",
+      "link",
+      "link-2",
+      "list",
+      "loader",
+      "lock",
+      "lock-open",
+      "log-in",
+      "log-out",
+      "mail",
+      "map",
+      "map-pin",
+      "maximize",
+      "maximize-2",
+      "menu",
+      "message-circle",
+      "message-square",
+      "mic",
+      "mic-off",
+      "minus",
+      "monitor",
+      "moon",
+      "music",
+      "navigation",
+      "package",
+      "panel-left",
+      "panels-top-left",
+      "party-popper",
+      "pen",
+      "pen-line",
+      "pencil",
+      "percent",
+      "phone",
+      "play",
+      "plus",
+      "printer",
+      "radio",
+      "refresh-cw",
+      "repeat",
+      "rotate-cw",
+      "search",
+      "send",
+      "server",
+      "settings",
+      "share",
+      "share-2",
+      "shield",
+      "shield-off",
+      "shopping-bag",
+      "shopping-cart",
+      "shuffle",
+      "slash",
+      "sliders-horizontal",
+      "sliders-vertical",
+      "smartphone",
+      "square",
+      "square-check-big",
+      "square-pen",
+      "star",
+      "sun",
+      "tag",
+      "terminal",
+      "thumbs-up",
+      "trash",
+      "trending-down",
+      "trending-up",
+      "triangle-alert",
+      "truck",
+      "underline",
+      "upload",
+      "user",
+      "user-check",
+      "user-minus",
+      "user-plus",
+      "users",
+      "video",
+      "wifi-off",
+      "wrench",
+      "x",
+      "zap"
+    ]
+  }
 }

package/dist/hooks/useResources.d.ts

@@ -1,20 +1,3 @@
-/**
- * Registers the Feather icon font in expo-font's server store during
- * export-time rendering (`expo export` renders every route's HTML shell in
- * Node, where the module-scope client load above is guarded off).
- *
- * Must be called from a **render body** (see `useResources` below): expo-font
- * scopes its server store per render context, so a module-scope registration
- * lands in at most one route's shell. Registering during render means every
- * exported shell emits the `@font-face` rule and renders `<Icon>` glyphs —
- * without it the shell contains an EMPTY icon text node while the client's
- * first render (font pre-loaded above) contains the glyph, and React throws
- * hydration error #418 on every cold load and regenerates the tree.
- *
- * No-op on native and on client web (both already covered: native by the
- * effect below, client web by the module-scope call above).
- */
-export declare function ensureIconFontRegistered(): void;
 interface LoadResourcesResult {
     loaded: boolean;
     error: Error | null;
@@ -27,12 +10,16 @@ interface LoadResourcesResult {
  * 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 Feather icon font always loads.
+ * un-download Inter.
  */
 export declare const useResources: () => LoadResourcesResult;
 export {};

package/dist/hooks/useResources.js

@@ -1,46 +1,8 @@
 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";
 import { useThemeStore } from "../state/themeStore.js";
-// Eager, module-scope load that primes the Feather font before first render:
-// on web it synchronously injects the @font-face rule, so icons have their
-// glyphs on the first paint; on native it just starts the fetch ahead of the
-// effect below (which then no-ops for the already-loaded font).
-//
-// Guarded on `window` because web bundles are also evaluated in Node when
-// `expo export` renders the HTML shell, where there is no document to inject
-// into.
-if (typeof window !== "undefined") {
-    void Font.loadAsync(Feather.font);
-}
-/**
- * Registers the Feather icon font in expo-font's server store during
- * export-time rendering (`expo export` renders every route's HTML shell in
- * Node, where the module-scope client load above is guarded off).
- *
- * Must be called from a **render body** (see `useResources` below): expo-font
- * scopes its server store per render context, so a module-scope registration
- * lands in at most one route's shell. Registering during render means every
- * exported shell emits the `@font-face` rule and renders `<Icon>` glyphs —
- * without it the shell contains an EMPTY icon text node while the client's
- * first render (font pre-loaded above) contains the glyph, and React throws
- * hydration error #418 on every cold load and regenerates the tree.
- *
- * No-op on native and on client web (both already covered: native by the
- * effect below, client web by the module-scope call above).
- */
-export function ensureIconFontRegistered() {
-    if (Platform.OS !== "web" || typeof window !== "undefined")
-        return;
-    if (Font.isLoaded("feather"))
-        return;
-    // Synchronous on server-web (expo-font routes to registerStaticFont). No
-    // `void`/try-catch: a throw here means we're outside a render scope, which
-    // must be loud.
-    Font.loadAsync(Feather.font);
-}
 // 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
@@ -86,17 +48,18 @@ function ensureWebFontStylesheet() {
  * 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 Feather icon font always loads.
+ * un-download Inter.
  */
 export const useResources = () => {
-    // Export-time renders need the icon font registered per render scope; the
-    // module-scope call only reaches the client. See ensureIconFontRegistered.
-    ensureIconFontRegistered();
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {
@@ -107,7 +70,6 @@ export const useResources = () => {
         async function loadResourcesAndDataAsync() {
             try {
                 const fontPromise = Promise.all([
-                    Font.loadAsync(Feather.font),
                     sansSerifOverridden ? Promise.resolve() : loadNativeInterFonts(),
                     sansSerifOverridden ? Promise.resolve() : ensureWebFontStylesheet(),
                 ]);

package/llms-full.md

@@ -36,8 +36,8 @@ import { Button, colors, UIProvider, useTheme } from "@mrmeg/expo-ui";
 ## App Setup
 
 Call `useResources()` once near the Expo app root; it resolves `{ loaded, error }`
-and loads the Feather icon font plus the four static Inter weights (web gets a
-single Google Fonts Inter stylesheet).
+and loads the four static Inter weights (web gets a single Google Fonts Inter
+stylesheet). Icons are `lucide-react-native` SVGs, so there is no icon font to load.
 
 Mount `UIProvider` once near the root. It owns the package `Notification`,
 `StatusBar`, default `@rn-primitives` portal host, and native keyboard-avoiding
@@ -103,7 +103,7 @@ before creating a new app-local primitive.
 | `AnimatedView` | Entrance and visibility animation | Keep simple reveal effects in this wrapper. |
 | `Avatar`, `AvatarGroup` | Profile images with initials/icon fallback | Pass both `source` and `name`; set `size`/`shape` on the group, not per child. |
 | `Badge` | Short status labels | Prefer over custom pill views. |
-| `BottomSheet` | Mobile-first modal sheets | Requires root `UIProvider`. Native sheet via `@expo/ui`; `swipeEnabled`, `avoidKeyboard`, `dismissKeyboardOnDrag` are accepted but ignored. |
+| `BottomSheet` | Mobile-first modal sheets | Requires root `UIProvider`. Native sheet via `@expo/ui`; `swipeEnabled`, `avoidKeyboard`, `dismissKeyboardOnDrag` are accepted but ignored (the iOS sheet presentation and Android Material3 keep content above the keyboard; never nest a `KeyboardAvoidingView` in a sheet). |
 | `Button` | Commands and CTAs | Use `preset`, not `variant`; heights are 28/32/40. |
 | `Card` | Individual framed content groups | Do not wrap whole page sections in cards. |
 | `Carousel` | Small known set of horizontally snapping slides | Renders every child (no virtualization); fractional `itemWidth` measures the viewport until first layout. |
@@ -115,7 +115,7 @@ before creating a new app-local primitive.
 | `DropdownMenu` | Menus and command lists | Requires root `UIProvider` portal host. |
 | `EmptyState` | No-data or recoverable error regions | Props: `icon`, `title`, `description`, `actionLabel`, `onAction`, `actionPreset`. |
 | `ErrorBoundary` | React render error fallback | Use for route or feature boundaries. |
-| `Icon` | Feather or custom icons with theme tokens | `color` takes a theme color name; pass `decorative` to hide from a11y. |
+| `Icon` | Lucide or custom icons with theme tokens | `color` takes a theme color name; pass `decorative` to hide from a11y. |
 | `InputOTP` | Verification code entry | Prefer over manually managed text input groups. |
 | `Item` | List / settings rows | Applies the row density tokens and a 44px native hit area (40px on web). |
 | `KeyboardAvoidingView` | Native keyboard-aware roots, composer footers, form-heavy subtrees | `UIProvider` already mounts one root; use directly only for custom subtrees. |

package/llms.txt

@@ -27,7 +27,10 @@ mount react-native-keyboard-controller's KeyboardProvider above UIProvider.
 
 BottomSheet renders the platform's native sheet via @expo/ui, which owns
 gestures and keyboard avoidance; swipeEnabled, avoidKeyboard, and
-dismissKeyboardOnDrag are accepted but ignored.
+dismissKeyboardOnDrag are accepted but ignored. On iOS the sheet presentation
+lifts or shrinks the hosted content so Footer and Body end at the keyboard's
+top (device-verified); Android avoidance is Material3's. Do not nest a
+KeyboardAvoidingView inside a sheet.
 
 Use useTheme(), useStyles(), semantic tokens, StyledText, and package controls.
 Do not add app-local Appearance or matchMedia listeners for theme sync. On web

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -86,13 +86,12 @@
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "jest --config ../../jest.config.js packages/ui/src --runInBand --watchman=false && bun run check:forbidden-imports",
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-package-esm.mjs ui && node ../../scripts/build-design-system-manifest.mjs ui && bun run check:forbidden-imports",
+    "build": "node ../../scripts/build-icon-registry.mjs && rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-package-esm.mjs ui && node ../../scripts/build-design-system-manifest.mjs ui && bun run check:forbidden-imports",
     "check:forbidden-imports": "node ../../scripts/check-ui-forbidden-imports.mjs",
     "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.5.2",
     "@rn-primitives/alert-dialog": "~1.5.2",
     "@rn-primitives/checkbox": "~1.5.2",
@@ -118,12 +117,14 @@
     "expo": ">=56.0.0 <59.0.0 || >=58.0.0-0 <59.0.0",
     "expo-font": ">=56.0.0 <59.0.0 || >=58.0.0-0 <59.0.0",
     "expo-haptics": ">=56.0.0 <59.0.0 || >=58.0.0-0 <59.0.0",
+    "lucide-react-native": ">=1.46.0 <2.0.0",
     "react": ">=19.2.0 <20.0.0",
     "react-native": ">=0.85.0 <0.89.0 || >=0.88.0-0 <0.89.0",
     "react-native-gesture-handler": ">=2.30.0 <4.0.0",
     "react-native-keyboard-controller": ">=1.21.0 <2.0.0",
     "react-native-safe-area-context": ">=5.6.0 <6.0.0",
     "react-native-screens": ">=4.23.0 <5.0.0",
+    "react-native-svg": ">=15.0.0 <16.0.0",
     "react-native-web": ">=0.21.0 <0.22.0",
     "zustand": ">=5.0.0 <6.0.0"
   },