import * as React from 'react' import { cn } from '../core/cn' type KPICardSize = 'sm' | 'default' | 'lg' interface Delta { value: number isPositive: boolean } interface KPICardProps extends React.HTMLAttributes { label: string value: string | number delta?: Delta icon?: React.ReactNode subtitle?: string size?: KPICardSize } const sizeStyles: Record = { sm: { value: 'text-2xl font-bold', label: 'text-xs' }, default: { value: 'text-3xl font-bold', label: 'text-sm' }, lg: { value: 'text-4xl font-bold', label: 'text-base' }, } const KPICard = React.forwardRef( ({ label, value, delta, icon, subtitle, size = 'default', className, ...props }, ref) => { const styles = sizeStyles[size] const deltaColor = delta ? delta.value === 0 ? 'text-muted-foreground' : delta.isPositive ? 'text-green-600 dark:text-green-500' : 'text-red-600 dark:text-red-500' : '' return (

{label}

{subtitle &&

{subtitle}

}
{icon &&
{icon}
}

{value}

{delta && (
{delta.value > 0 ? '+' : ''}{delta.value}%
)}
) } ) KPICard.displayName = 'KPICard' export { KPICard, type KPICardProps, type Delta, type KPICardSize }