@mrmeg/expo-ui 0.25.1 → 0.27.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/StyledText.d.ts

@@ -74,8 +74,12 @@ export type TextProps = RNTextProps & {
  *   real Inter font files on native, and family + numeric fontWeight on web
  * - Per-size letter-spacing scale (tight on large headings, positive on micro
  *   labels); explicit `style` letterSpacing always wins
- * - Text selection enabled by default; pass `selectable={false}` for control
- *   chrome such as button labels, tabs, badges, and field labels
+ * - Text selection on by default on iOS and web, off by default on Android:
+ *   a selectable Android `Text` is focusable-in-touch-mode, so a tap on a label
+ *   next to a focused input moved view focus to the label and hid the keyboard.
+ *   Pass `selectable` to opt copyable content in (codes, addresses, chat
+ *   bubbles); pass `selectable={false}` on every platform for control chrome
+ *   such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
 export declare function StyledText(props: TextProps): import("react").JSX.Element;

package/dist/components/StyledText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
-import { Text as RNText, StyleSheet } from "react-native";
+import { Platform, Text as RNText, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { resolveFontStyle } from "../constants/fonts.js";
 import { useThemeStore } from "../state/themeStore.js";
@@ -67,8 +67,12 @@ const SEMANTIC_CONFIGS = {
  *   real Inter font files on native, and family + numeric fontWeight on web
  * - Per-size letter-spacing scale (tight on large headings, positive on micro
  *   labels); explicit `style` letterSpacing always wins
- * - Text selection enabled by default; pass `selectable={false}` for control
- *   chrome such as button labels, tabs, badges, and field labels
+ * - Text selection on by default on iOS and web, off by default on Android:
+ *   a selectable Android `Text` is focusable-in-touch-mode, so a tap on a label
+ *   next to a focused input moved view focus to the label and hid the keyboard.
+ *   Pass `selectable` to opt copyable content in (codes, addresses, chat
+ *   bubbles); pass `selectable={false}` on every platform for control chrome
+ *   such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
 export function StyledText(props) {
@@ -81,7 +85,9 @@ export function StyledText(props) {
     const contextColor = use(TextColorContext);
     const contextTextStyle = use(TextStyleContext);
     const contextSelectable = use(TextSelectabilityContext);
-    const resolvedSelectable = selectable ?? contextSelectable ?? true;
+    // Read at render time (not module load) so tests can flip `Platform.OS`.
+    const platformDefaultSelectable = Platform.OS !== "android";
+    const resolvedSelectable = selectable ?? contextSelectable ?? platformDefaultSelectable;
     // Use context color if provided, otherwise use theme default
     const color = contextColor ?? theme.colors.text;
     // If semantic variant is provided, use its config

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,22 +180,37 @@ 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.
+ *
+ * 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.
+ *
+ * On Android `onBlur` is reported only after a forwarded `onFocus`: Compose
+ * reports `isFocused=false` on first composition and the field forwards it,
+ * so an unguarded consumer saw a blur before any interaction.
  */
 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
@@ -293,9 +309,10 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         if (Platform.OS === "ios" && secure !== activeSecureRef.current)
             return;
         isFocusedRef.current = true;
-        // Register the field's own blur handle for tap-away dismissal and the
-        // BottomSheet overlay. RN supports Expo-hosted field interop; this direct
-        // ref also targets the actual field inside a native sheet's window.
+        // 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.
@@ -308,9 +325,16 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const handleBlur = useCallback((secure) => {
         if (Platform.OS === "ios" && secure !== activeSecureRef.current)
             return;
+        // Compose reports `isFocused=false` when the field is first composed and
+        // the Android field forwards it as a blur. A blur the field never
+        // preceded with a focus is not the user leaving the field: keep it from
+        // the consumer so blur validation does not flag untouched fields.
+        const wasFocused = isFocusedRef.current;
         isFocusedRef.current = false;
         restoreAfterSecureHandoffRef.current = false;
         clearKeyboardFocusedInput(focusRegistryToken);
+        if (Platform.OS === "android" && !wasFocused)
+            return;
         parentOnBlur?.();
     }, [focusRegistryToken, parentOnBlur]);
     const togglePasswordVisible = useCallback(() => {
@@ -475,7 +499,7 @@ 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: 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"
+                                : 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}`

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;