@mrmeg/expo-ui 0.7.3 → 0.9.0

package/dist/hooks/useTheme.js

@@ -42,7 +42,7 @@ function getCachedOrCompute(key, compute) {
  * - getTextColorForBackground("#000") → "light"
  * - getContrastingColor("#f4f4f4", "#222", "#fff") → "#222"
  * - withAlpha("#336699", 0.6) → "rgba(51,102,153,0.6)"
- * - getShadowStyle('base') → { shadowColor, shadowOffset, ... }
+ * - getShadowStyle('base') → { boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)" }
  */
 export function useTheme() {
     const userTheme = useThemeStore((s) => s.userTheme);
@@ -93,102 +93,37 @@ export function useTheme() {
     }, [setTheme, userTheme]);
     /**
      * getShadowStyle
-     * Returns platform-appropriate shadow styles
-     * - Web: uses CSS boxShadow through React Native Web
-     * - Native: uses shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation
+     * Returns a cross-platform shadow style using the `boxShadow` style prop.
+     *
+     * RN 0.85 + react-native-web 0.21 deprecate the legacy `shadow*` props in
+     * favor of `boxShadow`, which is supported on both native and web. Because
+     * `boxShadow` has no separate opacity field, each preset's opacity is folded
+     * into the color's alpha via `withAlpha`. `elevation` is dropped — `boxShadow`
+     * renders shadows on Android in 0.85+.
      */
     const getShadowStyle = useCallback((type) => {
+        // Each preset: [offsetX, offsetY, blurRadius, color, opacity].
+        // Darker themes get a stronger alpha so shadows stay visible.
+        const boost = theme.dark ? 3 : 1;
+        const overlay = theme.colors.overlay;
         const shadowConfigs = {
-            base: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.1,
-                shadowRadius: 3,
-                elevation: 3,
-            },
-            soft: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.1,
-                shadowRadius: 6,
-                elevation: 4,
-            },
-            sharp: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.15,
-                shadowRadius: 1,
-                elevation: 2,
-            },
-            subtle: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.05,
-                shadowRadius: 2,
-                elevation: 1,
-            },
-            elevated: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 20 },
-                shadowOpacity: 0.15,
-                shadowRadius: 40,
-                elevation: 16,
-            },
-            glow: {
-                shadowColor: theme.colors.primary,
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.4,
-                shadowRadius: 20,
-                elevation: 10,
-            },
-            glass: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.05,
-                shadowRadius: 30,
-                elevation: 4,
-            },
-            card: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.08,
-                shadowRadius: 8,
-                elevation: 4,
-            },
-            cardHover: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 8 },
-                shadowOpacity: 0.12,
-                shadowRadius: 24,
-                elevation: 8,
-            },
-            cardSubtle: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.08,
-                shadowRadius: 3,
-                elevation: 2,
-            },
+            base: { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.1 },
+            soft: { x: 0, y: 4, blur: 6, color: overlay, opacity: 0.1 },
+            sharp: { x: 0, y: 1, blur: 1, color: overlay, opacity: 0.15 },
+            subtle: { x: 0, y: 1, blur: 2, color: overlay, opacity: 0.05 },
+            elevated: { x: 0, y: 20, blur: 40, color: overlay, opacity: 0.15 },
+            glow: { x: 0, y: 4, blur: 20, color: theme.colors.primary, opacity: 0.4 },
+            glass: { x: 0, y: 4, blur: 30, color: overlay, opacity: 0.05 },
+            card: { x: 0, y: 2, blur: 8, color: overlay, opacity: 0.08 },
+            cardHover: { x: 0, y: 8, blur: 24, color: overlay, opacity: 0.12 },
+            cardSubtle: { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.08 },
+        };
+        const { x, y, blur, color, opacity } = shadowConfigs[type];
+        // Don't boost the glow accent — it's already a deliberate, vivid alpha.
+        const alpha = color === theme.colors.primary ? opacity : Math.min(opacity * boost, 1);
+        return {
+            boxShadow: `${x}px ${y}px ${blur}px ${withAlpha(color, alpha)}`,
         };
-        const config = shadowConfigs[type];
-        if (Platform.OS === "web") {
-            const webShadows = {
-                base: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.45)" : "0 1px 2px rgba(0, 0, 0, 0.08)" },
-                soft: { boxShadow: theme.dark ? "0 8px 24px rgba(0, 0, 0, 0.36)" : "0 8px 24px rgba(0, 0, 0, 0.10)" },
-                sharp: { boxShadow: theme.dark ? "0 1px 1px rgba(0, 0, 0, 0.55)" : "0 1px 1px rgba(0, 0, 0, 0.12)" },
-                subtle: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.32)" : "0 1px 2px rgba(0, 0, 0, 0.05)" },
-                elevated: { boxShadow: theme.dark ? "0 20px 40px rgba(0, 0, 0, 0.38)" : "0 20px 40px rgba(0, 0, 0, 0.15)" },
-                glow: { boxShadow: `0 0 20px ${theme.colors.primary}` },
-                glass: { boxShadow: theme.dark ? "0 4px 30px rgba(0, 0, 0, 0.32)" : "0 4px 30px rgba(0, 0, 0, 0.05)" },
-                card: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.32)" : "0 1px 3px rgba(0, 0, 0, 0.08)" },
-                cardHover: { boxShadow: theme.dark ? "0 8px 24px rgba(0, 0, 0, 0.36)" : "0 8px 24px rgba(0, 0, 0, 0.12)" },
-                cardSubtle: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.32)" : "0 1px 3px rgba(0, 0, 0, 0.05)" },
-            };
-            return webShadows[type];
-        }
-        return Platform.select({
-            default: config,
-        });
     }, [theme]);
     const getFocusRingStyle = useCallback((offset = 2) => {
         if (Platform.OS !== "web") {

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.3",
+  "version": "0.9.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -122,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"
   }
 }