@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/feedback/Toast.js

@@ -1,211 +1,351 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useRef, useCallback, useContext, createContext, useEffect } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { safeAccentText } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-const ToastContext = createContext(null);
+import { createContext, memo, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/feedback/Toast.tsx
+/**
+* @zendir/ui - Toast / Notification System
+*
+* Contextual toast notifications with queue management, auto-dismiss,
+* and Astro UX status colors. Essential for operator dashboards surfacing
+* connection events, command results, and system alerts.
+*
+* Astro UX Compliance:
+* - 6-level status colors (off, standby, normal, caution, serious, critical)
+* - Positioned top-right (operator dashboard convention)
+* - Reduced motion support
+* - ARIA live region for screen readers
+*
+* @example
+* ```tsx
+* // Wrap app in ToastProvider
+* <ToastProvider>
+*   <App />
+* </ToastProvider>
+*
+* // Use in any component
+* const toast = useToast();
+* toast({ status: 'normal', title: 'Connected', message: 'MQTT link established' });
+* toast({ status: 'caution', title: 'SAFE Mode', message: 'Spacecraft entered SAFE mode', duration: 0 });
+* toast({ status: 'critical', title: 'Link Lost', message: 'Downlink signal below threshold' });
+* ```
+*/
+var ToastContext = createContext(null);
+/**
+* Hook to show toast notifications.
+* Must be used within a `<ToastProvider>`.
+*
+* @example
+* ```tsx
+* const toast = useToast();
+* toast({ status: 'normal', title: 'Success', message: 'Command sent' });
+* ```
+*/
 function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
-  return ctx.toast;
+	const ctx = useContext(ToastContext);
+	if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+	return ctx.toast;
 }
+/**
+* Hook to access full toast API (toast, dismiss, dismissAll).
+*/
 function useToastManager() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToastManager must be used within <ToastProvider>");
-  return ctx;
+	const ctx = useContext(ToastContext);
+	if (!ctx) throw new Error("useToastManager must be used within <ToastProvider>");
+	return ctx;
 }
-const ToastItem = memo(function ToastItem2({
-  toast: t,
-  onDismiss
-}) {
-  const { tokens } = useTheme();
-  const [exiting, setExiting] = useState(false);
-  const dismissTimeoutRef = useRef();
-  useEffect(() => {
-    return () => {
-      clearTimeout(dismissTimeoutRef.current);
-    };
-  }, []);
-  const statusColors = {
-    normal: tokens.colors.status.normal,
-    standby: tokens.colors.status.standby,
-    caution: tokens.colors.status.caution,
-    serious: tokens.colors.status.serious,
-    critical: tokens.colors.status.critical,
-    off: tokens.colors.status.off
-  };
-  const color = statusColors[t.status || "off"] || tokens.colors.status.off;
-  const handleDismiss = useCallback(() => {
-    setExiting(true);
-    dismissTimeoutRef.current = setTimeout(() => onDismiss(t.id), 200);
-  }, [t.id, onDismiss]);
-  useEffect(() => {
-    const dur = t.duration ?? 5e3;
-    if (dur <= 0) return;
-    const timer = setTimeout(handleDismiss, dur);
-    return () => clearTimeout(timer);
-  }, [t.duration, handleDismiss]);
-  const statusIcon = (() => {
-    const s = 10;
-    const h = s / 2;
-    const status = t.status || "off";
-    const sharedStyle = { flexShrink: 0, marginTop: "3px" };
-    switch (status) {
-      case "critical":
-        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("polygon", { points: `${h},${s} 0,0 ${s},0`, fill: color }) });
-      case "serious":
-        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("polygon", { points: `${h},0 ${s},${h} ${h},${s} 0,${h}`, fill: color }) });
-      case "caution":
-        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("rect", { width: s, height: s, fill: color }) });
-      case "standby":
-        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 12 12", style: sharedStyle, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
-      case "off":
-        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 12 12", style: sharedStyle, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
-      default:
-        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: sharedStyle, children: /* @__PURE__ */ jsx("circle", { cx: h, cy: h, r: h, fill: color }) });
-    }
-  })();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "alert",
-      style: {
-        display: "flex",
-        gap: tokens.spacing.sm,
-        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-        backgroundColor: tokens.colors.background.elevated,
-        border: `1px solid ${color}30`,
-        borderLeft: `3px solid ${color}`,
-        borderRadius: tokens.borderRadius.md,
-        boxShadow: `${tokens.shadows.lg}, 0 0 20px ${color}15`,
-        maxWidth: "min(400px, calc(100vw - 32px))",
-        minWidth: "min(280px, calc(100vw - 32px))",
-        fontFamily: tokens.typography.fontFamily.primary,
-        animation: exiting ? `zendir-toast-exit 200ms ${tokens.animation.easing.default} forwards` : `zendir-toast-enter 300ms ${tokens.animation.easing.default}`,
-        transition: tokens.animation.normal
-      },
-      children: [
-        t.icon || statusIcon,
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx("div", { style: {
-            fontSize: tokens.typography.fontSize.sm,
-            fontWeight: tokens.typography.fontWeight.semibold,
-            color: tokens.colors.text.primary,
-            lineHeight: tokens.typography.lineHeight.tight
-          }, children: t.title }),
-          t.message && /* @__PURE__ */ jsx("div", { style: {
-            fontSize: tokens.typography.fontSize.xs,
-            color: tokens.colors.text.secondary,
-            marginTop: "2px",
-            lineHeight: tokens.typography.lineHeight.normal
-          }, children: t.message }),
-          t.action && /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: t.action.onClick,
-              style: {
-                marginTop: tokens.spacing.xs,
-                fontSize: tokens.typography.fontSize.xs,
-                fontWeight: tokens.typography.fontWeight.semibold,
-                color: safeAccentText(tokens.colors.accent.primary),
-                background: "none",
-                border: "none",
-                padding: 0,
-                cursor: "pointer",
-                fontFamily: tokens.typography.fontFamily.primary
-              },
-              children: t.action.label
-            }
-          )
-        ] }),
-        t.dismissible !== false && /* @__PURE__ */ jsx(
-          "button",
-          {
-            "aria-label": "Dismiss notification",
-            onClick: handleDismiss,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 44,
-              height: 44,
-              border: "none",
-              background: "none",
-              color: tokens.colors.text.tertiary,
-              cursor: "pointer",
-              borderRadius: tokens.borderRadius.sm,
-              padding: tokens.spacing.xs,
-              flexShrink: 0,
-              transition: tokens.animation.fast
-            },
-            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+var ToastItem = memo(function ToastItem({ toast: t, onDismiss }) {
+	const { tokens } = useTheme();
+	const [exiting, setExiting] = useState(false);
+	const dismissTimeoutRef = useRef();
+	useEffect(() => {
+		return () => {
+			clearTimeout(dismissTimeoutRef.current);
+		};
+	}, []);
+	const color = {
+		normal: tokens.colors.status.normal,
+		standby: tokens.colors.status.standby,
+		caution: tokens.colors.status.caution,
+		serious: tokens.colors.status.serious,
+		critical: tokens.colors.status.critical,
+		off: tokens.colors.status.off
+	}[t.status || "off"] || tokens.colors.status.off;
+	const handleDismiss = useCallback(() => {
+		setExiting(true);
+		dismissTimeoutRef.current = setTimeout(() => onDismiss(t.id), 200);
+	}, [t.id, onDismiss]);
+	useEffect(() => {
+		const dur = t.duration ?? 5e3;
+		if (dur <= 0) return;
+		const timer = setTimeout(handleDismiss, dur);
+		return () => clearTimeout(timer);
+	}, [t.duration, handleDismiss]);
+	const statusIcon = (() => {
+		const s = 10;
+		const h = s / 2;
+		const status = t.status || "off";
+		const sharedStyle = {
+			flexShrink: 0,
+			marginTop: "3px"
+		};
+		switch (status) {
+			case "critical": return /* @__PURE__ */ jsx("svg", {
+				width: s,
+				height: s,
+				viewBox: `0 0 ${s} ${s}`,
+				style: sharedStyle,
+				children: /* @__PURE__ */ jsx("polygon", {
+					points: `${h},${s} 0,0 ${s},0`,
+					fill: color
+				})
+			});
+			case "serious": return /* @__PURE__ */ jsx("svg", {
+				width: s,
+				height: s,
+				viewBox: `0 0 ${s} ${s}`,
+				style: sharedStyle,
+				children: /* @__PURE__ */ jsx("polygon", {
+					points: `${h},0 ${s},${h} ${h},${s} 0,${h}`,
+					fill: color
+				})
+			});
+			case "caution": return /* @__PURE__ */ jsx("svg", {
+				width: s,
+				height: s,
+				viewBox: `0 0 ${s} ${s}`,
+				style: sharedStyle,
+				children: /* @__PURE__ */ jsx("rect", {
+					width: s,
+					height: s,
+					fill: color
+				})
+			});
+			case "standby": return /* @__PURE__ */ jsx("svg", {
+				width: s,
+				height: s,
+				viewBox: "0 0 12 12",
+				style: sharedStyle,
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "6",
+					cy: "6",
+					r: "3.5",
+					fill: "none",
+					stroke: color,
+					strokeWidth: "2"
+				})
+			});
+			case "off": return /* @__PURE__ */ jsx("svg", {
+				width: s,
+				height: s,
+				viewBox: "0 0 12 12",
+				style: sharedStyle,
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "6",
+					cy: "6",
+					r: "3",
+					fill: color
+				})
+			});
+			default: return /* @__PURE__ */ jsx("svg", {
+				width: s,
+				height: s,
+				viewBox: `0 0 ${s} ${s}`,
+				style: sharedStyle,
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: h,
+					cy: h,
+					r: h,
+					fill: color
+				})
+			});
+		}
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		style: {
+			display: "flex",
+			gap: tokens.spacing.sm,
+			padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+			backgroundColor: tokens.colors.background.elevated,
+			border: `1px solid ${color}30`,
+			borderLeft: `3px solid ${color}`,
+			borderRadius: tokens.borderRadius.md,
+			boxShadow: `${tokens.shadows.lg}, 0 0 20px ${color}15`,
+			maxWidth: "min(400px, calc(100vw - 32px))",
+			minWidth: "min(280px, calc(100vw - 32px))",
+			fontFamily: tokens.typography.fontFamily.primary,
+			animation: exiting ? `zendir-toast-exit 200ms ${tokens.animation.easing.default} forwards` : `zendir-toast-enter 300ms ${tokens.animation.easing.default}`,
+			transition: tokens.animation.normal
+		},
+		children: [
+			t.icon || statusIcon,
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					flex: 1,
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: tokens.typography.fontSize.sm,
+							fontWeight: tokens.typography.fontWeight.semibold,
+							color: tokens.colors.text.primary,
+							lineHeight: tokens.typography.lineHeight.tight
+						},
+						children: t.title
+					}),
+					t.message && /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: tokens.typography.fontSize.xs,
+							color: tokens.colors.text.secondary,
+							marginTop: "2px",
+							lineHeight: tokens.typography.lineHeight.normal
+						},
+						children: t.message
+					}),
+					t.action && /* @__PURE__ */ jsx("button", {
+						onClick: t.action.onClick,
+						style: {
+							marginTop: tokens.spacing.xs,
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: tokens.typography.fontWeight.semibold,
+							color: safeAccentText(tokens.colors.accent.primary),
+							background: "none",
+							border: "none",
+							padding: 0,
+							cursor: "pointer",
+							fontFamily: tokens.typography.fontFamily.primary
+						},
+						children: t.action.label
+					})
+				]
+			}),
+			t.dismissible !== false && /* @__PURE__ */ jsx("button", {
+				"aria-label": "Dismiss notification",
+				onClick: handleDismiss,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: 44,
+					height: 44,
+					border: "none",
+					background: "none",
+					color: tokens.colors.text.tertiary,
+					cursor: "pointer",
+					borderRadius: tokens.borderRadius.sm,
+					padding: tokens.spacing.xs,
+					flexShrink: 0,
+					transition: tokens.animation.fast
+				},
+				children: /* @__PURE__ */ jsxs("svg", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					children: [/* @__PURE__ */ jsx("line", {
+						x1: "18",
+						y1: "6",
+						x2: "6",
+						y2: "18"
+					}), /* @__PURE__ */ jsx("line", {
+						x1: "6",
+						y1: "6",
+						x2: "18",
+						y2: "18"
+					})]
+				})
+			})
+		]
+	});
 });
-const ToastProvider = memo(function ToastProvider2({
-  position = "top-right",
-  maxVisible = 5,
-  defaultDuration = 5e3,
-  children
-}) {
-  const { tokens } = useTheme();
-  const { isMobile } = useBreakpoint();
-  const [toasts, setToasts] = useState([]);
-  const idCounter = useRef(0);
-  const toast = useCallback((options) => {
-    const id = `toast-${++idCounter.current}-${Date.now()}`;
-    const instance = {
-      ...options,
-      id,
-      createdAt: Date.now(),
-      duration: options.duration ?? defaultDuration
-    };
-    setToasts((prev) => [...prev, instance].slice(-maxVisible * 2));
-    return id;
-  }, [defaultDuration, maxVisible]);
-  const dismiss = useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  const dismissAll = useCallback(() => {
-    setToasts([]);
-  }, []);
-  const inset = isMobile ? tokens.spacing.sm : tokens.spacing.md;
-  const positionStyles = {
-    "top-right": { top: inset, right: inset },
-    "top-left": { top: inset, left: inset },
-    "bottom-right": { bottom: inset, right: inset },
-    "bottom-left": { bottom: inset, left: inset },
-    "top-center": { top: inset, left: "50%", transform: "translateX(-50%)" },
-    "bottom-center": { bottom: inset, left: "50%", transform: "translateX(-50%)" }
-  };
-  const isBottom = position.startsWith("bottom");
-  const visibleToasts = toasts.slice(-maxVisible);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast, dismiss, dismissAll }, children: [
-    children,
-    visibleToasts.length > 0 && /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-live": visibleToasts.some((t) => t.status === "critical" || t.status === "serious") ? "assertive" : "polite",
-        "aria-atomic": "false",
-        style: {
-          position: "fixed",
-          zIndex: 9999,
-          display: "flex",
-          flexDirection: isBottom ? "column-reverse" : "column",
-          gap: tokens.spacing.sm,
-          pointerEvents: "none",
-          ...positionStyles[position]
-        },
-        children: visibleToasts.map((t) => /* @__PURE__ */ jsx("div", { style: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }) }, t.id))
-      }
-    ),
-    /* @__PURE__ */ jsx("style", { children: `
+var ToastProvider = memo(function ToastProvider({ position = "top-right", maxVisible = 5, defaultDuration = 5e3, children }) {
+	const { tokens } = useTheme();
+	const { isMobile } = useBreakpoint();
+	const [toasts, setToasts] = useState([]);
+	const idCounter = useRef(0);
+	const toast = useCallback((options) => {
+		const id = `toast-${++idCounter.current}-${Date.now()}`;
+		const instance = {
+			...options,
+			id,
+			createdAt: Date.now(),
+			duration: options.duration ?? defaultDuration
+		};
+		setToasts((prev) => [...prev, instance].slice(-maxVisible * 2));
+		return id;
+	}, [defaultDuration, maxVisible]);
+	const dismiss = useCallback((id) => {
+		setToasts((prev) => prev.filter((t) => t.id !== id));
+	}, []);
+	const dismissAll = useCallback(() => {
+		setToasts([]);
+	}, []);
+	const inset = isMobile ? tokens.spacing.sm : tokens.spacing.md;
+	const positionStyles = {
+		"top-right": {
+			top: inset,
+			right: inset
+		},
+		"top-left": {
+			top: inset,
+			left: inset
+		},
+		"bottom-right": {
+			bottom: inset,
+			right: inset
+		},
+		"bottom-left": {
+			bottom: inset,
+			left: inset
+		},
+		"top-center": {
+			top: inset,
+			left: "50%",
+			transform: "translateX(-50%)"
+		},
+		"bottom-center": {
+			bottom: inset,
+			left: "50%",
+			transform: "translateX(-50%)"
+		}
+	};
+	const isBottom = position.startsWith("bottom");
+	const visibleToasts = toasts.slice(-maxVisible);
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: {
+			toast,
+			dismiss,
+			dismissAll
+		},
+		children: [
+			children,
+			visibleToasts.length > 0 && /* @__PURE__ */ jsx("div", {
+				"aria-live": visibleToasts.some((t) => t.status === "critical" || t.status === "serious") ? "assertive" : "polite",
+				"aria-atomic": "false",
+				style: {
+					position: "fixed",
+					zIndex: 9999,
+					display: "flex",
+					flexDirection: isBottom ? "column-reverse" : "column",
+					gap: tokens.spacing.sm,
+					pointerEvents: "none",
+					...positionStyles[position]
+				},
+				children: visibleToasts.map((t) => /* @__PURE__ */ jsx("div", {
+					style: { pointerEvents: "auto" },
+					children: /* @__PURE__ */ jsx(ToastItem, {
+						toast: t,
+						onDismiss: dismiss
+					})
+				}, t.id))
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
         @keyframes zendir-toast-enter {
           from { opacity: 0; transform: translateX(20px); }
           to { opacity: 1; transform: translateX(0); }
@@ -219,11 +359,10 @@ const ToastProvider = memo(function ToastProvider2({
           @keyframes zendir-toast-exit { from { opacity: 1; } to { opacity: 0; } }
         }
       ` })
-  ] });
+		]
+	});
 });
-export {
-  ToastProvider,
-  useToast,
-  useToastManager
-};
-//# sourceMappingURL=Toast.js.map
+//#endregion
+export { ToastProvider, ToastProvider as default, useToast, useToastManager };
+
+//# sourceMappingURL=Toast.js.map