@mrmeg/expo-ui 0.7.2 → 0.8.0

package/dist/components/TextInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
+import { Host, TextInput as ExpoTextInput, useNativeState, } from "@expo/ui";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { fontFamilies } from "../constants/fonts.js";
@@ -70,7 +71,21 @@ const SIZE_CONFIGS = {
  * />
  * ```
  */
-export function TextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ref, ...rest }) {
+export function TextInput(props) {
+    // On iOS/Android, route to the native @expo/ui field for flicker-free,
+    // platform-native text editing. Web keeps the full-featured RN implementation
+    // (no flicker problem there, and it preserves every in-field affordance).
+    if (Platform.OS !== "web") {
+        return _jsx(NativeTextInput, { ...props });
+    }
+    return _jsx(WebTextInput, { ...props });
+}
+/**
+ * Web / fallback implementation — the original React Native TextInput with the
+ * complete chrome (variants, sizes, overlays, password toggle, clear button,
+ * error icon). Unchanged from the pre-native version.
+ */
+function WebTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ref, ...rest }) {
     const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
     const [focused, setFocused] = useState(false);
@@ -157,7 +172,119 @@ export function TextInput({ variant = "outline", size = "md", label, helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
 }
+/**
+ * Native (iOS / Android) implementation backed by `@expo/ui`'s TextInput, which
+ * bridges to SwiftUI's `TextField`/`SecureField` and Jetpack Compose's
+ * `TextField`. The text buffer lives natively (via `useNativeState`), so typing
+ * never round-trips through React state — eliminating the cursor flicker seen on
+ * controlled RN inputs.
+ *
+ * By design (reliability over feature-parity) this path renders the field plus
+ * sibling label / helper / error text only. The in-field overlays from the web
+ * implementation — password visibility toggle, clear button, left/right
+ * elements, and error icon — are intentionally omitted on native to avoid
+ * layering RN views over the native host view.
+ */
+function NativeTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, forceLight, inputMode, onChangeText, value, defaultValue, editable = true, multiline, secureTextEntry, showSecureEntryToggle, ref, wrapperStyle, 
+// Web-only affordances. Destructured out of `rest` so they're NOT forwarded to
+// the native field; intentionally unused on this path (see doc comment above).
+// `style` (an RN TextStyle) is likewise dropped — it doesn't map to
+// UniversalStyle and is replaced by the `boxStyle`/`textStyle` computed below.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
+    const { theme, getContrastingColor } = useTheme();
+    const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const hasError = error || !!errorText;
+    const sizeConfig = SIZE_CONFIGS[size];
+    // Password visibility toggle. Flipping `secureTextEntry` swaps SwiftUI's
+    // SecureField <-> TextField on iOS and toggles Compose's visualTransformation
+    // on Android; both bind the same `state` observable, so the text survives.
+    const hasSecureToggle = !!(secureTextEntry && showSecureEntryToggle);
+    const effectiveSecureTextEntry = secureTextEntry && !passwordVisible;
+    // Native text buffer. Seeded once; `value` changes are reconciled below.
+    const state = useNativeState(value ?? defaultValue ?? "");
+    // Reconcile controlled `value` -> native buffer WITHOUT echoing keystrokes.
+    // Only write when the parent's value genuinely diverges (resets, clears,
+    // programmatic sets); typing already updated `state` natively.
+    useEffect(() => {
+        if (value !== undefined && value !== state.value) {
+            state.value = value;
+        }
+    }, [value, state]);
+    // The inner ref is the @expo/ui handle; the outward ref is typed as
+    // RNTextInput because that's what the public TextInputCustomProps declares.
+    // We expose the subset consumers use, plus a `setNativeProps` shim so the
+    // uncontrolled AuthTextField can push corrected text into the native buffer.
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focus: () => innerRef.current?.focus(),
+        blur: () => innerRef.current?.blur(),
+        clear: () => {
+            state.value = "";
+        },
+        isFocused: () => innerRef.current?.isFocused() ?? false,
+        setNativeProps: (props) => {
+            if (typeof props?.text === "string") {
+                state.value = props.text;
+            }
+        },
+    }), [state]);
+    const backgroundColor = forceLight
+        ? palette.white
+        : variant === "filled"
+            ? theme.colors.card
+            : "transparent";
+    const borderColor = hasError
+        ? theme.colors.destructive
+        : forceLight
+            ? "#d1d5db"
+            : theme.colors.input;
+    const textColor = forceLight
+        ? "#1f2937"
+        : getContrastingColor(backgroundColor === "transparent" ? theme.colors.background : backgroundColor, theme.colors.text, palette.white);
+    // Map variant/size to @expo/ui's UniversalStyle (translated to SwiftUI /
+    // Compose modifiers natively).
+    const boxStyle = {
+        backgroundColor,
+        borderColor,
+        borderRadius: variant === "underlined" ? 0 : spacing.radiusMd,
+        borderWidth: variant === "outline" ? 1 : 0,
+        paddingHorizontal: sizeConfig.paddingHorizontal,
+        paddingVertical: sizeConfig.paddingVertical,
+        opacity: editable === false ? 0.6 : 1,
+        ...(multiline ? null : { height: sizeConfig.height }),
+    };
+    // "System" is an RN-only sentinel (RCTFont resolves it to the system font).
+    // @expo/ui passes the family verbatim to SwiftUI's Font.custom / Compose,
+    // where no such font exists — the fallback ignores fontSize and renders at
+    // the 17pt default, blowing up text and secure-entry dots. Omit the family
+    // so the native side uses the system font at our requested size.
+    const nativeFontFamily = fontFamilies.sansSerif.regular === "System"
+        ? undefined
+        : fontFamilies.sansSerif.regular;
+    const textStyle = {
+        color: textColor,
+        fontSize: sizeConfig.fontSize,
+        ...(nativeFontFamily ? { fontFamily: nativeFontFamily } : null),
+    };
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: hasSecureToggle ? styles.nativeRow : undefined, children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
+}
 const createStyles = (theme, variant, size) => StyleSheet.create({
+    nativeHost: {
+        width: "100%",
+    },
+    nativeRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xs,
+    },
+    nativeHostFlex: {
+        flex: 1,
+    },
+    nativePasswordToggle: {
+        paddingHorizontal: spacing.xs,
+    },
     wrapper: {
         width: "100%",
         position: "relative",

package/dist/components/Toggle.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import * as TogglePrimitive from "@rn-primitives/toggle";
 import { ViewStyle, StyleProp } from "react-native";
 import type { IconName } from "./Icon";
@@ -83,7 +84,7 @@ interface ToggleProps extends Omit<TogglePrimitive.RootProps, "style"> {
  * </Toggle>
  * ```
  */
-declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleOverride, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleOverride, ...props }: ToggleProps): React.JSX.Element;
 /**
  * ToggleIcon Component
  * Icon wrapper for use inside Toggle buttons
@@ -101,6 +102,6 @@ interface ToggleIconProps {
     size?: number;
     color?: string;
 }
-declare function ToggleIcon({ name, size, color }: ToggleIconProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleIcon({ name, size, color }: ToggleIconProps): React.JSX.Element;
 export { Toggle, ToggleIcon };
 export type { ToggleProps };

package/dist/components/ToggleGroup.d.ts

@@ -1,5 +1,6 @@
 import type { IconName } from "./Icon";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
+import * as React from "react";
 type ToggleGroupVariant = "default" | "outline";
 type ToggleGroupSize = "sm" | "default" | "lg";
 type ToggleGroupProps = ToggleGroupPrimitive.RootProps & {
@@ -41,7 +42,7 @@ type ToggleGroupProps = ToggleGroupPrimitive.RootProps & {
  * </ToggleGroup>
  * ```
  */
-declare function ToggleGroup({ variant, size, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroup({ variant, size, children, ...props }: ToggleGroupProps): React.JSX.Element;
 type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & {
     /**
      * Automatically set by ToggleGroup parent - don't set manually
@@ -57,7 +58,7 @@ type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & {
  * Individual toggle button within a ToggleGroup
  * Position (first/last) is automatically detected for rounded corners
  */
-declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: ToggleGroupItemProps): React.JSX.Element;
 /**
  * ToggleGroupIcon Component
  * Icon wrapper for use inside ToggleGroup items
@@ -75,6 +76,6 @@ interface ToggleGroupIconProps {
     size?: number;
     color?: string;
 }
-declare function ToggleGroupIcon({ name, size, color }: ToggleGroupIconProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupIcon({ name, size, color }: ToggleGroupIconProps): React.JSX.Element;
 export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };
 export type { ToggleGroupProps, ToggleGroupSize, ToggleGroupVariant };

package/dist/components/Tooltip.d.ts

@@ -41,7 +41,7 @@ interface TooltipContentProps extends TooltipPrimitive.ContentProps {
  * - Smooth animations
  * - Portal-based rendering for proper z-index
  */
-declare function TooltipContent({ side, align, sideOffset, portalHost, variant, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ side, align, sideOffset, portalHost, variant, ...props }: TooltipContentProps): React.JSX.Element;
 /**
  * Tooltip Body Component
  * Simple wrapper for tooltip content with padding
@@ -49,7 +49,7 @@ declare function TooltipContent({ side, align, sideOffset, portalHost, variant,
 interface TooltipBodyProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function TooltipBody({ children, style, ...props }: TooltipBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipBody({ children, style, ...props }: TooltipBodyProps): React.JSX.Element;
 interface TooltipProps extends TooltipPrimitive.RootProps {
     /**
      * Time to wait before showing tooltip (web only)
@@ -99,7 +99,7 @@ interface TooltipProps extends TooltipPrimitive.RootProps {
  * </Tooltip>
  * ```
  */
-declare function Tooltip({ delayDuration, skipDelayDuration, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ delayDuration, skipDelayDuration, ...props }: TooltipProps): React.JSX.Element;
 /**
  * Tooltip Component with Sub-components
  * Properly typed interface for dot notation access (e.g., Tooltip.Trigger)

package/dist/components/UIProvider.d.ts

@@ -20,4 +20,4 @@ export interface UIProviderProps {
      */
     statusBar?: boolean;
 }
-export declare function UIProvider({ children, notification, portalHost, statusBar, }: UIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function UIProvider({ children, notification, portalHost, statusBar, }: UIProviderProps): React.JSX.Element;

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export * from "./Notification";
 export * from "./Popover";
 export * from "./Progress";
 export * from "./RadioGroup";
+export * from "./SegmentedControl";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Skeleton";

package/dist/components/index.js

@@ -21,6 +21,7 @@ export * from "./Notification.js";
 export * from "./Popover.js";
 export * from "./Progress.js";
 export * from "./RadioGroup.js";
+export * from "./SegmentedControl.js";
 export * from "./Select.js";
 export * from "./Separator.js";
 export * from "./Skeleton.js";

package/dist/state/globalUIStore.d.ts

@@ -8,9 +8,16 @@
  * - show({ type, title, messages, duration, loading, action }): displays a notification
  * - hide(): hides the current notification
  *
- * Recommended: wrap in hooks or utility functions for cleaner usage across components.
+ * Notifications auto-dismiss after `DEFAULT_NOTIFICATION_DURATION` unless a
+ * `duration` is given. Pass `duration: 0` to keep one up until dismissed;
+ * loading notifications never auto-dismiss.
+ *
+ * Prefer the `notify` helpers (see ./notify) for triggering notifications from
+ * app code; use this store directly for reactive subscription (selectors) and tests.
  */
 export type GlobalNotificationType = "error" | "success" | "info" | "warning";
+/** Auto-dismiss delay applied when `show()` is called without a `duration`. */
+export declare const DEFAULT_NOTIFICATION_DURATION = 4000;
 export type GlobalNotificationPosition = "top" | "bottom";
 export type GlobalNotificationAction = {
     label: string;
@@ -21,6 +28,7 @@ export type GlobalNotificationAlert = {
     type: GlobalNotificationType;
     title?: string;
     messages?: string[];
+    /** Auto-dismiss delay in ms. Defaults to `DEFAULT_NOTIFICATION_DURATION`; 0 = stays until dismissed. */
     duration?: number;
     loading?: boolean;
     /** Where to display the notification */

package/dist/state/globalUIStore.js

@@ -1,8 +1,16 @@
 import { create } from "zustand";
+/** Auto-dismiss delay applied when `show()` is called without a `duration`. */
+export const DEFAULT_NOTIFICATION_DURATION = 4000;
 export const globalUIStore = create((set) => ({
     alert: null,
     show: (alert) => set({
-        alert: { ...alert, show: true }
+        alert: {
+            ...alert,
+            // Loading notifications stay up until replaced or hidden (e.g. by
+            // notify.promise); everything else falls back to the default timeout.
+            duration: alert.duration ?? (alert.loading ? undefined : DEFAULT_NOTIFICATION_DURATION),
+            show: true,
+        },
     }),
     hide: () => set({ alert: null }),
 }));

package/dist/state/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./globalUIStore";
+export * from "./notify";
 export * from "./themeStore";
 export * from "./themeColorScope";
 export * from "./SsrViewportContext";

package/dist/state/index.js

@@ -1,4 +1,5 @@
 export * from "./globalUIStore.js";
+export * from "./notify.js";
 export * from "./themeStore.js";
 export * from "./themeColorScope.js";
 export * from "./SsrViewportContext.js";

package/dist/state/notify.d.ts

@@ -0,0 +1,50 @@
+import type { GlobalNotificationAlert } from "./globalUIStore";
+/**
+ * notify
+ *
+ * Imperative notification API backed by `globalUIStore`. This is the
+ * recommended way to trigger the `Notification` component from app code.
+ *
+ * Notifications auto-dismiss after `DEFAULT_NOTIFICATION_DURATION` (4s) by
+ * default. Pass `duration: 0` to keep one up until dismissed; `notify.loading`
+ * is always persistent.
+ *
+ * Usage:
+ * ```ts
+ * notify.success("Saved", { messages: ["Your changes have been saved."] });
+ * notify.error("Upload failed");
+ * notify.loading("Uploading…");
+ * notify.hide();
+ *
+ * // Full control (same payload as globalUIStore show())
+ * notify({ type: "info", title: "Copied", duration: 2000, position: "bottom" });
+ *
+ * // Loading → success/error around a promise
+ * await notify.promise(saveProfile(), {
+ *   loading: "Saving…",
+ *   success: "Profile saved",
+ *   error: "Could not save profile",
+ * });
+ * ```
+ */
+export type NotifyOptions = Omit<GlobalNotificationAlert, "show" | "type" | "title">;
+export type NotifyPromiseMessages<T> = {
+    loading: string;
+    success: string | ((value: T) => string);
+    error: string | ((error: unknown) => string);
+};
+export declare const notify: ((alert: Omit<GlobalNotificationAlert, "show">) => void) & {
+    success: (title: string, options?: NotifyOptions) => void;
+    error: (title: string, options?: NotifyOptions) => void;
+    info: (title: string, options?: NotifyOptions) => void;
+    warning: (title: string, options?: NotifyOptions) => void;
+    /** Persistent spinner notification; stays visible until replaced or hidden. */
+    loading: (title: string, options?: NotifyOptions) => void;
+    /**
+     * Shows a loading notification while the promise is pending, then a
+     * success or error notification. Rethrows on rejection and returns the
+     * resolved value so it can wrap existing async flows transparently.
+     */
+    promise: <T>(promise: Promise<T>, messages: NotifyPromiseMessages<T>) => Promise<T>;
+    hide: () => void;
+};

package/dist/state/notify.js

@@ -0,0 +1,31 @@
+import { globalUIStore } from "./globalUIStore.js";
+const show = (alert) => globalUIStore.getState().show(alert);
+const showType = (type) => (title, options) => show({ type, title, ...options });
+export const notify = Object.assign(show, {
+    success: showType("success"),
+    error: showType("error"),
+    info: showType("info"),
+    warning: showType("warning"),
+    /** Persistent spinner notification; stays visible until replaced or hidden. */
+    loading: (title, options) => show({ type: "info", title, loading: true, ...options }),
+    /**
+     * Shows a loading notification while the promise is pending, then a
+     * success or error notification. Rethrows on rejection and returns the
+     * resolved value so it can wrap existing async flows transparently.
+     */
+    promise: async (promise, messages) => {
+        notify.loading(messages.loading);
+        try {
+            const value = await promise;
+            const title = typeof messages.success === "function" ? messages.success(value) : messages.success;
+            notify.success(title);
+            return value;
+        }
+        catch (error) {
+            const title = typeof messages.error === "function" ? messages.error(error) : messages.error;
+            notify.error(title);
+            throw error;
+        }
+    },
+    hide: () => globalUIStore.getState().hide(),
+});

package/dist/state/themeColorScope.d.ts

@@ -6,4 +6,4 @@ export declare function ThemeColorScope({ colors, children, }: {
     /** Per-scheme partial overrides — same shape as `setColors`. */
     colors: ColorOverrides;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/llms-full.md

@@ -34,7 +34,7 @@ the root when the app uses package feedback or overlay components.
 `UIProvider` owns the package `Notification`, `StatusBar`, and default
 `@rn-primitives` portal host. Mount it before using `Dialog`, `AlertDialog`,
 `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`,
-`Tooltip`, or `globalUIStore` notifications.
+`Tooltip`, or `notify` / `globalUIStore` notifications.
 
 On native, `BottomSheet.Content` composes its sheet transform with React Native
 keyboard event values. Pass `avoidKeyboard={false}` for sheets that should not
@@ -66,7 +66,7 @@ import { Button, StyledText, UIProvider } from "@mrmeg/expo-ui/components";
 import { Button as ButtonDirect } from "@mrmeg/expo-ui/components/Button";
 import { colors, spacing, typography } from "@mrmeg/expo-ui/constants";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
-import { globalUIStore, useThemeStore } from "@mrmeg/expo-ui/state";
+import { globalUIStore, notify, useThemeStore } from "@mrmeg/expo-ui/state";
 import { configureExpoUiI18n, hapticLight } from "@mrmeg/expo-ui/lib";
 ```
 
@@ -101,7 +101,7 @@ Use this catalog before creating a new app-local primitive.
 | `InputOTP` | `@mrmeg/expo-ui/components` | Verification code entry | Prefer over manually managed text input groups. |
 | `Label` | `@mrmeg/expo-ui/components` | Accessible form labels | Use with package form controls. |
 | `MaxWidthContainer` | `@mrmeg/expo-ui/components` | Centered responsive width | Use for web and tablet constrained layouts. |
-| `Notification` | `@mrmeg/expo-ui/components` | Global toast surface | Trigger through `globalUIStore` with root `UIProvider`; optional actions dismiss after press. |
+| `Notification` | `@mrmeg/expo-ui/components` | Global toast surface | Trigger through `notify` (or `globalUIStore` for subscriptions/tests) with root `UIProvider`; optional actions dismiss after press. |
 | `Popover` | `@mrmeg/expo-ui/components` | Anchored contextual content | Requires root `UIProvider` portal setup. |
 | `Progress` | `@mrmeg/expo-ui/components` | Determinate or indeterminate progress | Prefer over layout-shifting spinners for progress regions. |
 | `RadioGroup` | `@mrmeg/expo-ui/components` | Small mutually exclusive choices | Use `Select` for longer option sets. |
@@ -134,6 +134,37 @@ full page sections. Use `EmptyState` for no-data or recoverable error regions,
 `Skeleton` for loading content with stable layout, and `Progress` for real
 progress or indeterminate long-running work.
 
+## Notifications
+
+`notify` is the primary imperative API for triggering the `Notification` component. Import from `@mrmeg/expo-ui/state` (also re-exported from the package root).
+
+Notifications auto-dismiss after 4s (`DEFAULT_NOTIFICATION_DURATION`) unless a `duration` is given; pass `duration: 0` to keep one up until dismissed. `notify.loading` never auto-dismisses.
+
+```ts
+import { notify } from "@mrmeg/expo-ui/state";
+
+notify.success("Saved", { messages: ["Your changes were saved."] });
+notify.error("Upload failed");
+notify.warning("Connection slow");
+notify.info("Copied to clipboard");
+
+// Loading spinner — persists until replaced or hidden (no auto-dismiss)
+notify.loading("Uploading…");
+notify.hide();
+
+// Full control (same payload as globalUIStore show())
+notify({ type: "success", title: "Saved", duration: 3000, position: "bottom" });
+
+// Loading → success/error around a promise; rethrows on rejection
+await notify.promise(saveProfile(), {
+  loading: "Saving…",
+  success: "Profile saved",          // or (value) => `Saved ${value.name}`
+  error: "Could not save profile",   // or (err) => err.message
+});
+```
+
+`globalUIStore` (the underlying zustand store) remains available for reactive selectors and tests. Use `notify` for all imperative triggers in app code.
+
 ## Validation
 
 Run the UI package gates when changing package code or shipped docs:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -108,6 +108,7 @@
     "@rn-primitives/tooltip": "~1.4.0"
   },
   "peerDependencies": {
+    "@expo/ui": ">=56.0.0 <57.0.0",
     "@react-native-async-storage/async-storage": ">=2.2.0 <2.3.0",
     "expo": ">=55.0.0 <57.0.0",
     "expo-font": ">=55.0.0 <57.0.0",
@@ -121,7 +122,7 @@
     "zustand": ">=5.0.0 <6.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.2.14",
+    "@types/react": "~19.2.17",
     "typescript": "~6.0.3"
   }
 }

package/dist/components/BottomSheetKeyboard.d.ts

@@ -1,7 +0,0 @@
-import { Animated } from "react-native";
-export declare function useBottomSheetKeyboardAnimation(): {
-    height: Animated.Value;
-};
-export declare const BottomSheetKeyboardController: {
-    dismiss(): void;
-};

package/dist/components/BottomSheetKeyboard.js

@@ -1,39 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Animated, Keyboard, Platform } from "react-native";
-// This value drives layout props (a sheet's `bottom`/`height`), which the
-// native animation driver can't touch — so timings here must stay on the JS
-// driver. It also means the value is a positive keyboard height (0 when
-// hidden), letting consumers both lift and shrink the sheet from one source.
-function animateKeyboardOffset(value, toValue, duration = 180) {
-    Animated.timing(value, {
-        toValue,
-        duration,
-        useNativeDriver: false,
-    }).start();
-}
-export function useBottomSheetKeyboardAnimation() {
-    const keyboardHeight = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        if (Platform.OS === "web") {
-            return;
-        }
-        const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
-        const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
-        const showSubscription = Keyboard.addListener(showEvent, (event) => {
-            animateKeyboardOffset(keyboardHeight, event.endCoordinates.height, event.duration || 180);
-        });
-        const hideSubscription = Keyboard.addListener(hideEvent, (event) => {
-            animateKeyboardOffset(keyboardHeight, 0, event.duration || 160);
-        });
-        return () => {
-            showSubscription.remove();
-            hideSubscription.remove();
-        };
-    }, [keyboardHeight]);
-    return { height: keyboardHeight };
-}
-export const BottomSheetKeyboardController = {
-    dismiss() {
-        Keyboard.dismiss();
-    },
-};