@edux-design/modals 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,10 +1,27 @@
 # @edux-design/modals
 
+## 0.2.0
+
+### Minor Changes
+
+- Add controlled confirmation dialog and anchored popover compositions with pending dismissal policy, error/retry content and safe focus handling. Generate declared public types for both packages.
+
+### Patch Changes
+
+- Updated dependencies
+  - @edux-design/buttons@0.3.0
+
+## 0.1.3
+
+### Patch Changes
+
+- Rebuilt distribution artifacts.
+
 ## 0.1.2
 
 ### Patch Changes
 
-- Updated design tokens
+- Updated design tokens.
 
 ## 0.1.1
 

package/README.md

@@ -63,3 +63,17 @@ export function PublishModal() {
 Passing `onClose` to `Modal` also enables the default close icon inside `ModalHeader`.
 
 `ModalContent` accepts `size`, `backdropProps`, the legacy alias `backDropProps`, `className`, and `contentProps`. Storybook examples live in `src/demos/Modal.stories.jsx`.
+
+### Size contracts
+
+The `small`, `medium`, `large`, and `full` values are named component-owned width
+contracts. They intentionally use responsive `min()` and viewport constraints so
+the modal keeps its current geometry across screen sizes. These values are not
+global width tokens: the design-token standards keep calculated, component-specific
+surface dimensions local until multiple unrelated components share the same role.
+
+Unknown `size` values fall back to `medium` for compatibility.
+
+## Additional components
+
+[Confirmation dialogs](./docs/confirmation.md).

package/dist/index.d.mts

@@ -0,0 +1,78 @@
+import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
+import React from 'react';
+
+/** @type {React.FC<ModalProps>} */
+declare const Modal: React.FC<ModalProps>;
+declare const ModalTrigger: React.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalClose: React.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalPortal: React.FC<_radix_ui_react_dialog.DialogPortalProps>;
+/** @type {React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalOverlay: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalTitleProps & React.RefAttributes<HTMLHeadingElement>>} */
+declare const ModalTitle: React.ForwardRefExoticComponent<ModalTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalDescriptionProps & React.RefAttributes<HTMLParagraphElement>>} */
+declare const ModalDescription: React.ForwardRefExoticComponent<ModalDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+type ModalProps = _radix_ui_react_dialog.DialogProps & {
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+type ModalContentProps = _radix_ui_react_dialog.DialogContentProps & {
+    size?: "small" | "medium" | "large" | "full";
+    backdropProps?: _radix_ui_react_dialog.DialogOverlayProps;
+    backDropProps?: _radix_ui_react_dialog.DialogOverlayProps;
+    contentProps?: _radix_ui_react_dialog.DialogContentProps;
+    portalProps?: _radix_ui_react_dialog.DialogPortalProps;
+};
+type ModalOverlayProps = _radix_ui_react_dialog.DialogOverlayProps;
+type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalTitleProps = _radix_ui_react_dialog.DialogTitleProps;
+type ModalDescriptionProps = _radix_ui_react_dialog.DialogDescriptionProps;
+
+type ConfirmationDialogActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & React.RefAttributes<HTMLButtonElement>;
+interface ConfirmationDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    /** A single ref-forwarding button. Omit for an externally opened dialog. */
+    trigger?: React.ReactElement;
+    onConfirm: React.MouseEventHandler<HTMLButtonElement>;
+    onCancel?: React.MouseEventHandler<HTMLButtonElement>;
+    confirmLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    pendingLabel?: React.ReactNode;
+    pending?: boolean;
+    error?: React.ReactNode;
+    confirmDisabled?: boolean;
+    cancelDisabled?: boolean;
+    /** Locks user dismissal. The controlled host may still close explicitly. */
+    dismissible?: boolean;
+    /** Explicit return target, useful when confirmation removes its own trigger. */
+    returnFocusRef?: React.RefObject<HTMLElement | null>;
+    isDanger?: boolean;
+    /** Pending confirmations block every user dismissal unless explicitly enabled. */
+    allowDismissWhilePending?: boolean;
+    size?: "small" | "medium" | "large" | "full";
+    contentProps?: Omit<_radix_ui_react_dialog.DialogContentProps, "children" | "asChild">;
+    backdropProps?: _radix_ui_react_dialog.DialogOverlayProps;
+    portalProps?: _radix_ui_react_dialog.DialogPortalProps;
+    confirmButtonProps?: ConfirmationDialogActionProps;
+    cancelButtonProps?: ConfirmationDialogActionProps;
+}
+/** Controlled confirmation. The host owns mutations, pending/error state and success closure. */
+declare const ConfirmationDialog: React.ForwardRefExoticComponent<ConfirmationDialogProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ConfirmationDialog, type ConfirmationDialogActionProps, type ConfirmationDialogProps, Modal, ModalBody, type ModalBodyProps, ModalClose, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, type ModalOverlayProps, ModalPortal, type ModalProps, ModalTitle, type ModalTitleProps, ModalTrigger };

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
+import React from 'react';
+
+/** @type {React.FC<ModalProps>} */
+declare const Modal: React.FC<ModalProps>;
+declare const ModalTrigger: React.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalClose: React.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalPortal: React.FC<_radix_ui_react_dialog.DialogPortalProps>;
+/** @type {React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalOverlay: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalTitleProps & React.RefAttributes<HTMLHeadingElement>>} */
+declare const ModalTitle: React.ForwardRefExoticComponent<ModalTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/** @type {React.ForwardRefExoticComponent<ModalDescriptionProps & React.RefAttributes<HTMLParagraphElement>>} */
+declare const ModalDescription: React.ForwardRefExoticComponent<ModalDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+type ModalProps = _radix_ui_react_dialog.DialogProps & {
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+type ModalContentProps = _radix_ui_react_dialog.DialogContentProps & {
+    size?: "small" | "medium" | "large" | "full";
+    backdropProps?: _radix_ui_react_dialog.DialogOverlayProps;
+    backDropProps?: _radix_ui_react_dialog.DialogOverlayProps;
+    contentProps?: _radix_ui_react_dialog.DialogContentProps;
+    portalProps?: _radix_ui_react_dialog.DialogPortalProps;
+};
+type ModalOverlayProps = _radix_ui_react_dialog.DialogOverlayProps;
+type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalTitleProps = _radix_ui_react_dialog.DialogTitleProps;
+type ModalDescriptionProps = _radix_ui_react_dialog.DialogDescriptionProps;
+
+type ConfirmationDialogActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & React.RefAttributes<HTMLButtonElement>;
+interface ConfirmationDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    /** A single ref-forwarding button. Omit for an externally opened dialog. */
+    trigger?: React.ReactElement;
+    onConfirm: React.MouseEventHandler<HTMLButtonElement>;
+    onCancel?: React.MouseEventHandler<HTMLButtonElement>;
+    confirmLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    pendingLabel?: React.ReactNode;
+    pending?: boolean;
+    error?: React.ReactNode;
+    confirmDisabled?: boolean;
+    cancelDisabled?: boolean;
+    /** Locks user dismissal. The controlled host may still close explicitly. */
+    dismissible?: boolean;
+    /** Explicit return target, useful when confirmation removes its own trigger. */
+    returnFocusRef?: React.RefObject<HTMLElement | null>;
+    isDanger?: boolean;
+    /** Pending confirmations block every user dismissal unless explicitly enabled. */
+    allowDismissWhilePending?: boolean;
+    size?: "small" | "medium" | "large" | "full";
+    contentProps?: Omit<_radix_ui_react_dialog.DialogContentProps, "children" | "asChild">;
+    backdropProps?: _radix_ui_react_dialog.DialogOverlayProps;
+    portalProps?: _radix_ui_react_dialog.DialogPortalProps;
+    confirmButtonProps?: ConfirmationDialogActionProps;
+    cancelButtonProps?: ConfirmationDialogActionProps;
+}
+/** Controlled confirmation. The host owns mutations, pending/error state and success closure. */
+declare const ConfirmationDialog: React.ForwardRefExoticComponent<ConfirmationDialogProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ConfirmationDialog, type ConfirmationDialogActionProps, type ConfirmationDialogProps, Modal, ModalBody, type ModalBodyProps, ModalClose, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, type ModalOverlayProps, ModalPortal, type ModalProps, ModalTitle, type ModalTitleProps, ModalTrigger };

package/dist/index.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  ConfirmationDialog: () => ConfirmationDialog,
   Modal: () => Modal,
   ModalBody: () => ModalBody,
   ModalClose: () => ModalClose,
@@ -47,20 +48,49 @@ module.exports = __toCommonJS(index_exports);
 var import_react = __toESM(require("react"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_utils = require("@edux-design/utils");
+var import_buttons = require("@edux-design/buttons");
+var import_icons = require("@edux-design/icons");
+var import_jsx_runtime = require("react/jsx-runtime");
 var MODAL_OVERLAY_Z_INDEX = 2147483645;
 var MODAL_CONTENT_Z_INDEX = 2147483646;
+var ModalContext = (0, import_react.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,
@@ -71,33 +101,46 @@ var Modal = ({
   children,
   ...props
 }) => {
+  const contextValue = (0, import_react.useMemo)(
+    () => ({ hasOnClose: typeof onClose === "function" }),
+    [onClose]
+  );
   const handleOpenChange = (0, import_react.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__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ModalClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_buttons.IconButton,
+  {
+    size: "small",
+    isBare: true,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Close, { "aria-hidden": "true" }),
+    "aria-label": MODAL_CLOSE_LABEL
+  }
+) });
 var ModalOverlay = (0, import_react.forwardRef)(
-  ({ className, style, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
+  ({ className, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     DialogPrimitive.Overlay,
     {
       ref,
@@ -121,90 +164,238 @@ var ModalContent = (0, import_react.forwardRef)(
     backdropProps,
     backDropProps,
     contentProps = {},
+    portalProps = {},
     ...restProps
   }, ref) => {
     const resolvedBackdropProps = backdropProps ?? backDropProps ?? {};
-    return /* @__PURE__ */ import_react.default.createElement(ModalPortal, null, /* @__PURE__ */ import_react.default.createElement(
-      ModalOverlay,
-      {
-        ...resolvedBackdropProps,
-        className: (0, import_utils.cx)(resolvedBackdropProps.className),
-        style: { ...resolvedBackdropProps.style }
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      DialogPrimitive.Content,
-      {
-        ref,
-        className: (0, import_utils.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__ */ (0, import_jsx_runtime.jsxs)(ModalPortal, { ...portalProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ModalOverlay,
+        {
+          ...overlayProps,
+          className: (0, import_utils.cx)(backdropClassName),
+          style: { ...backdropStyle }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: (0, import_utils.cx)(
+            MODAL_SURFACE_CLASSES,
+            getSizeClasses(size),
+            className
+          ),
+          style: { zIndex: MODAL_CONTENT_Z_INDEX, ...style },
+          ...contentProps,
+          ...restProps,
+          children
+        }
+      )
+    ] });
   }
 );
 ModalContent.displayName = "ModalContent";
-var ModalHeader = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
-  "div",
-  {
-    ref,
-    className: (0, import_utils.cx)(
-      "flex flex-col gap-4 px-20 py-16 border-b border-border-subtle",
-      className
-    ),
-    ...props
-  }
-));
+var ModalHeader = (0, import_react.forwardRef)(({ className, children, ...props }, ref) => {
+  const { hasOnClose } = (0, import_react.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_utils.cx)(MODAL_HEADER_CLASSES, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: MODAL_HEADER_CONTENT_CLASSES, children }),
+        hasOnClose ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHeaderCloseButton, {}) : null
+      ]
+    }
+  );
+});
 ModalHeader.displayName = "ModalHeader";
-var ModalBody = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
+var ModalBody = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "div",
   {
     ref,
-    className: (0, import_utils.cx)("flex-1 overflow-auto px-20 py-16", className),
+    className: (0, import_utils.cx)(MODAL_BODY_CLASSES, className),
     ...props
   }
 ));
 ModalBody.displayName = "ModalBody";
-var ModalFooter = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
+var ModalFooter = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "div",
   {
     ref,
-    className: (0, import_utils.cx)(
-      "flex items-center justify-end gap-8 px-20 py-16 border-t border-border-subtle",
-      className
-    ),
+    className: (0, import_utils.cx)(MODAL_FOOTER_CLASSES, className),
     ...props
   }
 ));
 ModalFooter.displayName = "ModalFooter";
-var ModalTitle = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
+var ModalTitle = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   DialogPrimitive.Title,
   {
     ref,
-    className: (0, import_utils.cx)("text-lg font-semibold text-fg-base", className),
+    className: (0, import_utils.cx)(MODAL_TITLE_CLASSES, className),
     ...props
   }
 ));
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
+var ModalDescription = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   DialogPrimitive.Description,
   {
     ref,
-    className: (0, import_utils.cx)("text-sm text-fg-subtle", className),
+    className: (0, import_utils.cx)(MODAL_DESCRIPTION_CLASSES, className),
     ...props
   }
 ));
 ModalDescription.displayName = "ModalDescription";
+
+// src/elements/ConfirmationDialog.tsx
+var import_react2 = require("react");
+var import_buttons2 = require("@edux-design/buttons");
+var import_utils2 = require("@edux-design/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ConfirmationDialog = (0, import_react2.forwardRef)(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] = (0, import_react2.useState)(defaultOpen);
+  const resolvedOpen = open ?? uncontrolledOpen;
+  const cancelRef = (0, import_react2.useRef)(null);
+  const previousFocusRef = (0, import_react2.useRef)(null);
+  const statusId = (0, import_react2.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__ */ (0, import_jsx_runtime2.jsxs)(Modal, { open: resolvedOpen, onOpenChange: requestOpen, modal, children: [
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      ModalContent,
+      {
+        ...contentProps,
+        ref,
+        size,
+        backdropProps,
+        portalProps,
+        ...!description && !contentProps["aria-describedby"] ? { "aria-describedby": void 0 } : {},
+        "aria-busy": pending || void 0,
+        className: (0, import_utils2.cx)("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__ */ (0, import_jsx_runtime2.jsxs)(ModalHeader, { className: !hasBody ? "border-b-0" : void 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalTitle, { children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalDescription, { children: description })
+          ] }),
+          hasBody && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ModalBody, { className: "min-h-0 text-sm text-fg-base", children: [
+            children,
+            error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "alert", className: "mt-8 text-fg-danger-emphasis", children: error }),
+            pending && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id: statusId, role: "status", className: "sr-only", children: pendingLabel })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ModalFooter, { className: "flex-wrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_buttons2.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__ */ (0, import_jsx_runtime2.jsx)(
+              import_buttons2.Button,
+              {
+                ...confirmProps,
+                type: "button",
+                size: "small",
+                isDanger,
+                disabled: pending || confirmDisabled,
+                onClick: (event) => {
+                  onConfirmClick?.(event);
+                  if (!event.defaultPrevented) onConfirm(event);
+                },
+                children: pending ? pendingLabel : confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ConfirmationDialog,
   Modal,
   ModalBody,
   ModalClose,