@umituz/web-design-system 4.7.0 → 4.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "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

@@ -512,6 +512,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} />);

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>
                 )}