@umituz/web-design-system 4.10.0 → 4.11.0

package/package.json

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

@@ -511,6 +511,11 @@ describe('fleet surface supersets', () => {
     expect(container.querySelector('.text-destructive')).not.toBeNull();
   });
 
+  it('KpiCard valueTone paints the metric value', () => {
+    const { container } = render(<KpiCard label="Overdue" value="7" valueTone="destructive" />);
+    expect(container.querySelector('.text-2xl')!.className).toContain('text-destructive');
+  });
+
   it('KpiCard alert applies destructive emphasis', () => {
     const { container } = render(<KpiCard label="Offline" value="3" alert />);
     const el = container.firstChild as HTMLElement;

package/src/presentation/organisms/KpiCard.tsx

@@ -25,6 +25,8 @@ export interface KpiCardProps extends HTMLAttributes<HTMLDivElement>, BaseProps
   hint?: ReactNode;
   icon?: ReactNode;
   iconTone?: KpiIconTone;
+  /** Paints the metric value itself, e.g. red for an over-budget figure. */
+  valueTone?: KpiIconTone;
   spark?: readonly number[];
   sparkTone?: KpiIconTone;
   /** Danger emphasis for metrics that need attention, e.g. open incidents. */
@@ -43,7 +45,7 @@ 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) => {
+  ({ className, label, value, delta, hint, icon, iconTone = 'primary', valueTone, 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';
@@ -67,7 +69,7 @@ export const KpiCard = forwardRef<HTMLDivElement, KpiCardProps>(
           <div className="flex items-start justify-between gap-3">
             <div className="min-w-0">
               <p className="truncate text-sm font-medium text-muted-foreground">{label}</p>
-              <p className="mt-1 text-2xl font-semibold leading-none tracking-tight">{value}</p>
+              <p className={cn('mt-1 text-2xl font-semibold leading-none tracking-tight', valueTone === 'success' && 'text-success', valueTone === 'warning' && 'text-warning', valueTone === 'destructive' && 'text-destructive', valueTone === 'info' && 'text-info', valueTone === 'violet' && 'text-violet-600', valueTone === 'muted' && 'text-muted-foreground')}>{value}</p>
             </div>
             {icon !== undefined && (
               <span className={cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4', toneTextClasses[iconTone])}>