@zendir/ui 0.4.1 → 0.6.0

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

@@ -1,315 +1,354 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo, useRef, useId, useEffect, useState, useCallback, useContext, createContext } from "react";
-import { createPortal } from "react-dom";
 import { useTheme } from "../../theme/ThemeProvider.js";
-const ConfirmDialog = memo(function ConfirmDialog2({
-  open,
-  onClose,
-  onConfirm,
-  title,
-  message,
-  status,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  destructive = false
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const dialogRef = useRef(null);
-  const confirmRef = useRef(null);
-  const previousActiveElement = useRef(null);
-  const titleId = useId();
-  const messageId = useId();
-  const CONFIRM_DIALOG_Z_INDEX = 2147483200;
-  useEffect(() => {
-    if (!open) return;
-    previousActiveElement.current = document.activeElement;
-    document.body.style.overflow = "hidden";
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const root = dialogRef.current;
-      if (!root) return;
-      const focusableElements = root.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const focusable = Array.from(focusableElements).filter((el) => !el.hasAttribute("disabled"));
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      const active = document.activeElement;
-      if (e.shiftKey && active === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && active === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    const focusTimer = window.setTimeout(() => {
-      var _a;
-      (_a = confirmRef.current) == null ? void 0 : _a.focus();
-    }, 0);
-    return () => {
-      var _a;
-      window.clearTimeout(focusTimer);
-      document.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = "";
-      (_a = previousActiveElement.current) == null ? void 0 : _a.focus();
-    };
-  }, [open, onClose]);
-  if (!open) return null;
-  if (typeof document === "undefined") return null;
-  const statusColors = {
-    normal: tokens.colors.status.normal,
-    caution: tokens.colors.status.caution,
-    serious: tokens.colors.status.serious,
-    critical: tokens.colors.status.critical
-  };
-  const accentColor = status ? statusColors[status] : tokens.colors.accent.primary;
-  const confirmBg = destructive ? tokens.colors.status.critical : tokens.colors.accent.primary;
-  const statusIcon = status && (() => {
-    const s = 32;
-    const innerIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: accentColor, strokeWidth: "2.5", strokeLinecap: "round", children: [
-      /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
-      /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
-    ] });
-    const baseStyle = {
-      width: s,
-      height: s,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0
-    };
-    switch (status) {
-      case "critical":
-        return /* @__PURE__ */ jsx("div", { style: {
-          ...baseStyle,
-          backgroundColor: `${accentColor}20`,
-          border: `2px solid ${accentColor}`,
-          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
-          paddingTop: 8
-        }, children: innerIcon });
-      case "serious":
-        return /* @__PURE__ */ jsx("div", { style: {
-          ...baseStyle,
-          backgroundColor: `${accentColor}20`,
-          border: `2px solid ${accentColor}`,
-          transform: "rotate(45deg)"
-        }, children: /* @__PURE__ */ jsx("div", { style: { transform: "rotate(-45deg)" }, children: innerIcon }) });
-      case "caution":
-        return /* @__PURE__ */ jsx("div", { style: {
-          ...baseStyle,
-          backgroundColor: `${accentColor}20`,
-          border: `2px solid ${accentColor}`,
-          borderRadius: "4px"
-        }, children: innerIcon });
-      default:
-        return /* @__PURE__ */ jsx("div", { style: {
-          ...baseStyle,
-          backgroundColor: `${accentColor}20`,
-          border: `2px solid ${accentColor}`,
-          borderRadius: "50%"
-        }, children: innerIcon });
-    }
-  })();
-  return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: CONFIRM_DIALOG_Z_INDEX,
-          backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}80` : `${tokens.colors.background.base}B3`,
-          backdropFilter: "blur(6px)",
-          WebkitBackdropFilter: "blur(6px)",
-          animation: `zendir-confirm-backdrop 200ms ${tokens.animation.easing.default}`
-        },
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: dialogRef,
-        role: "alertdialog",
-        "aria-modal": "true",
-        "aria-labelledby": titleId,
-        "aria-describedby": message ? messageId : void 0,
-        onClick: (e) => e.stopPropagation(),
-        style: {
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          zIndex: CONFIRM_DIALOG_Z_INDEX + 1,
-          width: "100%",
-          maxWidth: "min(440px, calc(100vw - 32px))",
-          backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.9)" : tokens.colors.background.surface,
-          border: `1px solid ${tokens.colors.border.default}`,
-          borderRadius: tokens.borderRadius.lg,
-          boxShadow: tokens.shadows.xl,
-          fontFamily: tokens.typography.fontFamily.primary,
-          animation: `zendir-confirm-enter 250ms ${tokens.animation.easing.default}`,
-          overflow: "hidden",
-          ...isTransparentTheme ? {
-            backdropFilter: "blur(20px)",
-            WebkitBackdropFilter: "blur(20px)"
-          } : {}
-        },
-        children: [
-          status && /* @__PURE__ */ jsx("div", { style: {
-            height: 3,
-            backgroundColor: accentColor,
-            width: "100%"
-          } }),
-          /* @__PURE__ */ jsx("div", { style: { padding: `${tokens.spacing.lg} ${tokens.spacing.lg} ${tokens.spacing.md}` }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: tokens.spacing.md, alignItems: "flex-start" }, children: [
-            statusIcon,
-            /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  id: titleId,
-                  style: {
-                    fontSize: tokens.typography.fontSize.md,
-                    fontWeight: tokens.typography.fontWeight.semibold,
-                    color: tokens.colors.text.primary,
-                    lineHeight: tokens.typography.lineHeight.tight
-                  },
-                  children: title
-                }
-              ),
-              message && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  id: messageId,
-                  style: {
-                    fontSize: tokens.typography.fontSize.sm,
-                    color: tokens.colors.text.secondary,
-                    marginTop: tokens.spacing.sm,
-                    lineHeight: tokens.typography.lineHeight.normal
-                  },
-                  children: message
-                }
-              )
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            justifyContent: "flex-end",
-            gap: tokens.spacing.sm,
-            padding: `${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg}`,
-            borderTop: tokens.borders.divider
-          }, children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onClose,
-                style: {
-                  padding: `0 ${tokens.spacing.md}`,
-                  minHeight: tokens.elementSize.lg,
-                  fontSize: tokens.typography.fontSize.sm,
-                  fontWeight: tokens.typography.fontWeight.medium,
-                  fontFamily: tokens.typography.fontFamily.primary,
-                  color: tokens.colors.text.primary,
-                  backgroundColor: tokens.colors.background.base,
-                  border: `1px solid ${tokens.colors.border.muted}`,
-                  borderRadius: tokens.borderRadius.md,
-                  cursor: "pointer",
-                  transition: tokens.animation.fast
-                },
-                children: cancelLabel
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                ref: confirmRef,
-                onClick: () => {
-                  onConfirm();
-                  onClose();
-                },
-                style: {
-                  padding: `0 ${tokens.spacing.md}`,
-                  minHeight: tokens.elementSize.lg,
-                  fontSize: tokens.typography.fontSize.sm,
-                  fontWeight: tokens.typography.fontWeight.semibold,
-                  fontFamily: tokens.typography.fontFamily.primary,
-                  color: tokens.colors.text.inverse || "#fff",
-                  backgroundColor: confirmBg,
-                  border: "none",
-                  borderRadius: tokens.borderRadius.md,
-                  cursor: "pointer",
-                  transition: tokens.animation.fast,
-                  boxShadow: `0 2px 8px ${confirmBg}40`
-                },
-                children: confirmLabel
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("style", { children: `
+import { createContext, memo, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/react/core/feedback/ConfirmDialog.tsx
+/**
+* @zendir/ui - Confirmation Dialog
+*
+* Convenience wrapper over Dialog for confirm/cancel actions.
+* Provides both a component API and a `useConfirm()` hook for imperative usage.
+*
+* Astro UX Compliance:
+* - Status-based alert colors
+* - Focus trap, escape to close
+* - Primary button on right (Astro convention)
+*
+* @example
+* ```tsx
+* // Hook API (imperative)
+* const confirm = useConfirm();
+* const ok = await confirm({
+*   title: 'Reset Component',
+*   message: 'This will reboot the spacecraft and suspend commands for 120 seconds.',
+*   status: 'caution',
+*   confirmLabel: 'Reset',
+*   destructive: true,
+* });
+* if (ok) doReset();
+*
+* // Component API (declarative)
+* <ConfirmDialog
+*   open={isOpen}
+*   onClose={() => setOpen(false)}
+*   onConfirm={handleReset}
+*   title="Delete All Data?"
+*   message="This cannot be undone."
+*   status="critical"
+*   destructive
+* />
+* ```
+*/
+var ConfirmDialog = memo(function ConfirmDialog({ open, onClose, onConfirm, title, message, status, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const dialogRef = useRef(null);
+	const confirmRef = useRef(null);
+	const previousActiveElement = useRef(null);
+	const titleId = useId();
+	const messageId = useId();
+	const CONFIRM_DIALOG_Z_INDEX = 2147483200;
+	useEffect(() => {
+		if (!open) return;
+		previousActiveElement.current = document.activeElement;
+		document.body.style.overflow = "hidden";
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			const root = dialogRef.current;
+			if (!root) return;
+			const focusableElements = root.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+			const focusable = Array.from(focusableElements).filter((el) => !el.hasAttribute("disabled"));
+			if (focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const active = document.activeElement;
+			if (e.shiftKey && active === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && active === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		const focusTimer = window.setTimeout(() => {
+			confirmRef.current?.focus();
+		}, 0);
+		return () => {
+			window.clearTimeout(focusTimer);
+			document.removeEventListener("keydown", handleKeyDown);
+			document.body.style.overflow = "";
+			previousActiveElement.current?.focus();
+		};
+	}, [open, onClose]);
+	if (!open) return null;
+	if (typeof document === "undefined") return null;
+	const statusColors = {
+		normal: tokens.colors.status.normal,
+		caution: tokens.colors.status.caution,
+		serious: tokens.colors.status.serious,
+		critical: tokens.colors.status.critical
+	};
+	const accentColor = status ? statusColors[status] : tokens.colors.accent.primary;
+	const confirmBg = destructive ? tokens.colors.status.critical : tokens.colors.accent.primary;
+	const statusIcon = status && (() => {
+		const s = 32;
+		const innerIcon = /* @__PURE__ */ jsxs("svg", {
+			width: "16",
+			height: "16",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: accentColor,
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			children: [/* @__PURE__ */ jsx("path", { d: "M12 9v4" }), /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })]
+		});
+		const baseStyle = {
+			width: s,
+			height: s,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0
+		};
+		switch (status) {
+			case "critical": return /* @__PURE__ */ jsx("div", {
+				style: {
+					...baseStyle,
+					backgroundColor: `${accentColor}20`,
+					border: `2px solid ${accentColor}`,
+					clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+					paddingTop: 8
+				},
+				children: innerIcon
+			});
+			case "serious": return /* @__PURE__ */ jsx("div", {
+				style: {
+					...baseStyle,
+					backgroundColor: `${accentColor}20`,
+					border: `2px solid ${accentColor}`,
+					transform: "rotate(45deg)"
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: { transform: "rotate(-45deg)" },
+					children: innerIcon
+				})
+			});
+			case "caution": return /* @__PURE__ */ jsx("div", {
+				style: {
+					...baseStyle,
+					backgroundColor: `${accentColor}20`,
+					border: `2px solid ${accentColor}`,
+					borderRadius: "4px"
+				},
+				children: innerIcon
+			});
+			default: return /* @__PURE__ */ jsx("div", {
+				style: {
+					...baseStyle,
+					backgroundColor: `${accentColor}20`,
+					border: `2px solid ${accentColor}`,
+					borderRadius: "50%"
+				},
+				children: innerIcon
+			});
+		}
+	})();
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			style: {
+				position: "fixed",
+				inset: 0,
+				zIndex: CONFIRM_DIALOG_Z_INDEX,
+				backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}80` : `${tokens.colors.background.base}B3`,
+				backdropFilter: "blur(6px)",
+				WebkitBackdropFilter: "blur(6px)",
+				animation: `zendir-confirm-backdrop 200ms ${tokens.animation.easing.default}`
+			},
+			onClick: onClose
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
+			role: "alertdialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			"aria-describedby": message ? messageId : void 0,
+			onClick: (e) => e.stopPropagation(),
+			style: {
+				position: "fixed",
+				top: "50%",
+				left: "50%",
+				transform: "translate(-50%, -50%)",
+				zIndex: 2147483201,
+				width: "100%",
+				maxWidth: "min(440px, calc(100vw - 32px))",
+				backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.9)" : tokens.colors.background.surface,
+				border: `1px solid ${tokens.colors.border.default}`,
+				borderRadius: tokens.borderRadius.lg,
+				boxShadow: tokens.shadows.xl,
+				fontFamily: tokens.typography.fontFamily.primary,
+				animation: `zendir-confirm-enter 250ms ${tokens.animation.easing.default}`,
+				overflow: "hidden",
+				...isTransparentTheme ? {
+					backdropFilter: "blur(20px)",
+					WebkitBackdropFilter: "blur(20px)"
+				} : {}
+			},
+			children: [
+				status && /* @__PURE__ */ jsx("div", { style: {
+					height: 3,
+					backgroundColor: accentColor,
+					width: "100%"
+				} }),
+				/* @__PURE__ */ jsx("div", {
+					style: { padding: `${tokens.spacing.lg} ${tokens.spacing.lg} ${tokens.spacing.md}` },
+					children: /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							gap: tokens.spacing.md,
+							alignItems: "flex-start"
+						},
+						children: [statusIcon, /* @__PURE__ */ jsxs("div", {
+							style: { flex: 1 },
+							children: [/* @__PURE__ */ jsx("div", {
+								id: titleId,
+								style: {
+									fontSize: tokens.typography.fontSize.md,
+									fontWeight: tokens.typography.fontWeight.semibold,
+									color: tokens.colors.text.primary,
+									lineHeight: tokens.typography.lineHeight.tight
+								},
+								children: title
+							}), message && /* @__PURE__ */ jsx("div", {
+								id: messageId,
+								style: {
+									fontSize: tokens.typography.fontSize.sm,
+									color: tokens.colors.text.secondary,
+									marginTop: tokens.spacing.sm,
+									lineHeight: tokens.typography.lineHeight.normal
+								},
+								children: message
+							})]
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						justifyContent: "flex-end",
+						gap: tokens.spacing.sm,
+						padding: `${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg}`,
+						borderTop: tokens.borders.divider
+					},
+					children: [/* @__PURE__ */ jsx("button", {
+						onClick: onClose,
+						style: {
+							padding: `0 ${tokens.spacing.md}`,
+							minHeight: tokens.elementSize.lg,
+							fontSize: tokens.typography.fontSize.sm,
+							fontWeight: tokens.typography.fontWeight.medium,
+							fontFamily: tokens.typography.fontFamily.primary,
+							color: tokens.colors.text.primary,
+							backgroundColor: tokens.colors.background.base,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							cursor: "pointer",
+							transition: tokens.animation.fast
+						},
+						children: cancelLabel
+					}), /* @__PURE__ */ jsx("button", {
+						ref: confirmRef,
+						onClick: () => {
+							onConfirm();
+							onClose();
+						},
+						style: {
+							padding: `0 ${tokens.spacing.md}`,
+							minHeight: tokens.elementSize.lg,
+							fontSize: tokens.typography.fontSize.sm,
+							fontWeight: tokens.typography.fontWeight.semibold,
+							fontFamily: tokens.typography.fontFamily.primary,
+							color: tokens.colors.text.inverse || "#fff",
+							backgroundColor: confirmBg,
+							border: "none",
+							borderRadius: tokens.borderRadius.md,
+							cursor: "pointer",
+							transition: tokens.animation.fast,
+							boxShadow: `0 2px 8px ${confirmBg}40`
+						},
+						children: confirmLabel
+					})]
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx("style", { children: `
         @keyframes zendir-confirm-backdrop { from { opacity: 0; } to { opacity: 1; } }
         @keyframes zendir-confirm-enter {
           from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
           to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
         }
       ` })
-  ] }), document.body);
+	] }), document.body);
 });
-const ConfirmContext = createContext(null);
+var ConfirmContext = createContext(null);
+/**
+* Imperative confirmation hook.
+* Must be used within `<ConfirmProvider>`.
+*
+* @example
+* ```tsx
+* const confirm = useConfirm();
+* const ok = await confirm({ title: 'Delete?', status: 'critical', destructive: true });
+* ```
+*/
 function useConfirm() {
-  const ctx = useContext(ConfirmContext);
-  if (!ctx) throw new Error("useConfirm must be used within <ConfirmProvider>");
-  return ctx.requestConfirm;
+	const ctx = useContext(ConfirmContext);
+	if (!ctx) throw new Error("useConfirm must be used within <ConfirmProvider>");
+	return ctx.requestConfirm;
 }
-const ConfirmProvider = memo(function ConfirmProvider2({
-  children
-}) {
-  const [state, setState] = useState(null);
-  const requestConfirm = useCallback((options) => {
-    return new Promise((resolve) => {
-      setState({ ...options, resolve });
-    });
-  }, []);
-  const handleClose = useCallback(() => {
-    state == null ? void 0 : state.resolve(false);
-    setState(null);
-  }, [state]);
-  const handleConfirm = useCallback(() => {
-    state == null ? void 0 : state.resolve(true);
-    setState(null);
-  }, [state]);
-  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: { requestConfirm }, children: [
-    children,
-    state && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        open: true,
-        onClose: handleClose,
-        onConfirm: handleConfirm,
-        title: state.title,
-        message: state.message,
-        status: state.status,
-        confirmLabel: state.confirmLabel,
-        cancelLabel: state.cancelLabel,
-        destructive: state.destructive
-      }
-    )
-  ] });
+/**
+* Provider for the useConfirm() hook.
+* Renders the confirmation dialog as needed.
+*/
+var ConfirmProvider = memo(function ConfirmProvider({ children }) {
+	const [state, setState] = useState(null);
+	const requestConfirm = useCallback((options) => {
+		return new Promise((resolve) => {
+			setState({
+				...options,
+				resolve
+			});
+		});
+	}, []);
+	const handleClose = useCallback(() => {
+		state?.resolve(false);
+		setState(null);
+	}, [state]);
+	const handleConfirm = useCallback(() => {
+		state?.resolve(true);
+		setState(null);
+	}, [state]);
+	return /* @__PURE__ */ jsxs(ConfirmContext.Provider, {
+		value: { requestConfirm },
+		children: [children, state && /* @__PURE__ */ jsx(ConfirmDialog, {
+			open: true,
+			onClose: handleClose,
+			onConfirm: handleConfirm,
+			title: state.title,
+			message: state.message,
+			status: state.status,
+			confirmLabel: state.confirmLabel,
+			cancelLabel: state.cancelLabel,
+			destructive: state.destructive
+		})]
+	});
 });
-export {
-  ConfirmDialog,
-  ConfirmProvider,
-  useConfirm
-};
-//# sourceMappingURL=ConfirmDialog.js.map
+//#endregion
+export { ConfirmDialog, ConfirmDialog as default, ConfirmProvider, useConfirm };
+
+//# sourceMappingURL=ConfirmDialog.js.map