@mrmeg/expo-ui 0.27.1 → 0.29.0

package/dist/components/ToggleGroup.js

@@ -1,8 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { spacing } from "../constants/spacing.js";
+import { getWebHitInsets, WebHitTarget } from "../lib/webHitTarget.js";
+import { interaction } from "../constants/interaction.js";
+import { hapticSelection } from "../lib/haptics.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
 import * as React from "react";
@@ -67,17 +71,26 @@ function useToggleGroupContext() {
 function ToggleGroup({ variant = "default", size = "default", children, ...props }) {
     const { getShadowStyle } = useTheme();
     const contextValue = React.useMemo(() => ({ variant, size }), [variant, size]);
+    // The primitive reports a change once per user selection (single or
+    // multiple), which is the selection-haptic moment; forward it unchanged.
+    const { onValueChange } = props;
+    const handleValueChange = React.useCallback((value) => {
+        hapticSelection();
+        onValueChange?.(value);
+    }, [onValueChange]);
     // Count valid children for first/last detection
     const childrenArray = React.Children.toArray(children);
     const validChildren = childrenArray.filter((child) => React.isValidElement(child) && child.type === ToggleGroupItem);
     const childCount = validChildren.length;
-    // Clone children with position props
-    let itemIndex = 0;
+    // Clone children with position props. The running item index lives on an
+    // object: the React Compiler can't compile a reassigned `let` captured by
+    // the callback, and skipped the component.
+    const position = { itemIndex: 0 };
     const enhancedChildren = React.Children.map(children, (child) => {
         if (React.isValidElement(child) && child.type === ToggleGroupItem) {
-            const isFirst = itemIndex === 0;
-            const isLast = itemIndex === childCount - 1;
-            itemIndex++;
+            const isFirst = position.itemIndex === 0;
+            const isLast = position.itemIndex === childCount - 1;
+            position.itemIndex += 1;
             return React.cloneElement(child, {
                 isFirst,
                 isLast,
@@ -85,7 +98,12 @@ function ToggleGroup({ variant = "default", size = "default", children, ...props
         }
         return child;
     });
-    return (_jsx(ToggleGroupPrimitive.Root, { ...props, style: {
+    // The web primitive's Root/Item render generic roles (Radix's `group`, then
+    // `role='button'` on every item) while Radix still emits `aria-checked` for a
+    // single-select item — invalid on a button. Name the roles the way native
+    // already does: a radiogroup of radios, or a group of (aria-pressed) buttons.
+    const webRoles = Platform.OS === "web" ? { role: props.type === "single" ? "radiogroup" : "group" } : undefined;
+    return (_jsx(ToggleGroupPrimitive.Root, { ...props, ...webRoles, onValueChange: handleValueChange, style: {
             flexDirection: "row",
             alignItems: "center",
             borderRadius: spacing.radiusMd,
@@ -104,33 +122,17 @@ function ToggleGroup({ variant = "default", size = "default", children, ...props
 function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }) {
     const { theme, withAlpha, getContrastingColor, getFocusRingStyle } = useTheme();
     const context = useToggleGroupContext();
-    const { value: groupValue } = ToggleGroupPrimitive.useRootContext();
+    const { value: groupValue, type: groupType } = ToggleGroupPrimitive.useRootContext();
+    // See ToggleGroup: give the web item the role its aria state is valid on.
+    const webRole = Platform.OS === "web" ? { role: groupType === "single" ? "radio" : "button" } : undefined;
     const sizeConfig = TOGGLE_GROUP_SIZES[context.size];
     const focusRingStyle = getFocusRingStyle();
-    const [focused, setFocused] = React.useState(false);
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!props.disabled,
-        scaleTo: 0.97,
+        scaleTo: interaction.pressedScale,
         haptic: false,
     });
-    const showFocusRing = (event) => {
-        let ringVisible = true;
-        if (Platform.OS === "web") {
-            const target = event?.nativeEvent?.target;
-            if (target && typeof target.matches === "function") {
-                try {
-                    ringVisible = target.matches(":focus-visible");
-                }
-                catch {
-                    ringVisible = true;
-                }
-            }
-        }
-        setFocused(ringVisible);
-    };
-    const hideFocusRing = () => {
-        setFocused(false);
-    };
+    const { focused, onFocus: showFocusRing, onBlur: hideFocusRing } = useFocusVisible();
     // Check if this item is selected
     const isSelected = ToggleGroupPrimitive.utils.getIsSelected(groupValue, props.value);
     // Determine the actual background color for this item
@@ -145,7 +147,10 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
     const textColor = isSelected
         ? getContrastingColor(itemBgColor, theme.colors.foreground, theme.colors.background)
         : theme.colors.foreground;
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(ToggleGroupPrimitive.Item, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+    // Web pointer target, as in Toggle: 44pt tall through a transparent child
+    // inside the drawn box; native keeps DEFAULT_HIT_SLOP.
+    const hitTarget = (_jsx(WebHitTarget, { insets: Platform.OS === "web" ? getWebHitInsets(undefined, sizeConfig.height) : null, border: styles.item.borderWidth }));
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(ToggleGroupPrimitive.Item, { ...props, ...webRole, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
                         ...styles.item,
                         height: sizeConfig.height,
                         minWidth: sizeConfig.minWidth,
@@ -199,13 +204,26 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
                             }),
                         }),
                         ...(focused && !props.disabled ? focusRingStyle : null),
-                    }, hitSlop: DEFAULT_HIT_SLOP, children: typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }) }));
+                    }, 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 = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
     item: {
         flexDirection: "row",
         alignItems: "center",

package/dist/components/Tooltip.d.ts

@@ -73,7 +73,7 @@ interface TooltipProps extends TooltipPrimitive.RootProps {
  * // With positioning
  * <Tooltip>
  *   <TooltipTrigger asChild>
- *     <Icon as={Info} size={20} />
+ *     <Icon name="info" size={20} />
  *   </TooltipTrigger>
  *   <TooltipContent side="bottom" align="start">
  *     <StyledText>Information tooltip</StyledText>

package/dist/components/Tooltip.js

@@ -2,12 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as TooltipPrimitive from "@rn-primitives/tooltip";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { palette } from "../constants/colors.js";
+// The overlay layer covers the screen but must not swallow touches around the
+// content; a style, not the deprecated `pointerEvents` prop (web warns and
+// lazily loads its warning module mid-render).
+const styles = /*#__PURE__*/ StyleSheet.create({
+    passThrough: { pointerEvents: "box-none" },
+});
 /**
  * Tooltip Trigger Component
  * The element that triggers the tooltip to appear on hover (web) or press (native)
@@ -71,7 +77,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, 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 }) }) }) }) }) }) }) }));
+    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, styles.passThrough], 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: [
@@ -101,7 +107,7 @@ function TooltipBody({ children, style, ...props }) {
  * // With positioning
  * <Tooltip>
  *   <TooltipTrigger asChild>
- *     <Icon as={Info} size={20} />
+ *     <Icon name="info" size={20} />
  *   </TooltipTrigger>
  *   <TooltipContent side="bottom" align="start">
  *     <StyledText>Information tooltip</StyledText>

package/dist/components/UIProvider.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
-import { type KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+import { type HapticsSetting } from "../state/feedbackStore.js";
+import type { ResolvedTheme } from "../state/themeStore.js";
+import { type KeyboardAvoidingViewProps } from "./KeyboardAvoidingView.js";
 export interface UIProviderProps {
     children: React.ReactNode;
     /**
@@ -30,5 +32,23 @@ export interface UIProviderProps {
      * Props forwarded to the keyboard-avoiding root when enabled.
      */
     keyboardAvoidingProps?: Omit<KeyboardAvoidingViewProps, "children">;
+    /**
+     * Which interactions may vibrate on native: `"off"`, `"selection"` (state
+     * changes on Switch, Checkbox, Toggle, ToggleGroup, SegmentedControl) or
+     * `"all"` (selection plus a light tap on press for Button, pressable Card
+     * and Item). Written to the feedback store on mount and whenever it changes;
+     * omit it to leave the store as it is. Web never vibrates.
+     *
+     * @default "selection"
+     */
+    haptics?: HapticsSetting;
+    /**
+     * The scheme the first render should use before the persisted preference
+     * has been read (a web SSR hint — see `InitialSchemeProvider` in
+     * `@mrmeg/expo-ui/state`). Only reaches `useTheme()` calls BELOW this
+     * provider; a root layout that reads the theme above it should wrap itself
+     * in `InitialSchemeProvider` instead. Native ignores it.
+     */
+    initialScheme?: ResolvedTheme;
 }
-export declare function UIProvider({ children, notification, portalHost, statusBar, keyboardAvoiding, keyboardAvoidingProps, }: UIProviderProps): React.JSX.Element;
+export declare function UIProvider({ children, notification, portalHost, statusBar, keyboardAvoiding: keyboardAvoidingProp, keyboardAvoidingProps, haptics, initialScheme, }: UIProviderProps): React.JSX.Element;

package/dist/components/UIProvider.js

@@ -1,11 +1,23 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Platform } from "react-native";
+import { useFeedbackStore } from "../state/feedbackStore.js";
+import { InitialSchemeProvider } from "../state/initialScheme.js";
 import { PortalHost } from "@rn-primitives/portal";
 import { Notification } from "./Notification.js";
 import { StatusBar } from "./StatusBar.js";
 import { KeyboardAvoidingView, } from "./KeyboardAvoidingView.js";
-export function UIProvider({ children, notification = true, portalHost = true, statusBar = true, keyboardAvoiding = Platform.OS !== "web", keyboardAvoidingProps, }) {
+export function UIProvider({ children, notification = true, portalHost = true, statusBar = true, keyboardAvoiding: keyboardAvoidingProp, keyboardAvoidingProps, haptics, initialScheme, }) {
+    // Controls read the setting at event time (`hapticPress` / `hapticSelection`),
+    // so an effect is early enough; no child renders differently because of it.
+    React.useEffect(() => {
+        if (haptics !== undefined)
+            useFeedbackStore.getState().setHaptics(haptics);
+    }, [haptics]);
+    // Resolved in the body rather than as a default parameter: the React
+    // Compiler can't reorder a computed default, and skipped the component.
+    const keyboardAvoiding = keyboardAvoidingProp === undefined ? Platform.OS !== "web" : keyboardAvoidingProp;
     const { style: keyboardAvoidingStyle, ...restKeyboardAvoidingProps } = keyboardAvoidingProps ?? {};
     const content = keyboardAvoiding ? (_jsx(KeyboardAvoidingView, { style: [{ flex: 1 }, keyboardAvoidingStyle], ...restKeyboardAvoidingProps, children: children })) : (children);
-    return (_jsxs(_Fragment, { children: [content, notification ? _jsx(Notification, {}) : null, portalHost ? _jsx(PortalHost, {}) : null, statusBar ? _jsx(StatusBar, {}) : null] }));
+    return (_jsxs(InitialSchemeProvider, { scheme: initialScheme, children: [content, notification ? _jsx(Notification, {}) : null, portalHost ? _jsx(PortalHost, {}) : null, statusBar ? _jsx(StatusBar, {}) : null] }));
 }

package/dist/components/bottomSheetDismiss.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Dismiss-complete detection for `BottomSheet.onDismissed` on web.
+ *
+ * `@expo/ui`'s web sheet is an HTML `<dialog>`. When the sheet's `index` goes
+ * to -1 it fires `onClose` synchronously, then plays its exit animation and
+ * calls `dialog.close()` on `animationend` (a 400 ms fallback timer covers a
+ * missed event; `prefers-reduced-motion` closes at once). The hosted RN column
+ * is a descendant of that element and stays mounted through the exit, so the
+ * element's standard `close` event is the moment the sheet is gone. iOS and
+ * Android need none of this: there `@expo/ui`'s close callback is already
+ * post-dismissal (see `BottomSheet.tsx`).
+ */
+/**
+ * Call `callback` once the `<dialog>` enclosing `node` has closed. Fires on the
+ * same tick when there is no enclosing dialog (or no DOM node) or the dialog
+ * is already closed. Returns a cancel function that removes the pending
+ * listener without firing.
+ */
+export declare function awaitDialogClose(node: unknown, callback: () => void): () => void;

package/dist/components/bottomSheetDismiss.js

@@ -0,0 +1,44 @@
+/**
+ * Dismiss-complete detection for `BottomSheet.onDismissed` on web.
+ *
+ * `@expo/ui`'s web sheet is an HTML `<dialog>`. When the sheet's `index` goes
+ * to -1 it fires `onClose` synchronously, then plays its exit animation and
+ * calls `dialog.close()` on `animationend` (a 400 ms fallback timer covers a
+ * missed event; `prefers-reduced-motion` closes at once). The hosted RN column
+ * is a descendant of that element and stays mounted through the exit, so the
+ * element's standard `close` event is the moment the sheet is gone. iOS and
+ * Android need none of this: there `@expo/ui`'s close callback is already
+ * post-dismissal (see `BottomSheet.tsx`).
+ */
+function findEnclosingDialog(node) {
+    const closest = node
+        ?.closest;
+    if (typeof closest !== "function")
+        return null;
+    const dialog = closest.call(node, "dialog");
+    if (!dialog ||
+        typeof dialog.addEventListener !== "function" ||
+        typeof dialog.removeEventListener !== "function") {
+        return null;
+    }
+    return dialog;
+}
+/**
+ * Call `callback` once the `<dialog>` enclosing `node` has closed. Fires on the
+ * same tick when there is no enclosing dialog (or no DOM node) or the dialog
+ * is already closed. Returns a cancel function that removes the pending
+ * listener without firing.
+ */
+export function awaitDialogClose(node, callback) {
+    const dialog = findEnclosingDialog(node);
+    if (!dialog || !dialog.open) {
+        callback();
+        return () => { };
+    }
+    const onClose = () => {
+        dialog.removeEventListener("close", onClose);
+        callback();
+    };
+    dialog.addEventListener("close", onClose);
+    return () => dialog.removeEventListener("close", onClose);
+}

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 {};

package/dist/components/index.d.ts

@@ -1,44 +1,47 @@
-export * from "./Accordion";
-export * from "./Alert";
-export * from "./AnimatedView";
-export * from "./Avatar";
-export * from "./Badge";
-export * from "./BottomSheet";
-export * from "./Button";
-export * from "./Card";
-export * from "./Carousel";
-export * from "./Checkbox";
-export * from "./Collapsible";
-export * from "./Dialog";
-export * from "./DismissKeyboard";
-export * from "./keyboardDismiss";
-export * from "./Drawer";
-export * from "./DropdownMenu";
-export * from "./EmptyState";
-export * from "./ErrorBoundary";
-export * from "./Icon";
-export * from "./InputOTP";
-export * from "./Item";
-export * from "./KeyboardAvoidingView";
-export * from "./Label";
-export * from "./MaxWidthContainer";
-export * from "./Notification";
-export * from "./Popover";
-export * from "./Progress";
-export * from "./RadioGroup";
-export * from "./SectionHeader";
-export * from "./SegmentedControl";
-export * from "./Select";
-export * from "./Separator";
-export * from "./Skeleton";
-export * from "./Slider";
-export * from "./StatCard";
-export * from "./StatusBar";
-export * from "./StyledText";
-export * from "./Switch";
-export * from "./Tabs";
-export * from "./TextInput";
-export * from "./Toggle";
-export * from "./ToggleGroup";
-export * from "./Tooltip";
-export * from "./UIProvider";
+export * from "./Accordion.js";
+export * from "./Alert.js";
+export * from "./AnimatedView.js";
+export * from "./Avatar.js";
+export * from "./Badge.js";
+export * from "./BottomSheet.js";
+export * from "./Button.js";
+export * from "./Card.js";
+export * from "./Carousel.js";
+export * from "./Checkbox.js";
+export * from "./Collapsible.js";
+export * from "./Dialog.js";
+export * from "./DismissKeyboard.js";
+export * from "./keyboardDismiss.js";
+export * from "./Drawer.js";
+export * from "./DropdownMenu.js";
+export * from "./EmptyState.js";
+export * from "./ErrorBoundary.js";
+export * from "./Hydrated.js";
+export * from "./Icon.js";
+export * from "./InputOTP.js";
+export * from "./Item.js";
+export * from "./KeyboardAvoidingView.js";
+export * from "./Label.js";
+export * from "./MaxWidthContainer.js";
+export * from "./Notification.js";
+export * from "./Screen.js";
+export * from "./Popover.js";
+export * from "./Progress.js";
+export * from "./RadioGroup.js";
+export * from "./SectionHeader.js";
+export * from "./SegmentedControl.js";
+export * from "./Select.js";
+export * from "./Separator.js";
+export * from "./Skeleton.js";
+export * from "./Slider.js";
+export * from "./StatCard.js";
+export * from "./StatusBar.js";
+export * from "./StyledText.js";
+export * from "./Switch.js";
+export * from "./Tabs.js";
+export * from "./TextInput.js";
+export * from "./ThemeSelector.js";
+export * from "./Toggle.js";
+export * from "./ToggleGroup.js";
+export * from "./Tooltip.js";
+export * from "./UIProvider.js";