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

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,12 +1,11 @@
-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
  */
@@ -52,11 +51,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 +124,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 +144,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 +260,9 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
         shouldReduceMotion,
         showAnimation,
         stacked,
+        isGradientVariant,
+        hasAnimated,
+        rawId,
     ]);
     // Render all bars
     const bars = useMemo(() => {
@@ -318,7 +349,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,18 +1,20 @@
+"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';
 
 /**
  * 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)",
@@ -75,7 +77,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 +87,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 +117,21 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
         const seriesConfig = config[key];
         return (seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) === "line";
     });
+    const legendSeriesColors = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    const resolvedLegendPosition = resolveLegendPosition(legend, config || {});
+    const legendItems = dataKeys.map((key, index) => {
+        var _a, _b, _c;
+        return ({
+            key,
+            label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
+            color: ((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color) || legendSeriesColors[index % legendSeriesColors.length],
+        });
+    });
     // Use unified chart scales hook
     const { scales, sanitizedData, isValid, hasWarnings} = useChartScales({
         data,
@@ -124,12 +141,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(ExclamationTriangleIcon, { 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 +158,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 };

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

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartConfig } from '../types/chart.types';
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartConfig, ChartVariant } from '../types/chart.types';
 /**
  * Series type for combo chart
  */
@@ -29,12 +29,13 @@ export interface ComboChartProps extends BaseChartProps, StandardChartDisplayPro
 }
 export declare const COMBO_CHART_DEFAULTS: {
     readonly barRadius: 32;
-    readonly dotRadius: 4;
+    readonly dotRadius: 3;
     readonly categoryGap: 16;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
-    readonly showDots: true;
+    readonly curveType: import("..").CurveType;
+    readonly showDots: false;
     readonly showDualAxis: false;
+    readonly variant: ChartVariant;
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
@@ -46,6 +47,5 @@ export declare const COMBO_CHART_DEFAULTS: {
     readonly showStroke: true;
     readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };

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

@@ -10,6 +10,10 @@ const COMBO_CHART_DEFAULTS = {
     curveType: CHART_DEFAULTS.curveType,
     showDots: CHART_DEFAULTS.showDots,
     showDualAxis: false,
+    // ComboChart's bar series render via the shared BarRenderer, which defaults
+    // to the gradient (premium) look — matching BarChart/StackedBarChart/AreaChart
+    // (CLAUDE.md §19). Pass variant="default" for flat bar fills.
+    variant: 'gradient',
 };
 
 export { COMBO_CHART_DEFAULTS };

package/dist/components/charts/ComboChart/ComboChartCanvas.d.ts

@@ -0,0 +1,98 @@
+import React from "react";
+import { useTooltipPosition } from "../hooks/useTooltipPosition";
+import type { ComboChartCanvasProps, ChartDimensions, ChartMargins } from "./ComboChartCanvas.types";
+import type { ChartScales } from "../hooks/useChartScales";
+import type { ChartDataPoint, ChartConfig } from "../types/chart.types";
+/**
+ * Chart context for sharing state between ComboChartCanvas and its renderers
+ * (BarRenderer, LineRenderer). ComboChart-only — not a general chart context;
+ * every other chart type renders its own div/svg directly (see CLAUDE.md §19).
+ */
+export interface ComboChartContextValue {
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart config
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions: ChartDimensions;
+    /**
+     * `true` once the container has a real measured size. Gate mount animations
+     * (rising bars/lines, scale-in dots) on this so motion captures geometry in
+     * the final coordinate space, not the 600×400 fallback (CLAUDE.md §19).
+     */
+    measured: boolean;
+    /**
+     * Chart margins
+     */
+    margin: ChartMargins;
+    /**
+     * Inner width (width - margins)
+     */
+    innerWidth: number;
+    /**
+     * Inner height (height - margins)
+     */
+    innerHeight: number;
+    /**
+     * Hovered category index
+     */
+    hoveredCategory: number | null;
+    /**
+     * Set hovered category
+     */
+    setHoveredCategory: (index: number | null) => void;
+    /**
+     * Hovered point (for line charts)
+     */
+    hoveredPoint: {
+        index: number;
+        key: string;
+    } | null;
+    /**
+     * Set hovered point
+     */
+    setHoveredPoint: (point: {
+        index: number;
+        key: string;
+    } | null) => void;
+    /**
+     * Tooltip handlers
+     */
+    handleMouseEnter: ReturnType<typeof useTooltipPosition>['handleMouseEnter'];
+    handleMouseMove: ReturnType<typeof useTooltipPosition>['handleMouseMove'];
+    handleMouseLeave: ReturnType<typeof useTooltipPosition>['handleMouseLeave'];
+    /**
+     * Keyboard focus index
+     */
+    focusedElementIndex: number;
+    /**
+     * Whether in keyboard navigation mode
+     */
+    isKeyboardMode: boolean;
+}
+/**
+ * Hook to access chart context from renderers
+ */
+export declare const useComboChartContext: () => ComboChartContextValue;
+/**
+ * ComboChartCanvas
+ *
+ * ComboChart's own SVG canvas — manages the SVG, axes, grid, tooltip,
+ * dimensions, and provides context to its rendering components (BarRenderer,
+ * LineRenderer). This is not general chart infrastructure: every other chart
+ * type renders its own div/svg directly and measures itself independently
+ * (CLAUDE.md §19) — this exists specifically so a bar series and a line
+ * series can share one coordinate space (scales/margins/dimensions) in the
+ * same chart.
+ */
+export declare const ComboChartCanvas: React.FC<ComboChartCanvasProps>;