flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,295 @@
+import React__default, { useCallback, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../../utils/cn.js';
+
+// Animation timing constants
+var STACKED_CATEGORY_DELAY = 0.25;
+var STACKED_SEGMENT_STAGGER = 0.12;
+var GROUPED_BAR_STAGGER = 0.05;
+/**
+ * Simple color functions based on direct CSS variables
+ */
+var getSeriesFillColor = function (index) {
+    var 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
+ */
+var createRoundedTopBarPath = function (x, y, width, height, radius) {
+    var r = Math.min(radius, width / 2, height / 2);
+    return "\n    M ".concat(x, ",").concat(y + height, "\n    L ").concat(x, ",").concat(y + r, "\n    Q ").concat(x, ",").concat(y, " ").concat(x + r, ",").concat(y, "\n    L ").concat(x + width - r, ",").concat(y, "\n    Q ").concat(x + width, ",").concat(y, " ").concat(x + width, ",").concat(y + r, "\n    L ").concat(x + width, ",").concat(y + height, "\n    Z\n  ").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.
+ */
+var BarRenderer = function (_a) {
+    var data = _a.data, config = _a.config, scales = _a.scales, dimensions = _a.dimensions, margin = _a.margin, _b = _a.stacked, stacked = _b === void 0 ? false : _b, _c = _a.radius, radius = _c === void 0 ? 4 : _c, _d = _a.gap, gap = _d === void 0 ? 4 : _d, _e = _a.categoryGap, categoryGap = _e === void 0 ? 8 : _e, _f = _a.showAnimation, showAnimation = _f === void 0 ? true : _f, externalHoveredCategory = _a.hoveredCategory, onHoverCategory = _a.onHoverCategory, onMouseEnter = _a.onMouseEnter, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, _g = _a.focusedElementIndex, focusedElementIndex = _g === void 0 ? -1 : _g, _h = _a.isKeyboardMode, isKeyboardMode = _h === void 0 ? false : _h, className = _a.className;
+    var shouldReduceMotion = useReducedMotion();
+    // Get all data keys from config
+    var dataKeys = Object.keys(config || {});
+    // Calculate inner dimensions
+    var innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    var innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // Get min/max from scales
+    var _j = scales.y, minValue = _j.min, maxValue = _j.max;
+    // Safe division helper
+    var safeDivide = function (numerator, denominator, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        if (denominator === 0 || !isFinite(denominator))
+            return fallback;
+        var result = numerator / denominator;
+        return isFinite(result) ? result : fallback;
+    };
+    // Safe scale helper
+    var safeScale = function (value, inMin, inMax, outMin, outMax) {
+        var inRange = inMax - inMin;
+        if (inRange === 0 || !isFinite(inRange))
+            return outMin;
+        var normalized = (value - inMin) / inRange;
+        var scaled = normalized * (outMax - outMin) + outMin;
+        return isFinite(scaled) ? scaled : outMin;
+    };
+    // Calculate bar dimensions
+    var totalCategoryGap = Math.max(0, (data.length - 1) * categoryGap);
+    var availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+    var barWidth = safeDivide(availableWidth, data.length, 0);
+    var totalBarGap = Math.max(0, (dataKeys.length - 1) * gap);
+    var availableBarWidth = Math.max(0, barWidth - totalBarGap);
+    var individualBarWidth = stacked
+        ? barWidth
+        : safeDivide(availableBarWidth, dataKeys.length, 0);
+    // Helper function to calculate average of non-null values for a specific key
+    var calculateAverageForKey = useCallback(function (key) {
+        var nonNullValues = data
+            .map(function (item) { return item[key]; })
+            .filter(function (value) { return typeof value === "number" && isFinite(value); });
+        if (nonNullValues.length === 0)
+            return 0;
+        var sum = nonNullValues.reduce(function (acc, val) { return acc + val; }, 0);
+        return safeDivide(sum, nonNullValues.length);
+    }, [data]);
+    // Render individual bar path
+    var renderBarPath = useCallback(function (item, index, key, keyIndex, barX, barY, barHeight, applyRadius, isStacked, stackOrderIndex) {
+        var _a;
+        var rawValue = item[key];
+        var isNull = rawValue === null ||
+            rawValue === undefined ||
+            (typeof rawValue === "number" && !isFinite(rawValue));
+        // Get fill color for this data series
+        var fillColor = ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) || getSeriesFillColor(keyIndex);
+        var isHovered = externalHoveredCategory === index;
+        var isAnyBarHovered = externalHoveredCategory !== null;
+        var shouldReduceOpacity = isAnyBarHovered && !isHovered;
+        var 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;
+        }
+        var pathD = createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, applyRadius ? radius : 0);
+        var stackedDelayOrder = typeof stackOrderIndex === "number" ? stackOrderIndex : keyIndex;
+        var 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: delay,
+                }
+                : {
+                    type: "spring",
+                    stiffness: 100,
+                    damping: 20,
+                    delay: 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
+                ? function (e) {
+                    if (onHoverCategory) {
+                        onHoverCategory(index);
+                    }
+                    // Create content with ALL series for this category
+                    var series = dataKeys
+                        .map(function (dataKey, idx) {
+                        var _a, _b;
+                        var seriesValue = item[dataKey];
+                        var 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(function (series) {
+                        // Only include non-null and non-zero values in tooltip
+                        var rawVal = item[series.key];
+                        return (rawVal != null &&
+                            typeof rawVal === "number" &&
+                            isFinite(rawVal) &&
+                            rawVal > 0);
+                    });
+                    var content = {
+                        category: item.name || "Category ".concat(index + 1),
+                        series: stacked ? series.reverse() : series,
+                        total: stacked
+                            ? series.reduce(function (acc, s) {
+                                return acc + (typeof s.value === "number" ? s.value : 0);
+                            }, 0)
+                            : undefined,
+                    };
+                    var svgCoordinates = {
+                        x: barX + individualBarWidth / 2,
+                        y: barY,
+                        dimensions: dimensions,
+                    };
+                    onMouseEnter(e, content, svgCoordinates);
+                }
+                : undefined, onMouseMove: !isNull && onMouseMove
+                ? function (e) {
+                    if (externalHoveredCategory === index) {
+                        var svgCoordinates = {
+                            x: barX + individualBarWidth / 2,
+                            y: barY,
+                            dimensions: dimensions,
+                        };
+                        onMouseMove(e, svgCoordinates);
+                    }
+                }
+                : undefined, onMouseLeave: !isNull && onMouseLeave
+                ? function () {
+                    if (onHoverCategory) {
+                        onHoverCategory(null);
+                    }
+                    onMouseLeave();
+                }
+                : undefined }));
+    }, [
+        config,
+        dataKeys,
+        dimensions,
+        externalHoveredCategory,
+        focusedElementIndex,
+        individualBarWidth,
+        isKeyboardMode,
+        onHoverCategory,
+        onMouseEnter,
+        onMouseLeave,
+        onMouseMove,
+        radius,
+        shouldReduceMotion,
+        showAnimation,
+        stacked,
+    ]);
+    // Render all bars
+    var bars = useMemo(function () {
+        return data.map(function (item, index) {
+            var x = margin.left + index * (barWidth + categoryGap);
+            if (stacked) {
+                var visibleBarCount_1 = dataKeys.filter(function (key) { return typeof item[key] === 'number' && item[key] > 0; }).length;
+                var stackedY_1 = margin.top + innerHeight;
+                var visibleStackIndex_1 = 0;
+                // Find the index of the topmost visible (non-zero) bar to apply radius
+                var topmostVisibleIndex_1 = dataKeys.reduce(function (topIndex, key, idx) {
+                    var rawVal = item[key];
+                    var isVisible = typeof rawVal === "number" &&
+                        isFinite(rawVal) &&
+                        rawVal > 0;
+                    return isVisible ? idx : topIndex;
+                }, -1);
+                return (React__default.createElement("g", { key: index }, dataKeys.map(function (key, keyIndex) {
+                    var rawValue = item[key];
+                    var value = typeof rawValue === "number" && isFinite(rawValue)
+                        ? rawValue
+                        : 0;
+                    var isNull = rawValue === null ||
+                        rawValue === undefined ||
+                        (typeof rawValue === "number" && !isFinite(rawValue));
+                    // For null values, use the average
+                    var actualValue = isNull
+                        ? calculateAverageForKey(key)
+                        : value;
+                    var range = maxValue - minValue;
+                    var barHeight = range > 0
+                        ? safeScale(actualValue, minValue, maxValue, 0, innerHeight)
+                        : 0;
+                    var currentY = stackedY_1 - barHeight;
+                    stackedY_1 = currentY;
+                    var stackOrderIndex = !isNull && barHeight > 0
+                        ? visibleBarCount_1 - 1 - visibleStackIndex_1++
+                        : null;
+                    return renderBarPath(item, index, key, keyIndex, x, currentY, barHeight, keyIndex === topmostVisibleIndex_1, true, stackOrderIndex);
+                })));
+            }
+            else {
+                return (React__default.createElement("g", { key: index }, dataKeys.map(function (key, keyIndex) {
+                    var rawValue = item[key];
+                    var value = typeof rawValue === "number" && isFinite(rawValue)
+                        ? rawValue
+                        : 0;
+                    var isNull = rawValue === null ||
+                        rawValue === undefined ||
+                        (typeof rawValue === "number" && !isFinite(rawValue));
+                    // For null values, use the average
+                    var actualValue = isNull
+                        ? calculateAverageForKey(key)
+                        : value;
+                    var range = maxValue - minValue;
+                    var barHeight = range > 0
+                        ? safeScale(actualValue, minValue, maxValue, 0, innerHeight)
+                        : 0;
+                    var barX = x + keyIndex * (individualBarWidth + gap);
+                    var 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/ChartAxis/XAxis.js

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+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, _l = _a.alignWithEdge, alignWithEdge = _l === void 0 ? false : _l;
+    if (!show)
+        return null;
+    var formatLabel = function (item, index) {
+        if (labelFormatter) {
+            return labelFormatter(item, index);
+        }
+        return item.name || item.label || String(index);
+    };
+    var getTickX = function (index) {
+        if (alignWithEdge) {
+            if (data.length <= 1) {
+                return x + width / 2;
+            }
+            var 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 = getTickX(index);
+            var 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)));
+        })));
+};
+
+export { XAxis };

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

@@ -0,0 +1,97 @@
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+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;
+    if (!show)
+        return null;
+    // Generate tick values
+    var generateTicks = function () {
+        if (customTicks)
+            return customTicks;
+        if (tickCount <= 1)
+            return [min];
+        var 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;
+                if (value <= max) {
+                    ticks_1.push(value);
+                }
+            }
+            // Always include max if it's not already included
+            if (ticks_1[ticks_1.length - 1] < max) {
+                ticks_1.push(max);
+            }
+            return ticks_1;
+        }
+        // For larger ranges, use smarter step calculation
+        var roughStep = range / (tickCount - 1);
+        var step;
+        if (roughStep >= 1000) {
+            step = Math.ceil(roughStep / 1000) * 1000;
+        }
+        else if (roughStep >= 100) {
+            step = Math.ceil(roughStep / 100) * 100;
+        }
+        else if (roughStep >= 10) {
+            step = Math.ceil(roughStep / 10) * 10;
+        }
+        else {
+            step = Math.ceil(roughStep);
+        }
+        var ticks = [];
+        for (var i = 0; i <= tickCount; i++) {
+            var value = min + i * step;
+            if (value <= max) {
+                ticks.push(value);
+            }
+        }
+        return ticks;
+    };
+    var ticks = generateTicks();
+    var formatTick = function (value) {
+        if (tickFormatter) {
+            return tickFormatter(value);
+        }
+        // Default formatting - prioritize whole numbers
+        if (Math.abs(value) >= 1000000) {
+            return "".concat(Math.round(value / 1000000), "M");
+        }
+        else if (Math.abs(value) >= 1000) {
+            return "".concat(Math.round(value / 1000), "K");
+        }
+        else if (Number.isInteger(value) || Math.abs(value - Math.round(value)) < 0.01) {
+            return Math.round(value).toString();
+        }
+        else {
+            return value.toFixed(1);
+        }
+    };
+    var getTickY = function (value) {
+        if (max === min) {
+            return y + height / 2; // Center position when no range
+        }
+        var 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);
+            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 })),
+                React__default.createElement(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle" }, formatTick(tick))));
+        })));
+};
+
+export { YAxis };

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

@@ -0,0 +1,172 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { useTooltipPosition } from '../../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../../hooks/useChartAccessibility.js';
+import { ChartErrorBoundary } from '../ChartErrorBoundary/ChartErrorBoundary.js';
+import { XAxis } from '../ChartAxis/XAxis.js';
+import { YAxis } from '../ChartAxis/YAxis.js';
+import { HorizontalGrid } from '../ChartGrid/HorizontalGrid.js';
+import { ChartTooltip } from '../ChartTooltip/ChartTooltip.js';
+
+var ChartContext = createContext(null);
+/**
+ * Hook to access chart context from renderers
+ */
+var useChartContext = function () {
+    var context = useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChartContext must be used within a ChartContainer');
+    }
+    return context;
+};
+/**
+ * Default Y-axis tick formatter
+ */
+var defaultYAxisTickFormatter = function (value) {
+    if (value >= 1000)
+        return "".concat((value / 1000).toFixed(0), "k");
+    return value.toString();
+};
+/**
+ * ChartContainer Component
+ *
+ * Manages SVG container, axes, grid, tooltip, dimensions, and provides
+ * context to child rendering components (BarRenderer, LineRenderer, etc.)
+ */
+var ChartContainer = function (_a) {
+    var _b;
+    var children = _a.children, data = _a.data, config = _a.config, scales = _a.scales, propDimensions = _a.dimensions, propMargins = _a.margins, _c = _a.showGrid, showGrid = _c === void 0 ? true : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? true : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? true : _e, _f = _a.gridLineCount, gridLineCount = _f === void 0 ? 5 : _f, _g = _a.yAxisTickFormatter, yAxisTickFormatter = _g === void 0 ? defaultYAxisTickFormatter : _g, categoryWidth = _a.categoryWidth, _h = _a.categoryGap, categoryGap = _h === void 0 ? 8 : _h, className = _a.className, title = _a.title, description = _a.description, _j = _a.enableKeyboardNavigation, enableKeyboardNavigation = _j === void 0 ? true : _j, _k = _a.chartType, chartType = _k === void 0 ? 'bar' : _k, props = __rest(_a, ["children", "data", "config", "scales", "dimensions", "margins", "showGrid", "showXAxis", "showYAxis", "gridLineCount", "yAxisTickFormatter", "categoryWidth", "categoryGap", "className", "title", "description", "enableKeyboardNavigation", "chartType"]);
+    var containerRef = useRef(null);
+    var _l = useState(propDimensions || { width: 600, height: 400 }), dimensions = _l[0], setDimensions = _l[1];
+    var _m = useState(null), hoveredCategory = _m[0], setHoveredCategory = _m[1];
+    var _o = useState(null), hoveredPoint = _o[0], setHoveredPoint = _o[1];
+    // Detect if device is mobile/touch
+    var isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    // Use the tooltip positioning hook
+    var _p = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _p.tooltipData, tooltipRef = _p.tooltipRef, handleMouseEnter = _p.handleMouseEnter, handleMouseMove = _p.handleMouseMove, handleMouseLeave = _p.handleMouseLeave;
+    // Use accessibility hook
+    var _q = useChartAccessibility({
+        chartType: chartType,
+        data: data,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _q.chartAccessibilityProps, descriptionProps = _q.descriptionProps, focusedElementIndex = _q.focusedElementIndex, isKeyboardMode = _q.isKeyboardMode, handleMouseInteraction = _q.handleMouseInteraction;
+    // Measure container dimensions
+    useEffect(function () {
+        if (propDimensions) {
+            setDimensions(propDimensions);
+            return;
+        }
+        var updateDimensions = function () {
+            if (containerRef.current) {
+                var _a = containerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+                setDimensions({
+                    width: width || 600,
+                    height: height || 400,
+                });
+            }
+        };
+        updateDimensions();
+        var resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [propDimensions]);
+    // Calculate margins (can be overridden by prop)
+    var margin = propMargins || {
+        top: 15,
+        right: showYAxis ? 20 : 0,
+        bottom: showXAxis ? 20 : 0,
+        left: showYAxis ? 60 : 0,
+    };
+    // Calculate inner dimensions
+    var innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    var innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
+    // Derive category width and point positions using the measured width
+    var autoCategoryWidth = useMemo(function () {
+        if (dataLength === 0)
+            return 0;
+        if (chartType === "line") {
+            if (dataLength === 1) {
+                return innerWidth;
+            }
+            return innerWidth / Math.max(1, dataLength - 1);
+        }
+        var totalCategoryGap = Math.max(0, (dataLength - 1) * categoryGap);
+        var availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+        return availableWidth / dataLength;
+    }, [chartType, dataLength, innerWidth, categoryGap]);
+    var resolvedCategoryWidth = typeof categoryWidth === "number"
+        ? categoryWidth
+        : autoCategoryWidth;
+    var adjustedPointPosition = useCallback(function (index) {
+        if (dataLength === 0)
+            return 0;
+        if (chartType === "line") {
+            if (dataLength === 1) {
+                return innerWidth / 2;
+            }
+            return (index / Math.max(1, dataLength - 1)) * innerWidth;
+        }
+        return index * (resolvedCategoryWidth + categoryGap);
+    }, [chartType, dataLength, innerWidth, resolvedCategoryWidth, categoryGap]);
+    var adjustedScales = useMemo(function () {
+        var totalCategoryGap = Math.max(0, (dataLength - 1) * categoryGap);
+        var computedTotalWidth = chartType === "line"
+            ? innerWidth
+            : resolvedCategoryWidth * dataLength + totalCategoryGap;
+        return __assign(__assign({}, scales), { x: __assign(__assign({}, scales.x), { categoryWidth: resolvedCategoryWidth, totalWidth: computedTotalWidth, pointPosition: adjustedPointPosition }) });
+    }, [
+        scales,
+        chartType,
+        innerWidth,
+        dataLength,
+        resolvedCategoryWidth,
+        categoryGap,
+        adjustedPointPosition,
+    ]);
+    // Create context value
+    var contextValue = {
+        data: data,
+        config: config,
+        scales: adjustedScales,
+        dimensions: dimensions,
+        margin: margin,
+        innerWidth: innerWidth,
+        innerHeight: innerHeight,
+        hoveredCategory: hoveredCategory,
+        setHoveredCategory: setHoveredCategory,
+        hoveredPoint: hoveredPoint,
+        setHoveredPoint: setHoveredPoint,
+        handleMouseEnter: handleMouseEnter,
+        handleMouseMove: handleMouseMove,
+        handleMouseLeave: handleMouseLeave,
+        focusedElementIndex: focusedElementIndex,
+        isKeyboardMode: isKeyboardMode,
+    };
+    return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development" },
+        React__default.createElement(ChartContext.Provider, { value: contextValue },
+            React__default.createElement("div", __assign({ ref: containerRef, className: cn("chart-container w-full h-full", className) }, chartAccessibilityProps, { onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction }, props),
+                descriptionProps && React__default.createElement("div", __assign({}, descriptionProps)),
+                React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height) },
+                    React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: gridLineCount }),
+                    React__default.createElement(YAxis, { show: showYAxis, min: adjustedScales.y.min, max: adjustedScales.y.max, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: yAxisTickFormatter }),
+                    children,
+                    React__default.createElement(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: resolvedCategoryWidth, categoryGap: categoryGap })),
+                React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+                        ? { x: tooltipData.x, y: tooltipData.y }
+                        : { x: 0, y: 0 } })))));
+};
+
+export { ChartContainer, useChartContext };

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

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../../utils/cn.js';
+import { chartCrosshairTheme } from './ChartCrosshair.theme.js';
+
+/**
+ * ChartCrosshair component for rendering crosshair lines in charts
+ * Supports both vertical and horizontal lines with smooth Framer Motion transitions
+ */
+var ChartCrosshair = function (_a) {
+    var show = _a.show, x = _a.x, y = _a.y, margin = _a.margin, innerWidth = _a.innerWidth, innerHeight = _a.innerHeight, _b = _a.showHorizontal, showHorizontal = _b === void 0 ? false : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? "#6b7280" : _c, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, _e = _a.strokeDasharray, strokeDasharray = _e === void 0 ? "4 4" : _e, _f = _a.opacity, opacity = _f === void 0 ? 0.4 : _f, className = _a.className;
+    var theme = chartCrosshairTheme;
+    var baseClasses = cn(theme.baseStyle, className);
+    return (React__default.createElement(AnimatePresence, null, show && (React__default.createElement(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+            duration: 0.3,
+            ease: "easeInOut"
+        } },
+        React__default.createElement(motion.line, { x1: x, y1: margin.top, x2: x, y2: margin.top + innerHeight, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.verticalLine), animate: {
+                x1: x,
+                x2: x
+            }, transition: {
+                duration: 0.2,
+                ease: "easeOut"
+            } }),
+        showHorizontal && y !== undefined && (React__default.createElement(motion.line, { x1: margin.left, y1: y, x2: margin.left + innerWidth, y2: y, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.horizontalLine), animate: {
+                y1: y,
+                y2: y
+            }, transition: {
+                duration: 0.2,
+                ease: "easeOut"
+            } }))))));
+};
+
+export { ChartCrosshair };

package/dist/components/charts/shared/ChartCrosshair/ChartCrosshair.theme.js

@@ -0,0 +1,11 @@
+/**
+ * Default theme for ChartCrosshair component
+ * Provides consistent styling for chart crosshair lines with Framer Motion animations
+ */
+var chartCrosshairTheme = {
+    baseStyle: "pointer-events-none",
+    verticalLine: "stroke-gray-500",
+    horizontalLine: "stroke-gray-500",
+};
+
+export { chartCrosshairTheme };