flikkui 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/components/charts/LineChart/LineChart.js

@@ -0,0 +1,396 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useChartTheme } from '../hooks/useChartTheme.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { XAxis } from '../shared/ChartAxis/XAxis.js';
+import { YAxis } from '../shared/ChartAxis/YAxis.js';
+import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { getColorValue } from '../utils/color-utils.js';
+import { LINE_CHART_DEFAULTS } from './LineChart.types.js';
+
+// Color configuration for data series
+var getSeriesColorClass = function (index) {
+    var colors = [
+        "stroke-primary-base",
+        "stroke-warning-base",
+        "stroke-success-base",
+        "stroke-error-base",
+        "stroke-info-base",
+        "stroke-secondary-base",
+    ];
+    return colors[index % colors.length];
+};
+// Monotone cubic interpolation implementation based on D3's curveMonotoneX
+var generateMonotonePath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // Calculate control points for smooth curve
+        var dx = curr.x - prev.x;
+        curr.y - prev.y;
+        // Control point distance (adjust for smoothness)
+        var controlDistance = dx * 0.3;
+        var cp1x = prev.x + controlDistance;
+        var cp1y = prev.y;
+        var cp2x = curr.x - controlDistance;
+        var cp2y = curr.y;
+        path += " C ".concat(cp1x, " ").concat(cp1y, ", ").concat(cp2x, " ").concat(cp2y, ", ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+var generateLinearPath = function (points) {
+    if (points.length === 0)
+        return "";
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        path += " L ".concat(points[i].x, " ").concat(points[i].y);
+    }
+    return path;
+};
+// Simple curve implementation
+var generateCurvePath = function (points, curveType) {
+    if (curveType === void 0) { curveType = "monotone"; }
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    switch (curveType) {
+        case "monotone":
+            return generateMonotonePath(points);
+        case "linear":
+            return generateLinearPath(points);
+        default:
+            return generateLinearPath(points);
+    }
+};
+var LineChart = function (_a) {
+    var data = _a.data, config = _a.config, 
+    // Standardized display props with defaults
+    _b = _a.showGrid, 
+    // Standardized display props with defaults
+    showGrid = _b === void 0 ? LINE_CHART_DEFAULTS.showGrid : _b, _c = _a.showXAxis, showXAxis = _c === void 0 ? LINE_CHART_DEFAULTS.showXAxis : _c, _d = _a.showYAxis, showYAxis = _d === void 0 ? LINE_CHART_DEFAULTS.showYAxis : _d, _e = _a.showNullValues, showNullValues = _e === void 0 ? LINE_CHART_DEFAULTS.showNullValues : _e, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _f = _a.variant, variant = _f === void 0 ? LINE_CHART_DEFAULTS.variant : _f, theme = _a.theme, 
+    // Standardized visual props with defaults (renamed from line-specific names)
+    _g = _a.radius, 
+    // Standardized visual props with defaults (renamed from line-specific names)
+    radius = _g === void 0 ? LINE_CHART_DEFAULTS.radius : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? LINE_CHART_DEFAULTS.strokeWidth : _h, _j = _a.curved, curved = _j === void 0 ? LINE_CHART_DEFAULTS.curved : _j, _k = _a.curveType, curveType = _k === void 0 ? LINE_CHART_DEFAULTS.curveType : _k, _l = _a.showDots, showDots = _l === void 0 ? LINE_CHART_DEFAULTS.showDots : _l, 
+    // Base props
+    className = _a.className, title = _a.title, description = _a.description, _m = _a.enableKeyboardNavigation, enableKeyboardNavigation = _m === void 0 ? LINE_CHART_DEFAULTS.enableKeyboardNavigation : _m, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "strokeWidth", "curved", "curveType", "showDots", "className", "title", "description", "enableKeyboardNavigation", "children"]);
+    // Use the new theme system
+    var _o = useChartTheme({ config: config, variant: variant, theme: theme }); _o.getSeriesColor; _o.getColorClass; _o.getOpacityClass; _o.getTransitionClass; 
+    // Legacy support
+    _o.getThemeValue;
+    var containerRef = useRef(null);
+    var _p = useState({ width: 600, height: 400 }), dimensions = _p[0], setDimensions = _p[1];
+    var _q = useState(null), hoveredPoint = _q[0], setHoveredPoint = _q[1];
+    // Detect if device is mobile/touch
+    var isMobile = typeof window !== 'undefined' &&
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    // Use the new tooltip positioning hook
+    var _r = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _r.tooltipData, tooltipRef = _r.tooltipRef, handleMouseEnter = _r.handleMouseEnter, handleMouseMove = _r.handleMouseMove, handleMouseLeave = _r.handleMouseLeave;
+    // Use accessibility hook
+    var _s = useChartAccessibility({
+        chartType: 'line',
+        data: data,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _s.chartAccessibilityProps, descriptionProps = _s.descriptionProps, focusedElementIndex = _s.focusedElementIndex, isKeyboardMode = _s.isKeyboardMode, handleMouseInteraction = _s.handleMouseInteraction;
+    // Measure container dimensions
+    useEffect(function () {
+        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();
+        };
+    }, []);
+    // Early return if no data
+    if (!data || data.length === 0) {
+        return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty line chart" }, props),
+            React__default.createElement("span", null, "No data available")));
+    }
+    // Calculate dimensions
+    var margin = {
+        top: 0,
+        right: 0,
+        bottom: showXAxis ? 40 : 0, // Reduce bottom margin when X-axis is hidden
+        left: showYAxis ? 60 : 0, // Reduce left margin when Y-axis is hidden
+    };
+    var innerWidth = dimensions.width - margin.left - margin.right;
+    var innerHeight = dimensions.height - margin.top - margin.bottom;
+    // Get all data keys from config
+    var dataKeys = Object.keys(config);
+    // Calculate scales
+    var rawMaxValue = Math.max.apply(Math, data.map(function (item) {
+        return Math.max.apply(Math, dataKeys.map(function (key) {
+            var value = item[key];
+            return typeof value === "number" ? value : 0;
+        }));
+    }));
+    var minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
+    var maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : (function () {
+        if (rawMaxValue <= 10)
+            return Math.ceil(rawMaxValue);
+        if (rawMaxValue <= 100)
+            return Math.ceil(rawMaxValue / 5) * 5;
+        if (rawMaxValue <= 1000)
+            return Math.ceil(rawMaxValue / 50) * 50;
+        if (rawMaxValue <= 10000)
+            return Math.ceil(rawMaxValue / 500) * 500;
+        return Math.ceil(rawMaxValue / 1000) * 1000;
+    })();
+    // Calculate point position
+    var getPointPosition = function (dataIndex, value) {
+        // Spread points evenly across the full width
+        // First point at left edge (margin.left), last point at right edge (margin.left + innerWidth)
+        var x = data.length === 1
+            ? margin.left + innerWidth / 2 // Center single point
+            : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+        var y = margin.top +
+            innerHeight -
+            ((value - minValue) / (maxValue - minValue)) * innerHeight;
+        return { x: x, y: y };
+    };
+    // Generate SVG path for line with null value handling
+    var generatePath = function (key) {
+        if (!showNullValues) {
+            // Original behavior: skip null values entirely
+            var points_1 = [];
+            data.forEach(function (item, index) {
+                var rawValue = item[key];
+                var isNull = rawValue === null || rawValue === undefined;
+                var value = isNull ? 0 : typeof rawValue === "number" ? rawValue : 0;
+                if (!isNull) {
+                    var _a = getPointPosition(index, value), x = _a.x, y = _a.y;
+                    points_1.push({ x: x, y: y });
+                }
+            });
+            return generateCurvePath(points_1, curved ? curveType : "linear");
+        }
+        else {
+            // New behavior: break lines at null values
+            var segments_1 = [];
+            var currentSegment_1 = [];
+            data.forEach(function (item, index) {
+                var rawValue = item[key];
+                var isNull = rawValue === null || rawValue === undefined;
+                if (isNull) {
+                    // End current segment and start a new one
+                    if (currentSegment_1.length > 0) {
+                        segments_1.push(currentSegment_1);
+                        currentSegment_1 = [];
+                    }
+                }
+                else {
+                    var value = typeof rawValue === "number" ? rawValue : 0;
+                    var _a = getPointPosition(index, value), x = _a.x, y = _a.y;
+                    currentSegment_1.push({ x: x, y: y });
+                }
+            });
+            // Add the last segment if it has points
+            if (currentSegment_1.length > 0) {
+                segments_1.push(currentSegment_1);
+            }
+            // Generate path for each segment
+            return segments_1
+                .map(function (segment) { return generateCurvePath(segment, curved ? curveType : "linear"); })
+                .join(" ");
+        }
+    };
+    // Handle keyboard focus tooltips
+    useEffect(function () {
+        if (isKeyboardMode && focusedElementIndex >= 0 && focusedElementIndex < data.length) {
+            var item_1 = data[focusedElementIndex];
+            // Create multi-series tooltip data
+            var seriesData = dataKeys.map(function (seriesKey, keyIndex) {
+                var _a, _b;
+                var seriesValue = item_1[seriesKey];
+                var numValue = typeof seriesValue === 'number' ? seriesValue : 0;
+                var colorClass = getSeriesColorClass(keyIndex);
+                return {
+                    key: seriesKey,
+                    label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
+                    value: numValue,
+                    color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                };
+            });
+            var content = {
+                category: item_1.name || "Category ".concat(focusedElementIndex + 1),
+                series: seriesData
+            };
+            // Calculate position for focused point
+            var pointX = data.length === 1
+                ? margin.left + innerWidth / 2
+                : margin.left + (focusedElementIndex / (data.length - 1)) * innerWidth;
+            var svgCoordinates = {
+                x: pointX,
+                y: margin.top + innerHeight / 2,
+                dimensions: dimensions
+            };
+            // Simulate mouse enter for keyboard focus
+            var syntheticEvent = new MouseEvent('mouseenter', {
+                clientX: pointX,
+                clientY: margin.top + innerHeight / 2,
+            });
+            handleMouseEnter(syntheticEvent, content, svgCoordinates);
+        }
+        else if (isKeyboardMode && focusedElementIndex === -1) {
+            // Only clear tooltip when explicitly exiting keyboard mode (Escape key)
+            handleMouseLeave();
+        }
+        // Don't clear tooltips when switching from keyboard to mouse mode
+    }, [isKeyboardMode, focusedElementIndex, data, config, dimensions, margin, innerWidth, innerHeight, dataKeys, handleMouseEnter, handleMouseLeave]);
+    return (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), className: "overflow-visible", role: "presentation" },
+            React__default.createElement("defs", null,
+                React__default.createElement("filter", { id: "line-shadow", x: "-20%", y: "-20%", width: "140%", height: "140%" },
+                    React__default.createElement("feDropShadow", { dx: "8", dy: "8", stdDeviation: "8", floodOpacity: "0.15", floodColor: "#000000" })),
+                React__default.createElement("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }),
+                    React__default.createElement("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })),
+                React__default.createElement("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }),
+                    React__default.createElement("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" }))),
+            React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
+            React__default.createElement(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null ? (data.length === 1
+                    ? margin.left + innerWidth / 2
+                    : margin.left + (hoveredPoint.index / (data.length - 1)) * innerWidth) : 0, y: hoveredPoint !== null && dataKeys.length === 1 ? (function () {
+                    var item = data[hoveredPoint.index];
+                    var singleKey = dataKeys[0];
+                    var singleValue = item[singleKey];
+                    var numValue = typeof singleValue === 'number' ? singleValue : 0;
+                    return margin.top + innerHeight - ((numValue - minValue) / (maxValue - minValue)) * innerHeight;
+                })() : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }),
+            React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: function (value) {
+                    if (value >= 1000)
+                        return "".concat((value / 1000).toFixed(0), "k");
+                    return value.toString();
+                } }),
+            React__default.createElement("g", { className: "chart-lines" }, dataKeys.map(function (key, keyIndex) {
+                var targetPath = generatePath(key);
+                var colorClass = getSeriesColorClass(keyIndex);
+                return (React__default.createElement("g", { key: key },
+                    React__default.createElement("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass), filter: "url(#line-shadow)" }),
+                    showDots &&
+                        data.map(function (item, dataIndex) {
+                            var rawValue = item[key];
+                            var isNull = rawValue === null || rawValue === undefined;
+                            var value = isNull
+                                ? 0
+                                : typeof rawValue === "number"
+                                    ? rawValue
+                                    : 0;
+                            // Don't render dots for null values regardless of showNullValues
+                            if (isNull)
+                                return null;
+                            var _a = getPointPosition(dataIndex, value), x = _a.x, y = _a.y;
+                            (hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex && hoveredPoint.key === key;
+                            var isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
+                            return (React__default.createElement("g", { key: "".concat(key, "-").concat(dataIndex) },
+                                React__default.createElement(ChartMarker, { cx: x, cy: y, radius: isFocused ? radius + 2 : radius, colorClass: cn(colorClass.replace("stroke-", "stroke-"), isFocused && "stroke-primary-600 stroke-2") })));
+                        })));
+            })),
+            !showDots && hoveredPoint !== null && (React__default.createElement("g", { className: "chart-hover-markers" }, dataKeys.map(function (key, keyIndex) {
+                var item = data[hoveredPoint.index];
+                var rawValue = item[key];
+                var isNull = rawValue === null || rawValue === undefined;
+                var value = isNull
+                    ? 0
+                    : typeof rawValue === "number"
+                        ? rawValue
+                        : 0;
+                // Don't render hover markers for null values
+                if (isNull)
+                    return null;
+                var _a = getPointPosition(hoveredPoint.index, value), x = _a.x, y = _a.y;
+                var colorClass = getSeriesColorClass(keyIndex);
+                return (React__default.createElement(ChartMarker, { key: "hover-".concat(key, "-").concat(hoveredPoint.index), cx: x, cy: y, radius: radius, colorClass: colorClass.replace("stroke-", "stroke-") }));
+            }))),
+            React__default.createElement("g", { className: "chart-hover-areas" }, data.map(function (item, dataIndex) {
+                // Calculate hover area based on new point positioning
+                var pointX = data.length === 1
+                    ? margin.left + innerWidth / 2
+                    : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+                // Create hover area around each point
+                var hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
+                var hoverX = data.length === 1
+                    ? margin.left
+                    : Math.max(margin.left, pointX - hoverWidth / 2);
+                // Ensure hover area doesn't exceed chart bounds
+                var adjustedWidth = data.length === 1
+                    ? innerWidth
+                    : Math.min(hoverWidth, margin.left + innerWidth - hoverX);
+                return (React__default.createElement("rect", { key: "hover-".concat(dataIndex), x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: function (e) {
+                        setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
+                        // Create multi-series tooltip data
+                        var seriesData = dataKeys.map(function (seriesKey, keyIndex) {
+                            var _a, _b;
+                            var seriesValue = item[seriesKey];
+                            var numValue = typeof seriesValue === 'number' ? seriesValue : 0;
+                            var colorClass = getSeriesColorClass(keyIndex);
+                            return {
+                                key: seriesKey,
+                                label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
+                                value: numValue,
+                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                            };
+                        });
+                        var content = {
+                            category: item.name || "Category ".concat(dataIndex + 1),
+                            series: seriesData
+                        };
+                        var svgCoordinates = {
+                            x: pointX,
+                            y: margin.top + innerHeight / 2,
+                            dimensions: dimensions
+                        };
+                        handleMouseEnter(e, content, svgCoordinates);
+                    }, onMouseMove: function (e) {
+                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                            var svgCoordinates = {
+                                x: pointX,
+                                y: margin.top + innerHeight / 2,
+                                dimensions: dimensions
+                            };
+                            handleMouseMove(e, svgCoordinates);
+                        }
+                    }, onMouseLeave: handleMouseLeave }));
+            })),
+            React__default.createElement(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0 })),
+        React__default.createElement(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "line" }),
+        children));
+};
+
+export { LineChart };

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

@@ -0,0 +1,7 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+// Default values using centralized defaults
+var LINE_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { radius: CHART_DEFAULTS.radius, strokeWidth: CHART_DEFAULTS.strokeWidth, curved: CHART_DEFAULTS.curved, curveType: CHART_DEFAULTS.curveType, showDots: CHART_DEFAULTS.showDots });
+
+export { LINE_CHART_DEFAULTS };

package/dist/components/charts/hooks/useChartAccessibility.js

@@ -0,0 +1,127 @@
+import { useState, useRef, useCallback } from 'react';
+
+function useChartAccessibility(_a) {
+    var chartType = _a.chartType, data = _a.data, config = _a.config, title = _a.title, description = _a.description, _b = _a.enableKeyboardNavigation, enableKeyboardNavigation = _b === void 0 ? true : _b;
+    var _c = useState(-1), focusedElementIndex = _c[0], setFocusedElementIndex = _c[1];
+    var _d = useState(false), isKeyboardMode = _d[0], setIsKeyboardMode = _d[1];
+    var descriptionId = useRef("chart-description-".concat(Math.random().toString(36).substr(2, 9)));
+    // Generate chart summary for screen readers
+    var generateChartSummary = useCallback(function () {
+        var _a;
+        var dataKeys = Object.keys(config);
+        var dataCount = data.length;
+        var summary = '';
+        // Chart type and basic info
+        switch (chartType) {
+            case 'bar':
+                summary = "Bar chart with ".concat(dataCount, " categories");
+                break;
+            case 'line':
+                summary = "Line chart with ".concat(dataCount, " data points");
+                break;
+            case 'area':
+                summary = "Area chart with ".concat(dataCount, " data points");
+                break;
+            case 'heatmap':
+                summary = "Heatmap with ".concat(dataCount, " data cells");
+                break;
+        }
+        // Add series information
+        if (dataKeys.length > 1) {
+            summary += " showing ".concat(dataKeys.length, " data series: ").concat(dataKeys.map(function (key) { var _a; return ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key; }).join(', '));
+        }
+        else if (dataKeys.length === 1) {
+            var seriesLabel = ((_a = config[dataKeys[0]]) === null || _a === void 0 ? void 0 : _a.label) || dataKeys[0];
+            summary += " showing ".concat(seriesLabel);
+        }
+        // Add data range information for numeric charts
+        if (chartType !== 'heatmap' && data.length > 0) {
+            var values = data.flatMap(function (item) {
+                return dataKeys.map(function (key) { return typeof item[key] === 'number' ? item[key] : 0; });
+            }).filter(function (val) { return val !== 0; });
+            if (values.length > 0) {
+                var min = Math.min.apply(Math, values);
+                var max = Math.max.apply(Math, values);
+                summary += ". Values range from ".concat(min, " to ").concat(max);
+            }
+        }
+        return summary;
+    }, [chartType, data, config]);
+    // Generate ARIA label
+    var generateAriaLabel = useCallback(function () {
+        if (title) {
+            return "".concat(title, ". ").concat(generateChartSummary());
+        }
+        return generateChartSummary();
+    }, [title, generateChartSummary]);
+    // Handle keyboard navigation
+    var handleKeyDown = useCallback(function (event) {
+        if (!enableKeyboardNavigation)
+            return;
+        // Enable keyboard mode on first keyboard interaction
+        if (!isKeyboardMode) {
+            setIsKeyboardMode(true);
+        }
+        var maxIndex = data.length - 1;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                setFocusedElementIndex(function (prev) {
+                    return prev >= maxIndex ? 0 : prev + 1;
+                });
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                setFocusedElementIndex(function (prev) {
+                    return prev <= 0 ? maxIndex : prev - 1;
+                });
+                break;
+            case 'Home':
+                event.preventDefault();
+                setFocusedElementIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                setFocusedElementIndex(maxIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                setFocusedElementIndex(-1);
+                setIsKeyboardMode(false);
+                break;
+        }
+    }, [enableKeyboardNavigation, isKeyboardMode, data.length]);
+    // Reset keyboard mode on mouse interaction
+    var handleMouseInteraction = useCallback(function () {
+        if (isKeyboardMode) {
+            setIsKeyboardMode(false);
+            setFocusedElementIndex(-1);
+        }
+    }, [isKeyboardMode]);
+    // Chart container accessibility props
+    var chartAccessibilityProps = {
+        role: 'img',
+        'aria-label': generateAriaLabel(),
+        'aria-describedby': description ? descriptionId.current : undefined,
+        tabIndex: enableKeyboardNavigation ? 0 : -1,
+        onKeyDown: handleKeyDown,
+    };
+    // Description element props
+    var descriptionProps = description ? {
+        id: descriptionId.current,
+        className: 'sr-only',
+        children: description,
+    } : null;
+    return {
+        chartAccessibilityProps: chartAccessibilityProps,
+        descriptionProps: descriptionProps,
+        focusedElementIndex: focusedElementIndex,
+        isKeyboardMode: isKeyboardMode,
+        handleMouseInteraction: handleMouseInteraction,
+        generateChartSummary: generateChartSummary,
+    };
+}
+
+export { useChartAccessibility };

package/dist/components/charts/hooks/useChartTheme.js

@@ -0,0 +1,86 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { useMemo } from 'react';
+import { chartTheme } from '../theme/chart.theme.js';
+
+function useChartTheme(_a) {
+    var config = _a.config, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, theme = _a.theme;
+    var resolvedTheme = useMemo(function () {
+        var _a, _b, _c;
+        // Merge default theme with overrides
+        var mergedTheme = __assign(__assign({}, chartTheme), { baseStyle: __assign(__assign(__assign({}, chartTheme.baseStyle), ((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || {})), { colors: __assign(__assign({}, chartTheme.baseStyle.colors), (((_a = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _a === void 0 ? void 0 : _a.colors) || {})), opacity: __assign(__assign({}, chartTheme.baseStyle.opacity), (((_b = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _b === void 0 ? void 0 : _b.opacity) || {})), transitions: __assign(__assign({}, chartTheme.baseStyle.transitions), (((_c = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _c === void 0 ? void 0 : _c.transitions) || {})) }), variants: __assign(__assign({}, chartTheme.variants), theme === null || theme === void 0 ? void 0 : theme.variants) });
+        return mergedTheme;
+    }, [theme]);
+    var getSeriesColor = useMemo(function () {
+        return function (dataKey, index) {
+            var _a, _b, _c;
+            // Add null check for config
+            if (!config || typeof config !== 'object') {
+                // Use base series colors as fallback
+                var seriesColors_1 = resolvedTheme.baseStyle.colors.series;
+                return seriesColors_1[index % seriesColors_1.length];
+            }
+            // Priority 1: Check if config has a specific color for this dataKey
+            if ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.color) {
+                return config[dataKey].color;
+            }
+            // Priority 2: Use variant colors if available
+            var variantColors = (_c = (_b = resolvedTheme.variants) === null || _b === void 0 ? void 0 : _b[variant]) === null || _c === void 0 ? void 0 : _c.colors;
+            if (variantColors && variantColors.length > 0) {
+                return variantColors[index % variantColors.length];
+            }
+            // Priority 3: Use base series colors
+            var seriesColors = resolvedTheme.baseStyle.colors.series;
+            return seriesColors[index % seriesColors.length];
+        };
+    }, [config, variant, resolvedTheme]);
+    var getColorClass = useMemo(function () {
+        return function (type) {
+            return resolvedTheme.baseStyle.colors[type];
+        };
+    }, [resolvedTheme]);
+    var getOpacityClass = useMemo(function () {
+        return function (type) {
+            return resolvedTheme.baseStyle.opacity[type];
+        };
+    }, [resolvedTheme]);
+    var getTransitionClass = useMemo(function () {
+        return function (type) {
+            return resolvedTheme.baseStyle.transitions[type];
+        };
+    }, [resolvedTheme]);
+    // Generate CSS variables for dynamic colors (for cases where Tailwind classes aren't enough)
+    var chartColors = useMemo(function () {
+        var colors = {};
+        // Add null check for config
+        if (!config || typeof config !== 'object') {
+            return colors;
+        }
+        Object.entries(config).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (value === null || value === void 0 ? void 0 : value.color) {
+                colors["--color-".concat(key)] = value.color;
+            }
+            else if ((value === null || value === void 0 ? void 0 : value.theme) && typeof value.theme === 'string') {
+                // Handle theme-based colors
+                colors["--color-".concat(key)] = value.theme;
+            }
+        });
+        return colors;
+    }, [config]);
+    var getThemeValue = function (key) {
+        return "var(--color-".concat(key, ")");
+    };
+    return {
+        // New theme utilities
+        getSeriesColor: getSeriesColor,
+        getColorClass: getColorClass,
+        getOpacityClass: getOpacityClass,
+        getTransitionClass: getTransitionClass,
+        resolvedTheme: resolvedTheme,
+        // Legacy utilities (for backward compatibility)
+        chartColors: chartColors,
+        getThemeValue: getThemeValue,
+    };
+}
+
+export { useChartTheme };