@neynar/ui 0.4.0 → 1.0.0

package/src/components/ui/chart.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 
@@ -7,69 +9,14 @@ import { cn } from "@/lib/utils";
 const THEMES = { light: "", dark: ".dark" } as const;
 
 /**
- * Configuration object for chart data series
- *
- * Defines labels, colors, and icons for chart data series with support for
- * both static colors and theme-aware color definitions. Each series can have
- * either a static color or theme-specific colors for light/dark modes.
- * This configuration drives both visual styling and accessibility features
- * throughout the chart ecosystem.
- *
- * @example
- * ```tsx
- * // Static color configuration with icon
- * const chartConfig = {
- *   revenue: {
- *     label: "Revenue",
- *     color: "hsl(var(--chart-1))",
- *     icon: DollarSignIcon,
- *   },
- * } satisfies ChartConfig
- * ```
- *
- * @example
- * ```tsx
- * // Theme-aware color configuration for dark/light modes
- * const chartConfig = {
- *   users: {
- *     label: "Active Users",
- *     theme: {
- *       light: "#0ea5e9",
- *       dark: "#0284c7",
- *     },
- *   },
- * } satisfies ChartConfig
- * ```
- *
- * @example
- * ```tsx
- * // Complex configuration with multiple series
- * const chartConfig = {
- *   desktop: {
- *     label: "Desktop Users",
- *     color: "var(--chart-1)",
- *     icon: MonitorIcon,
- *   },
- *   mobile: {
- *     label: "Mobile Users",
- *     color: "var(--chart-2)",
- *     icon: SmartphoneIcon,
- *   },
- *   revenue: {
- *     label: "Revenue ($)",
- *     theme: {
- *       light: "#059669",
- *       dark: "#10b981",
- *     },
- *   },
- * } satisfies ChartConfig
- * ```
- *
- * @since 1.0.0
+ * Configuration object for chart series, defining labels, colors, and icons.
+ * Supports both single colors and theme-aware color mappings for light/dark modes.
  */
 export type ChartConfig = {
   [k in string]: {
+    /** Label for the series displayed in tooltips and legends */
     label?: React.ReactNode;
+    /** Optional icon component to display alongside the series */
     icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
@@ -77,227 +24,6 @@ export type ChartConfig = {
   );
 };
 
-/**
- * Props for ChartContainer component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type ChartContainerDocsProps = {
-  /** Chart configuration defining series labels, colors, and icons */
-  config: ChartConfig;
-  /** Recharts component(s) to render within the responsive container */
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"];
-  /** Unique identifier for the chart instance @default Generated unique ID */
-  id?: string;
-  /** Additional CSS classes for styling */
-  className?: string;
-  /** Inline styles for the container */
-  style?: React.CSSProperties;
-  /** ARIA label for accessibility */
-  "aria-label"?: string;
-  /** ARIA description for accessibility */
-  "aria-describedby"?: string;
-} & Omit<React.ComponentProps<"div">, "children">;
-
-/**
- * Props for ChartTooltip component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Recharts inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type ChartTooltipDocsProps = {
-  /** Custom content component for tooltip display */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  content?: React.ComponentType<any> | React.ReactElement;
-  /** Whether the tooltip is currently active/visible @default false */
-  active?: boolean;
-  /** Array of data objects to display in tooltip */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  payload?: any[];
-  /** Label value for current tooltip position (typically x-axis value) */
-  label?: string | number;
-  /** Function to format tooltip content */
-  formatter?: (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    name: any,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    props: any,
-  ) => [React.ReactNode, React.ReactNode] | React.ReactNode;
-  /** Function to format the tooltip label */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  labelFormatter?: (label: any, payload: any[]) => React.ReactNode;
-  /** Custom cursor component or cursor configuration @default true */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  cursor?: boolean | React.ComponentType<any> | React.ReactElement | object;
-  /** Custom position for tooltip placement */
-  position?: { x?: number; y?: number };
-  /** Distance from cursor/data point @default 10 */
-  offset?: number;
-  /** Whether tooltip shares data across all series @default Varies by chart type */
-  shared?: boolean;
-  /** Portal element to render tooltip outside chart container */
-  portal?: HTMLElement;
-  /** Wrapper styling for tooltip container */
-  wrapperStyle?: React.CSSProperties;
-  /** CSS class name for tooltip wrapper */
-  wrapperClassName?: string;
-  /** Animation duration in milliseconds @default 400 */
-  animationDuration?: number;
-  /** Animation easing function @default "ease" */
-  animationEasing?: string;
-  /** Whether tooltip is allowed to escape chart boundaries @default false */
-  allowEscapeViewBox?: { x?: boolean; y?: boolean };
-  /** Separator character between name and value @default " : " */
-  separator?: string;
-  /** Whether to use HTML for tooltip content @default false */
-  useTranslate3d?: boolean;
-  /** Custom coordinate for tooltip positioning */
-  coordinate?: { x?: number; y?: number };
-  /** Filter function for payload items */
-  filterNull?: boolean;
-  /** Custom item sorting function */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  itemSorter?: (item: any) => number;
-  /** Style for individual tooltip items */
-  itemStyle?: React.CSSProperties;
-  /** Style for tooltip labels */
-  labelStyle?: React.CSSProperties;
-  /** Style for tooltip content wrapper */
-  contentStyle?: React.CSSProperties;
-};
-
-/**
- * Props for ChartTooltipContent component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type ChartTooltipContentDocsProps = {
-  /** Whether to hide the label section of the tooltip @default false */
-  hideLabel?: boolean;
-  /** Whether to hide the color indicator for each data series @default false */
-  hideIndicator?: boolean;
-  /** Style of the color indicator shown for each series @default "dot" */
-  indicator?: "line" | "dot" | "dashed";
-  /** Key to use for extracting the name from payload data */
-  nameKey?: string;
-  /** Key to use for extracting the label from payload data */
-  labelKey?: string;
-  /** Whether the tooltip is currently active/visible */
-  active?: boolean;
-  /** Array of data objects to display in tooltip */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  payload?: any[];
-  /** Additional CSS classes for styling */
-  className?: string;
-  /** Label value for current tooltip position */
-  label?: string | number;
-  /** Function to format tooltip content */
-  formatter?: (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    name: any,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    props: any,
-  ) => [React.ReactNode, React.ReactNode] | React.ReactNode;
-  /** Function to format the tooltip label */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  labelFormatter?: (label: any, payload: any[]) => React.ReactNode;
-  /** CSS class name for label styling */
-  labelClassName?: string;
-  /** Color override for indicators */
-  color?: string;
-} & React.ComponentProps<"div">;
-
-/**
- * Props for ChartLegend component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Recharts inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type ChartLegendDocsProps = {
-  /** Custom content component for legend display */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  content?: React.ComponentType<any> | React.ReactElement;
-  /** Array of legend items to display */
-  payload?: Array<{
-    value: string;
-    type?: string;
-    color?: string;
-    dataKey?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    payload?: any;
-  }>;
-  /** Horizontal alignment of legend @default "center" */
-  align?: "left" | "center" | "right";
-  /** Vertical alignment of legend @default "bottom" */
-  verticalAlign?: "top" | "middle" | "bottom";
-  /** Height reserved for legend in pixels */
-  height?: number;
-  /** Width reserved for legend in pixels */
-  width?: number;
-  /** Wrapper styling for legend container */
-  wrapperStyle?: React.CSSProperties;
-  /** CSS class name for legend wrapper */
-  wrapperClassName?: string;
-  /** Layout direction for legend items @default "horizontal" */
-  layout?: "horizontal" | "vertical";
-  /** Size of legend icons in pixels @default 14 */
-  iconSize?: number;
-  /** Type of legend icons @default "rect" */
-  iconType?:
-    | "line"
-    | "rect"
-    | "circle"
-    | "cross"
-    | "diamond"
-    | "square"
-    | "star"
-    | "triangle"
-    | "wye";
-  /** Margin around legend container */
-  margin?: { top?: number; right?: number; bottom?: number; left?: number };
-  /** Click handler for legend items */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onClick?: (data: any, index: number, event: React.MouseEvent) => void;
-  /** Mouse enter handler for legend items */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onMouseEnter?: (data: any, index: number, event: React.MouseEvent) => void;
-  /** Mouse leave handler for legend items */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onMouseLeave?: (data: any, index: number, event: React.MouseEvent) => void;
-  /** Function to format legend content */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formatter?: (value: any, entry: any, index: number) => React.ReactNode;
-};
-
-/**
- * Props for ChartLegendContent component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type ChartLegendContentDocsProps = {
-  /** Whether to hide series icons from the chart configuration @default false */
-  hideIcon?: boolean;
-  /** Key to use for extracting the name from payload data */
-  nameKey?: string;
-  /** Array of legend items to display */
-  payload?: Array<{
-    value: string;
-    type?: string;
-    color?: string;
-    dataKey?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    payload?: any;
-  }>;
-  /** Vertical alignment for automatic padding adjustment @default "bottom" */
-  verticalAlign?: "top" | "middle" | "bottom";
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.ComponentProps<"div">;
-
 type ChartContextProps = {
   config: ChartConfig;
 };
@@ -305,47 +31,8 @@ type ChartContextProps = {
 const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 /**
- * Hook to access chart configuration context
- *
- * Provides access to the chart configuration within chart components.
- * Must be used within a ChartContainer component to access the chart config.
- *
- * @returns Chart configuration context containing config object
- * @throws Error when used outside of ChartContainer
- *
- * @example
- * ```tsx
- * function CustomTooltip() {
- *   const { config } = useChart()
- *
- *   return (
- *     <div>
- *       {Object.entries(config).map(([key, series]) => (
- *         <div key={key} style={{ color: series.color }}>
- *           {series.label}
- *         </div>
- *       ))}
- *     </div>
- *   )
- * }
- * ```
- *
- * @example
- * ```tsx
- * function CustomChartComponent() {
- *   const { config } = useChart()
- *   const seriesConfig = config.revenue
- *
- *   return (
- *     <div>
- *       <seriesConfig.icon />
- *       <span>{seriesConfig.label}</span>
- *     </div>
- *   )
- * }
- * ```
- *
- * @since 1.0.0
+ * Hook to access chart configuration within ChartContainer descendants.
+ * @throws Error if used outside of ChartContainer
  */
 function useChart() {
   const context = React.useContext(ChartContext);
@@ -357,136 +44,18 @@ function useChart() {
   return context;
 }
 
+type ChartContainerProps = React.ComponentProps<"div"> & {
+  /** Chart configuration defining series labels, colors, and icons */
+  config: ChartConfig;
+  /** Recharts chart component (LineChart, BarChart, AreaChart, PieChart, etc.) */
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+};
+
 /**
- * Container component for Recharts charts with theming and configuration
- *
- * The ChartContainer provides a responsive wrapper for Recharts components with
- * automatic theming, color management, and configuration. It generates CSS custom
- * properties for chart colors, handles dark mode support, and applies consistent
- * styling across all chart types. Built on the shadcn/ui design system with
- * Recharts as the underlying charting library.
- *
- * @component
- * @example
- * ```tsx
- * // Basic line chart with accessibility and tooltips
- * const chartData = [
- *   { month: "Jan", revenue: 2000, profit: 400 },
- *   { month: "Feb", revenue: 2400, profit: 600 },
- *   { month: "Mar", revenue: 3200, profit: 900 },
- * ]
- *
- * const chartConfig = {
- *   revenue: {
- *     label: "Revenue",
- *     color: "hsl(var(--chart-1))",
- *   },
- *   profit: {
- *     label: "Profit",
- *     color: "hsl(var(--chart-2))",
- *   },
- * } satisfies ChartConfig
- *
- * <ChartContainer config={chartConfig} className="min-h-[300px]">
- *   <LineChart data={chartData} accessibilityLayer>
- *     <CartesianGrid strokeDasharray="3 3" />
- *     <XAxis dataKey="month" />
- *     <YAxis />
- *     <ChartTooltip content={<ChartTooltipContent />} />
- *     <Line
- *       type="monotone"
- *       dataKey="revenue"
- *       stroke="var(--color-revenue)"
- *       strokeWidth={2}
- *     />
- *     <Line
- *       type="monotone"
- *       dataKey="profit"
- *       stroke="var(--color-profit)"
- *       strokeWidth={2}
- *     />
- *   </LineChart>
- * </ChartContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Bar chart with theme-aware colors and custom formatting
- * <ChartContainer
- *   config={{
- *     sales: {
- *       label: "Sales",
- *       theme: {
- *         light: "#0ea5e9",
- *         dark: "#0284c7",
- *       },
- *     },
- *   }}
- *   className="h-[400px]"
- * >
- *   <BarChart data={data} accessibilityLayer>
- *     <XAxis dataKey="month" />
- *     <YAxis tickFormatter={(value) => `$${value.toLocaleString()}`} />
- *     <ChartTooltip content={<ChartTooltipContent />} />
- *     <Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
- *   </BarChart>
- * </ChartContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Pie chart with legend and icons for device breakdown
- * <ChartContainer config={{
- *   desktop: {
- *     label: "Desktop",
- *     color: "var(--chart-1)",
- *     icon: MonitorIcon,
- *   },
- *   mobile: {
- *     label: "Mobile",
- *     color: "var(--chart-2)",
- *     icon: SmartphoneIcon,
- *   },
- * }}>
- *   <PieChart>
- *     <Pie data={data} dataKey="value" nameKey="device" />
- *     <ChartTooltip content={<ChartTooltipContent />} />
- *     <ChartLegend content={<ChartLegendContent />} />
- *   </PieChart>
- * </ChartContainer>
- * ```
- *
- * @accessibility
- * **Core Accessibility Features:**
- * - Responsive container adapts to screen size automatically
- * - Theme-aware color system designed for WCAG contrast compliance
- * - Supports Recharts' `accessibilityLayer` prop for keyboard navigation
- * - High contrast colors available in both light and dark themes
- * - Semantic HTML structure for screen reader compatibility
- *
- * **Important Accessibility Notes:**
- * - Always include `accessibilityLayer` prop on Recharts components for keyboard access
- * - Consider adding `aria-label` or `title` attributes for chart context
- * - Ensure color is not the only way to distinguish data (use patterns, labels, or icons)
- * - Test with screen readers as automatic data announcement may be limited
- * - Provide alternative data representations (tables, text summaries) for complex charts
- *
- * **Keyboard Navigation:**
- * - Arrow keys navigate between data points when `accessibilityLayer` is enabled
- * - Tab key moves focus to interactive chart elements
- * - Screen reader users should be provided with data summaries or alternative formats
- *
- * @performance
- * - Use appropriate chart types for data size (avoid complex charts with large datasets)
- * - Consider virtualization for charts with many data points
- * - CSS variables are generated only for configured colors to minimize style overhead
- *
- * @see {@link https://ui.shadcn.com/docs/components/chart} shadcn/ui Chart documentation
- * @see {@link https://recharts.org/en-US/api} Recharts API documentation
- * @see {@link ChartTooltip} Tooltip component for interactive data display
- * @see {@link ChartLegend} Legend component for series identification
- * @see {@link useChart} Hook to access chart configuration
- * @since 1.0.0
+ * Root container for Recharts visualizations with theming and configuration.
+ * Provides responsive container, theme-aware CSS variables, and chart context.
  */
 function ChartContainer({
   id,
@@ -494,18 +63,7 @@ function ChartContainer({
   children,
   config,
   ...props
-}: React.ComponentProps<"div"> & {
-  /**
-   * Chart configuration defining series labels and colors
-   */
-  config: ChartConfig;
-  /**
-   * Recharts component(s) to render
-   */
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"];
-}) {
+}: ChartContainerProps) {
   const uniqueId = React.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
@@ -529,20 +87,7 @@ function ChartContainer({
   );
 }
 
-/**
- * Internal component that generates CSS custom properties for chart colors
- *
- * Creates CSS variables based on the chart configuration to enable theme-aware
- * coloring. Generates variables for both light and dark themes when theme
- * configurations are provided, or uses static colors when available.
- *
- * @component
- * @internal
- * @param id - Unique identifier for the chart instance
- * @param config - Chart configuration with color definitions
- * @since 1.0.0
- */
-function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
     ([, config]) => config.theme || config.color,
   );
@@ -573,100 +118,30 @@ ${colorConfig
       }}
     />
   );
-}
+};
 
-/**
- * Tooltip component for charts
- *
- * Re-export of Recharts Tooltip component with support for custom content.
- * Use with ChartTooltipContent for consistent styling and theming integration.
- *
- * @component
- * @example
- * ```tsx
- * // Basic tooltip
- * <ChartTooltip content={<ChartTooltipContent />} />
- * ```
- *
- * @example
- * ```tsx
- * // Tooltip with custom positioning
- * <ChartTooltip
- *   content={<ChartTooltipContent />}
- *   cursor={false}
- *   position={{ x: 10, y: 10 }}
- * />
- * ```
- *
- * @see {@link ChartTooltipContent} Custom tooltip content component
- * @since 1.0.0
- */
+/** Re-export of Recharts Tooltip component for positioning and visibility */
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
+type ChartTooltipContentProps = React.ComponentProps<
+  typeof RechartsPrimitive.Tooltip
+> &
+  React.ComponentProps<"div"> & {
+    /** Hide the tooltip label (typically the x-axis value) */
+    hideLabel?: boolean;
+    /** Hide the color indicator for each series */
+    hideIndicator?: boolean;
+    /** Indicator style for series items. @default "dot" */
+    indicator?: "line" | "dot" | "dashed";
+    /** Key to use for series names, overrides default dataKey */
+    nameKey?: string;
+    /** Key to use for tooltip label, overrides default */
+    labelKey?: string;
+  };
+
 /**
- * Custom tooltip content component for charts
- *
- * Provides a styled tooltip that displays chart data with proper formatting,
- * colors, and labels from the chart configuration. Supports multiple indicator
- * styles, custom formatters, and automatic theming integration.
- *
- * @component
- * @example
- * ```tsx
- * // Basic tooltip with default styling
- * <ChartTooltip content={<ChartTooltipContent />} />
- * ```
- *
- * @example
- * ```tsx
- * // Tooltip with custom value formatter
- * <ChartTooltip
- *   content={
- *     <ChartTooltipContent
- *       formatter={(value, name) => [
- *         `$${value.toLocaleString()}`,
- *         name.toUpperCase()
- *       ]}
- *     />
- *   }
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Tooltip with line indicator and custom label
- * <ChartTooltip
- *   content={
- *     <ChartTooltipContent
- *       indicator="line"
- *       labelFormatter={(label) => `Week of ${label}`}
- *       hideLabel={false}
- *     />
- *   }
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Tooltip with dashed indicator and no icons
- * <ChartTooltip
- *   content={
- *     <ChartTooltipContent
- *       indicator="dashed"
- *       hideIndicator={false}
- *       nameKey="category"
- *     />
- *   }
- * />
- * ```
- *
- * @accessibility
- * - High contrast colors for visibility in both themes
- * - Proper semantic markup for screen readers
- * - Formatted numbers with locale-aware display
- * - Clear visual indicators for data series
- *
- * @since 1.0.0
+ * Customizable tooltip content for charts with series indicators and formatting.
+ * Automatically styled with theme colors from ChartConfig.
  */
 function ChartTooltipContent({
   active,
@@ -682,35 +157,10 @@ function ChartTooltipContent({
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    /**
-     * Whether to hide the label
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * Whether to hide the color indicator
-     * @default false
-     */
-    hideIndicator?: boolean;
-    /**
-     * Style of the color indicator
-     * @default "dot"
-     */
-    indicator?: "line" | "dot" | "dashed";
-    /**
-     * Key to use for the name in payload
-     */
-    nameKey?: string;
-    /**
-     * Key to use for the label in payload
-     */
-    labelKey?: string;
-  }) {
+}: ChartTooltipContentProps) {
   const { config } = useChart();
 
-  const getTooltipLabel = () => {
+  const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -736,9 +186,15 @@ function ChartTooltipContent({
     }
 
     return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-  };
-
-  const tooltipLabel = getTooltipLabel();
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
 
   if (!active || !payload?.length) {
     return null;
@@ -749,156 +205,97 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start",
         className,
       )}
     >
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
-        {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}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                indicator === "dot" && "items-center",
-              )}
-            >
-              {formatter && item?.value !== undefined && item.name ? (
-                formatter(item.value, item.name, item, index, item.payload)
-              ) : (
-                <>
-                  {itemConfig?.icon ? (
-                    <itemConfig.icon />
-                  ) : (
-                    !hideIndicator && (
-                      <div
-                        className={cn(
-                          "shrink-0 rounded-[2px] border-border bg-background",
-                          {
-                            "h-2.5 w-2.5": indicator === "dot",
-                            "w-1": indicator === "line",
-                            "w-0 border-[1.5px] border-dashed bg-transparent":
-                              indicator === "dashed",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                          },
-                        )}
-                        style={
-                          {
-                            "--color-bg": indicatorColor,
-                            "--color-border": indicatorColor,
-                          } as React.CSSProperties
-                        }
-                      />
-                    )
-                  )}
-                  <div
-                    className={cn(
-                      "flex flex-1 justify-between leading-none",
-                      nestLabel ? "items-end" : "items-center",
+        {payload
+          .filter((item) => item.type !== "none")
+          .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}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
                     )}
-                  >
-                    <div className="grid gap-1.5">
-                      {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
-                        {itemConfig?.label || item.name}
-                      </span>
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
                     </div>
-                    {item.value && (
-                      <span className="text-foreground font-mono font-medium tabular-nums">
-                        {item.value.toLocaleString()}
-                      </span>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          );
-        })}
+                  </>
+                )}
+              </div>
+            );
+          })}
       </div>
     </div>
   );
 }
 
-/**
- * Legend component for charts
- *
- * Re-export of Recharts Legend component with support for custom content.
- * Use with ChartLegendContent for consistent styling and theming integration.
- *
- * @component
- * @example
- * ```tsx
- * // Basic legend
- * <ChartLegend content={<ChartLegendContent />} />
- * ```
- *
- * @example
- * ```tsx
- * // Legend positioned at top
- * <ChartLegend
- *   content={<ChartLegendContent />}
- *   verticalAlign="top"
- *   height={36}
- * />
- * ```
- *
- * @see {@link ChartLegendContent} Custom legend content component
- * @since 1.0.0
- */
+/** Re-export of Recharts Legend component for positioning */
 const ChartLegend = RechartsPrimitive.Legend;
 
+type ChartLegendContentProps = React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    /** Hide series icons, showing only color squares. @default false */
+    hideIcon?: boolean;
+    /** Key to use for series names in legend */
+    nameKey?: string;
+  };
+
 /**
- * Custom legend content component for charts
- *
- * Provides a styled legend that displays chart series with colors and labels
- * from the chart configuration. Supports icon display, custom positioning,
- * and automatic theming integration.
- *
- * @component
- * @example
- * ```tsx
- * // Basic legend with default settings
- * <ChartLegend content={<ChartLegendContent />} />
- * ```
- *
- * @example
- * ```tsx
- * // Legend positioned at top without icons
- * <ChartLegend
- *   content={
- *     <ChartLegendContent
- *       verticalAlign="top"
- *       hideIcon={true}
- *     />
- *   }
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Legend with custom name key
- * <ChartLegend
- *   content={
- *     <ChartLegendContent
- *       nameKey="category"
- *       className="justify-start"
- *     />
- *   }
- * />
- * ```
- *
- * @accessibility
- * - Semantic markup for screen readers
- * - Color indicators with clear labels
- * - Proper contrast ratios for visibility
- * - Logical tab order for keyboard navigation
- *
- * @since 1.0.0
+ * Customizable legend content for charts showing all series with icons or colors.
+ * Automatically styled with theme colors from ChartConfig.
  */
 function ChartLegendContent({
   className,
@@ -906,18 +303,7 @@ function ChartLegendContent({
   payload,
   verticalAlign = "bottom",
   nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    /**
-     * Whether to hide series icons
-     * @default false
-     */
-    hideIcon?: boolean;
-    /**
-     * Key to use for the name in payload
-     */
-    nameKey?: string;
-  }) {
+}: ChartLegendContentProps) {
   const { config } = useChart();
 
   if (!payload?.length) {
@@ -932,49 +318,37 @@ function ChartLegendContent({
         className,
       )}
     >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
-            )}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
-                  backgroundColor: item.color,
-                }}
-              />
-            )}
-            {itemConfig?.label}
-          </div>
-        );
-      })}
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
     </div>
   );
 }
 
-/**
- * Internal helper to extract chart configuration from payload data
- *
- * Retrieves the appropriate configuration for a data series from the chart
- * config based on the payload data structure. Handles nested payload objects
- * and fallback key resolution.
- *
- * @internal
- * @param config - The chart configuration object
- * @param payload - The data payload from Recharts
- * @param key - The key to look up in the configuration
- * @returns The configuration for the data series, or undefined if not found
- * @since 1.0.0
- */
 function getPayloadConfigFromPayload(
   config: ChartConfig,
   payload: unknown,
@@ -1020,4 +394,7 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
+  type ChartContainerProps,
+  type ChartTooltipContentProps,
+  type ChartLegendContentProps,
 };