@mrmeg/expo-ui 0.25.0 → 0.26.0

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;

package/dist/components/TextInput.d.ts

@@ -10,7 +10,7 @@ export type TextInputSize = "sm" | "md" | "lg";
 export type TextInputVariant = "outline" | "filled" | "underlined";
 interface TextInputCustomProps extends TextInputProps {
     /**
-     * Forwarded ref to the underlying RNTextInput element.
+     * RNTextInput ref on web; an RN-compatible imperative handle on native.
      *
      * Written as `ComponentRef<typeof RNTextInput>` rather than RN 0.88's
      * `TextInputInstance` alias so the emitted declarations stay valid on

package/dist/components/TextInput.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
-import { Host, TextInput as ExpoTextInput, useNativeState, } from "@expo/ui";
+import { Host, useNativeState, } from "@expo/ui";
+import { NativeTextField } from "./nativeTextField";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { useFontStyle } from "../hooks/useFontStyle.js";
@@ -179,23 +180,33 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
                         }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) })), showClearButton && rightElement && !hasSecureToggle && (_jsxs(View, { style: styles.rightElements, children: [_jsx(Pressable, { onPress: () => {
                                     hapticLight();
                                     onChangeText?.("");
-                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: [styles.errorIcon, { pointerEvents: "none" }], accessibilityLabel: "Error", children: _jsx(Icon, { name: "alert-circle", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [
+                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: [styles.errorIcon, { pointerEvents: "none" }], accessibilityLabel: "Error", children: _jsx(Icon, { name: "circle-alert", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [
                     styles.helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
 }
 /**
- * Native (iOS / Android) implementation backed by `@expo/ui`'s TextInput, which
- * bridges to SwiftUI's `TextField`/`SecureField` and Jetpack Compose's
- * `TextField`. The text buffer lives natively (via `useNativeState`), so typing
- * never round-trips through React state — eliminating the cursor flicker seen on
- * controlled RN inputs.
+ * Native (iOS / Android) implementation backed by a native text field rendered
+ * inside an `@expo/ui` `Host`. The text buffer lives natively (via
+ * `useNativeState`), so typing never round-trips through React state —
+ * eliminating the cursor flicker seen on controlled RN inputs.
  *
- * By design (reliability over feature-parity) this path renders the field plus
- * sibling label / helper / error text only. The in-field overlays from the web
- * implementation — password visibility toggle, clear button, left/right
- * elements, and error icon — are intentionally omitted on native to avoid
- * layering RN views over the native host view.
+ * The field comes from `./nativeTextField`, a platform-split module. iOS gets
+ * `@expo/ui`'s universal TextInput (SwiftUI `TextField`/`SecureField`, which
+ * already reports a password field to the keyboard). Android gets a
+ * package-owned port of that universal field built on
+ * `@expo/ui/jetpack-compose`'s `BasicTextField` (`nativeTextField.android.tsx`),
+ * because the universal Android field maps `secureTextEntry` to a masking
+ * transformation only and offers no way to set Compose's `KeyboardType.Password`
+ * — the IME saw a plain text field, kept its suggestion strip and learned the
+ * password. The port declares a password keyboard for secure fields and keeps it
+ * across the eye toggle, so revealing the text never restarts the IME. Metro
+ * picks the platform file; TypeScript types both through the default file.
+ *
+ * This path supports label / helper / error text and a password visibility
+ * toggle laid out beside the native Host. Clear buttons, left/right elements,
+ * and the error icon remain web-only; RN overlays are not layered over the
+ * native host view.
  */
 function NativeTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, forceLight, inputMode, onChangeText, onFocus, onBlur, value, defaultValue, editable = true, multiline, secureTextEntry, showSecureEntryToggle, ref, wrapperStyle, 
 // Web-only affordances. Destructured out of `rest` so they're NOT forwarded to
@@ -231,9 +242,9 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // parity) once it settles.
     const queuedTogglesRef = useRef(0);
     const toggleRef = useRef(() => { });
-    // Per-flavour mount generation. Bumped whenever a flavour becomes the incoming
-    // view so React always mounts a FRESH native view (whose `autoFocus` will run)
-    // instead of reusing one that is still unmounting from the previous handoff.
+    // iOS-only per-flavour mount generation. Bumped whenever a flavour becomes
+    // the incoming view so React mounts a FRESH native view (whose `autoFocus`
+    // will run) instead of reusing one still unmounting from the previous handoff.
     const generationRef = useRef({ secure: 0, plain: 0 });
     // Last text the JS side knows about; see handleChangeText.
     const lastTextRef = useRef(value ?? defaultValue ?? "");
@@ -256,12 +267,18 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // RNTextInput because that's what the public TextInputCustomProps declares.
     // We expose the subset consumers use, plus a `setNativeProps` shim so the
     // uncontrolled AuthTextField can push corrected text into the native buffer.
-    // One ref per native view flavour; only the active one (or, mid-handoff on
-    // iOS, both) is mounted.
+    // Android keeps one field/ref as visualTransformation changes in place.
+    // iOS has one ref per flavour; both are mounted only during a handoff.
+    const androidRef = useRef(null);
     const secureRef = useRef(null);
     const plainRef = useRef(null);
-    const activeInput = useCallback(() => (activeSecureRef.current ? secureRef : plainRef).current, []);
+    const activeInput = useCallback(() => {
+        if (Platform.OS === "android")
+            return androidRef.current;
+        return (activeSecureRef.current ? secureRef : plainRef).current;
+    }, []);
     const blurAll = useCallback(() => {
+        androidRef.current?.blur();
         secureRef.current?.blur();
         plainRef.current?.blur();
     }, []);
@@ -282,19 +299,16 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     }, []);
     const parentOnFocus = onFocus;
     const parentOnBlur = onBlur;
-    // Focus/blur from a view that is not the active flavour is ignored: that is
-    // the outgoing view resigning during a handoff, or a stale event from a view
-    // React is unmounting.
+    // On iOS, ignore focus/blur from the outgoing flavour during a handoff or
+    // unmount. Android events always belong to the same mounted field.
     const handleFocus = useCallback((secure) => {
-        if (secure !== activeSecureRef.current)
+        if (Platform.OS === "ios" && secure !== activeSecureRef.current)
             return;
         isFocusedRef.current = true;
-        // Register a blur handle so tap-away dismissal (`keyboardDismiss.ts`) and
-        // the BottomSheet overlay can resign this field: RN's `TextInputState`
-        // never sees SwiftUI / Compose fields, so `Keyboard.dismiss()` cannot.
-        // Blurring through the field's own ref is window-independent — inside a
-        // native bottom sheet `KeyboardController.dismiss()` can miss, the ref
-        // never does.
+        // Register the field's own blur handle for tap-away dismissal
+        // (`DismissKeyboard`, `BottomSheet.Content`). RN supports Expo-hosted field
+        // interop; this direct ref also targets the actual field inside a native
+        // sheet's window.
         setKeyboardFocusedInput(focusRegistryToken, blurAll);
         if (handoffRef.current) {
             // The incoming view took first responder; the parent never saw focus leave.
@@ -305,7 +319,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         parentOnFocus?.();
     }, [blurAll, finishHandoff, focusRegistryToken, parentOnFocus]);
     const handleBlur = useCallback((secure) => {
-        if (secure !== activeSecureRef.current)
+        if (Platform.OS === "ios" && secure !== activeSecureRef.current)
             return;
         isFocusedRef.current = false;
         restoreAfterSecureHandoffRef.current = false;
@@ -321,10 +335,12 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         }
         restoreAfterSecureHandoffRef.current = false;
         const outgoingSecure = activeSecureRef.current;
-        if (outgoingSecure)
-            generationRef.current.plain += 1;
-        else
-            generationRef.current.secure += 1;
+        if (Platform.OS === "ios") {
+            if (outgoingSecure)
+                generationRef.current.plain += 1;
+            else
+                generationRef.current.secure += 1;
+        }
         if (Platform.OS === "ios" && isFocusedRef.current) {
             const timer = setTimeout(() => {
                 // The incoming view never took first responder. Rather than unmount
@@ -460,7 +476,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         fontSize: sizeConfig.fontSize,
         ...(nativeFontFamily ? { fontFamily: nativeFontFamily } : null),
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [surfaceStyle, hasSecureToggle && styles.nativeRow], hitSlop: { top: surfaceHitSlop, bottom: surfaceHitSlop }, ...surfaceResponderProps, children: [[true, false].map((secure) => {
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [surfaceStyle, hasSecureToggle && styles.nativeRow], hitSlop: { top: surfaceHitSlop, bottom: surfaceHitSlop }, ...surfaceResponderProps, children: [(Platform.OS === "android" ? [effectiveSecureTextEntry] : [true, false]).map((secure) => {
                         const active = secure === effectiveSecureTextEntry;
                         const outgoing = handoff != null && secure === handoff.outgoingSecure;
                         if (!active && !outgoing)
@@ -472,7 +488,11 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
                                 ? hasSecureToggle
                                     ? styles.nativeHostFlex
                                     : styles.nativeHost
-                                : styles.nativeHostHandoff, pointerEvents: inLayout ? "auto" : "none", accessibilityElementsHidden: !inLayout, importantForAccessibility: inLayout ? "auto" : "no-hide-descendants", children: _jsx(ExpoTextInput, { ...rest, autoFocus: rest.autoFocus || (handoff != null && active), ref: secure ? secureRef : plainRef, value: state, defaultValue: defaultValue, onChangeText: handleChangeText, onFocus: () => handleFocus(secure), onBlur: () => handleBlur(secure), editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: secure, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }, secure ? `secure-${generationRef.current.secure}` : `plain-${generationRef.current.plain}`));
+                                : styles.nativeHostHandoff, pointerEvents: inLayout ? "auto" : "none", accessibilityElementsHidden: !inLayout, importantForAccessibility: inLayout ? "auto" : "no-hide-descendants", children: _jsx(NativeTextField, { ...rest, autoFocus: rest.autoFocus || (handoff != null && active), ref: Platform.OS === "android" ? androidRef : secure ? secureRef : plainRef, value: state, defaultValue: defaultValue, onChangeText: handleChangeText, onFocus: () => handleFocus(secure), onBlur: () => handleBlur(secure), editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: secure, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }, Platform.OS === "android"
+                            ? "android"
+                            : secure
+                                ? `secure-${generationRef.current.secure}`
+                                : `plain-${generationRef.current.plain}`));
                     }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }
 const createStyles = (theme, variant, size) => StyleSheet.create({

package/dist/components/Tooltip.js

@@ -71,7 +71,7 @@ function TooltipContent({ side = "top", align = "center", sideOffset = 4, portal
             ...getShadowStyle("soft"),
         },
     ]) ?? undefined;
-    return (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(TooltipPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 150, children: _jsx(TextColorContext.Provider, { value: colors.text, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TooltipPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }) }));
+    return (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(TooltipPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 150, style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextColorContext.Provider, { value: colors.text, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TooltipPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }) }));
 }
 function TooltipBody({ children, style, ...props }) {
     return (_jsx(View, { style: [

package/dist/components/iconRegistry.generated.d.ts

@@ -0,0 +1,148 @@
+export declare const ICONS: {
+    readonly archive: import("lucide-react-native").LucideIcon;
+    readonly "arrow-down": import("lucide-react-native").LucideIcon;
+    readonly "arrow-left": import("lucide-react-native").LucideIcon;
+    readonly "arrow-right": import("lucide-react-native").LucideIcon;
+    readonly "arrow-up": import("lucide-react-native").LucideIcon;
+    readonly award: import("lucide-react-native").LucideIcon;
+    readonly beer: import("lucide-react-native").LucideIcon;
+    readonly bell: import("lucide-react-native").LucideIcon;
+    readonly "bell-off": import("lucide-react-native").LucideIcon;
+    readonly bold: import("lucide-react-native").LucideIcon;
+    readonly bookmark: import("lucide-react-native").LucideIcon;
+    readonly box: import("lucide-react-native").LucideIcon;
+    readonly briefcase: import("lucide-react-native").LucideIcon;
+    readonly calendar: import("lucide-react-native").LucideIcon;
+    readonly "calendar-check": import("lucide-react-native").LucideIcon;
+    readonly camera: import("lucide-react-native").LucideIcon;
+    readonly "camera-off": import("lucide-react-native").LucideIcon;
+    readonly "chart-no-axes-column": import("lucide-react-native").LucideIcon;
+    readonly check: import("lucide-react-native").LucideIcon;
+    readonly "chevron-down": import("lucide-react-native").LucideIcon;
+    readonly "chevron-left": import("lucide-react-native").LucideIcon;
+    readonly "chevron-right": import("lucide-react-native").LucideIcon;
+    readonly "chevron-up": import("lucide-react-native").LucideIcon;
+    readonly "circle-alert": import("lucide-react-native").LucideIcon;
+    readonly "circle-check-big": import("lucide-react-native").LucideIcon;
+    readonly "circle-plus": import("lucide-react-native").LucideIcon;
+    readonly "circle-question-mark": import("lucide-react-native").LucideIcon;
+    readonly "circle-stop": import("lucide-react-native").LucideIcon;
+    readonly "circle-x": import("lucide-react-native").LucideIcon;
+    readonly clock: import("lucide-react-native").LucideIcon;
+    readonly cloud: import("lucide-react-native").LucideIcon;
+    readonly "cloud-off": import("lucide-react-native").LucideIcon;
+    readonly code: import("lucide-react-native").LucideIcon;
+    readonly coffee: import("lucide-react-native").LucideIcon;
+    readonly compass: import("lucide-react-native").LucideIcon;
+    readonly copy: import("lucide-react-native").LucideIcon;
+    readonly "credit-card": import("lucide-react-native").LucideIcon;
+    readonly crosshair: import("lucide-react-native").LucideIcon;
+    readonly database: import("lucide-react-native").LucideIcon;
+    readonly "dollar-sign": import("lucide-react-native").LucideIcon;
+    readonly download: import("lucide-react-native").LucideIcon;
+    readonly droplet: import("lucide-react-native").LucideIcon;
+    readonly "ellipsis-vertical": import("lucide-react-native").LucideIcon;
+    readonly "external-link": import("lucide-react-native").LucideIcon;
+    readonly eye: import("lucide-react-native").LucideIcon;
+    readonly "eye-off": import("lucide-react-native").LucideIcon;
+    readonly "face-slightly-smiling": import("lucide-react-native").LucideIcon;
+    readonly file: import("lucide-react-native").LucideIcon;
+    readonly "file-text": import("lucide-react-native").LucideIcon;
+    readonly folder: import("lucide-react-native").LucideIcon;
+    readonly gift: import("lucide-react-native").LucideIcon;
+    readonly "git-branch": import("lucide-react-native").LucideIcon;
+    readonly "git-pull-request": import("lucide-react-native").LucideIcon;
+    readonly globe: import("lucide-react-native").LucideIcon;
+    readonly "grid-3x3": import("lucide-react-native").LucideIcon;
+    readonly hash: import("lucide-react-native").LucideIcon;
+    readonly heart: import("lucide-react-native").LucideIcon;
+    readonly hexagon: import("lucide-react-native").LucideIcon;
+    readonly house: import("lucide-react-native").LucideIcon;
+    readonly image: import("lucide-react-native").LucideIcon;
+    readonly inbox: import("lucide-react-native").LucideIcon;
+    readonly info: import("lucide-react-native").LucideIcon;
+    readonly italic: import("lucide-react-native").LucideIcon;
+    readonly key: import("lucide-react-native").LucideIcon;
+    readonly layers: import("lucide-react-native").LucideIcon;
+    readonly "layout-grid": import("lucide-react-native").LucideIcon;
+    readonly link: import("lucide-react-native").LucideIcon;
+    readonly "link-2": import("lucide-react-native").LucideIcon;
+    readonly list: import("lucide-react-native").LucideIcon;
+    readonly loader: import("lucide-react-native").LucideIcon;
+    readonly lock: import("lucide-react-native").LucideIcon;
+    readonly "lock-open": import("lucide-react-native").LucideIcon;
+    readonly "log-in": import("lucide-react-native").LucideIcon;
+    readonly "log-out": import("lucide-react-native").LucideIcon;
+    readonly mail: import("lucide-react-native").LucideIcon;
+    readonly map: import("lucide-react-native").LucideIcon;
+    readonly "map-pin": import("lucide-react-native").LucideIcon;
+    readonly maximize: import("lucide-react-native").LucideIcon;
+    readonly "maximize-2": import("lucide-react-native").LucideIcon;
+    readonly menu: import("lucide-react-native").LucideIcon;
+    readonly "message-circle": import("lucide-react-native").LucideIcon;
+    readonly "message-square": import("lucide-react-native").LucideIcon;
+    readonly mic: import("lucide-react-native").LucideIcon;
+    readonly "mic-off": import("lucide-react-native").LucideIcon;
+    readonly minus: import("lucide-react-native").LucideIcon;
+    readonly monitor: import("lucide-react-native").LucideIcon;
+    readonly moon: import("lucide-react-native").LucideIcon;
+    readonly music: import("lucide-react-native").LucideIcon;
+    readonly navigation: import("lucide-react-native").LucideIcon;
+    readonly package: import("lucide-react-native").LucideIcon;
+    readonly "panel-left": import("lucide-react-native").LucideIcon;
+    readonly "panels-top-left": import("lucide-react-native").LucideIcon;
+    readonly "party-popper": import("lucide-react-native").LucideIcon;
+    readonly pen: import("lucide-react-native").LucideIcon;
+    readonly "pen-line": import("lucide-react-native").LucideIcon;
+    readonly pencil: import("lucide-react-native").LucideIcon;
+    readonly percent: import("lucide-react-native").LucideIcon;
+    readonly phone: import("lucide-react-native").LucideIcon;
+    readonly play: import("lucide-react-native").LucideIcon;
+    readonly plus: import("lucide-react-native").LucideIcon;
+    readonly printer: import("lucide-react-native").LucideIcon;
+    readonly radio: import("lucide-react-native").LucideIcon;
+    readonly "refresh-cw": import("lucide-react-native").LucideIcon;
+    readonly repeat: import("lucide-react-native").LucideIcon;
+    readonly "rotate-cw": import("lucide-react-native").LucideIcon;
+    readonly search: import("lucide-react-native").LucideIcon;
+    readonly send: import("lucide-react-native").LucideIcon;
+    readonly server: import("lucide-react-native").LucideIcon;
+    readonly settings: import("lucide-react-native").LucideIcon;
+    readonly share: import("lucide-react-native").LucideIcon;
+    readonly "share-2": import("lucide-react-native").LucideIcon;
+    readonly shield: import("lucide-react-native").LucideIcon;
+    readonly "shield-off": import("lucide-react-native").LucideIcon;
+    readonly "shopping-bag": import("lucide-react-native").LucideIcon;
+    readonly "shopping-cart": import("lucide-react-native").LucideIcon;
+    readonly shuffle: import("lucide-react-native").LucideIcon;
+    readonly slash: import("lucide-react-native").LucideIcon;
+    readonly "sliders-horizontal": import("lucide-react-native").LucideIcon;
+    readonly "sliders-vertical": import("lucide-react-native").LucideIcon;
+    readonly smartphone: import("lucide-react-native").LucideIcon;
+    readonly square: import("lucide-react-native").LucideIcon;
+    readonly "square-check-big": import("lucide-react-native").LucideIcon;
+    readonly "square-pen": import("lucide-react-native").LucideIcon;
+    readonly star: import("lucide-react-native").LucideIcon;
+    readonly sun: import("lucide-react-native").LucideIcon;
+    readonly tag: import("lucide-react-native").LucideIcon;
+    readonly terminal: import("lucide-react-native").LucideIcon;
+    readonly "thumbs-up": import("lucide-react-native").LucideIcon;
+    readonly trash: import("lucide-react-native").LucideIcon;
+    readonly "trending-down": import("lucide-react-native").LucideIcon;
+    readonly "trending-up": import("lucide-react-native").LucideIcon;
+    readonly "triangle-alert": import("lucide-react-native").LucideIcon;
+    readonly truck: import("lucide-react-native").LucideIcon;
+    readonly underline: import("lucide-react-native").LucideIcon;
+    readonly upload: import("lucide-react-native").LucideIcon;
+    readonly user: import("lucide-react-native").LucideIcon;
+    readonly "user-check": import("lucide-react-native").LucideIcon;
+    readonly "user-minus": import("lucide-react-native").LucideIcon;
+    readonly "user-plus": import("lucide-react-native").LucideIcon;
+    readonly users: import("lucide-react-native").LucideIcon;
+    readonly video: import("lucide-react-native").LucideIcon;
+    readonly "wifi-off": import("lucide-react-native").LucideIcon;
+    readonly wrench: import("lucide-react-native").LucideIcon;
+    readonly x: import("lucide-react-native").LucideIcon;
+    readonly zap: import("lucide-react-native").LucideIcon;
+};
+export type IconName = keyof typeof ICONS;