@edux-design/modals 0.1.2 → 0.2.0

package/dist/index.mjs

@@ -1,21 +1,56 @@
 // src/elements/Modal.jsx
-import React, { forwardRef, useCallback } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo
+} from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cx } from "@edux-design/utils";
+import { IconButton } from "@edux-design/buttons";
+import { Close as Close2 } from "@edux-design/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
 var MODAL_OVERLAY_Z_INDEX = 2147483645;
 var MODAL_CONTENT_Z_INDEX = 2147483646;
+var ModalContext = createContext({ hasOnClose: false });
+var MODAL_SECTION_PADDING_X = "px-16";
+var MODAL_SECTION_PADDING_Y = "py-16";
+var MODAL_SURFACE_CLASSES = [
+  "fixed left-1/2 top-1/2 max-h-[92vh] -translate-x-1/2 -translate-y-1/2",
+  "bg-bg-base text-fg-base shadow-xl outline-none rounded-md border-2 border-border-subtle",
+  "flex flex-col overflow-hidden",
+  "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+].join(" ");
+var MODAL_HEADER_CLASSES = [
+  "flex justify-between gap-12",
+  MODAL_SECTION_PADDING_X,
+  MODAL_SECTION_PADDING_Y,
+  "border-b border-border-subtle"
+].join(" ");
+var MODAL_HEADER_CONTENT_CLASSES = "flex min-w-0 flex-1 flex-col gap-4";
+var MODAL_BODY_CLASSES = [
+  "flex-1 overflow-auto",
+  MODAL_SECTION_PADDING_X,
+  MODAL_SECTION_PADDING_Y
+].join(" ");
+var MODAL_FOOTER_CLASSES = [
+  "flex items-center justify-end gap-8",
+  MODAL_SECTION_PADDING_X,
+  MODAL_SECTION_PADDING_Y,
+  "border-t border-border-subtle"
+].join(" ");
+var MODAL_TITLE_CLASSES = "text-lg font-semibold text-fg-base";
+var MODAL_DESCRIPTION_CLASSES = "text-sm text-fg-subtle";
+var MODAL_CLOSE_LABEL = "Close modal";
+var MODAL_SIZE_CLASSES = {
+  small: "w-[min(92vw,420px)]",
+  medium: "w-[min(92vw,640px)]",
+  large: "w-[min(92vw,840px)]",
+  full: "w-[min(96vw,1200px)] h-[min(92vh,900px)]"
+};
 var getSizeClasses = (size) => {
-  switch (size) {
-    case "small":
-      return "w-[min(92vw,420px)]";
-    case "large":
-      return "w-[min(92vw,840px)]";
-    case "full":
-      return "w-[min(96vw,1200px)] h-[min(92vh,900px)]";
-    case "medium":
-    default:
-      return "w-[min(92vw,640px)]";
-  }
+  return MODAL_SIZE_CLASSES[size] ?? MODAL_SIZE_CLASSES.medium;
 };
 var Modal = ({
   open,
@@ -26,33 +61,46 @@ var Modal = ({
   children,
   ...props
 }) => {
+  const contextValue = useMemo(
+    () => ({ hasOnClose: typeof onClose === "function" }),
+    [onClose]
+  );
   const handleOpenChange = useCallback(
     (nextOpen) => {
-      onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+      onOpenChange?.(nextOpen);
       if (nextOpen) {
-        onOpen == null ? void 0 : onOpen();
+        onOpen?.();
         return;
       }
-      onClose == null ? void 0 : onClose();
+      onClose?.();
     },
     [onClose, onOpen, onOpenChange]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     DialogPrimitive.Root,
     {
       open,
       defaultOpen,
       onOpenChange: handleOpenChange,
-      ...props
-    },
-    children
-  );
+      ...props,
+      children
+    }
+  ) });
 };
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalClose = DialogPrimitive.Close;
 var ModalPortal = DialogPrimitive.Portal;
+var ModalHeaderCloseButton = () => /* @__PURE__ */ jsx(ModalClose, { asChild: true, children: /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    size: "small",
+    isBare: true,
+    icon: /* @__PURE__ */ jsx(Close2, { "aria-hidden": "true" }),
+    "aria-label": MODAL_CLOSE_LABEL
+  }
+) });
 var ModalOverlay = forwardRef(
-  ({ className, style, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
     {
       ref,
@@ -76,89 +124,237 @@ var ModalContent = forwardRef(
     backdropProps,
     backDropProps,
     contentProps = {},
+    portalProps = {},
     ...restProps
   }, ref) => {
     const resolvedBackdropProps = backdropProps ?? backDropProps ?? {};
-    return /* @__PURE__ */ React.createElement(ModalPortal, null, /* @__PURE__ */ React.createElement(
-      ModalOverlay,
-      {
-        ...resolvedBackdropProps,
-        className: cx(resolvedBackdropProps.className),
-        style: { ...resolvedBackdropProps.style }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      DialogPrimitive.Content,
-      {
-        ref,
-        className: cx(
-          "fixed left-1/2 top-1/2 max-h-[92vh] -translate-x-1/2 -translate-y-1/2",
-          "bg-bg-base text-fg-base shadow-xl outline-none rounded-2xl border border-border-subtle",
-          "flex flex-col overflow-hidden",
-          "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
-          getSizeClasses(size),
-          className
-        ),
-        style: { zIndex: MODAL_CONTENT_Z_INDEX, ...style },
-        ...contentProps,
-        ...restProps
-      },
-      children
-    ));
+    const { className: backdropClassName, style: backdropStyle, ...overlayProps } = resolvedBackdropProps;
+    return /* @__PURE__ */ jsxs(ModalPortal, { ...portalProps, children: [
+      /* @__PURE__ */ jsx(
+        ModalOverlay,
+        {
+          ...overlayProps,
+          className: cx(backdropClassName),
+          style: { ...backdropStyle }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cx(
+            MODAL_SURFACE_CLASSES,
+            getSizeClasses(size),
+            className
+          ),
+          style: { zIndex: MODAL_CONTENT_Z_INDEX, ...style },
+          ...contentProps,
+          ...restProps,
+          children
+        }
+      )
+    ] });
   }
 );
 ModalContent.displayName = "ModalContent";
-var ModalHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    ref,
-    className: cx(
-      "flex flex-col gap-4 px-20 py-16 border-b border-border-subtle",
-      className
-    ),
-    ...props
-  }
-));
+var ModalHeader = forwardRef(({ className, children, ...props }, ref) => {
+  const { hasOnClose } = useContext(ModalContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(MODAL_HEADER_CLASSES, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: MODAL_HEADER_CONTENT_CLASSES, children }),
+        hasOnClose ? /* @__PURE__ */ jsx(ModalHeaderCloseButton, {}) : null
+      ]
+    }
+  );
+});
 ModalHeader.displayName = "ModalHeader";
-var ModalBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+var ModalBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
-    className: cx("flex-1 overflow-auto px-20 py-16", className),
+    className: cx(MODAL_BODY_CLASSES, className),
     ...props
   }
 ));
 ModalBody.displayName = "ModalBody";
-var ModalFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+var ModalFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
-    className: cx(
-      "flex items-center justify-end gap-8 px-20 py-16 border-t border-border-subtle",
-      className
-    ),
+    className: cx(MODAL_FOOTER_CLASSES, className),
     ...props
   }
 ));
 ModalFooter.displayName = "ModalFooter";
-var ModalTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+var ModalTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
-    className: cx("text-lg font-semibold text-fg-base", className),
+    className: cx(MODAL_TITLE_CLASSES, className),
     ...props
   }
 ));
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+var ModalDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
-    className: cx("text-sm text-fg-subtle", className),
+    className: cx(MODAL_DESCRIPTION_CLASSES, className),
     ...props
   }
 ));
 ModalDescription.displayName = "ModalDescription";
+
+// src/elements/ConfirmationDialog.tsx
+import { forwardRef as forwardRef2, useId, useRef, useState } from "react";
+import { Button } from "@edux-design/buttons";
+import { cx as cx2 } from "@edux-design/utils";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ConfirmationDialog = forwardRef2(function ConfirmationDialog2({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  modal = true,
+  title,
+  description,
+  children,
+  trigger,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  pendingLabel = "Working\u2026",
+  pending = false,
+  error,
+  confirmDisabled = false,
+  cancelDisabled = false,
+  dismissible = true,
+  returnFocusRef,
+  isDanger = false,
+  allowDismissWhilePending = false,
+  size = "small",
+  contentProps = {},
+  backdropProps,
+  portalProps,
+  confirmButtonProps = {},
+  cancelButtonProps = {}
+}, ref) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const resolvedOpen = open ?? uncontrolledOpen;
+  const cancelRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const statusId = useId();
+  const locked = !dismissible || pending && !allowDismissWhilePending;
+  const hasBody = children != null || Boolean(error) || pending;
+  const {
+    onClick: onCancelClick,
+    ref: actionRef,
+    ...cancelProps
+  } = cancelButtonProps;
+  const { onClick: onConfirmClick, ...confirmProps } = confirmButtonProps;
+  const requestOpen = (next) => {
+    if (!next && locked) return;
+    if (open === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs2(Modal, { open: resolvedOpen, onOpenChange: requestOpen, modal, children: [
+    trigger && /* @__PURE__ */ jsx2(ModalTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs2(
+      ModalContent,
+      {
+        ...contentProps,
+        ref,
+        size,
+        backdropProps,
+        portalProps,
+        ...!description && !contentProps["aria-describedby"] ? { "aria-describedby": void 0 } : {},
+        "aria-busy": pending || void 0,
+        className: cx2("motion-reduce:animate-none", contentProps.className),
+        onOpenAutoFocus: (event) => {
+          previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+          contentProps.onOpenAutoFocus?.(event);
+          if (!event.defaultPrevented) {
+            event.preventDefault();
+            if (!locked && !cancelDisabled) cancelRef.current?.focus();
+            else if (event.target instanceof HTMLElement) event.target.focus();
+          }
+        },
+        onCloseAutoFocus: (event) => {
+          contentProps.onCloseAutoFocus?.(event);
+          const target = returnFocusRef?.current ?? (!trigger ? previousFocusRef.current : null);
+          if (!event.defaultPrevented && target?.isConnected) {
+            event.preventDefault();
+            target.focus();
+          }
+        },
+        onEscapeKeyDown: (event) => {
+          contentProps.onEscapeKeyDown?.(event);
+          if (locked) event.preventDefault();
+        },
+        onInteractOutside: (event) => {
+          contentProps.onInteractOutside?.(event);
+          if (locked) event.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsxs2(ModalHeader, { className: !hasBody ? "border-b-0" : void 0, children: [
+            /* @__PURE__ */ jsx2(ModalTitle, { children: title }),
+            description && /* @__PURE__ */ jsx2(ModalDescription, { children: description })
+          ] }),
+          hasBody && /* @__PURE__ */ jsxs2(ModalBody, { className: "min-h-0 text-sm text-fg-base", children: [
+            children,
+            error && /* @__PURE__ */ jsx2("div", { role: "alert", className: "mt-8 text-fg-danger-emphasis", children: error }),
+            pending && /* @__PURE__ */ jsx2("p", { id: statusId, role: "status", className: "sr-only", children: pendingLabel })
+          ] }),
+          /* @__PURE__ */ jsxs2(ModalFooter, { className: "flex-wrap", children: [
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                ...cancelProps,
+                ref: (node) => {
+                  cancelRef.current = node;
+                  if (typeof actionRef === "function") actionRef(node);
+                  else if (actionRef) actionRef.current = node;
+                },
+                type: "button",
+                size: "small",
+                isSecondary: true,
+                disabled: locked || cancelDisabled,
+                onClick: (event) => {
+                  onCancelClick?.(event);
+                  if (!event.defaultPrevented) onCancel?.(event);
+                  if (!event.defaultPrevented) requestOpen(false);
+                },
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                ...confirmProps,
+                type: "button",
+                size: "small",
+                isDanger,
+                disabled: pending || confirmDisabled,
+                onClick: (event) => {
+                  onConfirmClick?.(event);
+                  if (!event.defaultPrevented) onConfirm(event);
+                },
+                children: pending ? pendingLabel : confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+});
 export {
+  ConfirmationDialog,
   Modal,
   ModalBody,
   ModalClose,

package/docs/confirmation.md

@@ -0,0 +1,117 @@
+# ConfirmationDialog
+
+Import `ConfirmationDialog` and `ConfirmationDialogProps` from `@edux-design/modals`.
+It composes the existing Modal root, surface, title/description and sections, retaining
+its focus trap, overlay, size presets and high overlay stacking order.
+
+```tsx
+const [open, setOpen] = useState(false);
+const [pending, setPending] = useState(false);
+const [error, setError] = useState("");
+
+<ConfirmationDialog
+  open={open}
+  onOpenChange={setOpen}
+  title="Remove this upload?"
+  description="This permanently removes the unpublished font file."
+  trigger={<Button>Review removal</Button>}
+  confirmLabel="Remove upload"
+  pendingLabel="Removing…"
+  isDanger
+  pending={pending}
+  error={error}
+  onConfirm={async () => {
+    setPending(true);
+    setError("");
+    try {
+      if (await removeUpload()) setOpen(false);
+      else setError("The upload could not be removed. Please try again.");
+    } catch {
+      setError("The upload could not be removed. Please try again.");
+    } finally {
+      setPending(false);
+    }
+  }}
+>
+  <p>{filename}</p>
+</ConfirmationDialog>;
+```
+
+`trigger` is optional for an editor/API-opened request. A supplied trigger is a
+single ref-forwarding element composed with `ModalTrigger asChild`, preserving its
+existing handlers and ref. Triggerless dialogs remember the previously focused
+connected element; supplied triggers use Radix return focus. Use an explicit
+`returnFocusRef` when deleting that origin, and the preventable close-autofocus hook
+when the host intentionally focuses the editor.
+
+`size` defaults to `small`; `medium`, `large` and `full` retain existing Modal bounds.
+`backdropProps` forwards the overlay's native attributes/classes.
+`portalProps` forwards Radix Dialog Portal options, including a theme-scoped container.
+The additive `ModalContent portalProps` capability is also public for ordinary Modal
+consumers; default Modal portal behaviour is unchanged.
+
+Both confirmations leave mutation policy in the host. They never await, interpret,
+catch, or auto-close after `onConfirm`: synchronous commands, promises, false results,
+blocking document errors and retriable service errors can keep their own lifecycle.
+An async handler must catch its own rejection and update its own `pending`/`error`.
+Nothing schedules asynchronous component state after the callback.
+
+`open` is authoritative when supplied. Omit it and use `defaultOpen` for an
+uncontrolled presentation; `onOpenChange(next)` reports user requests in either mode.
+Confirm does not close even in uncontrolled mode: use controlled state when success
+must close the presentation. `onCancel(event)` only reports the Cancel button;
+Escape and outside dismissal report through `onOpenChange`, without pretending to
+be a Cancel activation.
+
+Actions use Edux `Button`, default to `type="button"`, and wrap on narrow surfaces.
+The default confirm action is neutral. Set `isDanger` for destructive actions.
+`confirmDisabled` and `cancelDisabled` independently disable their respective
+buttons. An error renders a `role="alert"`; an error alone does not disable retry.
+For a stale editor/document error, the host also sets `confirmDisabled`.
+
+While `pending`, both actions are disabled, the surface has `aria-busy`, and
+`pendingLabel` (default “Working…”) replaces the confirm text and is exposed as a
+status. Escape, outside pointer/focus dismissal, Cancel, and trigger toggle requests
+cannot close the presentation. `allowDismissWhilePending` explicitly unlocks user
+cancellation while confirm remains disabled; use it only when the host permits that
+policy. `dismissible={false}` locks user dismissal regardless of pending. A controlled
+host can always set `open={false}`, for example after confirmed success. There is no
+implicit header X action to bypass these rules.
+
+Safe initial focus goes to Cancel. If Cancel is unavailable, focus stays on the
+surface rather than choosing the destructive action. Native `contentProps`
+`onOpenAutoFocus`/`onCloseAutoFocus` can call `event.preventDefault()` to replace the
+focus policy; these hooks run first. `returnFocusRef` supplies an explicit return
+target when the originating row might disappear. For an editor command that places
+its own selection/focus, prevent close autofocus so automatic restoration cannot
+undo that command. A missing or disconnected return target is not focused.
+
+`contentProps` forwards native attributes, style/className, keyboard/pointer events,
+and Radix focus/dismissal hooks. The surface ref is an `HTMLDivElement`.
+`confirmButtonProps`/`cancelButtonProps` forward native button attributes, refs and
+mouse/keyboard handlers. Their click handlers run before `onConfirm`/`onCancel`;
+`preventDefault()` vetoes the corresponding action, and `stopPropagation()` remains
+available for editable/sortable row adapters. Forced action type, disabled state and
+pending guards take precedence. Caller dismissal hooks run first, then the internal
+lock always prevents dismissal while locked; a handler cannot accidentally undo it.
+
+Each surface is a labelled `dialog`, with a meaningful description when provided.
+Confirmation is a decision, so it uses ordinary buttons rather than menu navigation.
+It does not automatically claim urgent `alertdialog` semantics. A caller may set
+`contentProps.role="alertdialog"` when that semantic is appropriate. Error messages
+have alert semantics separately. IDs remain unique across instances.
+
+Use current semantic surface/foreground/border/action/danger tokens. There are no
+new tokens or package-owned palettes, and theme switching does not change geometry.
+Pass `portalProps.container` when a brand/mode scope is below the document root;
+put `brand--blue`/`brand--teal` and `theme--light`/`theme--dark` on that same scope.
+Default portals inherit the application root theme. Native reduced-motion rules
+apply; the compositions also disable their surface animation for reduced motion.
+The primitives keep collision/viewport bounds, content scrolls, and footer actions
+wrap. Domain checks, permissions, editor resolver registration, persistence, source
+warnings, server mutation and cancellation remain local.
+
+Storybook: `Modals/ConfirmationDialog` includes destructive and neutral actions,
+bodyless content, warnings, async pending/error/retry, blocking errors, narrow content,
+and light/dark blue/teal scopes. Component tests exercise real Radix focus and dismissal,
+not mocked primitives. Public type/runtime fixtures live under `test/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/modals",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -8,18 +8,11 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
-  "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.js --format esm,cjs --external react,react-dom,@edux-design/utils,@edux-design/buttons,@edux-design/icons,@radix-ui/react-dialog",
-    "dev": "tsup src/index.js --watch --format esm,cjs --external react,react-dom,@edux-design/utils,@edux-design/buttons,@edux-design/icons,@radix-ui/react-dialog",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit"
-  },
   "dependencies": {
     "@edux-design/buttons": "*",
     "@edux-design/icons": "*"
@@ -30,12 +23,12 @@
     "@edux-design/utils": "*",
     "@radix-ui/react-dialog": "1.1.5"
   },
-  "devDependencies": {
-    "typescript": "^5.9.2",
-    "tailwindcss": "^4.1.12",
-    "postcss": "^8.5.6",
-    "tsup": "^8.5.0",
-    "@tailwindcss/cli": "^4.1.12",
-    "@tailwindcss/postcss": "^4.1.12"
-  }
+  "files": [
+    "dist",
+    "docs",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "LICENSE.md"
+  ]
 }