@mrmeg/expo-ui 0.27.1 → 0.29.0

package/dist/components/DropdownMenu.js

@@ -3,9 +3,10 @@ import * as React from "react";
 import { Animated, Platform, StyleSheet, Text, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
@@ -76,7 +77,7 @@ function DropdownMenuContent({ side, align = "start", sideOffset = 4, portalHost
     return (_jsx(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DropdownMenuPrimitive.Overlay, { style: Platform.select({
                     native: StyleSheet.absoluteFill,
                     default: undefined,
-                }), children: _jsx(AnimatedView, { type: "fade", style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                }), children: _jsx(AnimatedView, { type: "fade", style: [StyleSheet.absoluteFill, styles.passThrough], children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
                                     backgroundColor: theme.colors.popover,
                                     borderWidth: 1,
                                     borderColor: theme.colors.border,
@@ -109,7 +110,7 @@ function DropdownMenuItem({ inset = false, variant = "default", style: styleOver
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
-                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(props.disabled && { opacity: interaction.disabledOpacity }),
                         ...(inset && { paddingLeft: spacing.xl }),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
@@ -130,7 +131,7 @@ function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props })
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
-                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(props.disabled && { opacity: interaction.disabledOpacity }),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
                             : {}),
@@ -157,7 +158,7 @@ function DropdownMenuRadioItem({ children, style: styleOverride, ...props }) {
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
-                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(props.disabled && { opacity: interaction.disabledOpacity }),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
                             : {}),
@@ -172,7 +173,7 @@ function DropdownMenuRadioItem({ children, style: styleOverride, ...props }) {
                                         backgroundColor: theme.colors.text,
                                         height: 8,
                                         width: 8,
-                                        borderRadius: 4,
+                                        borderRadius: spacing.radiusFull,
                                     } }) }) }), typeof children === "function" ? null : children] }) }) }) }));
 }
 function DropdownMenuLabel({ inset = false, style: styleOverride, ...props }) {
@@ -216,7 +217,10 @@ function DropdownMenuShortcut({ children, text, style: styleOverride, ...props }
             styleOverride,
         ], children: text ?? children }));
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
+    // Overlay layer: covers the screen without swallowing touches (style, not the
+    // deprecated `pointerEvents` prop).
+    passThrough: { pointerEvents: "box-none" },
     item: {
         position: "relative",
         flexDirection: "row",

package/dist/components/EmptyState.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import { type ButtonProps } from "./Button";
-import { type IconName } from "./Icon";
+import { type ButtonProps } from "./Button.js";
+import { type IconName } from "./Icon.js";
 export interface EmptyStateProps {
     /** Icon name to display */
     icon?: IconName;

package/dist/components/EmptyState.js

@@ -4,6 +4,7 @@ import { SansSerifBoldText, SansSerifText } from "./StyledText.js";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { shapeRadius, useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
 /**
@@ -26,7 +27,9 @@ import { createThemedStyles } from "../lib/themedStyles.js";
 export function EmptyState({ icon, iconSize = spacing.iconMd, title, description, actionLabel, onAction, actionPreset = "default", style, children, bordered = false, }) {
     const { theme } = useTheme();
     const styles = themedStyles(theme);
-    return (_jsxs(View, { style: [styles.container, bordered && styles.bordered, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, size: "lg", style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, size: "base", style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
+    // Host-app `setShape({ card })` shapes the bordered frame like a Card.
+    const cardRadius = shapeRadius(useShape("card"));
+    return (_jsxs(View, { style: [styles.container, bordered && styles.bordered, bordered && cardRadius, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, size: "lg", style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, size: "base", style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
 }
 const MEDIA_SIZE = 56;
 const createStyles = (theme) => StyleSheet.create({
@@ -74,4 +77,4 @@ const createStyles = (theme) => StyleSheet.create({
         alignSelf: "center",
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);

package/dist/components/Hydrated.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+export interface HydratedProps {
+    /** What the server HTML and the hydration pass show in place of the children. @default null */
+    fallback?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Hydrated
+ *
+ * Renders `fallback` on the server and through the hydration pass, then its
+ * children in the first client render — the gate for markup the server cannot
+ * reproduce. Under Expo Router's SSR the server renders the app inside
+ * `+html.tsx` while the client hydrates `#root`, so every `useId()` differs
+ * between the two trees; the kit defers its own ids, but a Radix-backed
+ * component (`Tabs`, `Accordion`, `Collapsible`, `Select`, `DropdownMenu`,
+ * `Popover`) emits ids on both sides and logs a hydration mismatch when it is
+ * part of a server-rendered route. Wrap that subtree, not the page: the rest of
+ * the screen keeps its server HTML. Give it a fallback that holds the layout
+ * (a placeholder the same height) so nothing shifts when the children mount.
+ *
+ * Do not use it for content that must be in the server HTML (a FAQ's questions,
+ * a product's description); accept the development-only log there instead. On
+ * native there is no hydration pass, so children render immediately.
+ *
+ * ```tsx
+ * <Hydrated fallback={<View style={{ height: 240 }} />}>
+ *   <Tabs defaultValue="day">…</Tabs>
+ * </Hydrated>
+ * ```
+ */
+export declare function Hydrated({ fallback, children }: HydratedProps): import("react").JSX.Element;

package/dist/components/Hydrated.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useHydrated } from "../hooks/useHydrated.js";
+/**
+ * Hydrated
+ *
+ * Renders `fallback` on the server and through the hydration pass, then its
+ * children in the first client render — the gate for markup the server cannot
+ * reproduce. Under Expo Router's SSR the server renders the app inside
+ * `+html.tsx` while the client hydrates `#root`, so every `useId()` differs
+ * between the two trees; the kit defers its own ids, but a Radix-backed
+ * component (`Tabs`, `Accordion`, `Collapsible`, `Select`, `DropdownMenu`,
+ * `Popover`) emits ids on both sides and logs a hydration mismatch when it is
+ * part of a server-rendered route. Wrap that subtree, not the page: the rest of
+ * the screen keeps its server HTML. Give it a fallback that holds the layout
+ * (a placeholder the same height) so nothing shifts when the children mount.
+ *
+ * Do not use it for content that must be in the server HTML (a FAQ's questions,
+ * a product's description); accept the development-only log there instead. On
+ * native there is no hydration pass, so children render immediately.
+ *
+ * ```tsx
+ * <Hydrated fallback={<View style={{ height: 240 }} />}>
+ *   <Tabs defaultValue="day">…</Tabs>
+ * </Hydrated>
+ * ```
+ */
+export function Hydrated({ fallback = null, children }) {
+    const hydrated = useHydrated();
+    return _jsx(_Fragment, { children: hydrated ? children : fallback });
+}

package/dist/components/Icon.d.ts

@@ -1,14 +1,40 @@
 import * as React from "react";
-import type { StyleProp, TextStyle, ViewProps, ViewStyle } from "react-native";
-import type { ThemeColors } from "../constants/colors";
-import { type IconName } from "./iconRegistry.generated";
+import { type StyleProp, type TextStyle } from "react-native";
+import type { ThemeColors } from "../constants/colors.js";
+import { type BuiltinIconName } from "./iconBuiltins.generated.js";
+import type { IconComponent, IconGlyph } from "./iconTypes.js";
+export type { IconAccessibilityProps, IconComponent, IconGlyph, IconTag } from "./iconTypes.js";
 /**
- * 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.
+ * Every name `Icon` accepts, as keys. The package registers the names its own
+ * components draw (`icon-names.json`); an app adds the rest by listing them in
+ * `client/icons.json` and running `expo-ui-icons`, whose generated module
+ * augments this interface and exports the glyphs for `registerIcons`:
+ *
+ * ```ts
+ * declare module "@mrmeg/expo-ui/components/Icon" {
+ *   interface IconRegistry { "archive": true }
+ * }
+ * ```
+ */
+export interface IconRegistry extends Record<BuiltinIconName, true> {
+}
+/**
+ * Kebab-case Lucide names `Icon` can draw: the package builtins plus every
+ * name the app registered. An unregistered literal is a type error.
+ */
+export type IconName = Extract<keyof IconRegistry, string>;
+/**
+ * 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 type { IconName };
+export declare function registerIcons(icons: Readonly<Record<string, IconGlyph>>): void;
+/**
+ * Whether a runtime value (a database field, a server payload) names a
+ * registered icon. Narrows it to `IconName` for `<Icon name>`.
+ */
+export declare function isIconName(value: unknown): value is IconName;
 /**
  * Theme color names that can be used as shortcuts.
  *
@@ -23,32 +49,49 @@ type IconBaseProps = {
     color?: string | ThemeColorName;
     /** Additional styles for positioning, transforms, etc. */
     style?: StyleProp<TextStyle>;
-    /** When true, hides the icon from the accessibility tree. @default false */
+    /**
+     * Hides the icon from the accessibility tree. An icon with no
+     * `accessibilityLabel` is already hidden (see below), so this is only
+     * needed to silence a labelled icon. @default false
+     */
     decorative?: boolean;
+    /**
+     * What the icon means, for an icon that stands alone (no visible label next
+     * to it): `role="img"` + `aria-label` on web, `accessible` +
+     * `accessibilityLabel` on native. Omit it when the icon sits beside text
+     * that already says it — an unlabeled icon is hidden from assistive tech,
+     * which would otherwise announce an unnamed image.
+     */
+    accessibilityLabel?: string;
+    /** Test id for a named icon's SVG root. Defaults to `icon-<name>` in development. */
+    testID?: string;
 };
-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<ViewStyle>;
-} & Partial<IconAccessibilityProps>;
-type RegistryIconProps = IconBaseProps & {
-    /** The icon name to render (a Lucide name from the package registry) */
+export type NamedIconProps = IconBaseProps & {
+    /** A registered icon name: a package builtin or one listed in the app's `client/icons.json`. */
     name: IconName;
     component?: never;
 };
-type CustomIconProps = IconBaseProps & {
+export type IconProps = NamedIconProps | (IconBaseProps & {
     name?: never;
     /**
-     * Custom component to render instead of a registry icon. Receives size and
-     * color as props — any `lucide-react-native` icon import works here.
+     * A component to render instead of a registered glyph, for art that is
+     * not a Lucide icon. Receives the resolved size, color, style, and
+     * accessibility props, exactly like a named icon.
      */
-    component: React.ComponentType<CustomIconComponentProps>;
-};
-export type IconProps = RegistryIconProps | CustomIconProps;
+    component: IconComponent;
+});
+/**
+ * Universal Icon Component
+ * 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={BrandMark} color="accent" /> // non-Lucide art
+ * ```
+ */
 export declare function Icon(props: IconProps): React.JSX.Element | null;

package/dist/components/Icon.js

@@ -1,6 +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";
+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.
  *
@@ -18,41 +39,62 @@ function resolveIconColor(color, themeColors) {
     }
     return color;
 }
+/**
+ * On web the SVG root is a DOM element and React forwards every prop to it,
+ * so the RN-only accessibility props (`accessible`,
+ * `importantForAccessibility`, `accessibilityElementsHidden`) surface as
+ * "unknown prop" warnings on every page. Web gets ARIA only; native keeps
+ * the RN props.
+ *
+ * Only a labelled icon is exposed. An icon without a label used to render as
+ * an unnamed `role="img"` (web) or an `accessible` element with nothing to
+ * say (native) — dozens per screen, each a WCAG 1.1.1 failure — so no label
+ * now means decorative.
+ */
+function iconAccessibilityProps(decorative, label) {
+    const hidden = decorative || label === undefined;
+    if (Platform.OS === "web") {
+        return hidden ? { "aria-hidden": true } : { role: "img", "aria-label": label };
+    }
+    if (hidden) {
+        return {
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            accessibilityElementsHidden: true,
+            "aria-hidden": true,
+        };
+    }
+    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 } = props;
+    const { size = 24, color, style, decorative = false, accessibilityLabel } = props;
     const { theme } = useTheme();
     const iconColor = resolveIconColor(color, theme.colors);
     const CustomComponent = "component" in props ? props.component : undefined;
-    const accessibilityProps = decorative
-        ? {
-            accessible: false,
-            importantForAccessibility: "no-hide-descendants",
-            accessibilityElementsHidden: true,
-            "aria-hidden": true,
-        }
-        : { accessible: true };
+    const accessibilityProps = iconAccessibilityProps(decorative, accessibilityLabel);
     // `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.
@@ -60,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/InputOTP.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback } from "react";
 import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
+import { useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
@@ -85,6 +86,8 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPr
     // pass every frame. The 1↔2px and color changes read as instant for OTP
     // cells, so compute both during render.
     const borderWidth = isActive && !hasError ? 2 : 1;
+    // Host-app `setShape({ input })`: cells share the TextInput radius.
+    const inputShape = useShape("input");
     const borderColor = hasError
         ? theme.colors.destructive
         : isActive
@@ -94,7 +97,7 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPr
                 {
                     width: CELL_WIDTH,
                     height: CELL_HEIGHT,
-                    borderRadius: spacing.radiusMd,
+                    borderRadius: inputShape?.borderRadius ?? spacing.radiusMd,
                     borderWidth,
                     justifyContent: "center",
                     alignItems: "center",
@@ -132,5 +135,5 @@ const createStyles = (theme) => StyleSheet.create({
         marginTop: spacing.xs,
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);
 export { InputOTP };