@mrmeg/expo-ui 0.25.0 → 0.26.0

package/dist/components/nativeTextField.android.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Native text field indirection — Android variant.
+ *
+ * A package-owned port of `@expo/ui`'s universal Android `TextInput`
+ * (`@expo/ui` 58.0.2, `src/universal/TextInput/index.android.tsx`, MIT
+ * licensed, Copyright (c) 650 Industries, Inc.), built on the public
+ * `@expo/ui/jetpack-compose` `BasicTextField`. It keeps the universal field's
+ * prop surface (`NativeTextFieldProps` *is* `@expo/ui`'s `TextInputProps`), its
+ * `useNativeState` fallback buffer, its ref handle, its slot layout and its
+ * modifier order, and differs in exactly two places:
+ *
+ * 1. **Secure fields declare a password keyboard.** The universal field maps
+ *    `secureTextEntry` to `visualTransformation="password"` only, so the IME
+ *    still sees a plain text field: Gboard shows its suggestion strip, learns
+ *    the password, and `dumpsys input_method` reports `TYPE_CLASS_TEXT` with no
+ *    password variation. Here a secure field sets `keyboardType` to
+ *    `'password'` (`textPassword`), or `'numberPassword'` when the requested
+ *    keyboard is numeric, and defaults `autoCorrectEnabled` to `false` and
+ *    `capitalization` to `'none'`. Once a mounted field has been secure the
+ *    password keyboard options stay constant for its lifetime, so the eye
+ *    toggle (`secureTextEntry` true -> false on the same element) only drops the
+ *    masking transformation: Compose treats `KeyboardType.Password` with
+ *    `VisualTransformation.None` as the canonical revealed-password state, and
+ *    an unchanged `KeyboardOptions` avoids an IME restart, preserving focus,
+ *    selection and the input connection.
+ * 2. **Box style maps only the padding keys the package sends.** The universal
+ *    field's `transformToModifiers` is not a public export. `TextInput.tsx`
+ *    hands the field `{ backgroundColor: "transparent", paddingHorizontal,
+ *    paddingVertical }` and paints the surface (fill, border, radius) on its RN
+ *    wrapper, so `styleToModifiers` below handles the padding cascade and
+ *    ignores `backgroundColor`.
+ *
+ * Only `@expo/ui/jetpack-compose` and `@expo/ui/jetpack-compose/modifiers` are
+ * imported, both in the peer's export map since SDK 56.
+ */
+import { useImperativeHandle, useRef } from "react";
+import { BasicTextField, Box, Text, useNativeState, } from "@expo/ui/jetpack-compose";
+import { fillMaxWidth, onSizeChanged, padding, paddingAll, semantics, testID as testIDModifier, } from "@expo/ui/jetpack-compose/modifiers";
+// region Prop mapping (ported verbatim from @expo/ui's TextInput/utils.ts)
+function inputModeToKeyboardType(inputMode) {
+    if (!inputMode || inputMode === "none")
+        return undefined;
+    switch (inputMode) {
+        case "text":
+            return "default";
+        case "decimal":
+            return "decimal-pad";
+        case "tel":
+            return "phone-pad";
+        case "search":
+            return "web-search";
+        case "email":
+            return "email-address";
+        default:
+            return inputMode;
+    }
+}
+function enterKeyHintToReturnKeyType(hint) {
+    if (!hint)
+        return undefined;
+    if (hint === "enter")
+        return "default";
+    return hint;
+}
+function resolveEditable(editable, readOnly) {
+    if (editable !== undefined)
+        return editable;
+    if (readOnly === true)
+        return false;
+    return undefined;
+}
+function mapReturnKeyType(value) {
+    if (value === "google" || value === "yahoo")
+        return "search";
+    if (value === "join" || value === "route" || value === "emergency-call")
+        return "default";
+    return value;
+}
+function mapKeyboardType(value) {
+    switch (value) {
+        case "default":
+            return "text";
+        case "email-address":
+            return "email";
+        case "numeric":
+            return "decimal";
+        case "number-pad":
+            return "number";
+        case "decimal-pad":
+            return "decimal";
+        case "phone-pad":
+            return "phone";
+        case "url":
+            return "uri";
+        case "ascii-capable":
+        case "numbers-and-punctuation":
+        case "name-phone-pad":
+        case "twitter":
+        case "web-search":
+        case "visible-password":
+            return "text";
+        default:
+            return "text";
+    }
+}
+// endregion Prop mapping
+// region Style mapping
+/** Compose modifiers take dp numbers; anything else (percent strings, animated values) is ignored. */
+function dp(value) {
+    return typeof value === "number" ? value : undefined;
+}
+/**
+ * Maps the box-style padding keys to Compose padding modifiers, with the same
+ * cascade as `@expo/ui`'s `transformToModifiers`: a specific side beats the
+ * directional shorthand, which beats `padding`. `backgroundColor` is
+ * deliberately not mapped — the RN wrapper in `TextInput.tsx` paints the
+ * surface.
+ */
+function styleToModifiers(style) {
+    if (!style)
+        return [];
+    const all = dp(style.padding) ?? 0;
+    const top = dp(style.paddingTop) ?? dp(style.paddingVertical) ?? all;
+    const bottom = dp(style.paddingBottom) ?? dp(style.paddingVertical) ?? all;
+    const start = dp(style.paddingLeft) ?? dp(style.paddingHorizontal) ?? all;
+    const end = dp(style.paddingRight) ?? dp(style.paddingHorizontal) ?? all;
+    if (!top && !bottom && !start && !end)
+        return [];
+    if (top === bottom && bottom === start && start === end)
+        return [paddingAll(top)];
+    return [padding(start, top, end, bottom)];
+}
+// endregion Style mapping
+/**
+ * Picks the password keyboard for a secure field: numeric keyboards become
+ * `numberPassword` (a `TYPE_CLASS_NUMBER | TYPE_NUMBER_VARIATION_PASSWORD`
+ * field), everything else `password` (`TYPE_TEXT_VARIATION_PASSWORD`).
+ */
+function passwordKeyboardType(mapped) {
+    return mapped === "number" || mapped === "decimal" || mapped === "phone" ? "numberPassword" : "password";
+}
+export function NativeTextField({ ref, value, onChangeText, placeholder, autoFocus, editable: editableProp, multiline, keyboardType: keyboardTypeProp, autoCapitalize, autoCorrect, returnKeyType: returnKeyTypeProp, onSubmitEditing, onFocus, onBlur, cursorColor, textAlign, readOnly, inputMode, enterKeyHint, defaultValue, numberOfLines: numberOfLinesProp, rows, testID, placeholderTextColor, textStyle, style, secureTextEntry, autoComplete, onContentSizeChange, maxLength, caretHidden, selectionColor, selectionHandleColor, selection, onSelectionChange, selectTextOnFocus, modifiers: userModifiers, }) {
+    const editable = resolveEditable(editableProp, readOnly);
+    const numberOfLines = numberOfLinesProp ?? rows;
+    const keyboardType = keyboardTypeProp ?? inputModeToKeyboardType(inputMode);
+    const returnKeyType = returnKeyTypeProp ?? enterKeyHintToReturnKeyType(enterKeyHint);
+    const initialFallbackRef = useRef(defaultValue ?? "");
+    const fallback = useNativeState(initialFallbackRef.current);
+    const state = (value ?? fallback);
+    const innerRef = useRef(null);
+    const isFocusedRef = useRef(false);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            innerRef.current?.focus();
+        },
+        blur: () => {
+            innerRef.current?.blur();
+        },
+        clear: () => {
+            innerRef.current?.clear();
+        },
+        isFocused: () => isFocusedRef.current,
+        setSelection: (start, end) => innerRef.current?.setSelection(start, end) ?? Promise.resolve(),
+    }), []);
+    const handleFocusChanged = (focused) => {
+        isFocusedRef.current = focused;
+        if (focused && selectTextOnFocus) {
+            innerRef.current?.setSelection(0, state.value.length);
+        }
+        if (focused)
+            onFocus?.();
+        else
+            onBlur?.();
+    };
+    // Sticky for the life of the mounted field: revealing a password
+    // (`secureTextEntry` -> false on the same element) must keep the password
+    // keyboard options unchanged so the IME neither restarts nor starts
+    // suggesting/learning the now-visible text. Written during render like the
+    // wrapper's own `activeSecureRef`; a fresh mount starts from the prop.
+    const everSecureRef = useRef(!!secureTextEntry);
+    if (secureTextEntry)
+        everSecureRef.current = true;
+    const passwordField = everSecureRef.current;
+    const mappedKeyboardType = keyboardType ? mapKeyboardType(keyboardType) : undefined;
+    const resolvedKeyboardType = passwordField
+        ? passwordKeyboardType(mappedKeyboardType)
+        : mappedKeyboardType;
+    const capitalization = autoCapitalize ?? (passwordField ? "none" : undefined);
+    const autoCorrectEnabled = autoCorrect ?? (passwordField ? false : undefined);
+    const keyboardOptions = resolvedKeyboardType || capitalization || autoCorrectEnabled !== undefined || returnKeyType
+        ? {
+            ...(resolvedKeyboardType ? { keyboardType: resolvedKeyboardType } : null),
+            ...(capitalization ? { capitalization } : null),
+            ...(autoCorrectEnabled !== undefined ? { autoCorrectEnabled } : null),
+            ...(returnKeyType ? { imeAction: mapReturnKeyType(returnKeyType) } : null),
+        }
+        : undefined;
+    const keyboardActions = onSubmitEditing
+        ? {
+            onDone: onSubmitEditing,
+            onGo: onSubmitEditing,
+            onNext: onSubmitEditing,
+            onSearch: onSubmitEditing,
+            onSend: onSubmitEditing,
+            onPrevious: onSubmitEditing,
+        }
+        : undefined;
+    return (_jsx(BasicTextField, { ref: innerRef, modifiers: [
+            ...(userModifiers ?? []),
+            ...styleToModifiers(style),
+            ...(testID ? [testIDModifier(testID)] : []),
+            ...(autoComplete ? [semantics({ contentType: autoComplete })] : []),
+            ...(onContentSizeChange ? [onSizeChanged(onContentSizeChange)] : []),
+        ], value: state, autoFocus: autoFocus, readOnly: editable === false, singleLine: !multiline, maxLines: multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined, minLines: multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined, cursorColor: caretHidden ? "transparent" : (cursorColor ?? selectionColor), textStyle: textStyle || (textAlign && textAlign !== "auto")
+            ? {
+                ...textStyle,
+                ...(textAlign && textAlign !== "auto" ? { textAlign } : null),
+            }
+            : undefined, visualTransformation: secureTextEntry ? "password" : undefined, textSelectionColors: selectionColor || selectionHandleColor
+            ? {
+                handleColor: selectionHandleColor ?? selectionColor,
+                backgroundColor: selectionColor,
+            }
+            : undefined, keyboardOptions: keyboardOptions, keyboardActions: keyboardActions, onValueChange: onChangeText, maxLength: maxLength, onFocusChanged: handleFocusChanged, selection: selection, onSelectionChange: onSelectionChange, children: _jsx(BasicTextField.DecorationBox, { children: _jsxs(Box, { modifiers: [fillMaxWidth()], contentAlignment: textAlign === "center" ? "topCenter" : textAlign === "right" ? "topEnd" : undefined, children: [placeholder != null ? (_jsx(BasicTextField.Placeholder, { children: _jsx(Text, { color: placeholderTextColor, modifiers: [fillMaxWidth()], style: textAlign && textAlign !== "auto" ? { textAlign } : undefined, children: placeholder }) })) : null, _jsx(BasicTextField.InnerTextField, {})] }) }) }));
+}

package/dist/components/nativeTextField.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Native text field indirection — default variant (iOS; also what Jest and
+ * TypeScript resolve).
+ *
+ * Re-exports `@expo/ui`'s universal `TextInput`, which on iOS bridges to
+ * SwiftUI's `TextField`/`SecureField` and already reports a password field to
+ * the keyboard when `secureTextEntry` is set.
+ *
+ * Metro resolves `nativeTextField.android.tsx` on Android instead: the package
+ * owns the Compose field there so a secure entry can declare a password
+ * keyboard type (see that file). Both variants must export the same names with
+ * the same types — consumers and the type checker only ever see this one.
+ */
+export { TextInput as NativeTextField, type TextInputProps as NativeTextFieldProps, } from "@expo/ui";

package/dist/components/nativeTextField.js

@@ -0,0 +1,14 @@
+/**
+ * Native text field indirection — default variant (iOS; also what Jest and
+ * TypeScript resolve).
+ *
+ * Re-exports `@expo/ui`'s universal `TextInput`, which on iOS bridges to
+ * SwiftUI's `TextField`/`SecureField` and already reports a password field to
+ * the keyboard when `secureTextEntry` is set.
+ *
+ * Metro resolves `nativeTextField.android.tsx` on Android instead: the package
+ * owns the Compose field there so a secure entry can declare a password
+ * keyboard type (see that file). Both variants must export the same names with
+ * the same types — consumers and the type checker only ever see this one.
+ */
+export { TextInput as NativeTextField, } from "@expo/ui";

package/dist/constants/spacing.d.ts

@@ -36,7 +36,7 @@ export declare const spacing: {
     readonly radiusNone: 0;
     readonly radiusXs: 4;
     readonly radiusSm: 8;
-    readonly radiusMd: 12;
+    readonly radiusMd: 10;
     readonly radiusLg: 14;
     readonly radiusXl: 18;
     readonly radius2xl: 24;
@@ -47,5 +47,5 @@ export declare const spacing: {
     readonly iconLg: 32;
     readonly iconXl: 48;
 };
-export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 12, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
+export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 10, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
 export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -38,11 +38,11 @@ export const spacing = {
     buttonPadding: 10, // Default button padding
     inputPadding: 10, // Default input padding
     listItemSpacing: 8, // Space between list items
-    // Border radius — shadcn-inspired scale (radiusMd = 12px default)
+    // Border radius — shadcn-inspired scale (radiusMd = 10px default)
     radiusNone: 0,
     radiusXs: 4,
     radiusSm: 8,
-    radiusMd: 12,
+    radiusMd: 10,
     radiusLg: 14,
     radiusXl: 18,
     radius2xl: 24,

package/dist/design-system.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "package": "@mrmeg/expo-ui",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "tokens": {
     "spacing": {
       "entries": [
@@ -127,7 +127,7 @@
         },
         {
           "name": "radiusMd",
-          "value": 12
+          "value": 10
         },
         {
           "name": "radiusLg",
@@ -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/dist/state/themeStore.d.ts

@@ -36,7 +36,7 @@ export type ShapeOverrides = {
     button?: {
         /**
          * Border radius applied to every Button preset. Package default:
-         * `spacing.radiusMd` (12). Use 9999 for pill buttons. A caller `style`
+         * `spacing.radiusMd` (10). Use 9999 for pill buttons. A caller `style`
          * still wins over this, as it always has.
          */
         borderRadius?: number;

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
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.25.0",
+  "version": "0.26.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"
   },