@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/charts/BarChart/BarChart.types.d.ts

@@ -1,5 +1,13 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from "../types/chart.types";
-export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, ChartVariant } from "../types/chart.types";
+/**
+ * Visual props that actually apply to a vertical bar chart.
+ *
+ * 🔴 Narrowed with `Omit` on purpose — see the note on `StandardVisualProps`.
+ * Kept: `barRadius` (+ its deprecated `radius` alias) and `gap`.
+ * Dropped: dot/cell radii, stroke width, and the line/area/stacked-only props.
+ */
+export type BarVisualProps = Omit<StandardVisualProps, "dotRadius" | "strokeWidth" | "curved" | "curveType" | "showDots" | "fillOpacity" | "showStroke" | "stacked">;
+export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, BarVisualProps, BarChartSpecificProps {
     barRadius?: number;
     radius?: number;
     gap?: number;
@@ -23,27 +31,23 @@ export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps
      */
     darkMode?: boolean;
 }
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values BarChart never
+ * reads. List only what the component actually consumes.
+ */
 export declare const BAR_CHART_DEFAULTS: {
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly enableKeyboardNavigation: true;
+    readonly variant: ChartVariant;
     readonly barRadius: 32;
-    readonly radius: 32;
     readonly gap: 4;
     readonly categoryGap: 16;
-    readonly orientation: "horizontal" | "vertical";
     readonly showAnimation: true;
     readonly showPlaceholderBars: false;
-    readonly showGrid: true;
-    readonly showXAxis: true;
-    readonly showYAxis: true;
-    readonly dotRadius: 4;
-    readonly cellRadius: 4;
-    readonly strokeWidth: 2;
-    readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
-    readonly fillOpacity: 0.3;
-    readonly showStroke: true;
-    readonly showDots: true;
-    readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
-    readonly enableKeyboardNavigation: true;
 };
 export type BarChartData = BaseChartProps["data"][0];

package/dist/components/charts/BarChart/BarChart.types.js

@@ -1,13 +1,21 @@
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
-// Default values using centralized defaults
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values BarChart never
+ * reads. List only what the component actually consumes.
+ */
 const BAR_CHART_DEFAULTS = {
-    ...CHART_DEFAULTS,
+    showGrid: CHART_DEFAULTS.showGrid,
+    showXAxis: CHART_DEFAULTS.showXAxis,
+    showYAxis: CHART_DEFAULTS.showYAxis,
+    enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
+    variant: "gradient", // BarChart defaults to the gradient (premium) look; use variant="default" for flat fills
     barRadius: CHART_DEFAULTS.barRadius, // 24 - For bar corner rounding
-    radius: CHART_DEFAULTS.barRadius, // @deprecated - kept for backward compatibility
     gap: CHART_DEFAULTS.gap,
     categoryGap: CHART_DEFAULTS.categoryGap,
-    orientation: CHART_DEFAULTS.orientation,
     showAnimation: true, // Enable animations by default
     showPlaceholderBars: false, // Opt-in feature for backward compatibility
 };

package/dist/components/charts/ChartContainer.d.ts

@@ -4,5 +4,12 @@ interface ChartContextValue {
     config: ChartConfig;
 }
 export declare function useChart(): ChartContextValue;
+/**
+ * Optional variant of `useChart` — returns `null` instead of throwing when
+ * there is no ancestor `ChartContainer`. For components (e.g. Heatmap) that
+ * are documented to work standalone with directly-passed `data`/`config`
+ * props, falling back to the context only when it's actually present.
+ */
+export declare function useOptionalChart(): ChartContextValue | null;
 export declare function ChartContainer({ data, config, className, children, minHeight, width, height, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/charts/ChartContainer.js

@@ -1,15 +1,18 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useChartTheme } from './hooks/useChartTheme.js';
 
 const ChartContext = createContext(null);
-function useChart() {
-    const context = useContext(ChartContext);
-    if (!context) {
-        throw new Error('useChart must be used within a ChartContainer');
-    }
-    return context;
+/**
+ * Optional variant of `useChart` — returns `null` instead of throwing when
+ * there is no ancestor `ChartContainer`. For components (e.g. Heatmap) that
+ * are documented to work standalone with directly-passed `data`/`config`
+ * props, falling back to the context only when it's actually present.
+ */
+function useOptionalChart() {
+    return useContext(ChartContext);
 }
 function ChartContainer({ data, config, className, children, minHeight = 200, width = '100%', height, ...props }) {
     // Provide default empty config if none provided
@@ -34,9 +37,9 @@ function ChartContainer({ data, config, className, children, minHeight = 200, wi
             minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight
         }),
     };
-    return (jsx(ChartContext.Provider, { value: { data: data || [], config: safeConfig }, children: jsx("div", { className: cn("flex aspect-auto justify-center text-xs", 
+    return (jsx(ChartContext.Provider, { value: { data: data || [], config: safeConfig }, children: jsx("div", { className: cn("flex aspect-auto justify-center text-sm", 
             // Add w-full as default if no width class is specified
             !hasWidthClass && "w-full", className), style: inlineStyles, ...props, children: children }) }));
 }
 
-export { ChartContainer, useChart };
+export { ChartContainer, useOptionalChart };

package/dist/components/charts/{shared/BarRenderer → ComboChart}/BarRenderer.d.ts

@@ -3,7 +3,9 @@ import type { BarRendererProps } from "./BarRenderer.types";
 /**
  * BarRenderer Component
  *
- * Pure bar rendering component that can be used standalone or within ChartContainer.
+ * ComboChart's bar-drawing component. Standalone BarChart has its own,
+ * separate bar-rendering implementation — this one exists so a bar series can
+ * share one coordinate space with a line series inside ComboChartCanvas.
  * Handles both grouped and stacked bar layouts with Framer Motion animations.
  */
 export declare const BarRenderer: React.FC<BarRendererProps>;

package/dist/components/charts/{shared/BarRenderer → ComboChart}/BarRenderer.js

@@ -1,21 +1,23 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useId, useState, useEffect, useCallback, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { cn } from '../../../../utils/cn.js';
+import { cn } from '../../../utils/cn.js';
+import { BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, BAR_GROUP_STAGGER, stackedSegmentTransition, barEntranceTransition } from '../utils/animation-utils.js';
+import { BarGlowRing, barStrokeStyle, barFill, barDimOpacity, BarSeriesDefs, deriveBarEmphasis } from '../utils/bar-emphasis.js';
 
-// Animation timing constants
-const STACKED_CATEGORY_DELAY = 0.25;
-const STACKED_SEGMENT_STAGGER = 0.12;
-const GROUPED_BAR_STAGGER = 0.05;
 /**
- * Simple color functions based on direct CSS variables
+ * Fallback only — ComboChart always resolves a real color onto each series'
+ * config before it reaches this renderer (see ComboChart.tsx), so this array
+ * exists purely as a defensive default, not a live categorical palette.
  */
 const getSeriesFillColor = (index) => {
     const colorVars = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
+        "var(--color-chart-1)",
+        "var(--color-chart-2)",
+        "var(--color-chart-3)",
+        "var(--color-chart-4)",
+        "var(--color-chart-5)",
     ];
     return colorVars[index % colorVars.length];
 };
@@ -52,11 +54,26 @@ const createRoundedBottomBarPath = (x, y, width, height, radius) => {
 /**
  * BarRenderer Component
  *
- * Pure bar rendering component that can be used standalone or within ChartContainer.
+ * ComboChart's bar-drawing component. Standalone BarChart has its own,
+ * separate bar-rendering implementation — this one exists so a bar series can
+ * share one coordinate space with a line series inside ComboChartCanvas.
  * Handles both grouped and stacked bar layouts with Framer Motion animations.
  */
-const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false, radius = 4, gap = 4, categoryGap = 8, showAnimation = true, hoveredCategory: externalHoveredCategory, onHoverCategory, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
+const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false, radius = 4, gap = 4, categoryGap = 8, showAnimation = true, measured = true, variant = "gradient", hoveredCategory: externalHoveredCategory, onHoverCategory, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
     const shouldReduceMotion = useReducedMotion();
+    const isGradientVariant = variant === "gradient";
+    // Per-instance ids so multiple charts on a page don't share gradient/filter defs.
+    const rawId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const barGradientId = (index) => `${rawId}-bar-gradient-${index}`;
+    const barShadowId = (index) => `${rawId}-bar-shadow-${index}`;
+    const barRingId = (index) => `${rawId}-bar-ring-${index}`;
+    // Once the entrance has played, hover dims must respond with no delay (the
+    // mount fade shares the per-bar stagger delay). Mirrors BarChart.
+    const [hasAnimated, setHasAnimated] = useState(false);
+    useEffect(() => {
+        const t = setTimeout(() => setHasAnimated(true), 400);
+        return () => clearTimeout(t);
+    }, []);
     // Get all data keys from config
     const dataKeys = Object.keys(config || {});
     // Calculate inner dimensions
@@ -110,8 +127,13 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
         const fillColor = ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) || getSeriesFillColor(keyIndex);
         const isHovered = externalHoveredCategory === index;
         const isAnyBarHovered = externalHoveredCategory !== null;
-        const shouldReduceOpacity = isAnyBarHovered && !isHovered;
         const isFocused = isKeyboardMode && focusedElementIndex === index;
+        const { isEmphasized, shouldReduceOpacity } = deriveBarEmphasis({
+            isHovered,
+            isFocused,
+            isAnyBarHovered,
+            isGradientVariant,
+        });
         // Don't render null bars
         if (isNull) {
             return null;
@@ -125,97 +147,106 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
             : createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, applyRadius ? radius : 0);
         const stackedDelayOrder = typeof stackOrderIndex === "number" ? stackOrderIndex : keyIndex;
         const delay = isStacked
-            ? index * STACKED_CATEGORY_DELAY +
-                stackedDelayOrder * STACKED_SEGMENT_STAGGER
-            : (index * dataKeys.length + keyIndex) * GROUPED_BAR_STAGGER;
-        return (jsx(motion.path, { d: pathD, initial: showAnimation && !shouldReduceMotion
-                ? { scaleY: 0, opacity: 0 }
-                : { scaleY: 1, opacity: 1 }, animate: {
-                scaleY: 1,
-                opacity: 1,
-            }, transition: isStacked
-                ? {
-                    duration: 0.4,
-                    ease: "easeOut",
-                    delay,
-                }
-                : {
-                    type: "spring",
-                    stiffness: 100,
-                    damping: 20,
-                    delay,
-                }, className: cn("transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
-                originY: isNegative ? 0 : 1,
-                transformOrigin: isNegative ? "top" : "bottom",
-                fill: isNull
-                    ? "var(--color-background-tertiary)"
-                    : shouldReduceOpacity
-                        ? "var(--color-background-tertiary)"
-                        : fillColor,
-                opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
-                stroke: isFocused ? "var(--color-primary)" : "none",
-            }, onMouseEnter: !isNull && onMouseEnter
-                ? (e) => {
-                    if (onHoverCategory) {
-                        onHoverCategory(index);
-                    }
-                    // Create content with ALL series for this category
-                    const series = dataKeys
-                        .map((dataKey, idx) => {
-                        var _a, _b;
-                        const seriesValue = item[dataKey];
-                        const isSeriesNull = seriesValue === null ||
-                            seriesValue === undefined ||
-                            (typeof seriesValue === "number" &&
-                                !isFinite(seriesValue));
-                        return {
-                            key: dataKey,
-                            label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
-                            value: isSeriesNull ? 0 : seriesValue,
-                            color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
-                        };
-                    })
-                        .filter((series) => {
-                        // Only include non-null and non-zero values in tooltip
-                        const rawVal = item[series.key];
-                        return (rawVal != null &&
-                            typeof rawVal === "number" &&
-                            isFinite(rawVal) &&
-                            rawVal !== 0);
-                    });
-                    const content = {
-                        category: item.name || `Category ${index + 1}`,
-                        series: stacked ? series.reverse() : series,
-                        total: stacked
-                            ? series.reduce((acc, s) => acc + (typeof s.value === "number" ? s.value : 0), 0)
-                            : undefined,
-                    };
-                    const svgCoordinates = {
-                        x: barX + individualBarWidth / 2,
-                        y: barY,
-                        dimensions,
-                    };
-                    onMouseEnter(e, content, svgCoordinates);
-                }
-                : undefined, onMouseMove: !isNull && onMouseMove
-                ? (e) => {
-                    if (externalHoveredCategory === index) {
-                        const svgCoordinates = {
-                            x: barX + individualBarWidth / 2,
-                            y: barY,
-                            dimensions,
-                        };
-                        onMouseMove(e, svgCoordinates);
-                    }
-                }
-                : undefined, onMouseLeave: !isNull && onMouseLeave
-                ? () => {
-                    if (onHoverCategory) {
-                        onHoverCategory(null);
-                    }
-                    onMouseLeave();
-                }
-                : undefined }, keyIndex));
+            ? index * BAR_STACK_CATEGORY_DELAY +
+                stackedDelayOrder * BAR_STACK_SEGMENT_STAGGER
+            : (index * dataKeys.length + keyIndex) * BAR_GROUP_STAGGER;
+        const gradientFill = `url(#${barGradientId(keyIndex)})`;
+        const shadowFilter = `url(#${barShadowId(keyIndex)})`;
+        const ringFilter = `url(#${barRingId(keyIndex)})`;
+        return (jsxs(React__default.Fragment, { children: [jsx(BarGlowRing, { show: isEmphasized, pathD: pathD, color: fillColor, barWidth: individualBarWidth, filter: ringFilter }), jsx(motion.path, { d: pathD, initial: showAnimation && !shouldReduceMotion
+                        ? { scaleY: 0, opacity: 0 }
+                        : { scaleY: 1, opacity: 1 }, animate: {
+                        scaleY: 1,
+                        // Hover dim lives in `animate` (not `style`): motion.path freezes
+                        // plain style values at mount and ignores re-render changes.
+                        opacity: barDimOpacity(shouldReduceOpacity, isGradientVariant),
+                    }, transition: isStacked
+                        ? stackedSegmentTransition(delay, hasAnimated)
+                        : barEntranceTransition(delay, hasAnimated), className: cn(isGradientVariant
+                        ? "transition-all duration-300 ease-out"
+                        : "transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
+                        originY: isNegative ? 0 : 1,
+                        transformOrigin: isNegative ? "top" : "bottom",
+                        fill: barFill({
+                            isGradientVariant,
+                            gradientFill,
+                            isNull,
+                            shouldReduceOpacity,
+                            fillColor,
+                        }),
+                        // Colored drop shadow under the bar (gradient variant). Element
+                        // opacity applies post-filter, so the hover dim fades it too.
+                        filter: isGradientVariant ? shadowFilter : undefined,
+                        ...barStrokeStyle({
+                            isFocused,
+                            isEmphasized,
+                            isGradientVariant,
+                            fillColor,
+                        }),
+                        strokeLinejoin: "round",
+                        vectorEffect: "non-scaling-stroke",
+                    }, onMouseEnter: !isNull && onMouseEnter
+                        ? (e) => {
+                            if (onHoverCategory) {
+                                onHoverCategory(index);
+                            }
+                            // Create content with ALL series for this category
+                            const series = dataKeys
+                                .map((dataKey, idx) => {
+                                var _a, _b;
+                                const seriesValue = item[dataKey];
+                                const isSeriesNull = seriesValue === null ||
+                                    seriesValue === undefined ||
+                                    (typeof seriesValue === "number" &&
+                                        !isFinite(seriesValue));
+                                return {
+                                    key: dataKey,
+                                    label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                                    value: isSeriesNull ? 0 : seriesValue,
+                                    color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
+                                };
+                            })
+                                .filter((series) => {
+                                // Only include non-null and non-zero values in tooltip
+                                const rawVal = item[series.key];
+                                return (rawVal != null &&
+                                    typeof rawVal === "number" &&
+                                    isFinite(rawVal) &&
+                                    rawVal !== 0);
+                            });
+                            const content = {
+                                category: item.name || `Category ${index + 1}`,
+                                series: stacked ? series.reverse() : series,
+                                total: stacked
+                                    ? series.reduce((acc, s) => acc + (typeof s.value === "number" ? s.value : 0), 0)
+                                    : undefined,
+                            };
+                            const svgCoordinates = {
+                                x: barX + individualBarWidth / 2,
+                                y: barY,
+                                dimensions,
+                            };
+                            onMouseEnter(e, content, svgCoordinates);
+                        }
+                        : undefined, onMouseMove: !isNull && onMouseMove
+                        ? (e) => {
+                            if (externalHoveredCategory === index) {
+                                const svgCoordinates = {
+                                    x: barX + individualBarWidth / 2,
+                                    y: barY,
+                                    dimensions,
+                                };
+                                onMouseMove(e, svgCoordinates);
+                            }
+                        }
+                        : undefined, onMouseLeave: !isNull && onMouseLeave
+                        ? () => {
+                            if (onHoverCategory) {
+                                onHoverCategory(null);
+                            }
+                            onMouseLeave();
+                        }
+                        : undefined })] }, keyIndex));
     }, [
         config,
         dataKeys,
@@ -232,6 +263,9 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
         shouldReduceMotion,
         showAnimation,
         stacked,
+        isGradientVariant,
+        hasAnimated,
+        rawId,
     ]);
     // Render all bars
     const bars = useMemo(() => {
@@ -318,7 +352,11 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
         calculateAverageForKey,
         renderBarPath,
     ]);
-    return (jsx("g", { className: cn("chart-bars", className), children: bars }));
+    return (jsxs("g", { className: cn("chart-bars", className), children: [isGradientVariant && (jsx("defs", { children: dataKeys.map((key, index) => {
+                    var _a;
+                    const color = ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) || getSeriesFillColor(index);
+                    return (jsx(BarSeriesDefs, { gradientId: barGradientId(index), shadowId: barShadowId(index), ringId: barRingId(index), color: color }, key));
+                }) })), measured && bars] }));
 };
 
 export { BarRenderer };

package/dist/components/charts/{shared/BarRenderer → ComboChart}/BarRenderer.types.d.ts

@@ -1,7 +1,7 @@
-import type { ChartDataPoint, ChartConfig } from '../../types/chart.types';
-import type { ChartScales } from '../../hooks/useChartScales';
-import type { ChartDimensions, ChartMargins } from '../ChartContainer';
-import type { MultiSeriesData } from '../ChartTooltip';
+import type { ChartDataPoint, ChartConfig } from '../types/chart.types';
+import type { ChartScales } from '../hooks/useChartScales';
+import type { ChartDimensions, ChartMargins } from './ComboChartCanvas.types';
+import type { MultiSeriesData } from '../shared/ChartTooltip';
 export interface BarRendererProps {
     /**
      * Chart data
@@ -12,7 +12,7 @@ export interface BarRendererProps {
      */
     config: ChartConfig;
     /**
-     * Calculated scales (from useChartScales or ChartContainer)
+     * Calculated scales (from useChartScales or ComboChartCanvas)
      */
     scales: ChartScales;
     /**
@@ -43,6 +43,18 @@ export interface BarRendererProps {
      * Whether to show animation
      */
     showAnimation?: boolean;
+    /**
+     * `true` once the container is measured. Bars mount (and rise from the x-axis)
+     * only when true, so the entrance starts from the real baseline rather than the
+     * 600×400 fallback (CLAUDE.md §19). Defaults to true for standalone use.
+     */
+    measured?: boolean;
+    /**
+     * Visual variant. `"gradient"` (default) renders the premium look — per-series
+     * vertical gradient fill, soft colored drop shadow, and a hover glow ring —
+     * matching BarChart. `"default"` renders flat fills.
+     */
+    variant?: "default" | "gradient";
     /**
      * Hovered category index
      */

package/dist/components/charts/ComboChart/ComboChart.js

@@ -1,44 +1,39 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useChartScales } from '../hooks/useChartScales.js';
-import { ChartContainer, useChartContext } from '../shared/ChartContainer/ChartContainer.js';
-import { BarRenderer } from '../shared/BarRenderer/BarRenderer.js';
-import { LineRenderer } from '../shared/LineRenderer/LineRenderer.js';
+import { ComboChartCanvas, useComboChartContext } from './ComboChartCanvas.js';
+import { BarRenderer } from './BarRenderer.js';
+import { LineRenderer } from './LineRenderer.js';
+import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { COMBO_CHART_DEFAULTS } from './ComboChart.types.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { Warning } from '@phosphor-icons/react';
+import { resolveSeriesColor } from '../utils/series-color.js';
+import { chartTheme } from '../theme/chart.theme.js';
 
 /**
  * Internal component that uses context to render bars and lines
  */
-const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius, gap, categoryGap, strokeWidth, curved, curveType, showDots, }) => {
-    const context = useChartContext();
+const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius, gap, categoryGap, strokeWidth, curved, curveType, showDots, variant, }) => {
+    const context = useComboChartContext();
     const dataKeys = Object.keys(context.config);
-    const seriesColors = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
-    ];
+    const seriesColors = chartTheme.baseStyle.colors.series;
     // Filter configs for bars and lines, and assign colors
     const barConfig = {};
     barKeys.forEach((key) => {
-        var _a;
         const keyIndex = dataKeys.indexOf(key);
         barConfig[key] = {
             ...context.config[key],
-            color: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.color) ||
-                seriesColors[keyIndex % seriesColors.length],
+            color: resolveSeriesColor(keyIndex, key, context.config, seriesColors),
         };
     });
     const lineConfig = {};
     lineKeys.forEach((key) => {
-        var _a;
         const keyIndex = dataKeys.indexOf(key);
         lineConfig[key] = {
             ...context.config[key],
-            color: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.color) ||
-                seriesColors[keyIndex % seriesColors.length],
+            color: resolveSeriesColor(keyIndex, key, context.config, seriesColors),
         };
     });
     // Create custom tooltip handler that includes ALL series (bars + lines)
@@ -47,14 +42,14 @@ const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius,
         const dataItem = context.data.find((d) => d.name === content.category);
         if (dataItem) {
             const allSeries = dataKeys.map((key, idx) => {
-                var _a, _b;
+                var _a;
                 const value = dataItem[key];
                 const isNull = value === null || value === undefined || (typeof value === 'number' && !isFinite(value));
                 return {
                     key,
                     label: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
                     value: isNull ? 0 : value,
-                    color: ((_b = context.config[key]) === null || _b === void 0 ? void 0 : _b.color) || seriesColors[idx % seriesColors.length],
+                    color: resolveSeriesColor(idx, key, context.config, seriesColors),
                 };
             }).filter(series => {
                 // Only show series that have valid non-zero values
@@ -75,7 +70,7 @@ const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius,
             context.handleMouseEnter(e, content, coordinates);
         }
     }, [context, dataKeys, seriesColors, stacked]);
-    return (jsxs(Fragment, { children: [barKeys.length > 0 && (jsx(BarRenderer, { data: context.data, config: barConfig, scales: context.scales, dimensions: context.dimensions, margin: context.margin, stacked: stacked, radius: barRadius, gap: gap, categoryGap: categoryGap, showAnimation: true, hoveredCategory: context.hoveredCategory, onHoverCategory: context.setHoveredCategory, onMouseEnter: handleComboMouseEnter, onMouseMove: context.handleMouseMove, onMouseLeave: context.handleMouseLeave, focusedElementIndex: context.focusedElementIndex, isKeyboardMode: context.isKeyboardMode })), lineKeys.length > 0 && (jsx(LineRenderer, { data: context.data, config: lineConfig, scales: context.scales, dimensions: context.dimensions, margin: context.margin, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots, radius: dotRadius, hoveredPoint: context.hoveredPoint, onHoverPoint: context.setHoveredPoint, onMouseEnter: handleComboMouseEnter, onMouseMove: context.handleMouseMove, onMouseLeave: context.handleMouseLeave, focusedElementIndex: context.focusedElementIndex, isKeyboardMode: context.isKeyboardMode }))] }));
+    return (jsxs(Fragment, { children: [barKeys.length > 0 && (jsx(BarRenderer, { data: context.data, config: barConfig, scales: context.scales, dimensions: context.dimensions, margin: context.margin, measured: context.measured, stacked: stacked, radius: barRadius, gap: gap, categoryGap: categoryGap, showAnimation: true, variant: variant, hoveredCategory: context.hoveredCategory, onHoverCategory: context.setHoveredCategory, onMouseEnter: handleComboMouseEnter, onMouseMove: context.handleMouseMove, onMouseLeave: context.handleMouseLeave, focusedElementIndex: context.focusedElementIndex, isKeyboardMode: context.isKeyboardMode })), lineKeys.length > 0 && (jsx(LineRenderer, { data: context.data, config: lineConfig, scales: context.scales, dimensions: context.dimensions, margin: context.margin, measured: context.measured, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots, radius: dotRadius, hoveredPoint: context.hoveredPoint, onHoverPoint: context.setHoveredPoint, onMouseEnter: handleComboMouseEnter, onMouseMove: context.handleMouseMove, onMouseLeave: context.handleMouseLeave, focusedElementIndex: context.focusedElementIndex, isKeyboardMode: context.isKeyboardMode }))] }));
 };
 /**
  * ComboChart Component
@@ -85,7 +80,7 @@ const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius,
  */
 const ComboChart = ({ data, config, 
 // Standardized display props with defaults
-showGrid = COMBO_CHART_DEFAULTS.showGrid, showXAxis = COMBO_CHART_DEFAULTS.showXAxis, showYAxis = COMBO_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, 
+showGrid = COMBO_CHART_DEFAULTS.showGrid, showXAxis = COMBO_CHART_DEFAULTS.showXAxis, showYAxis = COMBO_CHART_DEFAULTS.showYAxis, legend, minValue: propMinValue, maxValue: propMaxValue, variant = COMBO_CHART_DEFAULTS.variant, 
 // Visual props (inherited from StandardVisualProps)
 barRadius, dotRadius, radius, // @deprecated - kept for backward compatibility
 strokeWidth = COMBO_CHART_DEFAULTS.strokeWidth, gap = COMBO_CHART_DEFAULTS.gap, categoryGap = COMBO_CHART_DEFAULTS.categoryGap, stacked = COMBO_CHART_DEFAULTS.stacked, 
@@ -115,6 +110,15 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
         const seriesConfig = config[key];
         return (seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) === "line";
     });
+    const resolvedLegendPosition = resolveLegendPosition(legend, config || {});
+    const legendItems = dataKeys.map((key, index) => {
+        var _a, _b;
+        return ({
+            key,
+            label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
+            color: resolveSeriesColor(index, key, config, chartTheme.baseStyle.colors.series),
+        });
+    });
     // Use unified chart scales hook
     const { scales, sanitizedData, isValid, hasWarnings} = useChartScales({
         data,
@@ -124,12 +128,12 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
         minValue: propMinValue,
         maxValue: propMaxValue,
         includeZero: true,
-        innerWidth: 600, // Will be overridden by ChartContainer
+        innerWidth: 600, // Will be overridden by ComboChartCanvas
         categoryGap,
     });
     // Early return for invalid data with error message
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: "Unable to render chart due to data validation errors" })] }));
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(Warning, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: "Unable to render chart due to data validation errors" })] }));
     }
     // Early return for empty data
     if (!sanitizedData || sanitizedData.length === 0) {
@@ -141,7 +145,7 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
     lineSeries.forEach((key) => {
         config[key];
     });
-    return (jsxs(ChartContainer, { data: sanitizedData, config: config, scales: scales, showGrid: showGrid, showXAxis: showXAxis, showYAxis: showYAxis, categoryGap: categoryGap, className: className, title: title, description: description, enableKeyboardNavigation: enableKeyboardNavigation, chartType: "combo", ...props, children: [jsx(ComboChartRenderers, { barKeys: barSeries, lineKeys: lineSeries, stacked: stacked, barRadius: resolvedBarRadius, dotRadius: resolvedDotRadius, gap: gap, categoryGap: categoryGap, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots }), showValidationWarnings && hasWarnings && (jsx("foreignObject", { x: "0", y: "0", width: "100%", height: "50", children: jsxs("div", { className: "p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), " Some data validation warnings occurred."] }) })), children] }));
+    return (jsxs(ComboChartCanvas, { data: sanitizedData, config: config, scales: scales, showGrid: showGrid, showXAxis: showXAxis, showYAxis: showYAxis, categoryGap: categoryGap, className: className, title: title, description: description, enableKeyboardNavigation: enableKeyboardNavigation, chartType: "combo", legendTop: resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), legendBottom: resolvedLegendPosition === "bottom" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pt-2" })), ...props, children: [jsx(ComboChartRenderers, { barKeys: barSeries, lineKeys: lineSeries, stacked: stacked, barRadius: resolvedBarRadius, dotRadius: resolvedDotRadius, gap: gap, categoryGap: categoryGap, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots, variant: variant }), showValidationWarnings && hasWarnings && (jsx("foreignObject", { x: "0", y: "0", width: "100%", height: "50", children: jsxs("div", { className: "p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), " Some data validation warnings occurred."] }) })), children] }));
 };
 
 export { ComboChart };