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

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

@@ -0,0 +1,470 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useEffect, useRef, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.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 { BAR_CHART_DEFAULTS } from './BarChart.types.js';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+
+var BarChart = function (_a) {
+    var _b, _c;
+    var data = _a.data, config = _a.config, 
+    // Standardized display props with defaults
+    _d = _a.showGrid, 
+    // Standardized display props with defaults
+    showGrid = _d === void 0 ? BAR_CHART_DEFAULTS.showGrid : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? BAR_CHART_DEFAULTS.showXAxis : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? BAR_CHART_DEFAULTS.showYAxis : _f, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _g = _a.variant; _g === void 0 ? BAR_CHART_DEFAULTS.variant : _g; _a.theme; 
+    var // Standardized visual props with defaults (renamed from bar-specific names)
+    barRadius = _a.barRadius, radius = _a.radius, // @deprecated Use barRadius instead
+    _h = _a.gap, // @deprecated Use barRadius instead
+    gap = _h === void 0 ? BAR_CHART_DEFAULTS.gap : _h, _j = _a.categoryGap, categoryGap = _j === void 0 ? BAR_CHART_DEFAULTS.categoryGap : _j, 
+    // Bar-specific props
+    _k = _a.orientation; 
+    // Bar-specific props
+    _k === void 0 ? BAR_CHART_DEFAULTS.orientation : _k; 
+    var // Animation props
+    _l = _a.showAnimation, 
+    // Animation props
+    showAnimation = _l === void 0 ? BAR_CHART_DEFAULTS.showAnimation : _l, 
+    // Placeholder bar props
+    _m = _a.showPlaceholderBars, 
+    // Placeholder bar props
+    showPlaceholderBars = _m === void 0 ? BAR_CHART_DEFAULTS.showPlaceholderBars : _m, placeholderData = _a.placeholderData, 
+    // Base props
+    className = _a.className, title = _a.title, description = _a.description, _o = _a.enableKeyboardNavigation, enableKeyboardNavigation = _o === void 0 ? BAR_CHART_DEFAULTS.enableKeyboardNavigation : _o, _p = _a.showValidationWarnings, showValidationWarnings = _p === void 0 ? process.env.NODE_ENV === "development" : _p, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "minValue", "maxValue", "variant", "theme", "barRadius", "radius", "gap", "categoryGap", "orientation", "showAnimation", "showPlaceholderBars", "placeholderData", "className", "title", "description", "enableKeyboardNavigation", "showValidationWarnings", "children"]);
+    // Resolve barRadius with backward compatibility
+    var resolvedBarRadius = (_b = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _b !== void 0 ? _b : BAR_CHART_DEFAULTS.barRadius;
+    // Development warning for deprecated radius prop
+    if (process.env.NODE_ENV !== "production" && radius !== undefined) {
+        console.warn("[BarChart]: The `radius` prop is deprecated and will be removed in a future version. " +
+            "Use `barRadius` instead.");
+    }
+    // Animation state
+    var shouldReduceMotion = useReducedMotion();
+    var _q = useState(false); _q[0]; var setHasAnimated = _q[1];
+    useEffect(function () {
+        if (!shouldReduceMotion && showAnimation) {
+            setHasAnimated(true);
+        }
+        else {
+            setHasAnimated(true); // Show immediately if animations disabled
+        }
+    }, [shouldReduceMotion, showAnimation]);
+    // Validate data and config with error handling
+    var _r = useChartValidation(data, config, {
+        autoSanitize: true,
+        logWarnings: true,
+    }), validation = _r.validation, sanitizedData = _r.sanitizedData, isValid = _r.isValid, hasWarnings = _r.hasWarnings, safeScale = _r.safeScale, safeMath = _r.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-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite" }, props),
+            React__default.createElement("div", { className: "flex flex-col items-center gap-4 mb-1" },
+                React__default.createElement(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }),
+                React__default.createElement("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]" }, "Invalid Chart Data")),
+            React__default.createElement("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2" }, ((_c = validation.errors[0]) === null || _c === void 0 ? void 0 : _c.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-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty bar chart" }, props),
+            React__default.createElement("span", null, "No data available")));
+    }
+    // Simple color functions based on direct CSS variables (following guidelines)
+    var getSeriesFillColor = function (index) {
+        var colorVars = [
+            "var(--color-primary)",
+            "var(--color-warning)",
+            "var(--color-success)",
+            "var(--color-danger)",
+        ];
+        return colorVars[index % colorVars.length];
+    };
+    var containerRef = useRef(null);
+    var _s = useState({ width: 600, height: 400 }), dimensions = _s[0], setDimensions = _s[1];
+    var _t = useState(null), hoveredCategory = _t[0], setHoveredCategory = _t[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 _u = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _u.tooltipData, tooltipRef = _u.tooltipRef, handleMouseEnter = _u.handleMouseEnter, handleMouseMove = _u.handleMouseMove, handleMouseLeave = _u.handleMouseLeave;
+    // Use accessibility hook
+    var _v = useChartAccessibility({
+        chartType: "bar",
+        data: sanitizedData,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _v.chartAccessibilityProps, descriptionProps = _v.descriptionProps, focusedElementIndex = _v.focusedElementIndex, isKeyboardMode = _v.isKeyboardMode, handleMouseInteraction = _v.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 || {});
+    // Animation timing constant
+    var BAR_STAGGER = 0.05;
+    // 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 = 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 fill color for the first series (index 0)
+                    var fillColor = getSeriesFillColor(0);
+                    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) || fillColor,
+                            },
+                        ],
+                    };
+                    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,
+    ]);
+    // Memoize placeholder bar heights to prevent flickering on re-renders
+    var placeholderHeightMap = useMemo(function () {
+        var map = new Map();
+        if (showPlaceholderBars) {
+            sanitizedData.forEach(function (item, index) {
+                dataKeys.forEach(function (key) {
+                    var rawValue = item[key];
+                    var isNull = rawValue === null ||
+                        rawValue === undefined ||
+                        (typeof rawValue === "number" && !isFinite(rawValue));
+                    if (isNull) {
+                        var mapKey = "".concat(index, "-").concat(key);
+                        // Generate stable random factor between 0.4 and 0.8 (40% to 80% of max)
+                        var randomFactor = Math.random() * 0.4 + 0.4;
+                        map.set(mapKey, randomFactor);
+                    }
+                });
+            });
+        }
+        return map;
+    }, [sanitizedData.length, dataKeys.join(","), showPlaceholderBars]);
+    // Helper function to render individual bar path
+    var renderBarPath = function (item, index, key, keyIndex, barX, barY, barHeight, shouldAnimate) {
+        var _a;
+        var rawValue = item[key];
+        var isNull = rawValue === null ||
+            rawValue === undefined ||
+            (typeof rawValue === "number" && !isFinite(rawValue));
+        // Get fill color for this data series using direct CSS variables
+        var fillColor = getSeriesFillColor(keyIndex);
+        var isHovered = hoveredCategory === index;
+        var isAnyBarHovered = hoveredCategory !== null;
+        var shouldReduceOpacity = isAnyBarHovered && !isHovered;
+        var isFocused = isKeyboardMode && focusedElementIndex === index;
+        // Handle null bars - either skip or show placeholder
+        if (isNull) {
+            if (!showPlaceholderBars) {
+                return null; // Original behavior: don't render
+            }
+            // Show placeholder bar
+            var placeholderHeight = 0;
+            var placeholderY = barY;
+            // Try to get value from placeholderData (previous period)
+            if (placeholderData && placeholderData[index]) {
+                var placeholderValue = placeholderData[index][key];
+                if (typeof placeholderValue === "number" &&
+                    isFinite(placeholderValue)) {
+                    // Use previous period value
+                    var range = maxValue - minValue;
+                    placeholderHeight =
+                        range > 0
+                            ? safeMath.scale(placeholderValue, minValue, maxValue, 0, innerHeight)
+                            : 0;
+                    placeholderY = margin.top + innerHeight - placeholderHeight;
+                }
+            }
+            // If no placeholderData or invalid, use stable random height from memoized map
+            if (placeholderHeight === 0) {
+                var mapKey = "".concat(index, "-").concat(key);
+                var randomFactor = placeholderHeightMap.get(mapKey) || 0.6; // fallback to 60%
+                placeholderHeight = innerHeight * randomFactor;
+                placeholderY = margin.top + innerHeight - placeholderHeight;
+            }
+            var pathD_1 = createRoundedTopBarPath(barX, placeholderY, individualBarWidth, placeholderHeight, resolvedBarRadius);
+            var delay_1 = (index * dataKeys.length + keyIndex) * BAR_STAGGER;
+            return (React__default.createElement(motion.path, { key: keyIndex, d: pathD_1, initial: showAnimation && !shouldReduceMotion
+                    ? { scaleY: 0, opacity: 0 }
+                    : { scaleY: 1, opacity: 1 }, animate: {
+                    scaleY: 1,
+                    opacity: 1,
+                }, transition: {
+                    type: "spring",
+                    stiffness: 100,
+                    damping: 20,
+                    delay: delay_1,
+                }, className: "transition-opacity duration-200", style: {
+                    originY: 1,
+                    transformOrigin: "bottom",
+                    fill: "url(#diagonalHatch)",
+                    opacity: 0.75,
+                }, "aria-label": "".concat(item.name || "Category ".concat(index + 1), " - ").concat(((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key, ": No data") }));
+        }
+        // Skip rendering if bar dimensions are invalid
+        if (barHeight <= 0 || individualBarWidth <= 0) {
+            return null;
+        }
+        var pathD = createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius);
+        var delay = (index * dataKeys.length + keyIndex) * 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: {
+                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
+                ? function (e) {
+                    setHoveredCategory(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: series,
+                    };
+                    var svgCoordinates = {
+                        x: barX + individualBarWidth / 2,
+                        y: barY,
+                        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 }));
+    };
+    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)),
+            showValidationWarnings && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm" },
+                React__default.createElement("strong", null, "Chart Warnings:"),
+                React__default.createElement("ul", { className: "mt-1" }, validation.warnings
+                    .filter(function (warning) {
+                    return !warning.message.includes("has no valid numeric values");
+                })
+                    .map(function (warning, index) { return (React__default.createElement("li", { key: index },
+                    "\u2022 ",
+                    warning.message)); })),
+                validation.warnings.some(function (warning) {
+                    return warning.message.includes("has no valid numeric values");
+                }) && (React__default.createElement("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]" },
+                    React__default.createElement("span", { className: "text-[var(--color-warning)]" }, "\u2139\uFE0F Null/undefined values are handled by using averages from other data points"))))),
+            React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height) },
+                React__default.createElement("defs", null,
+                    React__default.createElement("pattern", { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "8", height: "8" },
+                        React__default.createElement("rect", { width: "8", height: "8", fill: "var(--color-neutral-50)" }),
+                        React__default.createElement("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } }))),
+                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);
+                    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
+                        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;
+                        return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight);
+                    })));
+                })),
+                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.d.ts

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from '../types/chart.types';
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from "../types/chart.types";
 export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
     barRadius?: number;
     radius?: number;
@@ -6,7 +6,7 @@ export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps
     categoryGap?: number;
     showAnimation?: boolean;
     showPlaceholderBars?: boolean;
-    placeholderData?: BaseChartProps['data'];
+    placeholderData?: BaseChartProps["data"];
     showValidationWarnings?: boolean;
 }
 export declare const BAR_CHART_DEFAULTS: {
@@ -15,7 +15,6 @@ export declare const BAR_CHART_DEFAULTS: {
     readonly gap: 4;
     readonly categoryGap: 16;
     readonly orientation: "horizontal" | "vertical";
-    readonly stacked: false;
     readonly showAnimation: true;
     readonly showPlaceholderBars: false;
     readonly showGrid: true;
@@ -29,7 +28,8 @@ export declare const BAR_CHART_DEFAULTS: {
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly showDots: true;
+    readonly stacked: false;
     readonly variant: import("../types/chart.types").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };
-export type BarChartData = BaseChartProps['data'][0];
+export type BarChartData = BaseChartProps["data"][0];

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

@@ -0,0 +1,7 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/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), { barRadius: CHART_DEFAULTS.barRadius, radius: CHART_DEFAULTS.barRadius, gap: CHART_DEFAULTS.gap, categoryGap: CHART_DEFAULTS.categoryGap, orientation: CHART_DEFAULTS.orientation, showAnimation: true, showPlaceholderBars: false });
+
+export { BAR_CHART_DEFAULTS };

package/dist/components/charts/ChartContainer.js

@@ -0,0 +1,38 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/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 };