flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/charts/shared/BarRenderer/BarRenderer.js

@@ -0,0 +1,299 @@
+import React__default, { useCallback, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../../utils/cn.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
+ */
+const getSeriesFillColor = (index) => {
+    const colorVars = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    return colorVars[index % colorVars.length];
+};
+/**
+ * Helper function to create a path for bars with only top corners rounded
+ */
+const createRoundedTopBarPath = (x, y, width, height, radius) => {
+    const r = Math.min(radius, width / 2, height / 2);
+    return `
+    M ${x},${y + height}
+    L ${x},${y + r}
+    Q ${x},${y} ${x + r},${y}
+    L ${x + width - r},${y}
+    Q ${x + width},${y} ${x + width},${y + r}
+    L ${x + width},${y + height}
+    Z
+  `.trim();
+};
+/**
+ * BarRenderer Component
+ *
+ * Pure bar rendering component that can be used standalone or within ChartContainer.
+ * 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 shouldReduceMotion = useReducedMotion();
+    // Get all data keys from config
+    const dataKeys = Object.keys(config || {});
+    // Calculate inner dimensions
+    const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // Get min/max from scales
+    const { min: minValue, max: maxValue } = scales.y;
+    // Safe division helper
+    const safeDivide = (numerator, denominator, fallback = 0) => {
+        if (denominator === 0 || !isFinite(denominator))
+            return fallback;
+        const result = numerator / denominator;
+        return isFinite(result) ? result : fallback;
+    };
+    // Safe scale helper
+    const safeScale = (value, inMin, inMax, outMin, outMax) => {
+        const inRange = inMax - inMin;
+        if (inRange === 0 || !isFinite(inRange))
+            return outMin;
+        const normalized = (value - inMin) / inRange;
+        const scaled = normalized * (outMax - outMin) + outMin;
+        return isFinite(scaled) ? scaled : outMin;
+    };
+    // Calculate bar dimensions
+    const totalCategoryGap = Math.max(0, (data.length - 1) * categoryGap);
+    const availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+    const barWidth = safeDivide(availableWidth, data.length, 0);
+    const totalBarGap = Math.max(0, (dataKeys.length - 1) * gap);
+    const availableBarWidth = Math.max(0, barWidth - totalBarGap);
+    const individualBarWidth = stacked
+        ? barWidth
+        : safeDivide(availableBarWidth, dataKeys.length, 0);
+    // Helper function to calculate average of non-null values for a specific key
+    const calculateAverageForKey = useCallback((key) => {
+        const nonNullValues = data
+            .map((item) => item[key])
+            .filter((value) => typeof value === "number" && isFinite(value));
+        if (nonNullValues.length === 0)
+            return 0;
+        const sum = nonNullValues.reduce((acc, val) => acc + val, 0);
+        return safeDivide(sum, nonNullValues.length);
+    }, [data]);
+    // Render individual bar path
+    const renderBarPath = useCallback((item, index, key, keyIndex, barX, barY, barHeight, applyRadius, isStacked, stackOrderIndex) => {
+        var _a;
+        const rawValue = item[key];
+        const isNull = rawValue === null ||
+            rawValue === undefined ||
+            (typeof rawValue === "number" && !isFinite(rawValue));
+        // Get fill color for this data series
+        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;
+        // Don't render null bars
+        if (isNull) {
+            return null;
+        }
+        // Skip rendering if bar dimensions are invalid
+        if (barHeight <= 0 || individualBarWidth <= 0) {
+            return null;
+        }
+        const pathD = 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 (React__default.createElement(motion.path, { key: keyIndex, 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: 1,
+                transformOrigin: "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 }));
+    }, [
+        config,
+        dataKeys,
+        dimensions,
+        externalHoveredCategory,
+        focusedElementIndex,
+        individualBarWidth,
+        isKeyboardMode,
+        onHoverCategory,
+        onMouseEnter,
+        onMouseLeave,
+        onMouseMove,
+        radius,
+        shouldReduceMotion,
+        showAnimation,
+        stacked,
+    ]);
+    // Render all bars
+    const bars = useMemo(() => {
+        return data.map((item, index) => {
+            const x = margin.left + index * (barWidth + categoryGap);
+            if (stacked) {
+                const visibleBarCount = dataKeys.filter((key) => typeof item[key] === 'number' && item[key] > 0).length;
+                let stackedY = margin.top + innerHeight;
+                let visibleStackIndex = 0;
+                // Find the index of the topmost visible (non-zero) bar to apply radius
+                const topmostVisibleIndex = dataKeys.reduce((topIndex, key, idx) => {
+                    const rawVal = item[key];
+                    const isVisible = typeof rawVal === "number" &&
+                        isFinite(rawVal) &&
+                        rawVal > 0;
+                    return isVisible ? idx : topIndex;
+                }, -1);
+                return (React__default.createElement("g", { key: index }, dataKeys.map((key, keyIndex) => {
+                    const rawValue = item[key];
+                    const value = typeof rawValue === "number" && isFinite(rawValue)
+                        ? rawValue
+                        : 0;
+                    const isNull = rawValue === null ||
+                        rawValue === undefined ||
+                        (typeof rawValue === "number" && !isFinite(rawValue));
+                    // For null values, use the average
+                    const actualValue = isNull
+                        ? calculateAverageForKey(key)
+                        : value;
+                    const range = maxValue - minValue;
+                    const barHeight = range > 0
+                        ? safeScale(actualValue, minValue, maxValue, 0, innerHeight)
+                        : 0;
+                    const currentY = stackedY - barHeight;
+                    stackedY = currentY;
+                    const stackOrderIndex = !isNull && barHeight > 0
+                        ? visibleBarCount - 1 - visibleStackIndex++
+                        : null;
+                    return renderBarPath(item, index, key, keyIndex, x, currentY, barHeight, keyIndex === topmostVisibleIndex, true, stackOrderIndex);
+                })));
+            }
+            else {
+                return (React__default.createElement("g", { key: index }, dataKeys.map((key, keyIndex) => {
+                    const rawValue = item[key];
+                    const value = typeof rawValue === "number" && isFinite(rawValue)
+                        ? rawValue
+                        : 0;
+                    const isNull = rawValue === null ||
+                        rawValue === undefined ||
+                        (typeof rawValue === "number" && !isFinite(rawValue));
+                    // For null values, use the average
+                    const actualValue = isNull
+                        ? calculateAverageForKey(key)
+                        : value;
+                    const range = maxValue - minValue;
+                    const barHeight = range > 0
+                        ? safeScale(actualValue, minValue, maxValue, 0, innerHeight)
+                        : 0;
+                    const barX = x + keyIndex * (individualBarWidth + gap);
+                    const barY = margin.top + innerHeight - barHeight;
+                    return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, false, undefined);
+                })));
+            }
+        });
+    }, [
+        data,
+        dataKeys,
+        margin,
+        barWidth,
+        categoryGap,
+        innerHeight,
+        stacked,
+        minValue,
+        maxValue,
+        individualBarWidth,
+        gap,
+        calculateAverageForKey,
+        renderBarPath,
+    ]);
+    return (React__default.createElement("g", { className: cn("chart-bars", className) }, bars));
+};
+
+export { BarRenderer };

package/dist/components/charts/shared/BarRenderer/BarRenderer.types.d.ts

@@ -0,0 +1,85 @@
+import type { ChartDataPoint, ChartConfig } from '../../types/chart.types';
+import type { ChartScales } from '../../hooks/useChartScales';
+import type { ChartDimensions, ChartMargins } from '../ChartContainer';
+export interface BarRendererProps {
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart configuration
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales (from useChartScales or ChartContainer)
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions: ChartDimensions;
+    /**
+     * Chart margins
+     */
+    margin: ChartMargins;
+    /**
+     * Whether bars are stacked
+     */
+    stacked?: boolean;
+    /**
+     * Bar radius (rounded corners)
+     */
+    radius?: number;
+    /**
+     * Gap between bars in a group
+     */
+    gap?: number;
+    /**
+     * Gap between categories
+     */
+    categoryGap?: number;
+    /**
+     * Whether to show animation
+     */
+    showAnimation?: boolean;
+    /**
+     * Hovered category index
+     */
+    hoveredCategory?: number | null;
+    /**
+     * Set hovered category
+     */
+    onHoverCategory?: (index: number | null) => void;
+    /**
+     * Mouse enter handler for tooltip
+     */
+    onMouseEnter?: (e: React.MouseEvent, content: any, coordinates: any) => void;
+    /**
+     * Mouse move handler for tooltip
+     */
+    onMouseMove?: (e: React.MouseEvent, coordinates: any) => void;
+    /**
+     * Mouse leave handler for tooltip
+     */
+    onMouseLeave?: () => void;
+    /**
+     * Focused element index (keyboard navigation)
+     */
+    focusedElementIndex?: number;
+    /**
+     * Whether in keyboard navigation mode
+     */
+    isKeyboardMode?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+/**
+ * Animation timing constants
+ */
+export declare const BAR_ANIMATION_TIMING: {
+    readonly STACKED_CATEGORY_DELAY: 0.25;
+    readonly STACKED_SEGMENT_STAGGER: 0.12;
+    readonly GROUPED_BAR_STAGGER: 0.05;
+};

package/dist/components/charts/shared/BarRenderer/index.d.ts

@@ -0,0 +1,3 @@
+export { BarRenderer } from './BarRenderer';
+export type { BarRendererProps } from './BarRenderer.types';
+export { BAR_ANIMATION_TIMING } from './BarRenderer.types';

package/dist/components/charts/shared/ChartAxis/ChartAxis.types.d.ts

@@ -39,6 +39,8 @@ export interface XAxisProps extends BaseAxisProps {
     labelFormatter?: (value: any, index: number) => string;
     /** Maximum width for labels before truncation */
     maxLabelWidth?: number;
+    /** Whether tick marks should align directly with the left/right edges (for line/area charts) */
+    alignWithEdge?: boolean;
 }
 export interface YAxisProps extends BaseAxisProps {
     /** Minimum value for the y-axis */

package/dist/components/charts/shared/ChartAxis/XAxis.js

@@ -6,21 +6,30 @@ import { ChartText } from '../ChartText/ChartText.js';
  * XAxis component for charts
  * Renders horizontal axis with labels and optional tick marks
  */
-var XAxis = function (_a) {
-    var data = _a.data, x = _a.x, y = _a.y, width = _a.width, categoryWidth = _a.categoryWidth, _b = _a.categoryGap, categoryGap = _b === void 0 ? 0 : _b, _c = _a.show, show = _c === void 0 ? true : _c, className = _a.className, _d = _a.color, color = _d === void 0 ? 'currentColor' : _d, _e = _a.showTicks, showTicks = _e === void 0 ? true : _e, _f = _a.tickLength, tickLength = _f === void 0 ? 6 : _f, _g = _a.tickPadding, tickPadding = _g === void 0 ? 12 : _g, _h = _a.textAnchor, textAnchor = _h === void 0 ? 'middle' : _h, _j = _a.labelRotation, labelRotation = _j === void 0 ? 0 : _j, labelFormatter = _a.labelFormatter, _k = _a.maxLabelWidth, maxLabelWidth = _k === void 0 ? 100 : _k;
+const XAxis = ({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, color = 'currentColor', showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = 'middle', labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
     if (!show)
         return null;
-    var formatLabel = function (item, index) {
+    const formatLabel = (item, index) => {
         if (labelFormatter) {
             return labelFormatter(item, index);
         }
         return item.name || item.label || String(index);
     };
+    const getTickX = (index) => {
+        if (alignWithEdge) {
+            if (data.length <= 1) {
+                return x + width / 2;
+            }
+            const relativeIndex = index / (data.length - 1);
+            return x + relativeIndex * width;
+        }
+        return x + index * (categoryWidth + categoryGap) + categoryWidth / 2;
+    };
     return (React__default.createElement("g", { className: cn('chart-x-axis', className) },
         React__default.createElement("line", { x1: x, y1: y, x2: x + width, y2: y, stroke: color, className: "opacity-20", strokeWidth: 1 }),
-        data.map(function (item, index) {
-            var tickX = x + index * (categoryWidth + categoryGap) + categoryWidth / 2;
-            var label = formatLabel(item, index);
+        data.map((item, index) => {
+            const tickX = getTickX(index);
+            const label = formatLabel(item, index);
             return (React__default.createElement("g", { key: index },
                 showTicks && (React__default.createElement("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, stroke: color, className: "opacity-40", strokeWidth: 1 })),
                 React__default.createElement(ChartText, { x: tickX, y: y + tickLength + tickPadding, textAnchor: textAnchor, maxWidth: maxLabelWidth, truncate: !!maxLabelWidth, rotation: labelRotation }, label)));

package/dist/components/charts/shared/ChartAxis/YAxis.js

@@ -6,36 +6,35 @@ import { ChartText } from '../ChartText/ChartText.js';
  * YAxis component for charts
  * Renders vertical axis with labels, optional tick marks, and grid lines
  */
-var YAxis = function (_a) {
-    var min = _a.min, max = _a.max, _b = _a.tickCount, tickCount = _b === void 0 ? 5 : _b, x = _a.x, y = _a.y, height = _a.height, _c = _a.show, show = _c === void 0 ? true : _c, className = _a.className, _d = _a.color, color = _d === void 0 ? 'currentColor' : _d, _e = _a.showTicks, showTicks = _e === void 0 ? true : _e, _f = _a.tickLength, tickLength = _f === void 0 ? 6 : _f, _g = _a.tickPadding, tickPadding = _g === void 0 ? 8 : _g, _h = _a.textAnchor, textAnchor = _h === void 0 ? 'end' : _h, tickFormatter = _a.tickFormatter, _j = _a.showGrid, showGrid = _j === void 0 ? false : _j, _k = _a.gridWidth, gridWidth = _k === void 0 ? 0 : _k, customTicks = _a.ticks;
+const YAxis = ({ min, max, tickCount = 5, x, y, height, show = true, className, color = 'currentColor', showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = 'end', tickFormatter, showGrid = false, gridWidth = 0, ticks: customTicks, }) => {
     if (!show)
         return null;
     // Generate tick values
-    var generateTicks = function () {
+    const generateTicks = () => {
         if (customTicks)
             return customTicks;
         if (tickCount <= 1)
             return [min];
-        var range = max - min;
+        const range = max - min;
         // For small ranges (like 0-100), use round numbers
         if (range <= 100) {
-            var step_1 = Math.ceil(range / (tickCount - 1) / 5) * 5; // Round to nearest 5
-            var ticks_1 = [];
-            for (var i = 0; i < tickCount; i++) {
-                var value = min + i * step_1;
+            const step = Math.ceil(range / (tickCount - 1) / 5) * 5; // Round to nearest 5
+            const ticks = [];
+            for (let i = 0; i < tickCount; i++) {
+                const value = min + i * step;
                 if (value <= max) {
-                    ticks_1.push(value);
+                    ticks.push(value);
                 }
             }
             // Always include max if it's not already included
-            if (ticks_1[ticks_1.length - 1] < max) {
-                ticks_1.push(max);
+            if (ticks[ticks.length - 1] < max) {
+                ticks.push(max);
             }
-            return ticks_1;
+            return ticks;
         }
         // For larger ranges, use smarter step calculation
-        var roughStep = range / (tickCount - 1);
-        var step;
+        const roughStep = range / (tickCount - 1);
+        let step;
         if (roughStep >= 1000) {
             step = Math.ceil(roughStep / 1000) * 1000;
         }
@@ -48,26 +47,26 @@ var YAxis = function (_a) {
         else {
             step = Math.ceil(roughStep);
         }
-        var ticks = [];
-        for (var i = 0; i <= tickCount; i++) {
-            var value = min + i * step;
+        const ticks = [];
+        for (let i = 0; i <= tickCount; i++) {
+            const value = min + i * step;
             if (value <= max) {
                 ticks.push(value);
             }
         }
         return ticks;
     };
-    var ticks = generateTicks();
-    var formatTick = function (value) {
+    const ticks = generateTicks();
+    const formatTick = (value) => {
         if (tickFormatter) {
             return tickFormatter(value);
         }
         // Default formatting - prioritize whole numbers
         if (Math.abs(value) >= 1000000) {
-            return "".concat(Math.round(value / 1000000), "M");
+            return `${Math.round(value / 1000000)}M`;
         }
         else if (Math.abs(value) >= 1000) {
-            return "".concat(Math.round(value / 1000), "K");
+            return `${Math.round(value / 1000)}K`;
         }
         else if (Number.isInteger(value) || Math.abs(value - Math.round(value)) < 0.01) {
             return Math.round(value).toString();
@@ -76,17 +75,17 @@ var YAxis = function (_a) {
             return value.toFixed(1);
         }
     };
-    var getTickY = function (value) {
+    const getTickY = (value) => {
         if (max === min) {
             return y + height / 2; // Center position when no range
         }
-        var ratio = (value - min) / (max - min);
+        const ratio = (value - min) / (max - min);
         return y + height - (ratio * height);
     };
     return (React__default.createElement("g", { className: cn('chart-y-axis', className) },
         React__default.createElement("line", { x1: x, y1: y, x2: x, y2: y + height, stroke: color, className: "opacity-10", strokeWidth: 1 }),
-        ticks.map(function (tick, index) {
-            var tickY = getTickY(tick);
+        ticks.map((tick, index) => {
+            const tickY = getTickY(tick);
             return (React__default.createElement("g", { key: index },
                 showGrid && gridWidth > 0 && (React__default.createElement("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, stroke: color, className: "opacity-10", strokeWidth: 1 })),
                 showTicks && (React__default.createElement("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, stroke: color, className: "opacity-40", strokeWidth: 1 })),

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

@@ -0,0 +1,85 @@
+import React from "react";
+import { useTooltipPosition } from "../../hooks/useTooltipPosition";
+import type { ChartContainerProps, ChartDimensions, ChartMargins } from "./ChartContainer.types";
+import type { ChartScales } from "../../hooks/useChartScales";
+import type { ChartDataPoint, ChartConfig } from "../../types/chart.types";
+/**
+ * Chart context for sharing state between ChartContainer and Renderers
+ */
+export interface ChartContextValue {
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart config
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions: ChartDimensions;
+    /**
+     * 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 useChartContext: () => ChartContextValue;
+/**
+ * ChartContainer Component
+ *
+ * Manages SVG container, axes, grid, tooltip, dimensions, and provides
+ * context to child rendering components (BarRenderer, LineRenderer, etc.)
+ */
+export declare const ChartContainer: React.FC<ChartContainerProps>;