@mrmeg/expo-ui 0.20.0 → 0.22.0

package/dist/components/Carousel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Platform, ScrollView, StyleSheet, Text, View, } from "react-native";
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { useDimensions } from "../hooks/useDimensions.js";
 import { spacing } from "../constants/spacing.js";
@@ -56,11 +56,14 @@ function clampIndex(index, count) {
  * resolved item width.
  *
  * Built on `ScrollView` — not a virtualized list — on purpose: every slide is
- * in the server-rendered tree, so web SSR ships the real content instead of an
- * empty scroller that only fills in after measurement. Snapping uses the
- * platform scroller (`snapToInterval` on native, CSS scroll-snap on web); no
+ * in the prerendered tree, so a web build's HTML shell ships the real content
+ * instead of an empty scroller that only fills in after measurement. Snapping
+ * uses the platform scroller (`snapToInterval` on native, CSS scroll-snap on web); no
  * animation library is involved.
  *
+ * Slides sized by a fractional `itemWidth` measure against the viewport until
+ * the first `onLayout` lands — see the `itemWidth` caveat on `CarouselProps`.
+ *
  * @example
  * ```tsx
  * <Carousel itemWidth={0.8} onIndexChange={setPage}>
@@ -78,9 +81,9 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
     const items = React.Children.toArray(children);
     const count = items.length;
     // Width source of truth: the measured container after mount, seeded from the
-    // viewport so the server and the client's first render agree. `useDimensions`
-    // reads the SSR viewport context rather than `window`, which is what keeps
-    // that seed hydration-safe (docs/ssr-hydration.md §4).
+    // viewport so a prerendered HTML shell and the client's first render agree.
+    // `useDimensions` seeds from a constant default rather than `window` on that
+    // first render, which is what keeps the seed hydration-safe.
     const { width: viewportWidth } = useDimensions();
     const [measuredWidth, setMeasuredWidth] = useState(null);
     const containerWidth = measuredWidth ?? viewportWidth;
@@ -88,7 +91,8 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
     const interval = slideWidth + gap;
     const [activeIndex, setActiveIndex] = useState(() => clampIndex(initialIndex, count));
     // Mirrors activeIndex so the scroll handler can dedupe without re-reading
-    // state: one settle emits many scroll events, onIndexChange must fire once.
+    // state: web's throttled ticks report the same page many times over, and
+    // onIndexChange must fire once per page.
     const activeIndexRef = useRef(activeIndex);
     const scrollRef = useRef(null);
     const hasScrolledToInitial = useRef(false);
@@ -99,9 +103,28 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
         setActiveIndex(next);
         onIndexChange?.(next);
     }, [onIndexChange]);
+    const isWeb = Platform.OS === "web";
     const handleScroll = useCallback((event) => {
         commitIndex(getCarouselIndex(event.nativeEvent.contentOffset.x, interval, count));
     }, [commitIndex, count, interval]);
+    // Native fallback for a drag that releases with the content at rest: no
+    // momentum follows, so `onMomentumScrollEnd` never arrives and the settle
+    // would go unreported.
+    //
+    // Gated on velocity because an ungated drag-end handler is exactly the
+    // double-fire this replaced: a flick past a slide midpoint that snaps back
+    // reports the midpoint page on release and the original page on settle. A
+    // release that *will* glide reports a non-zero velocity (points/ms on iOS,
+    // density-scaled px/s on Android — either way, orders of magnitude above
+    // this epsilon), and momentum end is left to speak for it. A release at rest
+    // reports 0, and there `getCarouselIndex`'s round-to-nearest already agrees
+    // with where `snapToInterval` would land, so the two paths can't disagree.
+    const handleScrollEndDrag = useCallback((event) => {
+        const velocityX = event.nativeEvent.velocity?.x ?? 0;
+        if (Math.abs(velocityX) > 0.01)
+            return;
+        handleScroll(event);
+    }, [handleScroll]);
     const handleLayout = useCallback((event) => {
         const next = event.nativeEvent.layout.width;
         if (!(next > 0))
@@ -120,24 +143,54 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
             return;
         scrollRef.current?.scrollTo({ x: targetIndex * interval, animated: false });
     }, [interval, measuredWidth, targetIndex]);
-    const isWeb = Platform.OS === "web";
+    // Re-clamp when children shrink. Without this the status line reads "5 of 3"
+    // with no active dot until the next scroll, because activeIndex is only
+    // seeded once and the scroller — already past the new content width — emits
+    // nothing on its own. Scrolling back is what makes the offset agree with the
+    // reported page again.
+    useEffect(() => {
+        if (count <= 0 || activeIndexRef.current < count)
+            return;
+        const clamped = count - 1;
+        commitIndex(clamped);
+        if (interval > 0) {
+            scrollRef.current?.scrollTo({ x: clamped * interval, animated: false });
+        }
+    }, [commitIndex, count, interval]);
+    const handleDotPress = useCallback((index) => {
+        commitIndex(index);
+        if (interval > 0) {
+            scrollRef.current?.scrollTo({ x: index * interval, animated: true });
+        }
+    }, [commitIndex, interval]);
     const useCssSnap = isWeb && snap;
     const dotsVisible = showDots && count > 1;
     return (_jsxs(View, { style: [styles.container, styleOverride], onLayout: handleLayout, testID: testID, children: [_jsx(ScrollView, { ref: scrollRef, testID: `${testID}-scroll`, horizontal: true, showsHorizontalScrollIndicator: false, 
                 // Native snapping. react-native-web drops these (they aren't in its
                 // forwarded-prop list), so web uses the CSS scroll-snap styles instead.
-                snapToInterval: snap && interval > 0 ? interval : undefined, snapToAlignment: "start", decelerationRate: snap ? "fast" : "normal", 
-                // react-native-web only emits scroll ticks when the throttle is > 0 and
-                // never emits momentum events — this is what keeps the dots live for
-                // wheel/trackpad scrolling.
-                scrollEventThrottle: 16, onScroll: handleScroll, onMomentumScrollEnd: handleScroll, style: useCssSnap
+                snapToInterval: snap && interval > 0 ? interval : undefined, snapToAlignment: "start", decelerationRate: snap ? "fast" : "normal", ...(isWeb
+                    ? { scrollEventThrottle: 16, onScroll: handleScroll }
+                    : { onMomentumScrollEnd: handleScroll, onScrollEndDrag: handleScrollEndDrag }), style: useCssSnap
                     ? [webStyles.scroller, { scrollPaddingLeft: contentPadding }]
-                    : undefined, contentContainerStyle: [{ paddingHorizontal: contentPadding, gap }, contentContainerStyle], children: items.map((child, index) => (_jsx(View, { testID: `${testID}-item-${index}`, style: [slideWidth > 0 && { width: slideWidth }, useCssSnap && webStyles.item], children: child }, React.isValidElement(child) && child.key != null ? child.key : index))) }), count > 1 && (_jsx(View, { testID: `${testID}-status`, style: styles.status, "aria-live": "polite", children: _jsx(Text, { style: styles.statusText, children: `${activeIndex + 1} of ${count}` }) })), dotsVisible && (_jsx(View, { testID: `${testID}-dots`, style: styles.dots, accessibilityRole: "tablist", children: items.map((_, index) => (_jsx(View, { testID: `${testID}-dot-${index}`, accessibilityRole: "tab", accessibilityState: { selected: index === activeIndex }, accessibilityLabel: `Slide ${index + 1} of ${count}`, style: [styles.dot, index === activeIndex ? styles.dotActive : styles.dotInactive] }, index))) }))] }));
+                    : undefined, contentContainerStyle: [{ paddingHorizontal: contentPadding, gap }, contentContainerStyle], children: items.map((child, index) => (_jsx(View, { testID: `${testID}-item-${index}`, style: [slideWidth > 0 && { width: slideWidth }, useCssSnap && webStyles.item], children: child }, React.isValidElement(child) && child.key != null ? child.key : index))) }), count > 1 && (_jsx(View, { testID: `${testID}-status`, style: styles.status, "aria-live": "polite", children: _jsx(Text, { style: styles.statusText, children: `${activeIndex + 1} of ${count}` }) })), dotsVisible && (_jsx(View, { testID: `${testID}-dots`, style: styles.dots, accessibilityRole: "tablist", children: items.map((_, index) => (_jsx(Pressable, { testID: `${testID}-dot-${index}`, accessibilityRole: "tab", accessibilityState: { selected: index === activeIndex }, "aria-selected": index === activeIndex, accessibilityLabel: `Slide ${index + 1} of ${count}`, hitSlop: DOT_HIT_SLOP, onPress: () => handleDotPress(index), style: styles.dotButton, children: _jsx(View, { testID: `${testID}-dot-${index}-indicator`, style: [styles.dot, index === activeIndex ? styles.dotActive : styles.dotInactive] }) }, index))) }))] }));
 }
 // ============================================================================
 // Styles
 // ============================================================================
 const DOT_SIZE = 8;
+// Press target around each 8px dot. The square is what separates the dots
+// visually (the row itself has no gap, so neighboring targets are flush — no
+// dead strip between them), and `DOT_HIT_SLOP` extends it vertically to
+// `spacing.touchTarget` (24 + 2 x 10 = 44). The slop is vertical-only on
+// purpose: horizontal slop would overlap the neighboring dot's target and make
+// which dot a tap lands on ambiguous.
+const DOT_HIT_SIZE = 24;
+const DOT_HIT_SLOP = {
+    top: (spacing.touchTarget - DOT_HIT_SIZE) / 2,
+    bottom: (spacing.touchTarget - DOT_HIT_SIZE) / 2,
+    left: 0,
+    right: 0,
+};
 // Web-only CSS scroll-snap. `scrollPaddingLeft` is applied inline at the call
 // site (it tracks the contentPadding prop) so the leading inset survives the
 // browser snapping slide 0 to the scrollport start — which also makes page `i`
@@ -166,8 +219,17 @@ const createStyles = (theme) => StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        gap: spacing.xs,
-        marginTop: spacing.md,
+        // No `gap`: the DOT_HIT_SIZE squares carry the visual spacing, and a gap
+        // would open an unpressable strip between adjacent targets. marginTop
+        // absorbs the wrapper's own vertical padding so the row sits where the
+        // pre-Pressable dots did.
+        marginTop: spacing.md - (DOT_HIT_SIZE - DOT_SIZE) / 2,
+    },
+    dotButton: {
+        width: DOT_HIT_SIZE,
+        height: DOT_HIT_SIZE,
+        alignItems: "center",
+        justifyContent: "center",
     },
     dot: {
         width: DOT_SIZE,

package/dist/components/DismissKeyboard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Platform, ScrollView, View, } from "react-native";
-import { KeyboardController, useKeyboardContext, useKeyboardState, } from "react-native-keyboard-controller";
+import { KeyboardController, useKeyboardContext, useKeyboardState, } from "./keyboardController";
 import { KeyboardAvoidingView, useKeyboardAvoidance } from "./KeyboardAvoidingView.js";
 import { isTouchInsideKeyboardFocusedInput } from "./keyboardFocusRegistry.js";
 /**

package/dist/components/KeyboardAvoidingView.d.ts

@@ -13,8 +13,10 @@ export declare function useKeyboardAvoidance(): boolean;
 /**
  * Package-level keyboard avoiding wrapper.
  *
- * Native uses `react-native-keyboard-controller` so screens can avoid the soft
- * keyboard with `automaticOffset`; web renders a plain `View`.
+ * Native uses `react-native-keyboard-controller` (through the platform-split
+ * `./keyboardController` module, which keeps the package out of the web bundle)
+ * so screens can avoid the soft keyboard with `automaticOffset`; web renders a
+ * plain `View`.
  */
 export declare function KeyboardAvoidingView({ children, style, behavior, automaticOffset, contentContainerStyle, keyboardVerticalOffset, ...props }: KeyboardAvoidingViewProps): React.JSX.Element;
 export {};

package/dist/components/KeyboardAvoidingView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { Platform, View, } from "react-native";
-import { KeyboardAvoidingView as NativeKeyboardAvoidingView, } from "react-native-keyboard-controller";
+import { NativeKeyboardAvoidingView } from "./keyboardController";
 const KeyboardAvoidanceContext = createContext(false);
 export function useKeyboardAvoidance() {
     return useContext(KeyboardAvoidanceContext);
@@ -9,8 +9,10 @@ export function useKeyboardAvoidance() {
 /**
  * Package-level keyboard avoiding wrapper.
  *
- * Native uses `react-native-keyboard-controller` so screens can avoid the soft
- * keyboard with `automaticOffset`; web renders a plain `View`.
+ * Native uses `react-native-keyboard-controller` (through the platform-split
+ * `./keyboardController` module, which keeps the package out of the web bundle)
+ * so screens can avoid the soft keyboard with `automaticOffset`; web renders a
+ * plain `View`.
  */
 export function KeyboardAvoidingView({ children, style, behavior = Platform.OS === "ios" ? "padding" : "height", automaticOffset = true, contentContainerStyle, keyboardVerticalOffset, ...props }) {
     if (Platform.OS === "web") {

package/dist/components/Label.d.ts

@@ -5,9 +5,20 @@ export interface LabelProps {
      */
     children: string;
     /**
-     * Native ID to associate with a form control
+     * The label's OWN id. On web react-native-web maps it to `id`; on native it
+     * is the `nativeID` a control's `accessibilityLabelledBy` can point at.
+     *
+     * Must differ from the paired input's id — see `htmlFor`.
      */
     nativeID?: string;
+    /**
+     * WEB ONLY — the id of the input this label describes (the input's
+     * `nativeID`). Passing it makes `@rn-primitives/label` render a real
+     * `<label for="…">`, which is what associates the two and makes clicking the
+     * label focus the input. No-op on native, where association goes the other
+     * way (the control points at the label's `nativeID`).
+     */
+    htmlFor?: string;
     /**
      * Whether the field is required (shows asterisk)
      */
@@ -37,25 +48,34 @@ export interface LabelProps {
 /**
  * Label component for form fields using @rn-primitives/label
  *
- * Provides accessible labeling for form controls with automatic
- * association via nativeID.
+ * Accessible labeling for form controls. Association needs **two distinct
+ * ids**: `nativeID` is the label's own id, `htmlFor` is the input's id. Giving
+ * both the same value renders two elements with one id on web and associates
+ * nothing.
  *
  * Usage:
  * ```tsx
- * // Basic label
- * <Label nativeID="email-input">Email</Label>
+ * // Paired with an input. `htmlFor` (web) makes this a real <label for>, so
+ * // clicking it focuses the input; `nativeID` names the label itself, which is
+ * // what a control's `accessibilityLabelledBy` points at on native.
+ * <Label nativeID="email-label" htmlFor="email-input">Email</Label>
  * <TextInput nativeID="email-input" />
  *
  * // Required field
- * <Label nativeID="password" required>Password</Label>
+ * <Label nativeID="password-label" htmlFor="password-input" required>Password</Label>
+ * <TextInput nativeID="password-input" secureTextEntry />
  *
  * // With error state
- * <Label nativeID="username" error>Username</Label>
+ * <Label nativeID="username-label" htmlFor="username-input" error>Username</Label>
+ *
+ * // Standalone caption with no control to associate — omit htmlFor
+ * <Label>Filters</Label>
  *
- * // With press handler to focus input
- * <Label nativeID="search" onPress={() => inputRef.current?.focus()}>
+ * // With press handler to focus input (needed on native, where htmlFor is a
+ * // no-op and pressing the label does nothing on its own)
+ * <Label nativeID="search-label" htmlFor="search-input" onPress={() => inputRef.current?.focus()}>
  *   Search
  * </Label>
  * ```
  */
-export declare function Label({ children, nativeID, required, size, error, disabled, style, onPress, }: LabelProps): import("react").JSX.Element;
+export declare function Label({ children, nativeID, htmlFor, required, size, error, disabled, style, onPress, }: LabelProps): import("react").JSX.Element;

package/dist/components/Label.js

@@ -14,28 +14,37 @@ const SIZE_CONFIGS = {
 /**
  * Label component for form fields using @rn-primitives/label
  *
- * Provides accessible labeling for form controls with automatic
- * association via nativeID.
+ * Accessible labeling for form controls. Association needs **two distinct
+ * ids**: `nativeID` is the label's own id, `htmlFor` is the input's id. Giving
+ * both the same value renders two elements with one id on web and associates
+ * nothing.
  *
  * Usage:
  * ```tsx
- * // Basic label
- * <Label nativeID="email-input">Email</Label>
+ * // Paired with an input. `htmlFor` (web) makes this a real <label for>, so
+ * // clicking it focuses the input; `nativeID` names the label itself, which is
+ * // what a control's `accessibilityLabelledBy` points at on native.
+ * <Label nativeID="email-label" htmlFor="email-input">Email</Label>
  * <TextInput nativeID="email-input" />
  *
  * // Required field
- * <Label nativeID="password" required>Password</Label>
+ * <Label nativeID="password-label" htmlFor="password-input" required>Password</Label>
+ * <TextInput nativeID="password-input" secureTextEntry />
  *
  * // With error state
- * <Label nativeID="username" error>Username</Label>
+ * <Label nativeID="username-label" htmlFor="username-input" error>Username</Label>
  *
- * // With press handler to focus input
- * <Label nativeID="search" onPress={() => inputRef.current?.focus()}>
+ * // Standalone caption with no control to associate — omit htmlFor
+ * <Label>Filters</Label>
+ *
+ * // With press handler to focus input (needed on native, where htmlFor is a
+ * // no-op and pressing the label does nothing on its own)
+ * <Label nativeID="search-label" htmlFor="search-input" onPress={() => inputRef.current?.focus()}>
  *   Search
  * </Label>
  * ```
  */
-export function Label({ children, nativeID, required, size = "md", error, disabled, style, onPress, }) {
+export function Label({ children, nativeID, htmlFor, required, size = "md", error, disabled, style, onPress, }) {
     const { theme } = useTheme();
     const styles = themedStyles(theme);
     const sizeConfig = SIZE_CONFIGS[size];
@@ -53,7 +62,7 @@ export function Label({ children, nativeID, required, size = "md", error, disabl
     return (_jsx(LabelPrimitive.Root, { nativeID: nativeID, onPress: onPress, style: {
             ...styles.root,
             ...(Platform.OS === "web" && onPress && { cursor: "pointer" }),
-        }, children: _jsxs(LabelPrimitive.Text, { style: textStyle, children: [children, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) }));
+        }, children: _jsxs(LabelPrimitive.Text, { htmlFor: htmlFor, style: textStyle, children: [children, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) }));
 }
 const createStyles = (theme) => StyleSheet.create({
     root: {

package/dist/components/Notification.js

@@ -3,7 +3,7 @@ import { useCallback, use, useEffect, useEffectEvent, useRef } from "react";
 import { Animated, Easing, StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { Icon } from "./Icon.js";
-import { useTheme } from "../hooks/useTheme.js";
+import { useTheme, withAlpha } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
 import { durations } from "../constants/motion.js";
@@ -158,26 +158,26 @@ export const Notification = () => {
                 return {
                     icon: "alert-circle",
                     color: theme.colors.destructive,
-                    bgColor: theme.colors.destructive + "15",
+                    bgColor: withAlpha(theme.colors.destructive, 0.08),
                 };
             case "success":
                 return {
                     icon: "check-circle",
                     color: theme.colors.success,
-                    bgColor: theme.colors.success + "15",
+                    bgColor: withAlpha(theme.colors.success, 0.08),
                 };
             case "warning":
                 return {
                     icon: "alert-triangle",
                     color: theme.colors.warning,
-                    bgColor: theme.colors.warning + "15",
+                    bgColor: withAlpha(theme.colors.warning, 0.08),
                 };
             case "info":
             default:
                 return {
                     icon: "info",
                     color: theme.colors.accent,
-                    bgColor: theme.colors.accent + "15",
+                    bgColor: withAlpha(theme.colors.accent, 0.08),
                 };
         }
     };
@@ -223,8 +223,8 @@ export const Notification = () => {
             ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, size: "base", fontWeight: "semibold", style: { color: theme.colors.foreground }, numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, size: "sm", style: { color: theme.colors.mutedForeground }, numberOfLines: 2, children: message }))] }), action && (_jsx(Pressable, { style: ({ pressed }) => [
                         styles.actionButton,
                         {
-                            borderColor: theme.colors.primary + "30",
-                            backgroundColor: theme.colors.primary + "10",
+                            borderColor: withAlpha(theme.colors.primary, 0.19),
+                            backgroundColor: withAlpha(theme.colors.primary, 0.06),
                         },
                         pressed && styles.actionButtonPressed,
                     ], hitSlop: spacing.xs, onPress: handleActionPress, accessibilityLabel: action.label, accessibilityRole: "button", children: _jsx(StyledText, { selectable: false, size: "sm", fontWeight: "semibold", style: { color: theme.colors.primary }, numberOfLines: 1, children: action.label }) })), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));

package/dist/components/keyboardController.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Keyboard-controller indirection — web variant (inert stubs).
+ *
+ * `react-native-keyboard-controller` drags a large native animation runtime
+ * into every bundle that imports it, and none of that code can run on web.
+ * Components therefore import the keyboard API from this module instead of the
+ * package: Metro resolves `keyboardController.native.ts` (the real re-exports)
+ * on iOS/Android and this file on web, so the package never reaches the web
+ * bundle.
+ *
+ * Both variants are typed against the package's own types — type-only imports
+ * are erased at compile time and bundle nothing — so the two files stay
+ * interchangeable to the type checker. TypeScript always resolves this `.ts`
+ * variant for consumers, which is why the stubs must keep the full native
+ * signatures.
+ *
+ * Every stub here is a plain function that calls no hooks, so the `use*`
+ * exports are safe from any call site (rules of hooks can't be violated by a
+ * function that has no hook calls of its own).
+ */
+import React from "react";
+import { View } from "react-native";
+import type { IKeyboardState, KeyboardAnimationContext, KeyboardAvoidingViewProps, KeyboardControllerModule } from "react-native-keyboard-controller";
+/** No-op imperative module: there is no IME to dismiss or preload on web. */
+export declare const KeyboardController: KeyboardControllerModule;
+/**
+ * Applies `selector` to a permanently "keyboard hidden" state.
+ *
+ * @param selector - Picks the fields a caller needs from the keyboard state.
+ * @returns The selected value, or the whole state when no selector is given.
+ */
+export declare function useKeyboardState<T = IKeyboardState>(selector?: (state: IKeyboardState) => T): T;
+/**
+ * @returns A stable, empty keyboard context (no focused input layout on web).
+ */
+export declare function useKeyboardContext(): KeyboardAnimationContext;
+type NativeKeyboardAvoidingViewProps = KeyboardAvoidingViewProps & {
+    children?: React.ReactNode;
+};
+/**
+ * Plain `View` passthrough. Keyboard-avoidance props are accepted (so callers
+ * stay identical across platforms) and dropped, since the browser handles
+ * viewport resizing itself.
+ */
+export declare function NativeKeyboardAvoidingView({ behavior, contentContainerStyle, keyboardVerticalOffset, automaticOffset, enabled, children, ...viewProps }: NativeKeyboardAvoidingViewProps): React.CElement<import("react-native").ViewProps, View>;
+export {};

package/dist/components/keyboardController.js

@@ -0,0 +1,89 @@
+/**
+ * Keyboard-controller indirection — web variant (inert stubs).
+ *
+ * `react-native-keyboard-controller` drags a large native animation runtime
+ * into every bundle that imports it, and none of that code can run on web.
+ * Components therefore import the keyboard API from this module instead of the
+ * package: Metro resolves `keyboardController.native.ts` (the real re-exports)
+ * on iOS/Android and this file on web, so the package never reaches the web
+ * bundle.
+ *
+ * Both variants are typed against the package's own types — type-only imports
+ * are erased at compile time and bundle nothing — so the two files stay
+ * interchangeable to the type checker. TypeScript always resolves this `.ts`
+ * variant for consumers, which is why the stubs must keep the full native
+ * signatures.
+ *
+ * Every stub here is a plain function that calls no hooks, so the `use*`
+ * exports are safe from any call site (rules of hooks can't be violated by a
+ * function that has no hook calls of its own).
+ */
+import React from "react";
+import { View } from "react-native";
+/** There is no software keyboard to observe on web, so state is constant. */
+const HIDDEN_KEYBOARD_STATE = {
+    isVisible: false,
+    height: 0,
+    duration: 0,
+    timestamp: 0,
+    target: -1,
+    type: "default",
+    appearance: "light",
+};
+/**
+ * Inert keyboard context.
+ *
+ * The real context exposes animation values that only exist alongside the
+ * native module, so this is a minimal stand-in cast to the package's type: the
+ * only field consumers read on web-capable paths is `layout.value`. It is a
+ * module-level singleton because `DismissKeyboard` puts the context object in a
+ * `useCallback` dependency list — a fresh object per call would invalidate it
+ * on every render.
+ */
+const INERT_KEYBOARD_CONTEXT = {
+    enabled: false,
+    layout: { value: null },
+    update: () => Promise.resolve(),
+    setKeyboardHandlers: () => () => undefined,
+    setInputHandlers: () => () => undefined,
+    setEnabled: () => undefined,
+};
+/** No-op imperative module: there is no IME to dismiss or preload on web. */
+export const KeyboardController = {
+    setDefaultMode: () => undefined,
+    setInputMode: () => undefined,
+    preload: () => undefined,
+    dismiss: () => Promise.resolve(),
+    setFocusTo: () => undefined,
+    isVisible: () => false,
+    state: () => HIDDEN_KEYBOARD_STATE,
+};
+/**
+ * Applies `selector` to a permanently "keyboard hidden" state.
+ *
+ * @param selector - Picks the fields a caller needs from the keyboard state.
+ * @returns The selected value, or the whole state when no selector is given.
+ */
+export function useKeyboardState(selector) {
+    return selector ? selector(HIDDEN_KEYBOARD_STATE) : HIDDEN_KEYBOARD_STATE;
+}
+/**
+ * @returns A stable, empty keyboard context (no focused input layout on web).
+ */
+export function useKeyboardContext() {
+    return INERT_KEYBOARD_CONTEXT;
+}
+/**
+ * Plain `View` passthrough. Keyboard-avoidance props are accepted (so callers
+ * stay identical across platforms) and dropped, since the browser handles
+ * viewport resizing itself.
+ */
+export function NativeKeyboardAvoidingView({ behavior, contentContainerStyle, keyboardVerticalOffset, automaticOffset, enabled, children, ...viewProps }) {
+    // Dropped rather than forwarded so they never reach the DOM node.
+    void behavior;
+    void contentContainerStyle;
+    void keyboardVerticalOffset;
+    void automaticOffset;
+    void enabled;
+    return React.createElement(View, viewProps, children);
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Keyboard-controller indirection — native variant.
+ *
+ * Re-exports the real `react-native-keyboard-controller` API under the names the
+ * package's components import. See `keyboardController.ts` (the web variant)
+ * for why the components go through this module instead of importing the
+ * package directly.
+ */
+export { KeyboardController, KeyboardAvoidingView as NativeKeyboardAvoidingView, useKeyboardContext, useKeyboardState, } from "react-native-keyboard-controller";

package/dist/components/keyboardController.native.js

@@ -0,0 +1,9 @@
+/**
+ * Keyboard-controller indirection — native variant.
+ *
+ * Re-exports the real `react-native-keyboard-controller` API under the names the
+ * package's components import. See `keyboardController.ts` (the web variant)
+ * for why the components go through this module instead of importing the
+ * package directly.
+ */
+export { KeyboardController, KeyboardAvoidingView as NativeKeyboardAvoidingView, useKeyboardContext, useKeyboardState, } from "react-native-keyboard-controller";

package/dist/constants/colors.d.ts

@@ -86,5 +86,39 @@ export interface Colors {
     light: Theme;
     dark: Theme;
 }
+/**
+ * Raw hex/rgba theme colors, always literal strings on every platform. Use
+ * these for sinks that cannot take CSS `var()` — e.g. `<meta name="theme-color">`,
+ * color parsing/math — and for generating the CSS variable definitions below.
+ */
+export declare const rawThemeColors: {
+    light: ThemeColors;
+    dark: ThemeColors;
+};
+/**
+ * Resolves a theme color value to a literal color string. On web, theme
+ * colors are `var(--c-*)` references; this maps one back to the given
+ * scheme's raw hex/rgba. Literal inputs (including app override colors)
+ * pass through unchanged.
+ */
+export declare function resolveRawColor(color: string, scheme: "light" | "dark"): string;
+/**
+ * CSS custom-property definitions for every semantic theme color, for
+ * embedding in a web app's `+html.tsx` global `<style>`. Each token gets
+ * `--c-<kebab-token>` (the color value) and `--c-<kebab-token>-rgb` (a
+ * comma-separated RGB triplet, alpha stripped — `withAlpha` builds
+ * `rgba(var(--c-x-rgb), a)` from it).
+ *
+ * Light values are defined on `:root`; dark values apply under
+ * `html[data-theme="dark"]`, with a `prefers-color-scheme` fallback for the
+ * paint before any theme script stamps `data-theme`.
+ *
+ * Apps that override brand colors can pass those overrides so the emitted
+ * CSS matches their theme.
+ */
+export declare function getThemeCssVariables(overrides?: {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+}): string;
 export declare const colors: Colors;
 export { palette };