@umituz/web-design-system 4.7.1 → 4.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

package/src/__tests__/components.smoke.test.tsx

@@ -32,6 +32,7 @@ import { Drawer } from '../presentation/organisms/Drawer';
 import { Timeline } from '../presentation/organisms/Timeline';
 import { Checklist } from '../presentation/organisms/Checklist';
 import { FormModal } from '../presentation/organisms/FormModal';
+import { ConfirmDialog } from '../presentation/organisms/ConfirmDialog';
 import { BatteryPill } from '../presentation/atoms/BatteryPill';
 import { Kbd } from '../presentation/atoms/Kbd';
 
@@ -880,4 +881,20 @@ describe('accessia supersets', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Create' }));
     expect(onSubmit).toHaveBeenCalledWith({ welcome: true });
   });
+
+  it('ConfirmDialog confirms and closes, cancel only closes', () => {
+    const onConfirm = vi.fn();
+    const onClose = vi.fn();
+    render(
+      <ConfirmDialog title="Delete row?" body="This cannot be undone." confirmLabel="Delete" onConfirm={onConfirm} onClose={onClose} />,
+    );
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByText('This cannot be undone.')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onConfirm).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
 });

package/src/presentation/organisms/ConfirmDialog.tsx

@@ -0,0 +1,42 @@
+/**
+ * ConfirmDialog Component (Organism)
+ * @description Destructive/primary confirmation built on Modal: title, body and
+ * Cancel + confirm actions; unmounts itself after confirming
+ */
+
+import type { ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Modal } from './Modal';
+
+export interface ConfirmDialogProps {
+  title: ReactNode;
+  body?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Visual weight of the confirm action; defaults to danger. */
+  tone?: 'danger' | 'primary';
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function ConfirmDialog({ title, body, confirmLabel = 'Confirm', cancelLabel = 'Cancel', tone = 'danger', onConfirm, onClose }: ConfirmDialogProps) {
+  return (
+    <Modal
+      open
+      danger={tone === 'danger'}
+      title={title}
+      description={body}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="secondary" size="sm" onClick={onClose}>
+            {cancelLabel}
+          </Button>
+          <Button variant={tone === 'danger' ? 'danger' : 'default'} size="sm" onClick={() => { onConfirm(); onClose(); }}>
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/src/presentation/organisms/index.ts

@@ -137,3 +137,6 @@ export type {
   FormModalValues,
   FormStep,
 } from './FormModal';
+
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';