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

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

@@ -0,0 +1,402 @@
+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 { useChartValidation } from '../hooks/useChartValidation.js';
+import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.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 { getColorValue } from '../utils/color-utils.js';
+import { BAR_CHART_DEFAULTS } from './BarChart.types.js';
+
+var BarChart = function (_a) {
+    var _b;
+    var data = _a.data, config = _a.config, 
+    // Standardized display props with defaults
+    _c = _a.showGrid, 
+    // Standardized display props with defaults
+    showGrid = _c === void 0 ? BAR_CHART_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? BAR_CHART_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? BAR_CHART_DEFAULTS.showYAxis : _e, _f = _a.showNullValues, showNullValues = _f === void 0 ? BAR_CHART_DEFAULTS.showNullValues : _f, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _g = _a.variant, variant = _g === void 0 ? BAR_CHART_DEFAULTS.variant : _g, theme = _a.theme, 
+    // Standardized visual props with defaults (renamed from bar-specific names)
+    _h = _a.radius, 
+    // Standardized visual props with defaults (renamed from bar-specific names)
+    radius = _h === void 0 ? BAR_CHART_DEFAULTS.radius : _h, // Was barRadius
+    _j = _a.gap, // Was barRadius
+    gap = _j === void 0 ? BAR_CHART_DEFAULTS.gap : _j, // Was barGap
+    _k = _a.categoryGap, // Was barGap
+    categoryGap = _k === void 0 ? BAR_CHART_DEFAULTS.categoryGap : _k, // Was barCategoryGap
+    _l = _a.stacked, // Was barCategoryGap
+    stacked = _l === void 0 ? BAR_CHART_DEFAULTS.stacked : _l, 
+    // Bar-specific props
+    _m = _a.orientation; 
+    // Bar-specific props
+    _m === void 0 ? BAR_CHART_DEFAULTS.orientation : _m; 
+    var // Base props
+    className = _a.className, title = _a.title, description = _a.description, _o = _a.enableKeyboardNavigation, enableKeyboardNavigation = _o === void 0 ? BAR_CHART_DEFAULTS.enableKeyboardNavigation : _o, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "gap", "categoryGap", "stacked", "orientation", "className", "title", "description", "enableKeyboardNavigation", "children"]);
+    // Validate data and config with error handling
+    var _p = useChartValidation(data, config, {
+        autoSanitize: true,
+        logWarnings: true,
+    }), validation = _p.validation, sanitizedData = _p.sanitizedData, isValid = _p.isValid, hasWarnings = _p.hasWarnings, safeScale = _p.safeScale, safeMath = _p.safeMath;
+    // Early return for invalid data with error message
+    if (!isValid) {
+        return (React__default.createElement("div", __assign({ className: cn("chart-container flex flex-col items-center justify-center p-6 border border-warning-200 bg-warning-50 rounded-lg text-center", className), role: "alert", "aria-live": "polite" }, props),
+            React__default.createElement("div", { className: "flex items-center gap-2 mb-2" },
+                React__default.createElement("svg", { className: "w-5 h-5 text-warning-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                    React__default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" })),
+                React__default.createElement("h3", { className: "text-sm font-medium text-warning-800" }, "Invalid Chart Data")),
+            React__default.createElement("p", { className: "text-sm text-warning-600 mb-2" }, ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) || 'Unable to render chart due to data validation errors'),
+            process.env.NODE_ENV === 'development' && validation.errors.length > 1 && (React__default.createElement("details", { className: "text-xs text-warning-500" },
+                React__default.createElement("summary", { className: "cursor-pointer" },
+                    "Show all errors (",
+                    validation.errors.length,
+                    ")"),
+                React__default.createElement("ul", { className: "mt-2 text-left" }, validation.errors.map(function (error, index) { return (React__default.createElement("li", { key: index },
+                    "\u2022 ",
+                    error.message)); }))))));
+    }
+    // Early return for empty data
+    if (!sanitizedData || sanitizedData.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 bar chart" }, props),
+            React__default.createElement("span", null, "No data available")));
+    }
+    // Use the new theme system
+    var _q = useChartTheme({ config: config, variant: variant, theme: theme }); _q.getSeriesColor; _q.getColorClass; _q.getOpacityClass; _q.getTransitionClass; 
+    // Legacy support
+    _q.getThemeValue;
+    var containerRef = useRef(null);
+    var _r = useState({ width: 600, height: 400 }), dimensions = _r[0], setDimensions = _r[1];
+    var _s = useState(null), hoveredCategory = _s[0], setHoveredCategory = _s[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 _t = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _t.tooltipData, tooltipRef = _t.tooltipRef, handleMouseEnter = _t.handleMouseEnter, handleMouseMove = _t.handleMouseMove, handleMouseLeave = _t.handleMouseLeave;
+    // Use accessibility hook
+    var _u = useChartAccessibility({
+        chartType: 'bar',
+        data: sanitizedData,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _u.chartAccessibilityProps, descriptionProps = _u.descriptionProps, focusedElementIndex = _u.focusedElementIndex, isKeyboardMode = _u.isKeyboardMode, handleMouseInteraction = _u.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();
+        };
+    }, []);
+    // 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();
+    };
+    // Calculate dimensions with safe math
+    var margin = {
+        top: 15,
+        right: showYAxis ? 20 : 0,
+        bottom: showXAxis ? 20 : 0,
+        left: showYAxis ? 60 : 0,
+    };
+    var innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    var innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // Get all data keys from config
+    var dataKeys = Object.keys(config || {});
+    // Helper function to calculate average of non-null values for a specific key across all data items
+    var calculateAverageForKey = function (key) {
+        var nonNullValues = sanitizedData
+            .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 safeMath.divide(sum, nonNullValues.length);
+    };
+    // Calculate safe scale range
+    var scaleRange = safeScale.calculateRange({
+        minValue: propMinValue,
+        maxValue: propMaxValue,
+        includeZero: true,
+    });
+    var minValue = scaleRange.min, maxValue = scaleRange.max, hasValidData = scaleRange.hasValidData;
+    // If no valid data, show empty state
+    if (!hasValidData) {
+        return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty bar chart - no valid data" }, props),
+            React__default.createElement("span", null, "No valid numeric data available")));
+    }
+    // Safe bar width calculations
+    var totalCategoryGap = Math.max(0, (sanitizedData.length - 1) * categoryGap);
+    var availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+    var barWidth = safeMath.divide(availableWidth, sanitizedData.length, 0);
+    var totalBarGap = Math.max(0, (dataKeys.length - 1) * gap);
+    var availableBarWidth = Math.max(0, barWidth - totalBarGap);
+    var individualBarWidth = stacked
+        ? barWidth
+        : safeMath.divide(availableBarWidth, dataKeys.length, 0);
+    // Handle keyboard focus tooltips
+    useEffect(function () {
+        var _a, _b;
+        if (isKeyboardMode && focusedElementIndex >= 0 && focusedElementIndex < sanitizedData.length) {
+            var item = sanitizedData[focusedElementIndex];
+            if (dataKeys.length > 0) {
+                var key = dataKeys[0]; // Show first series for keyboard navigation
+                var value = item[key];
+                if (typeof value === 'number' && isFinite(value)) {
+                    // Calculate position for focused bar with safe math
+                    var x = margin.left + focusedElementIndex * (barWidth + categoryGap);
+                    var range = maxValue - minValue;
+                    var barHeight = range > 0 ? ((value - minValue) / range) * innerHeight : 0;
+                    var y = margin.top + innerHeight - barHeight;
+                    // Get the color class for the first series (index 0)
+                    var colorClass = void 0;
+                    switch (0 % 4) {
+                        case 0:
+                            colorClass = "fill-primary-base";
+                            break;
+                        case 1:
+                            colorClass = "fill-warning-base";
+                            break;
+                        case 2:
+                            colorClass = "fill-success-base";
+                            break;
+                        case 3:
+                            colorClass = "fill-danger-base";
+                            break;
+                        default:
+                            colorClass = "fill-primary-base";
+                    }
+                    var content = {
+                        category: item.name || "Category ".concat(focusedElementIndex + 1),
+                        series: [{
+                                key: key,
+                                label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
+                                value: value,
+                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                            }]
+                    };
+                    var svgCoordinates = {
+                        x: x + barWidth / 2,
+                        y: y,
+                        dimensions: dimensions
+                    };
+                    // Simulate mouse enter for keyboard focus
+                    var syntheticEvent = new MouseEvent('mouseenter', {
+                        clientX: x + barWidth / 2,
+                        clientY: y,
+                    });
+                    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, sanitizedData, config, dimensions, margin, innerWidth, innerHeight, categoryGap, minValue, maxValue, handleMouseEnter, handleMouseLeave, dataKeys, barWidth]);
+    return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === 'development' },
+        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)),
+            process.env.NODE_ENV === 'development' && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-yellow-50 border border-yellow-200 rounded text-xs text-yellow-800 shadow-sm" },
+                React__default.createElement("strong", null, "Chart Warnings:"),
+                React__default.createElement("ul", { className: "mt-1" }, validation.warnings.map(function (warning, index) { return (React__default.createElement("li", { key: index },
+                    "\u2022 ",
+                    warning.message)); })))),
+            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: 5 }),
+                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-bars" }, sanitizedData.map(function (item, index) {
+                    var x = margin.left + index * (barWidth + categoryGap);
+                    if (stacked) {
+                        var stackedY_1 = margin.top + innerHeight;
+                        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 of non-null values in this data item
+                            var actualValue = isNull ? calculateAverageForKey(key) : value;
+                            var range = maxValue - minValue;
+                            var barHeight = range > 0 ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight) : 0;
+                            var currentY = stackedY_1 - barHeight;
+                            stackedY_1 = currentY;
+                            // Get color class for this data series
+                            var colorClass;
+                            switch (keyIndex % 4) {
+                                case 0:
+                                    colorClass = "fill-primary-base";
+                                    break;
+                                case 1:
+                                    colorClass = "fill-warning-base";
+                                    break;
+                                case 2:
+                                    colorClass = "fill-success-base";
+                                    break;
+                                case 3:
+                                    colorClass = "fill-danger-base";
+                                    break;
+                                default:
+                                    colorClass = "fill-primary-base";
+                            }
+                            var isHovered = hoveredCategory === index;
+                            var isAnyBarHovered = hoveredCategory !== null;
+                            var shouldReduceOpacity = isAnyBarHovered && !isHovered;
+                            var isFocused = isKeyboardMode && focusedElementIndex === index;
+                            // Don't render null bars if showNullValues is false
+                            if (isNull && !showNullValues) {
+                                return null;
+                            }
+                            // Skip rendering if bar dimensions are invalid
+                            if (barHeight <= 0 || individualBarWidth <= 0) {
+                                return null;
+                            }
+                            return (React__default.createElement("path", { key: keyIndex, d: createRoundedTopBarPath(x, currentY, individualBarWidth, barHeight, keyIndex === dataKeys.length - 1 ? radius : 0), className: cn("transition-all duration-750", 
+                                // Only add cursor-pointer for non-null bars
+                                !isNull && "cursor-pointer", !isNull && shouldReduceOpacity ? "fill-slate-500" :
+                                    isNull ? "fill-neutral-300 " : colorClass, !isNull && shouldReduceOpacity && "opacity-20", 
+                                // Keyboard focus styles
+                                isFocused && "stroke-primary-600 stroke-2"), onMouseEnter: !isNull ? function (e) {
+                                    var _a, _b;
+                                    setHoveredCategory(index);
+                                    // Create content in MultiSeriesData format for consistency
+                                    var content = {
+                                        category: item.name || "Category ".concat(index + 1),
+                                        series: [{
+                                                key: key,
+                                                label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
+                                                value: value,
+                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                                            }]
+                                    };
+                                    var svgCoordinates = {
+                                        x: x + individualBarWidth / 2, // Center of bar
+                                        y: currentY, // Top of bar
+                                        dimensions: dimensions
+                                    };
+                                    handleMouseEnter(e, content, svgCoordinates);
+                                } : undefined, onMouseMove: !isNull ? function (e) {
+                                    if (hoveredCategory === index) {
+                                        var svgCoordinates = {
+                                            x: x + individualBarWidth / 2,
+                                            y: currentY,
+                                            dimensions: dimensions
+                                        };
+                                        handleMouseMove(e, svgCoordinates);
+                                    }
+                                } : undefined, onMouseLeave: !isNull ? function () {
+                                    setHoveredCategory(null);
+                                    handleMouseLeave();
+                                } : undefined }));
+                        })));
+                    }
+                    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 of non-null values in this data item
+                            var actualValue = isNull ? calculateAverageForKey(key) : value;
+                            var range = maxValue - minValue;
+                            var barHeight = range > 0 ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight) : 0;
+                            var barX = x + keyIndex * (individualBarWidth + gap);
+                            var barY = margin.top + innerHeight - barHeight;
+                            // Get color class for this data series
+                            var colorClass;
+                            switch (keyIndex % 4) {
+                                case 0:
+                                    colorClass = "fill-primary-base";
+                                    break;
+                                case 1:
+                                    colorClass = "fill-warning-base";
+                                    break;
+                                case 2:
+                                    colorClass = "fill-success-base";
+                                    break;
+                                case 3:
+                                    colorClass = "fill-danger-base";
+                                    break;
+                                default:
+                                    colorClass = "fill-primary-base";
+                            }
+                            var isHovered = hoveredCategory === index;
+                            var isAnyBarHovered = hoveredCategory !== null;
+                            var shouldReduceOpacity = isAnyBarHovered && !isHovered;
+                            var isFocused = isKeyboardMode && focusedElementIndex === index;
+                            // Don't render null bars if showNullValues is false
+                            if (isNull && !showNullValues) {
+                                return null;
+                            }
+                            // Skip rendering if bar dimensions are invalid
+                            if (barHeight <= 0 || individualBarWidth <= 0) {
+                                return null;
+                            }
+                            return (React__default.createElement("path", { key: keyIndex, d: createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, radius), className: cn("transition-all duration-750", 
+                                // Only add cursor-pointer for non-null bars
+                                !isNull && "cursor-pointer", !isNull && shouldReduceOpacity ? "fill-slate-500" :
+                                    isNull ? "fill-neutral-300" : colorClass, !isNull && shouldReduceOpacity && "opacity-20", 
+                                // Keyboard focus styles
+                                isFocused && "stroke-primary-600 stroke-2"), onMouseEnter: !isNull ? function (e) {
+                                    var _a, _b;
+                                    setHoveredCategory(index);
+                                    // Create content in MultiSeriesData format for consistency
+                                    var content = {
+                                        category: item.name || "Category ".concat(index + 1),
+                                        series: [{
+                                                key: key,
+                                                label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
+                                                value: value,
+                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                                            }]
+                                    };
+                                    var svgCoordinates = {
+                                        x: barX + individualBarWidth / 2, // Center of bar
+                                        y: barY, // Top of bar
+                                        dimensions: dimensions
+                                    };
+                                    handleMouseEnter(e, content, svgCoordinates);
+                                } : undefined, onMouseMove: !isNull ? function (e) {
+                                    if (hoveredCategory === index) {
+                                        var svgCoordinates = {
+                                            x: barX + individualBarWidth / 2,
+                                            y: barY,
+                                            dimensions: dimensions
+                                        };
+                                        handleMouseMove(e, svgCoordinates);
+                                    }
+                                } : undefined, onMouseLeave: !isNull ? function () {
+                                    setHoveredCategory(null);
+                                    handleMouseLeave();
+                                } : undefined }));
+                        })));
+                    }
+                })),
+                React__default.createElement(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, 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 } }),
+            children)));
+};
+
+export { BarChart };

package/dist/components/charts/BarChart/BarChart.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 BAR_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { radius: 12, gap: CHART_DEFAULTS.gap, categoryGap: CHART_DEFAULTS.categoryGap, orientation: CHART_DEFAULTS.orientation, stacked: CHART_DEFAULTS.stacked });
+
+export { BAR_CHART_DEFAULTS };

package/dist/components/charts/ChartContainer.js

@@ -0,0 +1,38 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useContext } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useChartTheme } from './hooks/useChartTheme.js';
+
+var ChartContext = createContext(null);
+function useChart() {
+    var context = useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChart must be used within a ChartContainer');
+    }
+    return context;
+}
+function ChartContainer(_a) {
+    var data = _a.data, config = _a.config, className = _a.className, children = _a.children, _b = _a.minHeight, minHeight = _b === void 0 ? 200 : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, height = _a.height, props = __rest(_a, ["data", "config", "className", "children", "minHeight", "width", "height"]);
+    // Provide default empty config if none provided
+    var safeConfig = config || {};
+    var chartColors = useChartTheme({
+        config: safeConfig,
+        variant: 'default'
+    }).chartColors;
+    // Only apply inline styles if no sizing classes are detected in className
+    var hasWidthClass = (className === null || className === void 0 ? void 0 : className.includes('w-')) || false;
+    var hasHeightClass = (className === null || className === void 0 ? void 0 : className.includes('h-')) || false;
+    var inlineStyles = __assign(__assign(__assign(__assign({}, chartColors), ((!hasWidthClass && width) && {
+        width: typeof width === 'number' ? "".concat(width, "px") : width
+    })), ((!hasHeightClass && height) && {
+        height: typeof height === 'number' ? "".concat(height, "px") : height
+    })), ((!hasHeightClass && !height) && {
+        minHeight: typeof minHeight === 'number' ? "".concat(minHeight, "px") : minHeight
+    }));
+    return (React__default.createElement(ChartContext.Provider, { value: { data: data || [], config: safeConfig } },
+        React__default.createElement("div", __assign({ className: cn("flex aspect-auto justify-center text-xs", 
+            // Add w-full as default if no width class is specified
+            !hasWidthClass && "w-full", className), style: inlineStyles }, props), children)));
+}
+
+export { ChartContainer, useChart };

package/dist/components/charts/Heatmap/Heatmap.js

@@ -0,0 +1,153 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useChartTheme } from '../hooks/useChartTheme.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChart } from '../ChartContainer.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { HeatmapCell } from './HeatmapCell.js';
+import { processHeatmapData, createGridMatrix, calculateIntensity, getDefaultTooltipContent } from './utils/heatmapUtils.js';
+import { getColorValue } from '../utils/color-utils.js';
+import { HeatmapLegend } from './HeatmapLegend.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * Heatmap component for visualizing data in a grid format with color intensity
+ * Supports weekly, monthly, hourly views and custom data structures
+ */
+var Heatmap = function (_a) {
+    var dataProp = _a.data, configProp = _a.config, _b = _a.colorScale, colorScale = _b === void 0 ? { minOpacity: 0.1 } : _b, _c = _a.layout, layout = _c === void 0 ? { gap: 6} : _c, _d = _a.axis, axis = _d === void 0 ? { showXAxis: true, showYAxis: true } : _d, _e = _a.tooltip, tooltip = _e === void 0 ? { enabled: true } : _e, _f = _a.legend, legend = _f === void 0 ? { enabled: true } : _f, valueRange = _a.valueRange, _g = _a.showNullValues, showNullValues = _g === void 0 ? true : _g, onCellClick = _a.onCellClick, cellRenderer = _a.cellRenderer, className = _a.className, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, children = _a.children, props = __rest(_a, ["data", "config", "colorScale", "layout", "axis", "tooltip", "legend", "valueRange", "showNullValues", "onCellClick", "cellRenderer", "className", "variant", "children"]);
+    // Get data and config from context if not provided as props
+    var chartContext = useChart();
+    var data = dataProp || chartContext.data;
+    var config = configProp || chartContext.config;
+    var _j = useChartTheme({
+        config: config,
+        variant: variant === 'bordered' ? 'default' : variant
+    }); _j.getThemeValue; var getSeriesColor = _j.getSeriesColor;
+    var containerRef = useRef(null);
+    var _k = useState({ width: 600, height: 400 }); _k[0]; var setDimensions = _k[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 _l = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _l.tooltipData, tooltipRef = _l.tooltipRef, handleMouseEnter = _l.handleMouseEnter, handleMouseMove = _l.handleMouseMove, handleMouseLeave = _l.handleMouseLeave;
+    // Process data
+    var processedData = useMemo(function () {
+        return processHeatmapData(data, valueRange);
+    }, [data, valueRange]);
+    var xCategories = processedData.xCategories, yCategories = processedData.yCategories, minValue = processedData.minValue, maxValue = processedData.maxValue;
+    // Create grid matrix
+    var gridMatrix = useMemo(function () {
+        return createGridMatrix(data, xCategories, yCategories);
+    }, [data, xCategories, yCategories]);
+    // 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, height: height });
+            }
+        };
+        updateDimensions();
+        window.addEventListener('resize', updateDimensions);
+        return function () { return window.removeEventListener('resize', updateDimensions); };
+    }, []);
+    // Get the color for heatmap cells
+    var cellColorClass = getSeriesColor('value', 0); // Get the first series color for 'value' key
+    var cellColor = getColorValue(cellColorClass); // Convert Tailwind class to CSS color value
+    // Handle cell hover using new tooltip system
+    var handleCellHover = function (data, event) {
+        if (!tooltip.enabled)
+            return;
+        var content = tooltip.formatter
+            ? tooltip.formatter(data)
+            : getDefaultTooltipContent(data);
+        handleMouseEnter(event, content);
+    };
+    // Handle cell mouse move using new tooltip system
+    var handleCellMouseMove = function (data, event) {
+        if (!tooltip.enabled || !tooltipData)
+            return;
+        handleMouseMove(event);
+    };
+    // Handle cell leave using new tooltip system
+    var handleCellLeave = function () {
+        if (!tooltip.enabled)
+            return;
+        handleMouseLeave();
+    };
+    // Calculate grid styles
+    var gridStyles = {
+        display: 'grid',
+        gridTemplateColumns: "repeat(".concat(xCategories.length, ", 1fr)"),
+        gridTemplateRows: "repeat(".concat(yCategories.length, ", 1fr)"),
+        gap: typeof layout.gap === 'number' ? "".concat(layout.gap, "px") : layout.gap,
+        width: '100%',
+        height: '100%',
+    };
+    // Render axis labels
+    var renderXAxisLabels = function () {
+        if (!axis.showXAxis)
+            return null;
+        return (React__default.createElement("div", { className: "flex justify-between items-center px-1 py-2 text-xs text-neutral-600 dark:text-neutral-400 select-none", style: { gridColumn: "1 / -1" }, role: "list", "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description" },
+            xCategories.map(function (category, index) { return (React__default.createElement("div", { key: category, className: "flex-1 text-center font-medium px-1", style: {
+                    transform: axis.xAxisRotation ? "rotate(".concat(axis.xAxisRotation, "deg)") : undefined
+                }, role: "listitem", "aria-label": "X-axis label: ".concat(axis.xAxisFormatter
+                    ? axis.xAxisFormatter(category, index)
+                    : String(category)) }, axis.xAxisFormatter
+                ? axis.xAxisFormatter(category, index)
+                : String(category))); }),
+            React__default.createElement("span", { id: "heatmap-x-axis-description", className: "sr-only" },
+                "X-axis contains ",
+                xCategories.length,
+                " categories representing the horizontal dimension of the heatmap")));
+    };
+    var renderYAxisLabels = function () {
+        if (!axis.showYAxis)
+            return null;
+        return (React__default.createElement("div", { className: "grid text-xs text-neutral-600 dark:text-neutral-400 pr-3", style: {
+                gridTemplateRows: "repeat(".concat(yCategories.length, ", 1fr)"),
+                gap: typeof layout.gap === 'number' ? "".concat(layout.gap, "px") : layout.gap,
+                height: '100%',
+            }, role: "list", "aria-label": "Y-axis labels", "aria-describedby": "heatmap-y-axis-description" },
+            yCategories.map(function (category, index) { return (React__default.createElement("div", { key: category, className: "flex items-center justify-end font-medium", style: {
+                    transform: axis.yAxisRotation ? "rotate(".concat(axis.yAxisRotation, "deg)") : undefined
+                }, role: "listitem", "aria-label": "Y-axis label: ".concat(axis.yAxisFormatter
+                    ? axis.yAxisFormatter(category, index)
+                    : String(category)) }, axis.yAxisFormatter
+                ? axis.yAxisFormatter(category, index)
+                : String(category))); }),
+            React__default.createElement("span", { id: "heatmap-y-axis-description", className: "sr-only" },
+                "Y-axis contains ",
+                yCategories.length,
+                " categories representing the vertical dimension of the heatmap")));
+    };
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn('relative w-full h-full min-h-[200px] flex flex-col', variant === 'bordered' && 'border border-neutral-200 dark:border-neutral-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className) }, props),
+        React__default.createElement("div", { className: "flex flex-1 min-h-0" },
+            axis.showYAxis && (React__default.createElement("div", { className: "flex-shrink-0 w-16 flex flex-col" },
+                axis.showXAxis && React__default.createElement("div", { className: "flex-shrink-0 h-8" }),
+                React__default.createElement("div", { className: "flex-1" }, renderYAxisLabels()))),
+            React__default.createElement("div", { className: "flex-1 flex flex-col min-w-0" },
+                axis.showXAxis && (React__default.createElement("div", { className: "flex-shrink-0 h-8" }, renderXAxisLabels())),
+                React__default.createElement("div", { className: "flex-1 relative min-h-0" },
+                    React__default.createElement(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: "absolute inset-0" }, gridMatrix.flat().map(function (cellData, index) {
+                        var intensity = calculateIntensity(cellData.value, minValue, maxValue);
+                        "".concat(cellData.x, "-").concat(cellData.y);
+                        // Skip null values if not showing them
+                        if (!showNullValues && cellData.value === null) {
+                            return (React__default.createElement("div", { key: "".concat(cellData.x, "-").concat(cellData.y, "-").concat(index), className: "bg-transparent" }));
+                        }
+                        var CellComponent = cellRenderer || HeatmapCell;
+                        return (React__default.createElement(CellComponent, { key: "".concat(cellData.x, "-").concat(cellData.y, "-").concat(index), data: cellData, intensity: intensity, minOpacity: colorScale === null || colorScale === void 0 ? void 0 : colorScale.minOpacity, color: cellColor, onClick: onCellClick, onHover: handleCellHover, onMouseMove: handleCellMouseMove, onLeave: handleCellLeave, className: "rounded-sm" }));
+                    }))))),
+        ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (React__default.createElement("div", { className: "flex-shrink-0 mt-2" },
+            React__default.createElement(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }))),
+        tooltip.enabled && (React__default.createElement(ChartTooltip, { content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef })),
+        children));
+};
+
+export { Heatmap };