@mrmeg/expo-ui 0.28.0 → 0.29.0

package/dist/components/Icon.js

@@ -1,7 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Platform } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
-import { ICONS } from "./iconRegistry.generated.js";
+import { BUILTIN_ICONS } from "./iconBuiltins.generated.js";
+import { IconGlyph as GlyphRenderer } from "./IconGlyph";
+/** Glyphs by name: the builtins, then whatever `registerIcons` adds. */
+const registry = new Map(Object.entries(BUILTIN_ICONS));
+/**
+ * Make glyphs drawable by name. Call it once at module scope in the root
+ * layout with the module `expo-ui-icons` generates
+ * (`registerIcons(appIcons)`), so it has run before any route renders, on the
+ * server too. Idempotent; a later call wins for a name it repeats.
+ */
+export function registerIcons(icons) {
+    for (const [name, glyph] of Object.entries(icons))
+        registry.set(name, glyph);
+}
+/**
+ * Whether a runtime value (a database field, a server payload) names a
+ * registered icon. Narrows it to `IconName` for `<Icon name>`.
+ */
+export function isIconName(value) {
+    return typeof value === "string" && registry.has(value);
+}
 /**
  * Resolve an icon color against the active theme.
  *
@@ -46,28 +66,29 @@ function iconAccessibilityProps(decorative, label) {
     }
     return { accessible: true, accessibilityLabel: label };
 }
+const warnedUnknownIconNames = new Set();
+function warnUnknownIconName(name) {
+    if (!__DEV__ || warnedUnknownIconNames.has(name))
+        return;
+    warnedUnknownIconNames.add(name);
+    console.warn(`Icon: "${name}" is not a registered icon, so nothing was rendered. ` +
+        "Add it to client/icons.json, run `bun run icons`, and make sure " +
+        "`registerIcons(appIcons)` runs in the root layout.");
+}
 /**
  * Universal Icon Component
- * 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.
+ * Draws a registered glyph as SVG with theme integration and style support:
+ * an inline `<svg>` on web and the server, `react-native-svg` on iOS and
+ * Android. 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
+ * <Icon component={BrandMark} color="accent" /> // non-Lucide art
  * ```
  */
-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, accessibilityLabel } = props;
     const { theme } = useTheme();
@@ -81,14 +102,14 @@ export function Icon(props) {
     if (CustomComponent) {
         return (_jsx(CustomComponent, { size: size, color: iconColor, style: iconStyle, ...accessibilityProps }));
     }
-    const name = props.name;
-    const Lucide = ICONS[name];
+    const { name, testID } = props;
+    const glyph = registry.get(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) {
+    // runtime (a database field, a config file) and an app can forget to
+    // register. Draw nothing and say so once per name in development.
+    if (!glyph) {
         warnUnknownIconName(name);
         return null;
     }
-    return (_jsx(Lucide, { size: size, color: iconColor, style: iconStyle, ...accessibilityProps }));
+    return (_jsx(GlyphRenderer, { glyph: glyph, size: size, color: iconColor, style: iconStyle, testID: testID ?? (__DEV__ ? `icon-${name}` : undefined), ...accessibilityProps }));
 }

package/dist/components/IconGlyph.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement } from "react";
+import type { IconGlyphProps } from "./iconTypes.js";
+/**
+ * Web and server renderer for a glyph: one inline `<svg>` built with
+ * react-native-web's `unstable_createElement`, so the style array, `testID`
+ * (`data-testid`), and ARIA props convert exactly as they do on a `View`, and
+ * `react-dom/server` emits the full markup with no DOM.
+ *
+ * The SVG strokes `currentColor` and carries the color as a `color` style. On
+ * web every theme color is a `var(--c-*)` string that is identical in both
+ * schemes, so server and client markup match and a theme change recolors the
+ * icon through CSS alone. No hooks and no ids: nothing here can differ
+ * between the server render and hydration.
+ */
+export declare function IconGlyph({ glyph, size, color, strokeWidth, style, testID, ...accessibility }: IconGlyphProps): ReactElement;

package/dist/components/IconGlyph.js

@@ -0,0 +1,32 @@
+import { createElement } from "react";
+import { unstable_createElement } from "react-native-web";
+/**
+ * Web and server renderer for a glyph: one inline `<svg>` built with
+ * react-native-web's `unstable_createElement`, so the style array, `testID`
+ * (`data-testid`), and ARIA props convert exactly as they do on a `View`, and
+ * `react-dom/server` emits the full markup with no DOM.
+ *
+ * The SVG strokes `currentColor` and carries the color as a `color` style. On
+ * web every theme color is a `var(--c-*)` string that is identical in both
+ * schemes, so server and client markup match and a theme change recolors the
+ * icon through CSS alone. No hooks and no ids: nothing here can differ
+ * between the server render and hydration.
+ */
+export function IconGlyph({ glyph, size, color, strokeWidth = 2, style, testID, ...accessibility }) {
+    return unstable_createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: [{ color }, style, { pointerEvents: "none" }],
+        ...accessibility,
+        testID,
+        // react-native-web reads children from props; a third argument is options.
+        children: glyph.map(([tag, attrs], index) => createElement(tag, { key: index, ...attrs })),
+    });
+}

package/dist/components/IconGlyph.native.d.ts

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+import type { IconGlyphProps } from "./iconTypes.js";
+/**
+ * iOS and Android renderer for a glyph, drawn with `react-native-svg` the way
+ * Lucide's own native component draws it, so the pixels match: the root sets
+ * the 24×24 view box, no fill, a round 2 px stroke in `color`, and `color` itself
+ * (so a `fill="currentColor"` node resolves), and every child repeats the fill,
+ * stroke, width, cap, and join before its own attributes.
+ */
+export declare function IconGlyph({ glyph, size, color, strokeWidth, style, testID, ...accessibility }: IconGlyphProps): ReactElement;

package/dist/components/IconGlyph.native.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { Circle, Ellipse, Line, Path, Polygon, Polyline, Rect, Svg } from "react-native-svg";
+const ELEMENTS = {
+    path: Path,
+    circle: Circle,
+    rect: Rect,
+    line: Line,
+    polyline: Polyline,
+    polygon: Polygon,
+    ellipse: Ellipse,
+};
+/**
+ * iOS and Android renderer for a glyph, drawn with `react-native-svg` the way
+ * Lucide's own native component draws it, so the pixels match: the root sets
+ * the 24×24 view box, no fill, a round 2 px stroke in `color`, and `color` itself
+ * (so a `fill="currentColor"` node resolves), and every child repeats the fill,
+ * stroke, width, cap, and join before its own attributes.
+ */
+export function IconGlyph({ glyph, size, color, strokeWidth = 2, style, testID, ...accessibility }) {
+    return (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, color: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style: style, testID: testID, ...accessibility, children: glyph.map(([tag, attrs], index) => createElement(ELEMENTS[tag], {
+            key: index,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            ...attrs,
+        })) }));
+}

package/dist/components/ThemeSelector.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type ThemePreference } from "../state/themeStore.js";
+/**
+ * ThemeSelector — a compact System / Light / Dark switch wired to the kit's
+ * theme store.
+ *
+ * Icon-only by default (about 116pt wide), sized to sit in an `Item` row's
+ * `ItemActions` so the whole appearance setting is one row instead of three.
+ * Pass `showLabels` for a full-width control with text under a group title.
+ *
+ * Reads and writes `useThemeStore` unless `value` / `onValueChange` are
+ * passed. The package has no i18n: pass translated `labels`, which become the
+ * visible text (with `showLabels`) and each segment's accessibility label.
+ *
+ * Drawn in RN on every platform (no native segmented control), so the icons
+ * render on iOS and Android too and the server render matches the client: the
+ * store boots `system` on both sides until the persisted preference loads.
+ *
+ * @example
+ * ```tsx
+ * <Item>
+ *   <ItemContent>
+ *     <ItemTitle>Theme</ItemTitle>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <ThemeSelector />
+ *   </ItemActions>
+ * </Item>
+ * ```
+ */
+export type ThemeSelectorLabels = Record<ThemePreference, string>;
+export interface ThemeSelectorProps {
+    /** Controlled preference. Defaults to the theme store's `userTheme`. */
+    value?: ThemePreference;
+    /** Called with the chosen preference. Defaults to the theme store's `setTheme`. */
+    onValueChange?: (value: ThemePreference) => void;
+    /** Segment labels, for screen readers and `showLabels`. @default English */
+    labels?: Partial<ThemeSelectorLabels>;
+    /** Show the label beside each icon and stretch to the parent's width. @default false */
+    showLabels?: boolean;
+    /** Disable interaction. @default false */
+    disabled?: boolean;
+    /** Names the group for screen readers. Inside an `Item`, defaults to the row title. */
+    accessibilityLabel?: string;
+    /** Style override for the track. */
+    style?: StyleProp<ViewStyle>;
+    /** Test id for the track; segments get `${testID}-${value}`. @default "theme-selector" */
+    testID?: string;
+}
+declare function ThemeSelector({ value, onValueChange, labels, showLabels, disabled, accessibilityLabel, style, testID, }: ThemeSelectorProps): React.JSX.Element;
+export { ThemeSelector };

package/dist/components/ThemeSelector.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
+import { useThemeStore } from "../state/themeStore.js";
+import { hapticSelection } from "../lib/haptics.js";
+import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
+import { Icon } from "./Icon.js";
+import { StyledText } from "./StyledText.js";
+import { useItemControlLabel } from "./Item.js";
+const DEFAULT_LABELS = { system: "System", light: "Light", dark: "Dark" };
+const OPTIONS = [
+    // A phone reads as "device" on native; web visitors are mostly on a desktop.
+    { value: "system", icon: Platform.OS === "web" ? "monitor" : "smartphone" },
+    { value: "light", icon: "sun" },
+    { value: "dark", icon: "moon" },
+];
+const TRACK_HEIGHT = 32;
+const TRACK_INSET = 2;
+const ICON_SEGMENT_WIDTH = 36;
+function ThemeSelector({ value, onValueChange, labels, showLabels = false, disabled = false, accessibilityLabel, style, testID = "theme-selector", }) {
+    const rowLabel = useItemControlLabel({ accessibilityLabel });
+    const { theme } = useTheme();
+    const userTheme = useThemeStore((state) => state.userTheme);
+    const setTheme = useThemeStore((state) => state.setTheme);
+    const selected = value ?? userTheme;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const select = (next) => {
+        if (next === selected)
+            return;
+        hapticSelection();
+        (onValueChange ?? setTheme)(next);
+    };
+    return (_jsx(View, { testID: testID, accessibilityRole: "radiogroup", accessibilityLabel: accessibilityLabel, ...rowLabel, accessibilityState: { disabled }, style: [
+            styles.track,
+            { backgroundColor: theme.colors.muted, opacity: disabled ? interaction.disabledOpacity : 1 },
+            showLabels ? styles.trackStretch : styles.trackCompact,
+            style,
+        ], children: OPTIONS.map((option) => (_jsx(Segment, { testID: `${testID}-${option.value}`, icon: option.icon, label: text[option.value], showLabel: showLabels, selected: option.value === selected, disabled: disabled, onPress: () => select(option.value) }, option.value))) }));
+}
+function Segment({ testID, icon, label, showLabel, selected, disabled, onPress }) {
+    const { theme, getFocusRingStyle } = useTheme();
+    const focus = useFocusVisible();
+    const color = selected ? theme.colors.foreground : theme.colors.mutedForeground;
+    return (_jsxs(Pressable, { testID: testID, accessibilityRole: "radio", accessibilityLabel: label, accessibilityState: { checked: selected, disabled }, disabled: disabled, onPress: onPress, onFocus: focus.onFocus, onBlur: focus.onBlur, 
+        // The track is 32pt; reach the 44pt touch target vertically.
+        hitSlop: { top: 6, bottom: 6 }, style: ({ pressed }) => [
+            styles.segment,
+            showLabel ? styles.segmentStretch : styles.segmentCompact,
+            selected && { backgroundColor: theme.colors.background, borderColor: theme.colors.border },
+            pressed && !selected && { opacity: interaction.pressedOpacity },
+            Platform.OS === "web" && {
+                cursor: (disabled ? "not-allowed" : "pointer"),
+                outlineStyle: "none",
+            },
+            focus.focused && !disabled && getFocusRingStyle(),
+        ], children: [_jsx(Icon, { name: icon, size: 16, color: color, decorative: true }), showLabel && (_jsx(StyledText, { selectable: false, numberOfLines: 1, fontWeight: "medium", style: { fontSize: 13, lineHeight: 18, color }, children: label }))] }));
+}
+const styles = /*#__PURE__*/ StyleSheet.create({
+    track: {
+        flexDirection: "row",
+        height: TRACK_HEIGHT,
+        padding: TRACK_INSET,
+        borderRadius: spacing.radiusMd,
+    },
+    trackCompact: {
+        alignSelf: "flex-start",
+    },
+    trackStretch: {
+        alignSelf: "stretch",
+    },
+    segment: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.xs,
+        borderRadius: spacing.radiusSm,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: "transparent",
+    },
+    segmentCompact: {
+        width: ICON_SEGMENT_WIDTH,
+    },
+    segmentStretch: {
+        flex: 1,
+        paddingHorizontal: spacing.sm,
+    },
+});
+export { ThemeSelector };

package/dist/components/Toggle.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import * as TogglePrimitive from "@rn-primitives/toggle";
 import { ViewStyle, StyleProp } from "react-native";
-import type { IconName } from "./Icon.js";
+import type { IconProps } from "./Icon.js";
 export type ToggleVariant = "default" | "outline";
 export type ToggleSize = "sm" | "default" | "lg";
 export type ToggleShape = "default" | "square" | "circle";
@@ -48,7 +48,8 @@ declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleO
 /**
  * ToggleIcon Component
  * Icon wrapper for use inside Toggle buttons
- * Automatically inherits sizing from parent Toggle
+ * Takes `Icon`'s props; the color defaults to the Toggle's text color, and the
+ * icon is decorative (the control's label names it).
  *
  * Usage:
  * ```tsx
@@ -57,11 +58,6 @@ declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleO
  * </Toggle>
  * ```
  */
-interface ToggleIconProps {
-    name: IconName;
-    size?: number;
-    color?: string;
-}
-declare function ToggleIcon({ name, size, color }: ToggleIconProps): React.JSX.Element;
+declare function ToggleIcon(props: IconProps): React.JSX.Element;
 export { Toggle, ToggleIcon };
 export type { ToggleProps };

package/dist/components/Toggle.js

@@ -179,9 +179,22 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
                         busy: loading,
                     }, children: loading ? (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) }), hitTarget] })) : typeof children === "function" ? ((state) => (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }), hitTarget] }))) : (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: children }), hitTarget] })) }) }) }) }));
 }
-function ToggleIcon({ name, size, color }) {
+/**
+ * ToggleIcon Component
+ * Icon wrapper for use inside Toggle buttons
+ * Takes `Icon`'s props; the color defaults to the Toggle's text color, and the
+ * icon is decorative (the control's label names it).
+ *
+ * Usage:
+ * ```tsx
+ * <Toggle pressed={pressed} onPressedChange={setPressed}>
+ *   <ToggleIcon name="bold" />
+ * </Toggle>
+ * ```
+ */
+function ToggleIcon(props) {
     const contextColor = React.use(TextColorContext);
-    return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
+    return _jsx(Icon, { decorative: true, color: contextColor, ...props });
 }
 const styles = /*#__PURE__*/ StyleSheet.create({
     root: {

package/dist/components/ToggleGroup.d.ts

@@ -1,4 +1,4 @@
-import type { IconName } from "./Icon.js";
+import type { IconProps } from "./Icon.js";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
 import * as React from "react";
 type ToggleGroupVariant = "default" | "outline";
@@ -62,7 +62,8 @@ declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: Toggle
 /**
  * ToggleGroupIcon Component
  * Icon wrapper for use inside ToggleGroup items
- * Automatically inherits sizing from parent ToggleGroup
+ * Takes `Icon`'s props; the color defaults to the ToggleGroup's text color, and the
+ * icon is decorative (the control's label names it).
  *
  * Usage:
  * ```tsx
@@ -71,11 +72,6 @@ declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: Toggle
  * </ToggleGroupItem>
  * ```
  */
-interface ToggleGroupIconProps {
-    name: IconName;
-    size?: number;
-    color?: string;
-}
-declare function ToggleGroupIcon({ name, size, color }: ToggleGroupIconProps): React.JSX.Element;
+declare function ToggleGroupIcon(props: IconProps): React.JSX.Element;
 export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };
 export type { ToggleGroupProps, ToggleGroupSize, ToggleGroupVariant };

package/dist/components/ToggleGroup.js

@@ -206,9 +206,22 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
                         ...(focused && !props.disabled ? focusRingStyle : null),
                     }, hitSlop: DEFAULT_HIT_SLOP, children: typeof children === "function" ? ((state) => (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }), hitTarget] }))) : (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: children }), hitTarget] })) }) }) }) }));
 }
-function ToggleGroupIcon({ name, size, color }) {
+/**
+ * ToggleGroupIcon Component
+ * Icon wrapper for use inside ToggleGroup items
+ * Takes `Icon`'s props; the color defaults to the ToggleGroup's text color, and the
+ * icon is decorative (the control's label names it).
+ *
+ * Usage:
+ * ```tsx
+ * <ToggleGroupItem value="bold">
+ *   <ToggleGroupIcon name="bold" />
+ * </ToggleGroupItem>
+ * ```
+ */
+function ToggleGroupIcon(props) {
     const contextColor = React.use(TextColorContext);
-    return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
+    return _jsx(Icon, { decorative: true, color: contextColor, ...props });
 }
 const styles = /*#__PURE__*/ StyleSheet.create({
     item: {

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

@@ -0,0 +1,143 @@
+export declare const BUILTIN_ICONS: {
+    readonly check: readonly [readonly ["path", {
+        readonly d: "M20 6 9 17l-5-5";
+    }]];
+    readonly "chevron-down": readonly [readonly ["path", {
+        readonly d: "m6 9 6 6 6-6";
+    }]];
+    readonly "chevron-right": readonly [readonly ["path", {
+        readonly d: "m9 18 6-6-6-6";
+    }]];
+    readonly "chevron-up": readonly [readonly ["path", {
+        readonly d: "m18 15-6-6-6 6";
+    }]];
+    readonly "circle-alert": readonly [readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "12";
+        readonly r: "10";
+    }], readonly ["line", {
+        readonly x1: "12";
+        readonly x2: "12";
+        readonly y1: "8";
+        readonly y2: "12";
+    }], readonly ["line", {
+        readonly x1: "12";
+        readonly x2: "12.01";
+        readonly y1: "16";
+        readonly y2: "16";
+    }]];
+    readonly "circle-check-big": readonly [readonly ["path", {
+        readonly d: "M21.801 10A10 10 0 1 1 17 3.335";
+    }], readonly ["path", {
+        readonly d: "m9 11 3 3L22 4";
+    }]];
+    readonly eye: readonly [readonly ["path", {
+        readonly d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0";
+    }], readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "12";
+        readonly r: "3";
+    }]];
+    readonly "eye-off": readonly [readonly ["path", {
+        readonly d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49";
+    }], readonly ["path", {
+        readonly d: "M14.084 14.158a3 3 0 0 1-4.242-4.242";
+    }], readonly ["path", {
+        readonly d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143";
+    }], readonly ["path", {
+        readonly d: "m2 2 20 20";
+    }]];
+    readonly info: readonly [readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "12";
+        readonly r: "10";
+    }], readonly ["path", {
+        readonly d: "M12 16v-4";
+    }], readonly ["path", {
+        readonly d: "M12 8h.01";
+    }]];
+    readonly minus: readonly [readonly ["path", {
+        readonly d: "M5 12h14";
+    }]];
+    readonly monitor: readonly [readonly ["rect", {
+        readonly width: "20";
+        readonly height: "14";
+        readonly x: "2";
+        readonly y: "3";
+        readonly rx: "2";
+    }], readonly ["line", {
+        readonly x1: "8";
+        readonly x2: "16";
+        readonly y1: "21";
+        readonly y2: "21";
+    }], readonly ["line", {
+        readonly x1: "12";
+        readonly x2: "12";
+        readonly y1: "17";
+        readonly y2: "21";
+    }]];
+    readonly moon: readonly [readonly ["path", {
+        readonly d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401";
+    }]];
+    readonly smartphone: readonly [readonly ["rect", {
+        readonly width: "14";
+        readonly height: "20";
+        readonly x: "5";
+        readonly y: "2";
+        readonly rx: "2";
+        readonly ry: "2";
+    }], readonly ["path", {
+        readonly d: "M12 18h.01";
+    }]];
+    readonly sun: readonly [readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "12";
+        readonly r: "4";
+    }], readonly ["path", {
+        readonly d: "M12 2v2";
+    }], readonly ["path", {
+        readonly d: "M12 20v2";
+    }], readonly ["path", {
+        readonly d: "m4.93 4.93 1.41 1.41";
+    }], readonly ["path", {
+        readonly d: "m17.66 17.66 1.41 1.41";
+    }], readonly ["path", {
+        readonly d: "M2 12h2";
+    }], readonly ["path", {
+        readonly d: "M20 12h2";
+    }], readonly ["path", {
+        readonly d: "m6.34 17.66-1.41 1.41";
+    }], readonly ["path", {
+        readonly d: "m19.07 4.93-1.41 1.41";
+    }]];
+    readonly "trending-down": readonly [readonly ["path", {
+        readonly d: "M16 17h6v-6";
+    }], readonly ["path", {
+        readonly d: "m22 17-8.5-8.5-5 5L2 7";
+    }]];
+    readonly "trending-up": readonly [readonly ["path", {
+        readonly d: "M16 7h6v6";
+    }], readonly ["path", {
+        readonly d: "m22 7-8.5 8.5-5-5L2 17";
+    }]];
+    readonly "triangle-alert": readonly [readonly ["path", {
+        readonly d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3";
+    }], readonly ["path", {
+        readonly d: "M12 9v4";
+    }], readonly ["path", {
+        readonly d: "M12 17h.01";
+    }]];
+    readonly user: readonly [readonly ["path", {
+        readonly d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2";
+    }], readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "7";
+        readonly r: "4";
+    }]];
+    readonly x: readonly [readonly ["path", {
+        readonly d: "M18 6 6 18";
+    }], readonly ["path", {
+        readonly d: "m6 6 12 12";
+    }]];
+};
+export type BuiltinIconName = keyof typeof BUILTIN_ICONS;

package/dist/components/iconBuiltins.generated.js

@@ -0,0 +1,25 @@
+/* eslint-disable */
+// GENERATED by `bun run ui:icons` from icon-names.json (lucide 1.55.0). Do not edit.
+// The glyphs the package's own components draw. Apps register every other
+// name through `client/icons.json`, `expo-ui-icons`, and `registerIcons`.
+export const BUILTIN_ICONS = {
+    "check": [["path", { d: "M20 6 9 17l-5-5" }]],
+    "chevron-down": [["path", { d: "m6 9 6 6 6-6" }]],
+    "chevron-right": [["path", { d: "m9 18 6-6-6-6" }]],
+    "chevron-up": [["path", { d: "m18 15-6-6-6 6" }]],
+    "circle-alert": [["circle", { cx: "12", cy: "12", r: "10" }], ["line", { x1: "12", x2: "12", y1: "8", y2: "12" }], ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }]],
+    "circle-check-big": [["path", { d: "M21.801 10A10 10 0 1 1 17 3.335" }], ["path", { d: "m9 11 3 3L22 4" }]],
+    "eye": [["path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { cx: "12", cy: "12", r: "3" }]],
+    "eye-off": [["path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { d: "m2 2 20 20" }]],
+    "info": [["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "M12 16v-4" }], ["path", { d: "M12 8h.01" }]],
+    "minus": [["path", { d: "M5 12h14" }]],
+    "monitor": [["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }], ["line", { x1: "8", x2: "16", y1: "21", y2: "21" }], ["line", { x1: "12", x2: "12", y1: "17", y2: "21" }]],
+    "moon": [["path", { d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" }]],
+    "smartphone": [["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2" }], ["path", { d: "M12 18h.01" }]],
+    "sun": [["circle", { cx: "12", cy: "12", r: "4" }], ["path", { d: "M12 2v2" }], ["path", { d: "M12 20v2" }], ["path", { d: "m4.93 4.93 1.41 1.41" }], ["path", { d: "m17.66 17.66 1.41 1.41" }], ["path", { d: "M2 12h2" }], ["path", { d: "M20 12h2" }], ["path", { d: "m6.34 17.66-1.41 1.41" }], ["path", { d: "m19.07 4.93-1.41 1.41" }]],
+    "trending-down": [["path", { d: "M16 17h6v-6" }], ["path", { d: "m22 17-8.5-8.5-5 5L2 7" }]],
+    "trending-up": [["path", { d: "M16 7h6v6" }], ["path", { d: "m22 7-8.5 8.5-5-5L2 17" }]],
+    "triangle-alert": [["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { d: "M12 9v4" }], ["path", { d: "M12 17h.01" }]],
+    "user": [["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { cx: "12", cy: "7", r: "4" }]],
+    "x": [["path", { d: "M18 6 6 18" }], ["path", { d: "m6 6 12 12" }]],
+};

package/dist/components/iconTypes.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentType } from "react";
+import type { StyleProp, ViewProps, ViewStyle } from "react-native";
+/** The SVG elements a glyph is drawn with: every element Lucide uses. */
+export type IconTag = "path" | "circle" | "rect" | "line" | "polyline" | "polygon" | "ellipse";
+/**
+ * One icon as plain data: `[tag, attrs]` nodes on a 24×24 grid, stroked 2 px
+ * with round caps and joins in the icon's color. `attrs` are the element's own
+ * SVG attributes (`d`, `cx`, `points`, …) as strings; a `fill` value is
+ * `currentColor`, which resolves to the icon's color.
+ */
+export type IconGlyph = ReadonlyArray<readonly [tag: IconTag, attrs: Readonly<Record<string, string>>]>;
+export type IconAccessibilityProps = Pick<ViewProps, "accessible" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLabel" | "aria-hidden" | "aria-label" | "role">;
+/**
+ * Escape hatch for non-Lucide art (a brand mark, an illustration): any
+ * component that takes `size` and `color`. Lucide icons go through `name`; the
+ * design-system lint rule (a follow-up) rejects Lucide imports here.
+ */
+export type IconComponent = ComponentType<{
+    size: number;
+    color: string;
+    style?: StyleProp<ViewStyle>;
+} & Partial<IconAccessibilityProps>>;
+/**
+ * Props of the platform renderers (`IconGlyph.tsx` on web and the server,
+ * `IconGlyph.native.tsx` on iOS and Android). `Icon` resolves the color and
+ * the accessibility props before it hands a glyph over.
+ */
+export type IconGlyphProps = {
+    glyph: IconGlyph;
+    size: number;
+    /** A resolved color: a literal, or a `var(--c-*)` theme variable on web. */
+    color: string;
+    /** @default 2 */
+    strokeWidth?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+} & IconAccessibilityProps;

package/dist/components/iconTypes.js

@@ -0,0 +1 @@
+export {};