@umituz/web-design-system 4.7.0 → 4.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.7.0",
+  "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';
 
@@ -512,6 +513,14 @@ describe('fleet surface supersets', () => {
     expect(el.className).toContain('bg-destructive');
   });
 
+  it('KpiCard flat delta renders muted without an icon', () => {
+    const { container } = render(<KpiCard label="Renewals" value="4" delta={{ value: '4 renew ≤45d', direction: 'flat' }} />);
+    expect(container.textContent).toContain('4 renew ≤45d');
+    const delta = container.querySelector('.text-muted-foreground + span, span.inline-flex');
+    expect(container.querySelector('svg.lucide-trending-up, svg.lucide-trending-down')).toBeNull();
+    expect(delta).not.toBeNull();
+  });
+
   it('KpiCard onClick is interactive and fires', () => {
     const onClick = vi.fn();
     const { container } = render(<KpiCard label="Open" value="7" onClick={onClick} />);
@@ -872,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/KpiCard.tsx

@@ -14,7 +14,7 @@ export type KpiIconTone = 'primary' | 'success' | 'warning' | 'destructive' | 'i
 
 export interface KpiDelta {
   value: ReactNode;
-  direction?: 'up' | 'down';
+  direction?: 'up' | 'down' | 'flat';
   good?: boolean;
 }
 
@@ -45,8 +45,9 @@ const toneTextClasses: Record<KpiIconTone, string> = {
 export const KpiCard = forwardRef<HTMLDivElement, KpiCardProps>(
   ({ className, label, value, delta, hint, icon, iconTone = 'primary', spark, sparkTone = 'primary', alert, onClick, ...props }, ref) => {
     const deltaDirection = delta?.direction ?? (delta?.good === false ? 'down' : 'up');
+    const deltaFlat = deltaDirection === 'flat';
     const deltaGood = delta?.good ?? deltaDirection === 'up';
-    const DeltaIcon = deltaDirection === 'up' ? TrendingUp : TrendingDown;
+    const DeltaIcon = deltaFlat ? null : deltaDirection === 'up' ? TrendingUp : TrendingDown;
     const interactive = onClick !== undefined;
     return (
       <Card
@@ -81,10 +82,10 @@ export const KpiCard = forwardRef<HTMLDivElement, KpiCardProps>(
                   <span
                     className={cn(
                       'inline-flex items-center gap-1 font-medium',
-                      deltaGood ? 'text-success' : 'text-destructive'
+                      deltaFlat ? 'text-muted-foreground' : deltaGood ? 'text-success' : 'text-destructive'
                     )}
                   >
-                    <DeltaIcon className="h-3.5 w-3.5" />
+                    {DeltaIcon !== null && <DeltaIcon className="h-3.5 w-3.5" />}
                     {delta.value}
                   </span>
                 )}

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';