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

package/dist/components/charts/ComboChart/ComboChart.js

@@ -0,0 +1,164 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useChartScales } from '../hooks/useChartScales.js';
+import { ChartContainer, useChartContext } from '../shared/ChartContainer/ChartContainer.js';
+import { BarRenderer } from '../shared/BarRenderer/BarRenderer.js';
+import { LineRenderer } from '../shared/LineRenderer/LineRenderer.js';
+import { COMBO_CHART_DEFAULTS } from './ComboChart.types.js';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+
+/**
+ * Internal component that uses context to render bars and lines
+ */
+var ComboChartRenderers = function (_a) {
+    var barKeys = _a.barKeys, lineKeys = _a.lineKeys, stacked = _a.stacked, barRadius = _a.barRadius, dotRadius = _a.dotRadius, gap = _a.gap, categoryGap = _a.categoryGap, strokeWidth = _a.strokeWidth, curved = _a.curved, curveType = _a.curveType, showDots = _a.showDots;
+    var context = useChartContext();
+    var dataKeys = Object.keys(context.config);
+    var seriesColors = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    // Filter configs for bars and lines, and assign colors
+    var barConfig = {};
+    barKeys.forEach(function (key) {
+        var _a;
+        var keyIndex = dataKeys.indexOf(key);
+        barConfig[key] = __assign(__assign({}, context.config[key]), { color: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.color) ||
+                seriesColors[keyIndex % seriesColors.length] });
+    });
+    var lineConfig = {};
+    lineKeys.forEach(function (key) {
+        var _a;
+        var keyIndex = dataKeys.indexOf(key);
+        lineConfig[key] = __assign(__assign({}, context.config[key]), { color: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.color) ||
+                seriesColors[keyIndex % seriesColors.length] });
+    });
+    // Create custom tooltip handler that includes ALL series (bars + lines)
+    var handleComboMouseEnter = React__default.useCallback(function (e, content, coordinates) {
+        var _a, _b;
+        // Rebuild content to include all series from the full config
+        var dataItem = context.data[(_b = (_a = content.series) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.dataIndex] || context.data.find(function (d) { return d.name === content.category; });
+        if (dataItem) {
+            var allSeries = dataKeys.map(function (key, idx) {
+                var _a, _b;
+                var value = dataItem[key];
+                var isNull = value === null || value === undefined || (typeof value === 'number' && !isFinite(value));
+                return {
+                    key: key,
+                    label: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
+                    value: isNull ? 0 : value,
+                    color: ((_b = context.config[key]) === null || _b === void 0 ? void 0 : _b.color) || seriesColors[idx % seriesColors.length],
+                };
+            }).filter(function (series) {
+                // Only show series that have valid non-zero values
+                var rawVal = dataItem[series.key];
+                return rawVal != null && typeof rawVal === 'number' && isFinite(rawVal) && rawVal > 0;
+            });
+            var enhancedContent = {
+                category: content.category,
+                series: allSeries,
+                total: stacked && allSeries.length > 0
+                    ? allSeries.reduce(function (acc, s) { return acc + (typeof s.value === 'number' ? s.value : 0); }, 0)
+                    : undefined,
+            };
+            context.handleMouseEnter(e, enhancedContent, coordinates);
+        }
+        else {
+            // Fallback to original content if we can't find the data item
+            context.handleMouseEnter(e, content, coordinates);
+        }
+    }, [context, dataKeys, seriesColors, stacked]);
+    return (React__default.createElement(React__default.Fragment, null,
+        barKeys.length > 0 && (React__default.createElement(BarRenderer, { data: context.data, config: barConfig, scales: context.scales, dimensions: context.dimensions, margin: context.margin, stacked: stacked, radius: barRadius, gap: gap, categoryGap: categoryGap, showAnimation: true, hoveredCategory: context.hoveredCategory, onHoverCategory: context.setHoveredCategory, onMouseEnter: handleComboMouseEnter, onMouseMove: context.handleMouseMove, onMouseLeave: context.handleMouseLeave, focusedElementIndex: context.focusedElementIndex, isKeyboardMode: context.isKeyboardMode })),
+        lineKeys.length > 0 && (React__default.createElement(LineRenderer, { data: context.data, config: lineConfig, scales: context.scales, dimensions: context.dimensions, margin: context.margin, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots, radius: dotRadius, hoveredPoint: context.hoveredPoint, onHoverPoint: context.setHoveredPoint, onMouseEnter: handleComboMouseEnter, onMouseMove: context.handleMouseMove, onMouseLeave: context.handleMouseLeave, focusedElementIndex: context.focusedElementIndex, isKeyboardMode: context.isKeyboardMode }))));
+};
+/**
+ * ComboChart Component
+ *
+ * Combines bar and line series in a single chart.
+ * Now uses composed BarRenderer and LineRenderer instead of duplicating code.
+ */
+var ComboChart = 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 ? COMBO_CHART_DEFAULTS.showGrid : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? COMBO_CHART_DEFAULTS.showXAxis : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? COMBO_CHART_DEFAULTS.showYAxis : _f, propMinValue = _a.minValue, propMaxValue = _a.maxValue, 
+    // Visual props (inherited from StandardVisualProps)
+    barRadius = _a.barRadius, dotRadius = _a.dotRadius, radius = _a.radius, // @deprecated - kept for backward compatibility
+    _g = _a.strokeWidth, // @deprecated - kept for backward compatibility
+    strokeWidth = _g === void 0 ? COMBO_CHART_DEFAULTS.strokeWidth : _g, _h = _a.gap, gap = _h === void 0 ? COMBO_CHART_DEFAULTS.gap : _h, _j = _a.categoryGap, categoryGap = _j === void 0 ? COMBO_CHART_DEFAULTS.categoryGap : _j, _k = _a.stacked, stacked = _k === void 0 ? COMBO_CHART_DEFAULTS.stacked : _k, 
+    // Line-specific props
+    _l = _a.curved, 
+    // Line-specific props
+    curved = _l === void 0 ? COMBO_CHART_DEFAULTS.curved : _l, _m = _a.curveType, curveType = _m === void 0 ? COMBO_CHART_DEFAULTS.curveType : _m, _o = _a.showDots, showDots = _o === void 0 ? COMBO_CHART_DEFAULTS.showDots : _o, 
+    // Dual axis (not yet implemented)
+    _p = _a.showDualAxis; 
+    // Dual axis (not yet implemented)
+    _p === void 0 ? COMBO_CHART_DEFAULTS.showDualAxis : _p; 
+    var // Base props
+    className = _a.className, title = _a.title, description = _a.description, _q = _a.enableKeyboardNavigation, enableKeyboardNavigation = _q === void 0 ? COMBO_CHART_DEFAULTS.enableKeyboardNavigation : _q, _r = _a.showValidationWarnings, showValidationWarnings = _r === void 0 ? process.env.NODE_ENV === "development" : _r, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "minValue", "maxValue", "barRadius", "dotRadius", "radius", "strokeWidth", "gap", "categoryGap", "stacked", "curved", "curveType", "showDots", "showDualAxis", "className", "title", "description", "enableKeyboardNavigation", "showValidationWarnings", "children"]);
+    // Resolve radius props with backward compatibility
+    var resolvedBarRadius = (_b = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _b !== void 0 ? _b : COMBO_CHART_DEFAULTS.barRadius;
+    var resolvedDotRadius = (_c = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _c !== void 0 ? _c : COMBO_CHART_DEFAULTS.dotRadius;
+    // Development warning for deprecated radius prop
+    if (process.env.NODE_ENV !== 'production' && radius !== undefined) {
+        console.warn('[ComboChart]: The `radius` prop is deprecated and will be removed in a future version. ' +
+            'Use `barRadius` for bar corners and `dotRadius` for line markers instead.');
+    }
+    // Get all data keys from config
+    var dataKeys = Object.keys(config || {});
+    // Separate bar and line series
+    var barSeries = dataKeys.filter(function (key) {
+        var seriesConfig = config[key];
+        return !(seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) || seriesConfig.type === "bar";
+    });
+    var lineSeries = dataKeys.filter(function (key) {
+        var seriesConfig = config[key];
+        return (seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) === "line";
+    });
+    // Use unified chart scales hook
+    var _s = useChartScales({
+        data: data,
+        config: config,
+        chartType: "combo",
+        stacked: stacked,
+        minValue: propMinValue,
+        maxValue: propMaxValue,
+        includeZero: true,
+        innerWidth: 600, // Will be overridden by ChartContainer
+        categoryGap: categoryGap,
+    }), scales = _s.scales, sanitizedData = _s.sanitizedData, isValid = _s.isValid, hasWarnings = _s.hasWarnings;
+    // 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" }, "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 combo chart" }, props),
+            React__default.createElement("span", null, "No data available")));
+    }
+    barSeries.forEach(function (key) {
+        config[key];
+    });
+    lineSeries.forEach(function (key) {
+        config[key];
+    });
+    return (React__default.createElement(ChartContainer, __assign({ data: sanitizedData, config: config, scales: scales, showGrid: showGrid, showXAxis: showXAxis, showYAxis: showYAxis, categoryGap: categoryGap, className: className, title: title, description: description, enableKeyboardNavigation: enableKeyboardNavigation, chartType: "combo" }, props),
+        React__default.createElement(ComboChartRenderers, { barKeys: barSeries, lineKeys: lineSeries, stacked: stacked, barRadius: resolvedBarRadius, dotRadius: resolvedDotRadius, gap: gap, categoryGap: categoryGap, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots }),
+        showValidationWarnings && hasWarnings && (React__default.createElement("foreignObject", { x: "0", y: "0", width: "100%", height: "50" },
+            React__default.createElement("div", { className: "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:"),
+                " Some data validation warnings occurred."))),
+        children));
+};
+
+export { ComboChart };

package/dist/components/charts/ComboChart/ComboChart.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 COMBO_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { barRadius: CHART_DEFAULTS.barRadius, dotRadius: CHART_DEFAULTS.dotRadius, categoryGap: CHART_DEFAULTS.categoryGap, curved: CHART_DEFAULTS.curved, curveType: CHART_DEFAULTS.curveType, showDots: CHART_DEFAULTS.showDots, showDualAxis: false });
+
+export { COMBO_CHART_DEFAULTS };

package/dist/components/charts/DonutChart/DonutChart.js

@@ -0,0 +1,169 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { donutChartTheme } from './DonutChart.theme.js';
+import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '../utils/animation-utils.js';
+import { describeRingSegmentPath, interpolateHexColor, clamp } from './donut-utils.js';
+
+/**
+ * DonutChart component for displaying a percentage value with a circular progress indicator
+ * Supports customization of size, thickness, animations, and theming
+ */
+var DonutChart = function (_a) {
+    var _b, _c;
+    var _d = _a.variant, variant = _d === void 0 ? "solid" : _d, percentage = _a.percentage, label = _a.label, subtitle = _a.subtitle, _e = _a.size, size = _e === void 0 ? 200 : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.segmentCount, segmentCount = _g === void 0 ? 32 : _g, _h = _a.segmentGap, segmentGap = _h === void 0 ? 0.35 : _h, _j = _a.showAnimation, showAnimation = _j === void 0 ? true : _j, className = _a.className, children = _a.children, themeOverrides = _a.theme, colors = _a.colors, props = __rest(_a, ["variant", "percentage", "label", "subtitle", "size", "thickness", "segmentCount", "segmentGap", "showAnimation", "className", "children", "theme", "colors"]);
+    var _k = useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var _l = useState(false), hasAnimated = _l[0], setHasAnimated = _l[1];
+    var shouldReduceMotion = useReducedMotion();
+    var containerRef = useRef(null);
+    var isSegmentedVariant = variant === "segmented";
+    // Ensure percentage is between 0-100
+    var safePercentage = Math.min(Math.max(0, percentage), 100);
+    // Calculate SVG parameters - SIMPLE AND CLEAN
+    var svgSize = 100;
+    var center = svgSize / 2;
+    var strokeWidth = thickness * 2;
+    var radius = (svgSize - strokeWidth) / 2;
+    var innerRadius = Math.max(0, radius - strokeWidth / 2);
+    var outerRadius = radius + strokeWidth / 2;
+    var circumference = 2 * Math.PI * radius;
+    // Calculate progress - start from 0, animate to target
+    var progressOffset = circumference - (safePercentage / 100) * circumference;
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, donutChartTheme), (themeOverrides || {}));
+    // Generate stable gradient ID based on component instance
+    var gradientId = useMemo(function () { return "donut-gradient-".concat(Math.random().toString(36).substr(2, 9)); }, []);
+    // Determine colors based on props or theme - simplified logic
+    var getColors = useMemo(function () {
+        var _a, _b;
+        // If colors prop has both from and to, use gradient
+        if ((colors === null || colors === void 0 ? void 0 : colors.from) && (colors === null || colors === void 0 ? void 0 : colors.to)) {
+            return {
+                type: "gradient",
+                from: colors.from,
+                to: colors.to,
+            };
+        }
+        // If colors prop has primary, use solid color
+        if (colors === null || colors === void 0 ? void 0 : colors.primary) {
+            return {
+                type: "solid",
+                color: colors.primary,
+            };
+        }
+        // Use theme defaults (gradient)
+        return {
+            type: "gradient",
+            from: ((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) || "#3b82f6",
+            to: ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) || "#10b981",
+        };
+    }, [colors, theme.colors]);
+    var segmentDefinitions = useMemo(function () {
+        if (!isSegmentedVariant) {
+            return [];
+        }
+        var totalSegments = Math.max(1, Math.floor(segmentCount));
+        var gapRatio = clamp(segmentGap, 0, 0.8);
+        var baseAngle = 360 / totalSegments;
+        var gapAngle = baseAngle * gapRatio;
+        var arcAngle = Math.max(0, baseAngle - gapAngle);
+        var rotationOffset = 0 - gapAngle / 2; // Start at 12 o'clock (0 degrees)
+        var activeValue = (safePercentage / 100) * totalSegments;
+        var fullSegments = Math.floor(activeValue);
+        var partialSegmentProgress = activeValue - fullSegments;
+        return Array.from({ length: totalSegments }, function (_, index) {
+            var startAngle = rotationOffset + index * baseAngle + gapAngle / 2;
+            var endAngle = startAngle + arcAngle;
+            var colorFactor = totalSegments === 1 ? 0 : index / (totalSegments - 1);
+            var isFullActive = index < fullSegments;
+            var isPartialActive = !isFullActive && index === fullSegments && partialSegmentProgress > 0;
+            var activeSweep = isFullActive
+                ? arcAngle
+                : isPartialActive
+                    ? arcAngle * partialSegmentProgress
+                    : 0;
+            return {
+                trackPath: describeRingSegmentPath(center, center, innerRadius, outerRadius, startAngle, endAngle),
+                activePath: activeSweep > 0
+                    ? describeRingSegmentPath(center, center, innerRadius, outerRadius, startAngle, startAngle + activeSweep)
+                    : null,
+                colorFactor: colorFactor,
+            };
+        });
+    }, [
+        center,
+        innerRadius,
+        isSegmentedVariant,
+        outerRadius,
+        safePercentage,
+        segmentCount,
+        segmentGap,
+    ]);
+    // Handle component mount for animation
+    useEffect(function () {
+        if (showAnimation && !shouldReduceMotion) {
+            setHasAnimated(true);
+        }
+        else {
+            // If animations disabled, immediately show final state
+            setHasAnimated(true);
+        }
+    }, [showAnimation, shouldReduceMotion]);
+    // Handle hover interactions
+    var handleMouseEnter = function () { return setIsHovered(true); };
+    var handleMouseLeave = function () { return setIsHovered(false); };
+    var containerSize = typeof size === "number" ? "".concat(size, "px") : size;
+    // Get stroke color/url
+    var getStroke = function () {
+        if (getColors.type === "solid") {
+            return getColors.color;
+        }
+        return "url(#".concat(gradientId, ")");
+    };
+    // Get glow color for hover effect
+    var getGlowColor = function () {
+        if (getColors.type === "solid") {
+            return getColors.color;
+        }
+        return getColors.from;
+    };
+    var resolveSegmentFill = function (factor) {
+        if (getColors.type === "solid") {
+            return getColors.color;
+        }
+        return interpolateHexColor(getColors.from, getColors.to, factor);
+    };
+    return (React__default.createElement(motion.div, __assign({ ref: containerRef, className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "progressbar", "aria-valuenow": safePercentage, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Progress: ".concat(safePercentage, "%") }, props),
+        React__default.createElement("svg", { viewBox: "0 0 ".concat(svgSize, " ").concat(svgSize), width: "100%", height: "100%", className: "overflow-visible relative z-10 rounded-full", style: {
+                filter: isHovered
+                    ? "drop-shadow(0 4px 4px ".concat(getGlowColor(), "60)")
+                    : "none",
+                transition: "filter 1s ease",
+            } },
+            React__default.createElement("defs", null, getColors.type === "gradient" && (React__default.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                React__default.createElement("stop", { offset: "0%", stopColor: getColors.from }),
+                React__default.createElement("stop", { offset: "100%", stopColor: getColors.to })))),
+            isSegmentedVariant ? (React__default.createElement("g", null,
+                segmentDefinitions.map(function (segment, index) {
+                    var _a;
+                    return (React__default.createElement("path", { key: "donut-track-".concat(index), d: segment.trackPath, fill: ((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.track) || "#e5e7eb", opacity: 0.25 }));
+                }),
+                segmentDefinitions.map(function (segment, index) {
+                    return segment.activePath ? (React__default.createElement(motion.path, { key: "donut-active-".concat(index), d: segment.activePath, fill: resolveSegmentFill(segment.colorFactor), initial: { opacity: 0, scale: 0.95 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
+                            ? __assign({}, getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.donut.preset, shouldReduceMotion, CIRCULAR_CHART_ANIMATIONS.donut.initialDelay + getStaggerDelay(index, 0.015))) : { duration: 0 }, style: { transformOrigin: "50% 50%" } })) : null;
+                }))) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#000000", strokeWidth: strokeWidth > 2 ? strokeWidth - 2 : 1, opacity: 0.05 }),
+                React__default.createElement(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: getStroke(), strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: progressOffset } : {}, transition: showAnimation && !shouldReduceMotion
+                        ? getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.donut.preset, shouldReduceMotion, CIRCULAR_CHART_ANIMATIONS.donut.initialDelay)
+                        : { duration: 0 }, transform: "rotate(-90 ".concat(center, " ").concat(center, ")"), style: {
+                        filter: isHovered ? "url(#glow-".concat(gradientId, ")") : "none",
+                    } })))),
+        React__default.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center z-20" },
+            React__default.createElement("div", { className: cn((_b = theme.text) === null || _b === void 0 ? void 0 : _b.label) }, label !== undefined ? label : "".concat(safePercentage, "%")),
+            subtitle && React__default.createElement("div", { className: cn((_c = theme.text) === null || _c === void 0 ? void 0 : _c.subtitle) }, subtitle),
+            children && React__default.createElement("div", null, children))));
+};
+DonutChart.displayName = "DonutChart";
+
+export { DonutChart };

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

@@ -0,0 +1,24 @@
+/**
+ * Default theme for the DonutChart component
+ */
+var donutChartTheme = {
+    // Base container styles
+    baseStyle: "relative flex items-center justify-center transition-all duration-300 cursor-default",
+    // Background track styling
+    track: "text-[var(--color-border)]",
+    // Progress arc styling
+    progress: "text-[var(--color-primary)] transition-all duration-300",
+    // Text styling
+    text: {
+        label: "text-2xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
+        subtitle: "text-sm text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
+    },
+    // Default color palette
+    colors: {
+        primary: "#3b82f6", // blue-500
+        secondary: "#10b981", // emerald-500
+        track: "#e5e7eb", // neutral-200
+    },
+};
+
+export { donutChartTheme };

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.js

@@ -0,0 +1,252 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useMemo, useEffect } from 'react';
+import { useReducedMotion, motion, useMotionValue, useTransform, animate } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { multiSegmentDonutChartTheme } from './MultiSegmentDonutChart.theme.js';
+import { describeRingSegmentPath, clamp, describeArcPathClockwise } from './donut-utils.js';
+
+var AnimatedSegment = function (_a) {
+    var center = _a.center, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, startAngle = _a.startAngle, endAngle = _a.endAngle, color = _a.color, delay = _a.delay, duration = _a.duration, shouldAnimate = _a.shouldAnimate, shouldReduceMotion = _a.shouldReduceMotion, isHovered = _a.isHovered, isFaded = _a.isFaded, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick, clickable = _a.clickable;
+    // Motion value for animation progress (0 to 1)
+    var progress = useMotionValue(0);
+    // Transform progress to current end angle
+    var currentEndAngle = useTransform(progress, [0, 1], [startAngle, endAngle]);
+    // Generate path based on current angle
+    var _b = useState(function () {
+        return describeRingSegmentPath(center, center, innerRadius, outerRadius, startAngle, startAngle // Start with zero-width segment
+        );
+    }), path = _b[0], setPath = _b[1];
+    // Update path when currentEndAngle changes
+    useEffect(function () {
+        var unsubscribe = currentEndAngle.on("change", function (latest) {
+            var newPath = describeRingSegmentPath(center, center, innerRadius, outerRadius, startAngle, latest);
+            setPath(newPath);
+        });
+        return function () { return unsubscribe(); };
+    }, [center, innerRadius, outerRadius, startAngle, currentEndAngle]);
+    // Trigger animation
+    useEffect(function () {
+        if (shouldReduceMotion) {
+            // Skip animation for accessibility - show full segment immediately
+            progress.set(1);
+        }
+        else if (shouldAnimate) {
+            // Run the drawing animation with spring physics (same as base DonutChart)
+            var controls_1 = animate(progress, 1, {
+                type: "spring",
+                stiffness: 80, // Same as CIRCULAR_CHART_ANIMATIONS.donut.preset ('smooth')
+                damping: 20,
+                delay: delay,
+            });
+            return function () { return controls_1.stop(); };
+        }
+        // If shouldAnimate is false, progress stays at 0 (waiting state)
+    }, [shouldAnimate, shouldReduceMotion, progress, duration, delay]);
+    return (React__default.createElement(motion.path, { d: path, fill: color, animate: {
+            opacity: isFaded ? 0.6 : 1,
+            scale: isHovered ? 1.025 : 1,
+        }, transition: {
+            scale: { duration: 0.2 },
+            opacity: { duration: 0.2 },
+        }, style: {
+            transformOrigin: "50% 50%",
+            cursor: clickable ? "pointer" : "default",
+            filter: isHovered
+                ? "drop-shadow(0 4px 8px ".concat(color, "60)")
+                : "none",
+        }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }));
+};
+var AnimatedStrokeSegment = function (_a) {
+    var center = _a.center, radius = _a.radius, strokeWidth = _a.strokeWidth, startAngle = _a.startAngle, endAngle = _a.endAngle, color = _a.color, delay = _a.delay, shouldAnimate = _a.shouldAnimate, shouldReduceMotion = _a.shouldReduceMotion, isHovered = _a.isHovered, isFaded = _a.isFaded, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick, clickable = _a.clickable;
+    // Calculate cap compensation - rounded caps extend by strokeWidth/2 at each end
+    // Convert to degrees: (strokeWidth/2) / radius * (180/π)
+    var capCompensationDegrees = ((strokeWidth / 2) / radius) * (180 / Math.PI);
+    // Adjust angles to account for rounded cap protrusion
+    var adjustedStartAngle = startAngle + capCompensationDegrees;
+    var adjustedEndAngle = endAngle - capCompensationDegrees;
+    // Ensure we have a valid arc (end > start)
+    var validEndAngle = Math.max(adjustedEndAngle, adjustedStartAngle + 1);
+    // Calculate arc path (clockwise for proper animation direction) and length
+    var arcPath = describeArcPathClockwise(center, center, radius, adjustedStartAngle, validEndAngle);
+    var sweepAngle = validEndAngle - adjustedStartAngle;
+    var arcLength = (sweepAngle / 360) * 2 * Math.PI * radius;
+    return (React__default.createElement(motion.path, { d: arcPath, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: arcLength, initial: { strokeDashoffset: arcLength, opacity: 1, scale: 1 }, animate: {
+            strokeDashoffset: shouldAnimate ? 0 : arcLength,
+            opacity: isFaded ? 0.6 : 1,
+            scale: isHovered ? 1.025 : 1,
+        }, transition: {
+            strokeDashoffset: shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    type: "spring",
+                    stiffness: 80,
+                    damping: 20,
+                    delay: delay,
+                },
+            scale: { duration: 0.2 },
+            opacity: { duration: 0.2 },
+        }, style: {
+            transformOrigin: "50% 50%",
+            cursor: clickable ? "pointer" : "default",
+            filter: isHovered ? "drop-shadow(0 4px 8px ".concat(color, "60)") : "none",
+        }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }));
+};
+/**
+ * MultiSegmentDonutChart component for displaying multiple data values in a circular chart
+ * Each segment represents a different data point with its own value and optional color
+ */
+var MultiSegmentDonutChart = function (_a) {
+    var data = _a.data, _b = _a.size, size = _b === void 0 ? 200 : _b, _c = _a.thickness, thickness = _c === void 0 ? 4 : _c, _d = _a.segmentGap, segmentGap = _d === void 0 ? 0.05 : _d, _e = _a.showAnimation, showAnimation = _e === void 0 ? true : _e, _f = _a.showLegend, showLegend = _f === void 0 ? false : _f, _g = _a.legendPosition, legendPosition = _g === void 0 ? "right" : _g, centerContent = _a.centerContent, className = _a.className, themeOverrides = _a.theme, onSegmentHover = _a.onSegmentHover, onSegmentClick = _a.onSegmentClick, _h = _a.roundedCaps, roundedCaps = _h === void 0 ? true : _h, restProps = __rest(_a, ["data", "size", "thickness", "segmentGap", "showAnimation", "showLegend", "legendPosition", "centerContent", "className", "theme", "onSegmentHover", "onSegmentClick", "roundedCaps"]);
+    var _j = useState(null), hoveredSegment = _j[0], setHoveredSegment = _j[1];
+    var _k = useState(false), hasAnimated = _k[0], setHasAnimated = _k[1];
+    var shouldReduceMotion = useReducedMotion();
+    // Merge theme with overrides
+    var theme = __assign(__assign(__assign({}, multiSegmentDonutChartTheme), (themeOverrides || {})), { legend: __assign(__assign({}, multiSegmentDonutChartTheme.legend), ((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.legend) || {})), colors: (themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.colors) || multiSegmentDonutChartTheme.colors || [] });
+    // Calculate SVG parameters
+    var svgSize = 100;
+    var center = svgSize / 2;
+    var strokeWidth = thickness * 2;
+    var radius = (svgSize - strokeWidth) / 2;
+    var innerRadius = Math.max(0, radius - strokeWidth / 2);
+    var outerRadius = radius + strokeWidth / 2;
+    // Validate and prepare data
+    var validatedData = useMemo(function () {
+        if (!data || data.length === 0) {
+            return [];
+        }
+        // Ensure percentages sum to 100 or less
+        var totalPercentage = data.reduce(function (sum, segment) { return sum + segment.percentage; }, 0);
+        if (totalPercentage > 100) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("[MultiSegmentDonutChart]: Total percentage (".concat(totalPercentage, ") exceeds 100%. Normalizing values."));
+            }
+            // Normalize percentages
+            return data.map(function (segment) { return (__assign(__assign({}, segment), { percentage: (segment.percentage / totalPercentage) * 100 })); });
+        }
+        return data;
+    }, [data]);
+    // Calculate segment paths, colors, and animation timings
+    var segments = useMemo(function () {
+        if (validatedData.length === 0) {
+            return [];
+        }
+        var gapRatio = clamp(segmentGap, 0, 0.8);
+        var totalGapDegrees = validatedData.length * 360 * gapRatio / validatedData.length;
+        var effectiveCircle = 360 - totalGapDegrees;
+        var currentAngle = 0; // Start at 12 o'clock (top)
+        var cumulativeDelay = 0; // Track cumulative delay for sequential animation
+        // Base duration for a full 100% segment (in seconds)
+        var baseDuration = 0.6;
+        return validatedData.map(function (segment, index) {
+            // Calculate the angle for this segment
+            var segmentAngle = (segment.percentage / 100) * effectiveCircle;
+            var gapAngle = 360 * gapRatio / validatedData.length;
+            var startAngle = currentAngle;
+            var endAngle = currentAngle + segmentAngle;
+            // Get color from segment or theme palette
+            var color = segment.color ||
+                (theme.colors && theme.colors[index % theme.colors.length]) ||
+                "#3b82f6";
+            // Generate the SVG path (full segment)
+            var path = describeRingSegmentPath(center, center, innerRadius, outerRadius, startAngle, endAngle);
+            // Calculate animation duration proportional to segment size
+            // Minimum duration of 0.15s to ensure visibility
+            var duration = Math.max(0.15, (segment.percentage / 100) * baseDuration);
+            // This segment starts after all previous segments complete
+            var delay = cumulativeDelay;
+            // Add this segment's duration to cumulative delay for next segment
+            cumulativeDelay += duration;
+            // Move to next segment start position
+            currentAngle = endAngle + gapAngle;
+            return __assign(__assign({}, segment), { path: path, color: color, startAngle: startAngle, endAngle: endAngle, animationDuration: duration, animationDelay: delay });
+        });
+    }, [
+        validatedData,
+        center,
+        innerRadius,
+        outerRadius,
+        segmentGap,
+        theme.colors,
+    ]);
+    // Handle component mount for animation
+    useEffect(function () {
+        if (showAnimation && !shouldReduceMotion) {
+            setHasAnimated(true);
+        }
+        else {
+            // If animations disabled, immediately show final state
+            setHasAnimated(true);
+        }
+    }, [showAnimation, shouldReduceMotion]);
+    // Handle hover interactions
+    var handleSegmentMouseEnter = function (index) {
+        setHoveredSegment(index);
+        if (onSegmentHover) {
+            onSegmentHover(segments[index]);
+        }
+    };
+    var handleSegmentMouseLeave = function () {
+        setHoveredSegment(null);
+        if (onSegmentHover) {
+            onSegmentHover(null);
+        }
+    };
+    var handleSegmentClick = function (index) {
+        if (onSegmentClick) {
+            onSegmentClick(segments[index]);
+        }
+    };
+    var containerSize = typeof size === "number" ? "".concat(size, "px") : size;
+    // Layout classes based on legend position
+    var getLayoutClasses = function () {
+        if (!showLegend) {
+            return "";
+        }
+        switch (legendPosition) {
+            case "top":
+                return "flex-col";
+            case "bottom":
+                return "flex-col-reverse";
+            case "left":
+                return "flex-row-reverse";
+            case "right":
+            default:
+                return "flex-row";
+        }
+    };
+    var renderLegend = function () {
+        var _a;
+        if (!showLegend) {
+            return null;
+        }
+        return (React__default.createElement("div", { className: cn((_a = theme.legend) === null || _a === void 0 ? void 0 : _a.container, legendPosition === "top" || legendPosition === "bottom" ? "flex-row flex-wrap" : "flex-col") }, segments.map(function (segment, index) {
+            var _a, _b, _c, _d;
+            return (React__default.createElement("div", { key: "legend-".concat(index), className: cn((_a = theme.legend) === null || _a === void 0 ? void 0 : _a.item), onMouseEnter: function () { return handleSegmentMouseEnter(index); }, onMouseLeave: handleSegmentMouseLeave, onClick: function () { return handleSegmentClick(index); }, style: {
+                    opacity: hoveredSegment !== null && hoveredSegment !== index ? 0.5 : 1,
+                } },
+                React__default.createElement("div", { className: cn((_b = theme.legend) === null || _b === void 0 ? void 0 : _b.colorDot), style: { backgroundColor: segment.color } }),
+                segment.label && (React__default.createElement("span", { className: cn((_c = theme.legend) === null || _c === void 0 ? void 0 : _c.label) }, segment.label)),
+                React__default.createElement("span", { className: cn((_d = theme.legend) === null || _d === void 0 ? void 0 : _d.value) },
+                    segment.value,
+                    " (",
+                    segment.percentage.toFixed(1),
+                    "%)")));
+        })));
+    };
+    if (!data || data.length === 0) {
+        return (React__default.createElement("div", { className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize } },
+            React__default.createElement("div", { className: "text-sm text-[var(--color-text-secondary)]" }, "No data")));
+    }
+    return (React__default.createElement("div", { className: cn("flex gap-4 items-center", getLayoutClasses(), className) },
+        React__default.createElement(motion.div, __assign({ className: cn(theme.baseStyle), style: { width: containerSize, height: containerSize }, role: "img", "aria-label": "Donut chart with ".concat(segments.length, " segments") }, restProps),
+            React__default.createElement("svg", { viewBox: "0 0 ".concat(svgSize, " ").concat(svgSize), width: "100%", height: "100%", className: "overflow-visible relative z-10" },
+                React__default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#000000", strokeWidth: strokeWidth > 2 ? strokeWidth - 2 : 1, opacity: 0.03 }),
+                segments.map(function (segment, index) {
+                    return roundedCaps ? (React__default.createElement(AnimatedStrokeSegment, { key: "segment-".concat(index), center: center, radius: radius, strokeWidth: strokeWidth, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: function () { return handleSegmentMouseEnter(index); }, onMouseLeave: handleSegmentMouseLeave, onClick: function () { return handleSegmentClick(index); }, clickable: !!onSegmentClick })) : (React__default.createElement(AnimatedSegment, { key: "segment-".concat(index), center: center, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, duration: segment.animationDuration, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: function () { return handleSegmentMouseEnter(index); }, onMouseLeave: handleSegmentMouseLeave, onClick: function () { return handleSegmentClick(index); }, clickable: !!onSegmentClick }));
+                })),
+            centerContent && (React__default.createElement("div", { className: cn(theme.centerContent) }, centerContent))),
+        renderLegend()));
+};
+MultiSegmentDonutChart.displayName = "MultiSegmentDonutChart";
+
+export { MultiSegmentDonutChart };