fix(chart): proper recharts 3 types without any

- use TooltipContentProps/LegendPayload from recharts
- String(dataKey) for Key, cast formatter via unknown
- no eslint-disable, strict types pass

Follow-up to #48 which used any + eslint-disable

Author: ulises-jeremias

src/components/ui/chart.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
+import type { LegendPayload, TooltipContentProps } from 'recharts';
 
 import { cn } from '@/lib/utils';
 
@@ -94,19 +94,13 @@ const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
-  Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, 'content'> &
+  TooltipContentProps<number, string> &
     React.ComponentProps<'div'> & {
       hideLabel?: boolean;
       hideIndicator?: boolean;
       indicator?: 'line' | 'dot' | 'dashed';
       nameKey?: string;
       labelKey?: string;
-      payload?: any;
-      label?: any;
-      active?: boolean;
-      labelFormatter?: any;
-      formatter?: any;
-      color?: string;
       labelClassName?: string;
     }
 >(
@@ -170,21 +164,30 @@ const ChartTooltipContent = React.forwardRef<
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
-          {payload.map((item: any, index: number) => {
+          {payload.map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             const indicatorColor = color || item.payload.fill || item.color;
 
             return (
               <div
-                key={item.dataKey}
+                key={String(item.dataKey ?? item.name ?? index)}
                 className={cn(
                   'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
                   indicator === 'dot' && 'items-center',
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
+                  // Recharts 3 formatter expects ValueType/NameType, cast for compatibility
+                  (
+                    formatter as (
+                      value: unknown,
+                      name: unknown,
+                      item: unknown,
+                      index: number,
+                      payload: unknown,
+                    ) => React.ReactNode
+                  )(item.value, item.name, item, index, item.payload)
                 ) : (
                   <>
                     {itemConfig?.icon ? (
@@ -240,7 +243,7 @@ const ChartLegend = RechartsPrimitive.Legend;
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<'div'> & {
-    payload?: any[];
+    payload?: LegendPayload[];
     verticalAlign?: 'top' | 'bottom' | 'middle';
     hideIcon?: boolean;
     nameKey?: string;
@@ -257,7 +260,7 @@ const ChartLegendContent = React.forwardRef<
       ref={ref}
       className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}
     >
-      {payload.map((item: any) => {
+      {payload.map((item) => {
         const key = `${nameKey || item.dataKey || 'value'}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);