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

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -0,0 +1,222 @@
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.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 { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { SCATTER_PLOT_DEFAULTS } from './ScatterPlot.types.js';
+import { scatterPlotTheme, getCategoryColor } from './ScatterPlot.theme.js';
+
+/**
+ * ScatterPlot Component
+ *
+ * Displays correlation between two variables with optional bubble sizing.
+ * Now uses shared axis components with tick marks and value labels like other charts.
+ */
+var ScatterPlot = function (_a) {
+    var _b;
+    var data = _a.data, xLabel = _a.xLabel, yLabel = _a.yLabel, propDotRadius = _a.dotRadius, pointSize = _a.pointSize, // @deprecated
+    _c = _a.showGrid, // @deprecated
+    showGrid = _c === void 0 ? SCATTER_PLOT_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? SCATTER_PLOT_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? SCATTER_PLOT_DEFAULTS.showYAxis : _e, _f = _a.showTooltip, showTooltip = _f === void 0 ? SCATTER_PLOT_DEFAULTS.showTooltip : _f, colors = _a.colors, propMinValue = _a.minValue, propMaxValue = _a.maxValue, themeOverrides = _a.theme, className = _a.className, svgClassName = _a.svgClassName, dotClassName = _a.dotClassName; _a.gridClassName; var axisClassName = _a.axisClassName, title = _a.title, description = _a.description, _g = _a.enableKeyboardNavigation, enableKeyboardNavigation = _g === void 0 ? SCATTER_PLOT_DEFAULTS.enableKeyboardNavigation : _g, props = __rest(_a, ["data", "xLabel", "yLabel", "dotRadius", "pointSize", "showGrid", "showXAxis", "showYAxis", "showTooltip", "colors", "minValue", "maxValue", "theme", "className", "svgClassName", "dotClassName", "gridClassName", "axisClassName", "title", "description", "enableKeyboardNavigation"]);
+    var theme = __assign(__assign({}, scatterPlotTheme), (themeOverrides || {}));
+    var chartColors = colors || theme.colors || scatterPlotTheme.colors;
+    // Use dotRadius, fallback to pointSize for backward compatibility
+    var dotRadiusValue = (_b = propDotRadius !== null && propDotRadius !== void 0 ? propDotRadius : pointSize) !== null && _b !== void 0 ? _b : SCATTER_PLOT_DEFAULTS.dotRadius;
+    // Responsive container dimensions
+    var containerRef = useRef(null);
+    var _h = useState({ width: 600, height: 400 }), dimensions = _h[0], setDimensions = _h[1];
+    // Update dimensions on mount and resize
+    useEffect(function () {
+        if (!containerRef.current)
+            return;
+        var updateDimensions = function () {
+            if (containerRef.current) {
+                var rect = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: rect.width || 600,
+                    height: rect.height || 400,
+                });
+            }
+        };
+        // Initial measurement
+        updateDimensions();
+        // Setup ResizeObserver
+        var resizeObserver = new ResizeObserver(updateDimensions);
+        resizeObserver.observe(containerRef.current);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Calculate ranges and categories
+    var _j = useMemo(function () {
+        // Filter out invalid data points
+        var valid = data.filter(function (d) {
+            return typeof d.x === 'number' &&
+                typeof d.y === 'number' &&
+                !isNaN(d.x) &&
+                !isNaN(d.y) &&
+                isFinite(d.x) &&
+                isFinite(d.y);
+        });
+        if (valid.length === 0) {
+            return {
+                xMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                xMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
+                yMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                yMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
+                categories: [],
+                validData: [],
+            };
+        }
+        var xValues = valid.map(function (d) { return d.x; });
+        var yValues = valid.map(function (d) { return d.y; });
+        var cats = Array.from(new Set(valid.map(function (d) { return d.category; }).filter(Boolean)));
+        var minX = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min.apply(Math, xValues);
+        var maxX = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max.apply(Math, xValues);
+        var minY = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min.apply(Math, yValues);
+        var maxY = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max.apply(Math, yValues);
+        return {
+            xMin: minX,
+            xMax: maxX === minX ? minX + 1 : maxX, // Avoid same min/max
+            yMin: minY,
+            yMax: maxY === minY ? minY + 1 : maxY, // Avoid same min/max
+            categories: cats,
+            validData: valid,
+        };
+    }, [data, propMinValue, propMaxValue]), xMin = _j.xMin, xMax = _j.xMax, yMin = _j.yMin, yMax = _j.yMax, categories = _j.categories, validData = _j.validData;
+    // Chart dimensions with margins (pixel-based like other charts)
+    var margin = {
+        top: 20,
+        right: 20,
+        bottom: showXAxis ? 60 : 20,
+        left: showYAxis ? 60 : 20,
+    };
+    var innerWidth = dimensions.width - margin.left - margin.right;
+    var innerHeight = dimensions.height - margin.top - margin.bottom;
+    // Scale functions (pixel-based)
+    var scaleX = function (value) {
+        var ratio = (value - xMin) / (xMax - xMin);
+        return margin.left + ratio * innerWidth;
+    };
+    var scaleY = function (value) {
+        var ratio = (value - yMin) / (yMax - yMin);
+        return margin.top + innerHeight - ratio * innerHeight;
+    };
+    // Get color for category
+    var getColor = function (category) {
+        if (!category)
+            return chartColors[0];
+        var index = categories.indexOf(category);
+        return getCategoryColor(chartColors, index);
+    };
+    // Tooltip setup
+    var isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
+    var _k = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _k.tooltipData, tooltipRef = _k.tooltipRef, handleMouseEnter = _k.handleMouseEnter, handleMouseMove = _k.handleMouseMove, handleMouseLeave = _k.handleMouseLeave;
+    // Accessibility setup (create config from data for accessibility)
+    var config = useMemo(function () {
+        var configObj = {};
+        categories.forEach(function (cat, idx) {
+            configObj[cat] = {
+                label: cat,
+                color: getCategoryColor(chartColors, idx),
+            };
+        });
+        return configObj;
+    }, [categories, chartColors]);
+    var chartDataForAccessibility = useMemo(function () {
+        return validData.map(function (point) { return ({
+            category: point.category || 'Point',
+            x: point.x,
+            y: point.y,
+            size: point.size,
+            label: point.label,
+        }); });
+    }, [validData]);
+    var _l = useChartAccessibility({
+        chartType: 'scatter',
+        data: chartDataForAccessibility,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _l.chartAccessibilityProps, descriptionProps = _l.descriptionProps, handleMouseInteraction = _l.handleMouseInteraction;
+    // Generate X-axis data for axis component
+    var xAxisData = useMemo(function () {
+        // Create tick marks for X axis
+        var tickCount = 5;
+        var range = xMax - xMin;
+        var step = range / (tickCount - 1);
+        return Array.from({ length: tickCount }, function (_, i) { return ({
+            name: (xMin + i * step).toFixed(0),
+            value: xMin + i * step,
+        }); });
+    }, [xMin, xMax]);
+    // Return empty state if no data
+    if (validData.length === 0) {
+        return (React__default.createElement("div", __assign({ ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' } }, props),
+            React__default.createElement("div", { className: theme.emptyStateStyle }, data.length === 0 ? 'No data available' : 'No valid data points')));
+    }
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' } }, chartAccessibilityProps, props),
+        React__default.createElement("svg", __assign({ width: dimensions.width, height: dimensions.height, className: cn(theme.svgStyle, svgClassName) }, descriptionProps),
+            React__default.createElement(YAxis, { show: showYAxis, min: yMin, max: yMax, x: margin.left, y: margin.top, height: innerHeight, showGrid: showGrid, gridWidth: innerWidth, tickCount: 5, className: cn(axisClassName) }),
+            validData.map(function (point, index) {
+                var cx = scaleX(point.x);
+                var cy = scaleY(point.y);
+                var size = point.size ? Math.sqrt(point.size) / 2 : dotRadiusValue;
+                var pointColor = getColor(point.category);
+                return (React__default.createElement(motion.circle, { key: index, cx: cx, cy: cy, r: size, fill: pointColor, className: cn(theme.dotStyle, dotClassName), strokeWidth: "0.5", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.01, duration: 0.3 }, whileHover: { scale: 1.5, opacity: 1 }, onMouseEnter: function (e) {
+                        if (showTooltip) {
+                            var content = {
+                                category: point.label || point.category || "Point ".concat(index + 1),
+                                series: __spreadArray([
+                                    {
+                                        key: 'x',
+                                        label: xLabel || 'X',
+                                        value: point.x.toFixed(2),
+                                        color: pointColor,
+                                    },
+                                    {
+                                        key: 'y',
+                                        label: yLabel || 'Y',
+                                        value: point.y.toFixed(2),
+                                        color: pointColor,
+                                    }
+                                ], (point.size
+                                    ? [
+                                        {
+                                            key: 'size',
+                                            label: 'Size',
+                                            value: point.size.toFixed(2),
+                                            color: pointColor,
+                                        },
+                                    ]
+                                    : []), true),
+                            };
+                            // Pass SVG coordinates for proper positioning (especially in mobile/constrained containers)
+                            var svgCoordinates = isMobile ? {
+                                x: cx,
+                                y: cy,
+                                dimensions: dimensions
+                            } : undefined;
+                            handleMouseEnter(e, content, svgCoordinates);
+                        }
+                        handleMouseInteraction();
+                    }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }));
+            }),
+            React__default.createElement(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }),
+            xLabel && showXAxis && (React__default.createElement("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]" }, xLabel)),
+            yLabel && showYAxis && (React__default.createElement("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", transform: "rotate(-90 15 ".concat(margin.top + innerHeight / 2, ")") }, yLabel))),
+        categories.length > 0 && (React__default.createElement("div", { className: theme.legendContainerStyle }, categories.map(function (cat, index) { return (React__default.createElement("div", { key: cat, className: theme.legendItemStyle },
+            React__default.createElement("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }),
+            React__default.createElement("span", { className: theme.legendLabelStyle }, cat))); }))),
+        showTooltip && (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: "scatter" }))));
+};
+ScatterPlot.displayName = 'ScatterPlot';
+
+export { ScatterPlot };

package/dist/components/charts/ScatterPlot/ScatterPlot.theme.js

@@ -0,0 +1,38 @@
+/**
+ * ScatterPlot Theme - Uses CSS variables for production-ready styling
+ */
+var scatterPlotTheme = {
+    containerStyle: 'relative inline-flex flex-col items-center w-full',
+    svgStyle: 'overflow-visible',
+    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
+    // Grid styles
+    gridLineStyle: 'stroke-[var(--color-border)]',
+    // Axis styles
+    axisLineStyle: 'stroke-[var(--color-text-secondary)]',
+    axisLabelStyle: 'fill-[var(--color-text-secondary)]',
+    // Data point styles
+    dotStyle: 'fill-opacity-70 stroke-white',
+    dotHoverStyle: 'fill-opacity-100',
+    // Legend styles
+    legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
+    legendItemStyle: 'flex items-center gap-2',
+    legendDotStyle: 'w-3 h-3 rounded-full',
+    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
+    // Default category colors using CSS variables
+    colors: [
+        'var(--color-primary)',
+        'var(--color-success)',
+        'var(--color-warning)',
+        'var(--color-danger)',
+        'hsl(262, 83%, 58%)', // violet
+        'hsl(328, 86%, 70%)', // pink
+    ],
+};
+/**
+ * Get fill color for category (supports both CSS variables and direct colors)
+ */
+function getCategoryColor(colors, categoryIndex) {
+    return colors[categoryIndex % colors.length];
+}
+
+export { getCategoryColor, scatterPlotTheme };

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

@@ -0,0 +1,9 @@
+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 SCATTER_PLOT_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { dotRadius: 4, pointSize: 4, showTooltip: true });
+
+export { SCATTER_PLOT_DEFAULTS };

package/dist/components/charts/StackedBarChart/StackedBarChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { StackedBarChartProps } from "./StackedBarChart.types";
+export declare const StackedBarChart: React.FC<StackedBarChartProps>;

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -0,0 +1,314 @@
+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 { STACKED_BAR_CHART_DEFAULTS } from './StackedBarChart.types.js';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+
+var StackedBarChart = 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 ? STACKED_BAR_CHART_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? STACKED_BAR_CHART_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? STACKED_BAR_CHART_DEFAULTS.showYAxis : _e, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _f = _a.variant; _f === void 0 ? STACKED_BAR_CHART_DEFAULTS.variant : _f; _a.theme; 
+    var // Bar visual props
+    _g = _a.barRadius, 
+    // Bar visual props
+    barRadius = _g === void 0 ? STACKED_BAR_CHART_DEFAULTS.barRadius : _g, _h = _a.categoryGap, categoryGap = _h === void 0 ? STACKED_BAR_CHART_DEFAULTS.categoryGap : _h, 
+    // Stacking behavior
+    _j = _a.stackOffset, 
+    // Stacking behavior
+    stackOffset = _j === void 0 ? STACKED_BAR_CHART_DEFAULTS.stackOffset : _j, 
+    // Animation props
+    _k = _a.showAnimation, 
+    // Animation props
+    showAnimation = _k === void 0 ? STACKED_BAR_CHART_DEFAULTS.showAnimation : _k, 
+    // Base props
+    className = _a.className, title = _a.title, description = _a.description, _l = _a.enableKeyboardNavigation, enableKeyboardNavigation = _l === void 0 ? STACKED_BAR_CHART_DEFAULTS.enableKeyboardNavigation : _l, _m = _a.showValidationWarnings, showValidationWarnings = _m === void 0 ? process.env.NODE_ENV === "development" : _m, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "minValue", "maxValue", "variant", "theme", "barRadius", "categoryGap", "stackOffset", "showAnimation", "className", "title", "description", "enableKeyboardNavigation", "showValidationWarnings", "children"]);
+    // Animation state
+    var shouldReduceMotion = useReducedMotion();
+    var _o = useState(false); _o[0]; var setHasAnimated = _o[1];
+    useEffect(function () {
+        if (!shouldReduceMotion && showAnimation) {
+            setHasAnimated(true);
+        }
+        else {
+            setHasAnimated(true);
+        }
+    }, [shouldReduceMotion, showAnimation]);
+    // 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; _p.safeScale; var safeMath = _p.safeMath;
+    // Early return for invalid data
+    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" }, ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
+                "Unable to render chart due to data validation errors")));
+    }
+    // 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 stacked bar chart" }, props),
+            React__default.createElement("span", null, "No data available")));
+    }
+    // Color palette using CSS variables
+    var getSeriesFillColor = function (index) {
+        var colorVars = [
+            "var(--color-primary)",
+            "var(--color-primary-400)",
+            "var(--color-primary-300)",
+            "var(--color-primary-200)",
+            "var(--color-warning)",
+            "var(--color-success)",
+        ];
+        return colorVars[index % colorVars.length];
+    };
+    var containerRef = useRef(null);
+    var _q = useState({ width: 600, height: 400 }), dimensions = _q[0], setDimensions = _q[1];
+    var _r = useState(null), hoveredCategory = _r[0], setHoveredCategory = _r[1];
+    var isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    var _s = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _s.tooltipData, tooltipRef = _s.tooltipRef, handleMouseEnter = _s.handleMouseEnter, handleMouseMove = _s.handleMouseMove, handleMouseLeave = _s.handleMouseLeave;
+    var _t = useChartAccessibility({
+        chartType: "bar",
+        data: sanitizedData,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _t.chartAccessibilityProps, descriptionProps = _t.descriptionProps, focusedElementIndex = _t.focusedElementIndex, isKeyboardMode = _t.isKeyboardMode, handleMouseInteraction = _t.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();
+        };
+    }, []);
+    // Calculate dimensions
+    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
+    var BAR_STAGGER = 0.08;
+    // Calculate stacked values for each data point
+    var getStackedValues = useMemo(function () {
+        var stackedData = {};
+        sanitizedData.forEach(function (item, dataIndex) {
+            var cumulativeValue = 0;
+            dataKeys.forEach(function (key) {
+                if (!stackedData[key]) {
+                    stackedData[key] = [];
+                }
+                var rawValue = item[key];
+                var value = typeof rawValue === "number" && isFinite(rawValue) ? rawValue : 0;
+                stackedData[key][dataIndex] = {
+                    base: cumulativeValue,
+                    top: cumulativeValue + value,
+                };
+                cumulativeValue += value;
+            });
+        });
+        return stackedData;
+    }, [sanitizedData, dataKeys]);
+    // Calculate max stacked value for scale
+    var maxStackedValue = useMemo(function () {
+        var max = 0;
+        sanitizedData.forEach(function (item) {
+            var sum = 0;
+            dataKeys.forEach(function (key) {
+                var rawValue = item[key];
+                var value = typeof rawValue === "number" && isFinite(rawValue) ? rawValue : 0;
+                sum += value;
+            });
+            if (sum > max)
+                max = sum;
+        });
+        return max;
+    }, [sanitizedData, dataKeys]);
+    // Apply stackOffset if needed
+    var getScaledMaxValue = function () {
+        if (stackOffset === "expand") {
+            return 100; // Normalize to 100%
+        }
+        return propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : maxStackedValue;
+    };
+    var minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
+    var maxValue = getScaledMaxValue();
+    // 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);
+    // 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();
+    };
+    // Helper function to create a rectangular path (no rounded corners)
+    var createRectPath = function (x, y, width, height) {
+        return "\n      M ".concat(x, ",").concat(y + height, "\n      L ").concat(x, ",").concat(y, "\n      L ").concat(x + width, ",").concat(y, "\n      L ").concat(x + width, ",").concat(y + height, "\n      Z\n    ").trim();
+    };
+    // Render stacked bars
+    var renderStackedBar = function (item, categoryIndex, x) {
+        var isHovered = hoveredCategory === categoryIndex;
+        var isAnyBarHovered = hoveredCategory !== null;
+        var shouldReduceOpacity = isAnyBarHovered && !isHovered;
+        var isFocused = isKeyboardMode && focusedElementIndex === categoryIndex;
+        var range = maxValue - minValue;
+        return (React__default.createElement("g", { key: categoryIndex }, dataKeys.map(function (key, keyIndex) {
+            var _a, _b;
+            var stackData = (_a = getStackedValues[key]) === null || _a === void 0 ? void 0 : _a[categoryIndex];
+            if (!stackData)
+                return null;
+            var baseValue = stackData.base;
+            var topValue = stackData.top;
+            // Apply expand offset (normalize to percentage)
+            if (stackOffset === "expand") {
+                var totalForCategory = dataKeys.reduce(function (sum, k) {
+                    var rawVal = item[k];
+                    return (sum +
+                        (typeof rawVal === "number" && isFinite(rawVal) ? rawVal : 0));
+                }, 0);
+                if (totalForCategory > 0) {
+                    baseValue = (stackData.base / totalForCategory) * 100;
+                    topValue = (stackData.top / totalForCategory) * 100;
+                }
+            }
+            var barHeight = range > 0
+                ? safeMath.scale(topValue - baseValue, 0, range, 0, innerHeight)
+                : 0;
+            var barY = margin.top +
+                innerHeight -
+                safeMath.scale(topValue, minValue, maxValue, 0, innerHeight);
+            var isTopSegment = keyIndex === dataKeys.length - 1;
+            var pathD = isTopSegment
+                ? createRoundedTopBarPath(x, barY, barWidth, barHeight, barRadius)
+                : createRectPath(x, barY, barWidth, barHeight);
+            var fillColor = ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex);
+            var delay = categoryIndex * BAR_STAGGER;
+            return (React__default.createElement(motion.path, { key: key, 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 cursor-pointer", isFocused && "stroke-2"), style: {
+                    originY: 1,
+                    transformOrigin: "bottom",
+                    fill: shouldReduceOpacity
+                        ? "var(--color-background-tertiary)"
+                        : fillColor,
+                    opacity: shouldReduceOpacity ? 0.9 : 1,
+                    stroke: isFocused ? "var(--color-primary)" : "none",
+                }, onMouseEnter: function (e) {
+                    setHoveredCategory(categoryIndex);
+                    // Create tooltip content with all series
+                    var series = dataKeys.map(function (dataKey, idx) {
+                        var _a, _b;
+                        var rawValue = item[dataKey];
+                        var value = typeof rawValue === "number" && isFinite(rawValue)
+                            ? rawValue
+                            : 0;
+                        return {
+                            key: dataKey,
+                            label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                            value: value,
+                            color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
+                        };
+                    });
+                    // Calculate total
+                    var total = series.reduce(function (sum, s) { return sum + s.value; }, 0);
+                    var content = {
+                        category: item.name || "Category ".concat(categoryIndex + 1),
+                        series: series,
+                        total: total,
+                    };
+                    var svgCoordinates = {
+                        x: x + barWidth / 2,
+                        y: barY,
+                        dimensions: dimensions,
+                    };
+                    handleMouseEnter(e, content, svgCoordinates);
+                }, onMouseMove: function (e) {
+                    if (hoveredCategory === categoryIndex) {
+                        var svgCoordinates = {
+                            x: x + barWidth / 2,
+                            y: barY,
+                            dimensions: dimensions,
+                        };
+                        handleMouseMove(e, svgCoordinates);
+                    }
+                }, onMouseLeave: function () {
+                    setHoveredCategory(null);
+                    handleMouseLeave();
+                } }));
+        })));
+    };
+    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.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 (stackOffset === "expand")
+                            return "".concat(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 renderStackedBar(item, index, x);
+                })),
+                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 { StackedBarChart };

package/dist/components/charts/StackedBarChart/StackedBarChart.types.d.ts

@@ -0,0 +1,34 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from "../types/chart.types";
+export type StackOffset = "none" | "expand" | "wiggle" | "silhouette";
+export interface StackedBarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
+    barRadius?: number;
+    gap?: number;
+    categoryGap?: number;
+    stackOffset?: StackOffset;
+    showAnimation?: boolean;
+    showValidationWarnings?: boolean;
+}
+export declare const STACKED_BAR_CHART_DEFAULTS: {
+    readonly barRadius: 32;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly orientation: "horizontal" | "vertical";
+    readonly stackOffset: StackOffset;
+    readonly showAnimation: true;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly dotRadius: 4;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    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 StackedBarChartData = BaseChartProps["data"][0];

package/dist/components/charts/StackedBarChart/StackedBarChart.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 STACKED_BAR_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { barRadius: CHART_DEFAULTS.barRadius, gap: CHART_DEFAULTS.gap, categoryGap: CHART_DEFAULTS.categoryGap, orientation: CHART_DEFAULTS.orientation, stackOffset: "none", showAnimation: true });
+
+export { STACKED_BAR_CHART_DEFAULTS };

package/dist/components/charts/StackedBarChart/index.d.ts

@@ -0,0 +1,3 @@
+export { StackedBarChart } from "./StackedBarChart";
+export type { StackedBarChartProps, StackedBarChartData, StackOffset, } from "./StackedBarChart.types";
+export { STACKED_BAR_CHART_DEFAULTS } from "./StackedBarChart.types";