@umituz/web-design-system 4.30.0 → 4.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.30.0",
+  "version": "4.30.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/presentation/atoms/Sparkline.tsx

@@ -11,7 +11,7 @@ export interface SparklineProps extends Omit<SVGAttributes<SVGSVGElement>, 'data
   data: readonly number[];
   width?: number;
   height?: number;
-  tone?: 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'info' | 'muted' | 'violet';
+  tone?: 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'info' | 'muted' | 'violet' | 'danger' | 'neutral';
 }
 
 const toneClasses: Record<NonNullable<SparklineProps['tone']>, string> = {
@@ -23,6 +23,8 @@ const toneClasses: Record<NonNullable<SparklineProps['tone']>, string> = {
   info: 'text-info',
   muted: 'text-muted-foreground',
   violet: 'text-violet-600',
+  danger: 'text-destructive',
+  neutral: 'text-muted-foreground',
 };
 
 export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(

package/src/presentation/organisms/DataTable.tsx

@@ -57,7 +57,8 @@ export interface Column<T> {
   sortable?: boolean;
   align?: ColumnAlign;
   hideBelow?: ColumnHideBelow;
-  width?: string;
+  /** Pixels when numeric. */
+  width?: string | number;
   className?: string;
   /** Hidden until the reader enables it from the built-in columns menu. */
   optional?: boolean;
@@ -471,7 +472,7 @@ export function DataTable<T>({
               return (
                 <TableHead
                   key={column.id}
-                  style={column.width ? { width: column.width } : undefined}
+                  style={column.width ? { width: typeof column.width === 'number' ? `${column.width}px` : column.width } : undefined}
                   className={cn(
                     sizeStyles[size],
                     pxStyles[size],

package/src/presentation/organisms/KpiCard.tsx

@@ -10,7 +10,16 @@ import type { BaseProps } from '../../domain/types';
 import { Card, CardContent } from './Card';
 import { Sparkline } from '../atoms/Sparkline';
 
-export type KpiIconTone = 'primary' | 'success' | 'warning' | 'destructive' | 'info' | 'muted' | 'violet';
+export type KpiIconTone =
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'destructive'
+  | 'info'
+  | 'muted'
+  | 'violet'
+  | 'danger'
+  | 'neutral';
 
 export interface KpiDelta {
   value: ReactNode;
@@ -42,6 +51,8 @@ const toneTextClasses: Record<KpiIconTone, string> = {
   info: 'text-info bg-info/10',
   muted: 'text-muted-foreground bg-muted',
   violet: 'text-violet-600 bg-violet-500/10',
+  danger: 'text-destructive bg-destructive/10',
+  neutral: 'text-muted-foreground bg-muted',
 };
 
 export const KpiCard = forwardRef<HTMLDivElement, KpiCardProps>(
@@ -69,7 +80,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={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>
+              <p className={cn('mt-1 text-2xl font-semibold leading-none tracking-tight', valueTone === 'success' && 'text-success', valueTone === 'warning' && 'text-warning', (valueTone === 'destructive' || valueTone === 'danger') && 'text-destructive', valueTone === 'info' && 'text-info', valueTone === 'violet' && 'text-violet-600', (valueTone === 'muted' || valueTone === 'neutral') && '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])}>