@mrmeg/expo-ui 0.7.0 → 0.7.1

package/LLM_USAGE.md

@@ -184,7 +184,7 @@ Use this table before creating a new app-local primitive.
 | `InputOTP` | Verification code entry | Multiple manually managed text inputs | Email codes, SMS codes, MFA, invite codes |
 | `Label` | Accessible form labels | Plain styled text labels | Required labels, disabled labels, field group labels |
 | `MaxWidthContainer` | Centered responsive width | Per-screen max-width wrappers | Web pages, tablet layouts, settings forms |
-| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, bottom-position alerts |
+| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, action toasts, bottom-position alerts |
 | `Popover` | Anchored contextual content | Custom anchored views | Inline help, quick previews, contextual controls |
 | `Progress` | Determinate or indeterminate progress | Layout-shifting spinners for progress regions | Upload progress, onboarding completion |
 | `RadioGroup`, `RadioGroupItem` | Mutually exclusive choices | Custom radio rows | Plan interval, visibility choice, survey answer |
@@ -259,5 +259,9 @@ globalUIStore.getState().show({
   type: "success",
   title: "Saved",
   messages: ["Your changes were saved."],
+  action: {
+    label: "View",
+    onPress: openSavedItem,
+  },
 });
 ```

package/README.md

@@ -224,7 +224,7 @@ All components are exported from `@mrmeg/expo-ui/components`; direct imports suc
 | `InputOTP` | Verification code entry | Multiple manually managed text inputs | Email codes, SMS codes, MFA, invite codes |
 | `Label` | Accessible form labels | Plain styled text labels | Required labels, disabled labels, field group labels |
 | `MaxWidthContainer` | Centered responsive width | Per-screen max-width wrappers | Web pages, tablet layouts, settings forms, auth panels |
-| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, loading toast, bottom-position alerts |
+| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, action toasts, loading toast, bottom-position alerts |
 | `Popover` | Anchored contextual content | Custom anchored views | Inline help, quick previews, contextual controls, small forms |
 | `Progress` | Determinate or indeterminate progress | Layout-shifting spinners for progress regions | Upload progress, onboarding completion, long-running task state |
 | `RadioGroup`, `RadioGroupItem` | Mutually exclusive choices | Custom radio rows | Plan interval, visibility choice, survey answer, preference setting |
@@ -332,6 +332,10 @@ globalUIStore.getState().show({
   type: "success",
   title: "Saved",
   messages: ["Your changes were saved."],
+  action: {
+    label: "View",
+    onPress: openSavedItem,
+  },
 });
 ```
 

package/dist/components/Notification.js

@@ -46,14 +46,29 @@ export const Notification = () => {
     const position = alert?.position ?? "top";
     const isBottom = position === "bottom";
     // Just opacity + translateY — no scale (scale = bouncy feel)
-    const opacity = useRef(new Animated.Value(0)).current;
-    const translateY = useRef(new Animated.Value(0)).current;
+    const opacityRef = useRef(null);
+    if (opacityRef.current === null) {
+        opacityRef.current = new Animated.Value(0);
+    }
+    const opacity = opacityRef.current;
+    const translateYRef = useRef(null);
+    if (translateYRef.current === null) {
+        translateYRef.current = new Animated.Value(0);
+    }
+    const translateY = translateYRef.current;
     const wasVisibleRef = useRef(false);
     const timerRef = useRef(null);
     const hideNotification = useCallback(() => {
         hide();
     }, [hide]);
+    const clearAutoDismissTimer = useCallback(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
     const animateOut = useCallback(() => {
+        clearAutoDismissTimer();
         if (reduceMotion) {
             opacity.setValue(0);
             hideNotification();
@@ -73,7 +88,18 @@ export const Notification = () => {
             if (finished)
                 hideNotification();
         });
-    }, [reduceMotion, isBottom, opacity, translateY, hideNotification]);
+    }, [clearAutoDismissTimer, reduceMotion, isBottom, opacity, translateY, hideNotification]);
+    const handleActionPress = useCallback(() => {
+        const action = alert?.action;
+        if (!action)
+            return;
+        try {
+            action.onPress();
+        }
+        finally {
+            animateOut();
+        }
+    }, [alert?.action, animateOut]);
     // The auto-dismiss timer only needs the latest animateOut; wrapping it in an
     // Effect Event keeps it out of the deps so the effect doesn't re-run (and
     // restart the timer) every time animateOut's identity changes.
@@ -180,6 +206,7 @@ export const Notification = () => {
     const message = alert?.messages?.find((item) => item.trim().length > 0);
     const title = getTitle(message);
     const hasMessage = !!message;
+    const action = alert?.action;
     if (!alert?.show) {
         return null;
     }
@@ -195,7 +222,14 @@ export const Notification = () => {
                 styles.alert,
                 isBottom && styles.alertBottom,
                 getShadowStyle("base"),
-            ], 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, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: message }))] }), _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 }) })] }) }));
+            ], 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, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { 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",
+                        },
+                        pressed && styles.actionButtonPressed,
+                    ], hitSlop: spacing.xs, onPress: handleActionPress, accessibilityLabel: action.label, accessibilityRole: "button", children: _jsx(StyledText, { selectable: false, style: [styles.actionLabel, { 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 }) })] }) }));
 };
 const createStyles = (theme) => StyleSheet.create({
     container: {
@@ -248,6 +282,26 @@ const createStyles = (theme) => StyleSheet.create({
         fontSize: 13,
         lineHeight: 18,
     },
+    actionButton: {
+        minHeight: 28,
+        maxWidth: 140,
+        paddingHorizontal: spacing.sm,
+        borderRadius: spacing.radiusSm,
+        borderWidth: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        flexShrink: 0,
+        ...(Platform.OS === "web" && { cursor: "pointer" }),
+    },
+    actionButtonPressed: {
+        opacity: 0.75,
+    },
+    actionLabel: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        fontWeight: "600",
+        fontSize: 13,
+        lineHeight: 18,
+    },
     closeButton: {
         position: "absolute",
         top: spacing.sm,

package/dist/state/globalUIStore.d.ts

@@ -5,26 +5,33 @@
  * Primarily used to trigger and dismiss the `Notification` component globally.
  *
  * Methods:
- * - show({ type, title, messages, duration, loading }): displays a notification
+ * - 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.
  */
-type State = {
-    alert: {
-        show: boolean;
-        type: "error" | "success" | "info" | "warning";
-        messages?: string[];
-        title?: string;
-        duration?: number;
-        loading?: boolean;
-        /** Where to display the notification */
-        position?: "top" | "bottom";
-    } | null;
+export type GlobalNotificationType = "error" | "success" | "info" | "warning";
+export type GlobalNotificationPosition = "top" | "bottom";
+export type GlobalNotificationAction = {
+    label: string;
+    onPress: () => void;
 };
-type Actions = {
-    show: (alert: Omit<NonNullable<State["alert"]>, "show">) => void;
+export type GlobalNotificationAlert = {
+    show: boolean;
+    type: GlobalNotificationType;
+    title?: string;
+    messages?: string[];
+    duration?: number;
+    loading?: boolean;
+    /** Where to display the notification */
+    position?: GlobalNotificationPosition;
+    action?: GlobalNotificationAction;
+};
+export type GlobalUIState = {
+    alert: GlobalNotificationAlert | null;
+};
+export type GlobalUIActions = {
+    show: (alert: Omit<GlobalNotificationAlert, "show">) => void;
     hide: () => void;
 };
-export declare const globalUIStore: import("zustand").UseBoundStore<import("zustand").StoreApi<State & Actions>>;
-export {};
+export declare const globalUIStore: import("zustand").UseBoundStore<import("zustand").StoreApi<GlobalUIState & GlobalUIActions>>;

package/llms-full.md

@@ -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`. |
+| `Notification` | `@mrmeg/expo-ui/components` | Global toast surface | Trigger through `globalUIStore` 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. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -69,6 +69,10 @@
       "types": "./dist/state/index.d.ts",
       "default": "./dist/state/index.js"
     },
+    "./state/*": {
+      "types": "./dist/state/*.d.ts",
+      "default": "./dist/state/*.js"
+    },
     "./lib": {
       "types": "./dist/lib/index.d.ts",
       "default": "./dist/lib/index.js"
@@ -76,8 +80,9 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "jest --config ../../jest.config.js packages/ui/src --runInBand --watchman=false",
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-ui-package-esm.mjs",
+    "test": "jest --config ../../jest.config.js packages/ui/src --runInBand --watchman=false && bun run check:forbidden-imports",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-ui-package-esm.mjs && bun run check:forbidden-imports",
+    "check:forbidden-imports": "node ../../scripts/check-ui-forbidden-imports.mjs",
     "publish:dry-run": "bun pm pack --dry-run"
   },
   "dependencies": {