@mrmeg/expo-ui 0.25.1 → 0.26.0

package/CHANGELOG.md

@@ -5,6 +5,92 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.26.0]
+
+### Changed
+
+- **`Icon` renders Lucide.** `<Icon name>` draws `lucide-react-native` SVGs
+  instead of the `@expo/vector-icons` Feather font. Lucide is a maintained
+  superset of Feather in the same 24px, 2px round-stroke style, so glyphs look
+  the same, but the set is ten times larger and nothing is loaded as a font.
+  `IconName` is now the union of kebab-case Lucide names in the package
+  registry (`src/components/icon-names.json`, generated into
+  `iconRegistry.generated.ts` by `bun run ui:icons`); only those icons ship in
+  the bundle. The `component` escape hatch is unchanged and accepts any
+  `LucideIcon` (`CustomIconComponentProps.style` is a view style). Names Lucide
+  renamed, which consumers must update: `alert-circle` → `circle-alert`,
+  `check-circle` → `circle-check-big`, `x-circle` → `circle-x`,
+  `alert-triangle` → `triangle-alert`, `help-circle` → `circle-question-mark`,
+  `edit` → `square-pen`, `edit-2` → `pen`, `edit-3` → `pencil`,
+  `sliders` → `sliders-horizontal`, `grid` → `layout-grid`, `home` → `house`,
+  `unlock` → `lock-open`, `trash-2` → `trash`, `tool` → `wrench`,
+  `layout` → `panels-top-left`, `bar-chart-2` → `chart-no-axes-column`,
+  `plus-circle` → `circle-plus`, `stop-circle` → `circle-stop`,
+  `more-vertical` → `ellipsis-vertical`, `more-horizontal` → `ellipsis`,
+  `sidebar` → `panel-left`, `smile` → `face-slightly-smiling`. Brand glyphs
+  (`github`, `chrome`, `facebook`, `instagram`, `linkedin`, `twitter`) have
+  no Lucide equivalent; pass your own SVG through `component`. Every other
+  Feather name resolves unchanged. A name outside the registry is a type error.
+
+### Removed
+
+- **`@expo/vector-icons` is no longer a dependency**, and `useResources` no
+  longer loads or registers an icon font. `ensureIconFontRegistered` is gone:
+  SVG icons render in export-time HTML as `<svg>`, so the hydration fix it
+  existed for has nothing left to fix.
+
+### Added
+
+- **Peers `lucide-react-native` (`>=1.46 <2`) and `react-native-svg`
+  (`>=15 <16`).** Install `react-native-svg` with `npx expo install` so it
+  matches your SDK. They are peers, not dependencies, so an app that imports
+  Lucide components for `<Icon component>` shares one copy.
+- **`icons.names` in `dist/design-system.json`**, the registry's name list, so
+  `@mrmeg/eslint-plugin-expo-ui` can validate icon names against an installed
+  release (a lint rule is a follow-up). `schemaVersion` stays `1`.
+
+### Fixed
+
+- **Popover, DropdownMenu, Select, and Tooltip content receives Android
+  touches.** The fade wrapper between each overlay and its absolutely
+  positioned content now fills the overlay with `pointerEvents="box-none"`, so
+  the card is inside its parent's bounds. Android dispatches `ACTION_DOWN` and
+  accessibility traversal only to children inside their parent's bounds, so
+  native controls (`Switch`, `TextInput`) inside a `PopoverContent` ignored
+  taps and the content was missing from the accessibility tree. Tap-away still
+  closes.
+- **Sheet taps reach controls while the keyboard is up.** `BottomSheet.Content`
+  no longer mounts an absolute-fill "Dismiss keyboard" overlay that swallowed
+  the first tap on every button, tab and field inside the sheet. It spreads the
+  same release-based tap-away boundary `DismissKeyboard` uses onto its content
+  column: the boundary never claims the touch, an unclaimed dead-space tap
+  dismisses on release only, drags and multitouch do not dismiss, and presence
+  still comes from the focus registry so it works in the sheet's isolated
+  native window.
+- **`dismissKeyboard()` clears the focus registry immediately.**
+  `dismissKeyboardFocusedInput()` blurs the registered field and drops its
+  registration in the same call instead of waiting for a native blur callback
+  that may never arrive (submit handlers, isolated sheet window, iOS
+  secure/plain handoff), so no stale focus presence survives a dismissal. A
+  field that takes focus during the blur keeps its registration.
+- **Android sheet bodies fill the rendered sheet.** The content column's
+  `maxHeight` cap (last snap point as a window percentage) now applies only
+  off Android, where the iOS SwiftUI host needs it; Material's
+  `ModalBottomSheet` ignores percentage snap points and its host already bounds
+  the column, so a `55%` sheet no longer shows a blank strip below a capped
+  `BottomSheet.Body`.
+- **Android secure fields declare a password keyboard.** `TextInput` with
+  `secureTextEntry` now reports `textPassword` to the IME (or `numberPassword`
+  for the `number-pad`, `decimal-pad`, `numeric` and `phone-pad` keyboards), so
+  Gboard shows no suggestion strip and learns nothing typed; autocorrect is off
+  and capitalization is `none` unless the props say otherwise. Revealing the
+  text with the eye toggle keeps the password keyboard and only drops the
+  masking, so focus, selection and the input connection survive exactly as in
+  0.25.1. The Android field is now package-owned — a port of `@expo/ui` 58.0.2's
+  universal Android `TextInput` on top of `@expo/ui/jetpack-compose`'s
+  `BasicTextField` — because the universal field offers no way to set Compose's
+  password keyboard type. iOS keeps `@expo/ui`'s universal field.
+
 ## [0.25.1]
 
 ### Fixed

package/LLM_USAGE.md

@@ -228,7 +228,7 @@ Check this before creating a new app-local primitive. All components come from
 | `DropdownMenu` | Menus and command lists | Homemade popover menus |
 | `EmptyState` | No-data or recoverable error regions | One-off empty placeholders |
 | `ErrorBoundary` | React render error fallback | Unhandled screen crashes |
-| `Icon` | Feather or custom icons with theme tokens | Raw vector icons with hardcoded colors |
+| `Icon` | Lucide or custom icons with theme tokens | Raw vector icons with hardcoded colors |
 | `InputOTP` | Verification code entry | Several manually managed text inputs |
 | `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions` | List / settings rows with density tokens | Hand-rolled row `View`s |
 | `KeyboardAvoidingView` | Native keyboard-aware layout root | Repeated app-local keyboard wrappers |

package/README.md

@@ -32,6 +32,9 @@ Web 0.21. Install these peers at the versions your Expo SDK recommends: `expo`,
 `react-native-web`, `react-native-gesture-handler`,
 `react-native-keyboard-controller`, `react-native-safe-area-context`,
 `react-native-screens`, `@react-native-async-storage/async-storage`, `zustand`.
+`Icon` renders [Lucide](https://lucide.dev/icons) SVGs, so also install its two
+peers: `npx expo install react-native-svg` (a native module, pinned by your
+SDK) and `bun add lucide-react-native` (`>=1.46 <2`).
 
 `@rn-primitives/*` and `@expo-google-fonts/inter` are package dependencies, not
 peers. Animations use React Native `Animated`. `BottomSheet`, `Slider`, and
@@ -343,9 +346,10 @@ Inter is the sans face on every platform, in four static weights
 from the bundled `@expo-google-fonts/inter`. Serif is Georgia; mono is the
 platform system monospace.
 
-`useResources()` loads those four weights plus `Feather.font` (from the
-package-managed `@expo/vector-icons`) on native, so `StyledText`'s
-`light`–`bold` range resolves to real files instead of a faked OS bold. On web
+`useResources()` loads those four weights on native, so `StyledText`'s
+`light`–`bold` range resolves to real files instead of a faked OS bold. Icons
+are SVG (`lucide-react-native`), so there is no icon font to load on any
+platform. On web
 it injects one Google Fonts Inter stylesheet (all four weights) after hydration
 unless the app already added it; web weight differentiation then comes from a
 numeric `fontWeight` on the shared `"Inter"` family. For better first paint in
@@ -391,7 +395,7 @@ When `sansSerif` is overridden, `useResources` skips downloading the packaged
 Inter faces entirely (native `.ttf`s and the web stylesheet). For the skip to
 apply, call `setFonts` before the hook mounts (module scope, or ahead of
 rendering the root); a later call still re-skins all text, it just doesn't
-prevent the download. Feather always loads.
+prevent the download.
 
 | `webWeightStrategy` | Use when | Effect |
 |---|---|---|
@@ -432,7 +436,7 @@ building a new primitive.
 | `DropdownMenu` | Menus and command lists | Row actions, account menu, sort menu, checkbox/radio groups |
 | `EmptyState` | No-data or recoverable error regions | Empty inbox, no results, failed list load |
 | `ErrorBoundary` | React render error fallback | Route-level and feature-level fallbacks |
-| `Icon` | Feather or custom icons on theme tokens | Button accessories, menu icons, status glyphs |
+| `Icon` | Lucide or custom icons on theme tokens | Button accessories, menu icons, status glyphs |
 | `InputOTP` | Verification code entry | Email/SMS codes, MFA, invite codes |
 | `Item` | List and settings rows on the density tokens | Settings lists, inbox rows, pickers, detail rows |
 | `KeyboardAvoidingView` | Native keyboard-aware layout | Screen roots, composer footers, form-heavy subtrees |
@@ -458,6 +462,43 @@ building a new primitive.
 | `ToggleGroup` | Single or multi toggle groups | Alignment, formatting toolbar, filter chips |
 | `Tooltip` | Short hover/focus help | Icon button labels, field hints, disabled-action reasons |
 
+### Icons
+
+`Icon` renders `lucide-react-native` — Lucide is a maintained superset of
+Feather in the same 24px, 2px round-stroke style. `name` is typed by
+`IconName`, the union of kebab-case Lucide names in the package registry
+(`src/components/icon-names.json`, about 150 names), so only the icons the package
+and its consumers name ship in the bundle: the root `lucide-react-native`
+entry (1,800+ icons) is never imported. `color` takes a theme color name or a
+literal; `decorative` hides the glyph from assistive tech.
+
+```tsx
+import { Icon } from "@mrmeg/expo-ui/components";
+import Rocket from "lucide-react-native/icons/rocket";
+
+<Icon name="circle-check-big" color="success" size={16} />
+<Icon component={Rocket} color="accent" />
+```
+
+Adding an icon: in this repo, add the kebab-case Lucide name to
+`packages/ui/src/components/icon-names.json` (keep it sorted), run
+`bun run ui:icons`, and commit both files — an unknown name fails with the
+alias lines from Lucide's root entry that point at its current name
+(`bun run ui:icons:check` guards freshness in CI). From a consuming app, pass
+any Lucide component through `component` instead; it needs no registry entry.
+Feather-era names that Lucide renamed: `alert-circle` → `circle-alert`,
+`check-circle` → `circle-check-big`, `x-circle` → `circle-x`,
+`alert-triangle` → `triangle-alert`, `help-circle` → `circle-question-mark`,
+`edit` → `square-pen`, `edit-2` → `pen`, `edit-3` → `pencil`,
+`sliders` → `sliders-horizontal`, `grid` → `layout-grid`, `home` → `house`,
+`unlock` → `lock-open`, `trash-2` → `trash`, `tool` → `wrench`,
+`layout` → `panels-top-left`, `bar-chart-2` → `chart-no-axes-column`,
+`plus-circle` → `circle-plus`, `stop-circle` → `circle-stop`,
+`more-vertical` → `ellipsis-vertical`, `more-horizontal` → `ellipsis`,
+`sidebar` → `panel-left`, `smile` → `face-slightly-smiling`. Brand glyphs
+(`github`, `chrome`, `facebook`, `instagram`, `linkedin`, `twitter`) have no
+Lucide equivalent; use `component` with your own SVG.
+
 ### Compound Parts
 
 | Root | Exported Parts |
@@ -492,7 +533,7 @@ are named exports only.
 
 | Hook | Returns |
 |------|---------|
-| `useResources()` | `{ loaded, error }` — loads Feather plus the Inter faces |
+| `useResources()` | `{ loaded, error }` — loads the Inter faces (icons are SVG, nothing to load) |
 | `useTheme()` | Active theme, scheme helpers, shadow/contrast/alpha helpers |
 | `useStyles(factory)` | Memoized theme-aware styles plus the `useTheme()` helpers |
 | `useDimensions()` | `{ width, height, orientation, isSmallScreen, isMediumScreen, isLargeScreen }` against `SCREEN_SIZES` (768 / 1000 / 1200) |
@@ -518,19 +559,30 @@ web, where the window cannot be read during export or hydration.
   nativeID="email-input" />`). One id on both renders duplicate ids on web and
   associates nothing. Prefer `TextInput`'s own `label` prop when no separate
   label element is needed.
+- `TextInput` renders a native field on iOS and Android. On Android a
+  `secureTextEntry` field declares a password keyboard (`textPassword`, or
+  `numberPassword` for numeric keyboards) in both the masked and the revealed
+  eye-toggle state, with autocorrect off by default; that Android field is
+  package-owned on top of `@expo/ui/jetpack-compose`'s `BasicTextField`, while
+  iOS uses `@expo/ui`'s universal field (SwiftUI `SecureField`).
 - `BottomSheet` renders the platform's native sheet through `@expo/ui`: iOS
   SwiftUI `.sheet()`, Android Material3 `ModalBottomSheet`, web `vaul`. The
   platform owns gestures and keyboard avoidance, so `swipeEnabled`,
   `avoidKeyboard`, and `dismissKeyboardOnDrag` are accepted for call-site
-  ergonomics but have no effect; `BottomSheet.Content` does mount its own
-  tap-away keyboard-dismiss overlay while a field is focused. Android has only
-  two snap states (partial / expanded) and maps extra snap points to the
-  nearest. `BottomSheet.Content` also takes `backgroundStyle`, merged over the
-  themed card default on the native sheet surface (web panel, Android
-  `containerColor`, iOS `presentationBackground`) — pass
-  `{ backgroundColor: "transparent" }`, plus a `style` clearing the content
-  column's card fill, to let custom chrome such as a glass backdrop show
-  through.
+  ergonomics but have no effect. The sheet hosts its content in a separate
+  native window outside the app's `DismissKeyboard`, so `BottomSheet.Content`
+  mounts its own tap-away keyboard-dismiss boundary on the content column: it
+  never claims the touch (buttons, tabs and other fields fire on the first tap
+  with the keyboard up) and dismisses an unclaimed dead-space tap on release,
+  matching `DismissKeyboard`. Android has only two snap states (partial /
+  expanded) and maps extra snap points to the nearest; because Material ignores
+  percentage snap points, the Android body fills the rendered sheet height
+  rather than a window-percentage cap. `BottomSheet.Content` also takes
+  `backgroundStyle`, merged over the themed card default on the native sheet
+  surface (web panel, Android `containerColor`, iOS `presentationBackground`) —
+  pass `{ backgroundColor: "transparent" }`, plus a `style` clearing the
+  content column's card fill, to let custom chrome such as a glass backdrop
+  show through.
 - `Carousel` renders every child (no virtualization), so slides survive into
   the exported HTML shell and the first client frame; use `FlatList` for large
   or unbounded data. An `itemWidth` below 1 (default `0.85`) is a fraction of
@@ -691,8 +743,9 @@ packed package at the workspace's Expo version, without a custom Metro config.
 `ui:build` also writes `dist/design-system.json`
 ([`scripts/build-design-system-manifest.mjs`](../../scripts/build-design-system-manifest.mjs)):
 the spacing, radius and icon scales, the palette, the light and dark themes, the
-font variants, and every component's variant and size values, serialized out of
-`src` by the same extractor the lint rules use. It is exported as
+font variants, every component's variant and size values, and `icons.names` (the
+`IconName` registry), serialized out of `src` by the same extractor the lint
+rules use. It is exported as
 `@mrmeg/expo-ui/design-system.json`, and `@mrmeg/eslint-plugin-expo-ui` reads it
 in projects that install this package instead of checking out its sources — which
 is what lets the design-system rules quote this release's presets and tokens.

package/dist/components/Avatar.d.ts

@@ -26,7 +26,7 @@ export interface AvatarProps {
     source?: ImageSourcePropType;
     /** Display name; supplies the fallback initials and the default accessibility label. */
     name?: string;
-    /** Feather icon rendered when there is no image and no derivable initials. @default "user" */
+    /** Icon (Lucide name) rendered when there is no image and no derivable initials. @default "user" */
     icon?: IconName;
     /** Size token or explicit pixel diameter. Inherited from `AvatarGroup` when unset. @default "md" */
     size?: AvatarSize;

package/dist/components/BottomSheet.d.ts

@@ -148,7 +148,7 @@ interface BottomSheetCloseProps {
 declare function useBottomSheetContext(): BottomSheetContextValue;
 declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
 declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): React.JSX.Element;
-declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, children, }: BottomSheetContentProps): React.JSX.Element;
+declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, testID, children, }: BottomSheetContentProps): React.JSX.Element;
 declare function BottomSheetHandle({ style }: BottomSheetHandleProps): React.JSX.Element;
 declare function BottomSheetHeader({ children, style, ...props }: BottomSheetHeaderProps): React.JSX.Element;
 declare function BottomSheetBody({ children, style, contentContainerStyle, onContentSizeChange, onLayout, ...props }: BottomSheetBodyProps): React.JSX.Element;

package/dist/components/BottomSheet.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef, useSyncExternalStore } from "react";
+import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { View, Pressable, StyleSheet, ScrollView, Platform, Animated, useWindowDimensions, } from "react-native";
 import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
-import { KeyboardController } from "./keyboardController";
 import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
-import { dismissKeyboardFocusedInput, hasKeyboardFocusedInput, subscribeKeyboardFocus, } from "./keyboardFocusRegistry.js";
+import { useKeyboardDismissResponder } from "./keyboardDismiss.js";
 const DEFAULT_SNAP_POINTS = ["50%"];
 function clampSnapIndex(index, maxSnapIndex) {
     return Math.min(Math.max(index, 0), maxSnapIndex);
@@ -162,48 +161,6 @@ function SheetCloseButton({ style }) {
             ], children: _jsx(Icon, { name: "x", size: 22, color: "text" }) }) }));
 }
 // ============================================================================
-// Keyboard dismiss overlay — tap-away dismissal inside the sheet
-// ============================================================================
-/**
- * Tap-away keyboard dismissal for sheet content.
- *
- * The native sheet (SwiftUI `.sheet()` / Material `ModalBottomSheet`) hosts its
- * RN children in a separate native window via @expo/ui's `RNHostView`, OUTSIDE
- * the app's `KeyboardProvider` / `KeyboardDismissBoundary`. Two consequences,
- * both worked around here:
- *
- *  1. Detection: `react-native-keyboard-controller`'s `useKeyboardState` watches
- *     the main window and does NOT see a keyboard raised inside the sheet's
- *     window (the same isolation that makes `useSafeAreaInsets()` read zero in
- *     here). So presence is read from the `keyboardFocusRegistry` instead, which
- *     is fed by @expo/ui's own native focus events and is window-independent.
- *  2. Dispatch: RN's JS responder chain (onStartShouldSetResponder*) is NOT
- *     dispatched across the `RNHostView` boundary on Android — only `Pressable`
- *     hit-testing (native `measure()`) works inside the host. So this is a
- *     transparent `Pressable` mounted ONLY while a field is focused, mirroring
- *     a tap-to-dismiss overlay in the app. The tap blurs the focused field via
- *     its own native ref (`dismissKeyboardFocusedInput`), which resigns the
- *     responder regardless of window; `KeyboardController.dismiss()` is a
- *     best-effort fallback for the (rare) case with no registered blur handle.
- *
- * iOS doesn't strictly need this (SwiftUI resigns first-responder on outside
- * taps for free), but the same path is harmless and keeps behavior identical.
- */
-function SheetKeyboardDismissOverlay() {
-    const hasFocus = useSyncExternalStore(subscribeKeyboardFocus, hasKeyboardFocusedInput, () => false);
-    if (Platform.OS === "web" || !hasFocus)
-        return null;
-    return (_jsx(Pressable, { style: [StyleSheet.absoluteFill, styles.keyboardDismissOverlay], onPressIn: () => {
-            if (!dismissKeyboardFocusedInput())
-                KeyboardController.dismiss();
-        }, accessibilityLabel: "Dismiss keyboard", accessibilityRole: "button" }));
-}
-const styles = StyleSheet.create({
-    keyboardDismissOverlay: {
-        zIndex: 999,
-    },
-});
-// ============================================================================
 // Root
 // ============================================================================
 function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints = DEFAULT_SNAP_POINTS, closeOnBackdropPress = true, children, }) {
@@ -296,21 +253,41 @@ function BottomSheetTrigger({ asChild, children, style: styleOverride }) {
 // ============================================================================
 function BottomSheetContent({ 
 // Accepted-but-ignored ergonomics props (platform owns these behaviors):
-swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, children, }) {
+swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, testID, children, }) {
     const { open, onOpenChange, snapPoints, snapIndex, setSnapIndex, hasHeader } = useBottomSheetContext();
     const { theme } = useTheme();
     const dismissDisabled = useDismissDisabled();
     const showClose = useShowClose();
     const { height: winH } = useWindowDimensions();
+    // Tap-away keyboard dismissal inside the sheet. The native sheet (SwiftUI
+    // `.sheet()` / Material `ModalBottomSheet`) hosts its RN children in a separate
+    // native window via @expo/ui's `RNHostView`, OUTSIDE the app's
+    // `KeyboardProvider` / `DismissKeyboard`, so an app-level boundary never sees
+    // these touches and the sheet mounts its own on the content column. It is the
+    // same boundary `DismissKeyboard` uses: presence comes from the
+    // `keyboardFocusRegistry` (keyboard-controller's `useKeyboardState` watches
+    // the main window and does not observe a keyboard raised in here), the
+    // boundary never claims the touch — buttons, tabs and other fields win the
+    // responder negotiation and fire on the first tap — and an unclaimed
+    // dead-space tap dismisses on release only, through the registered field's
+    // own window-independent blur handle.
+    const dismissResponderProps = useKeyboardDismissResponder();
     // Boolean open → native imperative index. The root resets snapIndex to the
     // highest point while closed; -1 keeps the native sheet closed.
     const index = open ? snapIndex : -1;
-    // The native RN-in-SwiftUI host does NOT clamp our RN column to the sheet's
+    // iOS: the RN-in-SwiftUI host does NOT clamp our RN column to the sheet's
     // detent height — it lays the column out at its full intrinsic content height,
     // SwiftUI then clips it at the sheet edge (footer/tail fall off-screen), and
     // `flex:1` never gets a definite parent height so the ScrollView can't bound
     // and scroll. Cap the column to the expanded detent height (highest snap
-    // point) so `flex:1` resolves and the Body becomes scrollable.
+    // point) so `flex:1` resolves and the Body becomes scrollable. Web (vaul)
+    // sizes the panel itself from the snap point, so the cap is inert there.
+    // Android: the Compose host wraps children in a `flexGrow: 1, height: 0` view
+    // that fills `RNHostView`'s measured height, so `flex:1` already resolves,
+    // and Material's `ModalBottomSheet` ignores percentage snap points
+    // (partial / expanded only) — a window-percentage cap would leave the Body
+    // short of the rendered sheet with a blank strip below it. Android therefore
+    // keeps `flex:1` alone (see the content column style).
     const expandedSnap = snapPoints[snapPoints.length - 1];
     const detentHeight = typeof expandedSnap === "number"
         ? expandedSnap
@@ -343,16 +320,16 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
         backgroundStyle: StyleSheet.flatten([
             { backgroundColor: theme.colors.card },
             backgroundStyleOverride,
-        ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { style: [
+        ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { testID: testID, style: [
                         {
                             flex: 1,
-                            maxHeight: detentHeight,
                             // Themes the content surface across all platforms regardless of
                             // native sheet chrome.
                             backgroundColor: theme.colors.card,
                         },
+                        Platform.OS !== "android" && { maxHeight: detentHeight },
                         styleOverride,
-                    ], children: [children, _jsx(SheetKeyboardDismissOverlay, {}), showFloatingClose && (_jsx(SheetCloseButton, { style: {
+                    ], ...dismissResponderProps, children: [children, showFloatingClose && (_jsx(SheetCloseButton, { style: {
                                 // The sheet card sits below the status bar, so no top inset
                                 // is needed — just clear the sheet's own top edge / handle.
                                 position: "absolute",

package/dist/components/DropdownMenu.js

@@ -76,7 +76,7 @@ function DropdownMenuContent({ side, align = "start", sideOffset = 4, portalHost
     return (_jsx(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DropdownMenuPrimitive.Overlay, { style: Platform.select({
                     native: StyleSheet.absoluteFill,
                     default: undefined,
-                }), children: _jsx(AnimatedView, { type: "fade", children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                }), children: _jsx(AnimatedView, { type: "fade", style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
                                     backgroundColor: theme.colors.popover,
                                     borderWidth: 1,
                                     borderColor: theme.colors.border,

package/dist/components/Icon.d.ts

@@ -1,7 +1,14 @@
 import * as React from "react";
-import type { StyleProp, TextProps, TextStyle } from "react-native";
-import Feather from "@expo/vector-icons/Feather";
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from "react-native";
 import type { ThemeColors } from "../constants/colors";
+import { type IconName } from "./iconRegistry.generated";
+/**
+ * Kebab-case Lucide icon names the package bundles, served from
+ * `icon-names.json` through the generated registry. Add a name there and run
+ * `bun run ui:icons` to extend the union; pass any other Lucide component
+ * through `component` without touching the registry.
+ */
+export type { IconName };
 /**
  * Theme color names that can be used as shortcuts.
  *
@@ -9,7 +16,6 @@ import type { ThemeColors } from "../constants/colors";
  * (`foreground`, `accent`, `border`, …) and can never drift from the theme.
  */
 export type ThemeColorName = keyof ThemeColors;
-export type IconName = React.ComponentProps<typeof Feather>["name"];
 type IconBaseProps = {
     /** Size of the icon in pixels */
     size?: number;
@@ -20,33 +26,29 @@ type IconBaseProps = {
     /** When true, hides the icon from the accessibility tree. @default false */
     decorative?: boolean;
 };
-type IconAccessibilityProps = Pick<TextProps, "accessible" | "importantForAccessibility" | "accessibilityElementsHidden" | "aria-hidden">;
+type IconAccessibilityProps = Pick<ViewProps, "accessible" | "importantForAccessibility" | "accessibilityElementsHidden" | "aria-hidden">;
+/**
+ * Props handed to a `component`. Wide enough that any `lucide-react-native`
+ * component type-checks as-is (`LucideProps` extends `SvgProps`, whose `style`
+ * is a view style), and any component that accepts `size` and `color` works.
+ */
 type CustomIconComponentProps = {
     size: number;
     color: string;
-    style?: StyleProp<TextStyle>;
+    style?: StyleProp<ViewStyle>;
 } & Partial<IconAccessibilityProps>;
-type FeatherIconProps = IconBaseProps & {
-    /** The icon name to render (Feather icons) */
+type RegistryIconProps = IconBaseProps & {
+    /** The icon name to render (a Lucide name from the package registry) */
     name: IconName;
     component?: never;
 };
 type CustomIconProps = IconBaseProps & {
     name?: never;
-    /** Custom component to render instead of Feather. Receives size and color as props. */
+    /**
+     * Custom component to render instead of a registry icon. Receives size and
+     * color as props — any `lucide-react-native` icon import works here.
+     */
     component: React.ComponentType<CustomIconComponentProps>;
 };
-export type IconProps = FeatherIconProps | CustomIconProps;
-/**
- * Universal Icon Component
- * Renders @expo/vector-icons Feather with theme integration and style support
- *
- * Usage:
- * ```tsx
- * <Icon name="check" color="primary" size={16} />
- * <Icon name="calendar" color="#FF0000" size={24} />
- * <Icon name="terminal" style={{ marginRight: 8 }} />
- * ```
- */
-export declare function Icon(props: IconProps): React.JSX.Element;
-export {};
+export type IconProps = RegistryIconProps | CustomIconProps;
+export declare function Icon(props: IconProps): React.JSX.Element | null;

package/dist/components/Icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "../hooks/useTheme.js";
-import Feather from "@expo/vector-icons/Feather";
+import { ICONS } from "./iconRegistry.generated";
 /**
  * Resolve an icon color against the active theme.
  *
@@ -20,15 +20,26 @@ function resolveIconColor(color, themeColors) {
 }
 /**
  * Universal Icon Component
- * Renders @expo/vector-icons Feather with theme integration and style support
+ * Renders `lucide-react-native` SVG icons with theme integration and style
+ * support. Icons are SVG on every platform: no font to load, and server markup
+ * carries the glyph.
  *
  * Usage:
  * ```tsx
  * <Icon name="check" color="primary" size={16} />
  * <Icon name="calendar" color="#FF0000" size={24} />
  * <Icon name="terminal" style={{ marginRight: 8 }} />
+ * <Icon component={Rocket} color="accent" /> // any Lucide import
  * ```
  */
+const warnedUnknownIconNames = new Set();
+function warnUnknownIconName(name) {
+    if (!__DEV__ || warnedUnknownIconNames.has(name))
+        return;
+    warnedUnknownIconNames.add(name);
+    console.warn(`Icon: "${name}" is not in the package icon registry, so nothing was rendered. ` +
+        "Add it to icon-names.json and run `bun run ui:icons`, or pass a Lucide component through `component`.");
+}
 export function Icon(props) {
     const { size = 24, color, style, decorative = false } = props;
     const { theme } = useTheme();
@@ -42,9 +53,21 @@ export function Icon(props) {
             "aria-hidden": true,
         }
         : { accessible: true };
+    // `style` stays a text style on the public prop for source compatibility
+    // with the font-icon era; SVG roots take a view style, and every layout
+    // property callers actually pass (margins, transforms) belongs to both.
     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 }));
+    const name = props.name;
+    const Lucide = ICONS[name];
+    // `IconName` makes an unknown name a type error, but names also arrive at
+    // runtime (a database field, a config file). Rendering `undefined` would
+    // throw; draw nothing and say so once per name in development instead.
+    if (!Lucide) {
+        warnUnknownIconName(name);
+        return null;
+    }
+    return (_jsx(Lucide, { size: size, color: iconColor, style: iconStyle, ...accessibilityProps }));
 }

package/dist/components/Notification.js

@@ -156,19 +156,19 @@ export const Notification = () => {
         switch (alert?.type) {
             case "error":
                 return {
-                    icon: "alert-circle",
+                    icon: "circle-alert",
                     color: theme.colors.destructive,
                     bgColor: withAlpha(theme.colors.destructive, 0.08),
                 };
             case "success":
                 return {
-                    icon: "check-circle",
+                    icon: "circle-check-big",
                     color: theme.colors.success,
                     bgColor: withAlpha(theme.colors.success, 0.08),
                 };
             case "warning":
                 return {
-                    icon: "alert-triangle",
+                    icon: "triangle-alert",
                     color: theme.colors.warning,
                     bgColor: withAlpha(theme.colors.warning, 0.08),
                 };

package/dist/components/Popover.js

@@ -41,7 +41,7 @@ function PopoverContent({ side, align = "center", sideOffset = 4, portalHost, ..
             ...getShadowStyle("soft"),
         },
     ]) ?? undefined;
-    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(PopoverPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(PopoverPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(PopoverPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(PopoverPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }));
 }
 function PopoverHeader({ children, style, ...props }) {
     const { theme } = useTheme();

package/dist/components/Select.js

@@ -100,7 +100,7 @@ function SelectContent({ side, align = "start", sideOffset = 4, portalHost, styl
     return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({
                     native: StyleSheet.absoluteFill,
                     default: undefined,
-                }), children: _jsx(AnimatedView, { type: "fade", children: _jsx(TextColorContext.Provider, { value: theme.colors.popoverForeground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(SelectPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                }), children: _jsx(AnimatedView, { type: "fade", style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextColorContext.Provider, { value: theme.colors.popoverForeground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(SelectPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
                                         backgroundColor: theme.colors.popover,
                                         borderWidth: 1,
                                         borderColor: theme.colors.border,

package/dist/components/StatCard.d.ts

@@ -17,7 +17,7 @@ export interface StatCardProps {
     unit?: string;
     /** Optional signed change line below the value. */
     change?: StatCardChange;
-    /** Optional leading icon name (Feather), rendered beside the label. */
+    /** Optional leading icon name (Lucide), rendered beside the label. */
     icon?: IconName;
     /** Makes the card pressable with scale feedback (delegates to Card). */
     onPress?: () => void;