flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -1,27 +1,35 @@
-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;
     gap?: number;
     categoryGap?: number;
+    showAnimation?: boolean;
+    showPlaceholderBars?: boolean;
+    placeholderData?: BaseChartProps["data"];
     showValidationWarnings?: boolean;
 }
 export declare const BAR_CHART_DEFAULTS: {
-    readonly radius: 12;
+    readonly barRadius: 32;
+    readonly radius: 32;
     readonly gap: 4;
     readonly categoryGap: 16;
     readonly orientation: "horizontal" | "vertical";
-    readonly stacked: false;
+    readonly showAnimation: true;
+    readonly showPlaceholderBars: false;
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
-    readonly showNullValues: true;
+    readonly dotRadius: 4;
+    readonly cellRadius: 4;
     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 BarChartData = BaseChartProps['data'][0];
+export type BarChartData = BaseChartProps["data"][0];

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

@@ -1,7 +1,15 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
 // Default values using centralized defaults
-var BAR_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { radius: 12, gap: CHART_DEFAULTS.gap, categoryGap: CHART_DEFAULTS.categoryGap, orientation: CHART_DEFAULTS.orientation, stacked: CHART_DEFAULTS.stacked });
+const BAR_CHART_DEFAULTS = {
+    ...CHART_DEFAULTS,
+    barRadius: CHART_DEFAULTS.barRadius, // 24 - For bar corner rounding
+    radius: CHART_DEFAULTS.barRadius, // @deprecated - kept for backward compatibility
+    gap: CHART_DEFAULTS.gap,
+    categoryGap: CHART_DEFAULTS.categoryGap,
+    orientation: CHART_DEFAULTS.orientation,
+    showAnimation: true, // Enable animations by default
+    showPlaceholderBars: false, // Opt-in feature for backward compatibility
+};
 
 export { BAR_CHART_DEFAULTS };

package/dist/components/charts/ChartContainer.js

@@ -1,38 +1,42 @@
-import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useContext } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useChartTheme } from './hooks/useChartTheme.js';
 
-var ChartContext = createContext(null);
+const ChartContext = createContext(null);
 function useChart() {
-    var context = useContext(ChartContext);
+    const 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"]);
+function ChartContainer({ data, config, className, children, minHeight = 200, width = '100%', height, ...props }) {
     // Provide default empty config if none provided
-    var safeConfig = config || {};
-    var chartColors = useChartTheme({
+    const safeConfig = config || {};
+    const { 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
-    }));
+    const hasWidthClass = (className === null || className === void 0 ? void 0 : className.includes('w-')) || false;
+    const hasHeightClass = (className === null || className === void 0 ? void 0 : className.includes('h-')) || false;
+    const inlineStyles = {
+        ...chartColors,
+        // Only apply inline styles if className doesn't have sizing
+        ...((!hasWidthClass && width) && {
+            width: typeof width === 'number' ? `${width}px` : width
+        }),
+        ...((!hasHeightClass && height) && {
+            height: typeof height === 'number' ? `${height}px` : height
+        }),
+        ...((!hasHeightClass && !height) && {
+            minHeight: typeof minHeight === 'number' ? `${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", 
+        React__default.createElement("div", { 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)));
+            !hasWidthClass && "w-full", className), style: inlineStyles, ...props }, children)));
 }
 
 export { ChartContainer, useChart };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComboChartProps } from "./ComboChart.types";
+/**
+ * ComboChart Component
+ *
+ * Combines bar and line series in a single chart.
+ * Now uses composed BarRenderer and LineRenderer instead of duplicating code.
+ */
+export declare const ComboChart: React.FC<ComboChartProps>;

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

@@ -0,0 +1,160 @@
+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
+ */
+const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius, gap, categoryGap, strokeWidth, curved, curveType, showDots, }) => {
+    const context = useChartContext();
+    const dataKeys = Object.keys(context.config);
+    const seriesColors = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    // Filter configs for bars and lines, and assign colors
+    const barConfig = {};
+    barKeys.forEach((key) => {
+        var _a;
+        const keyIndex = dataKeys.indexOf(key);
+        barConfig[key] = {
+            ...context.config[key],
+            color: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.color) ||
+                seriesColors[keyIndex % seriesColors.length],
+        };
+    });
+    const lineConfig = {};
+    lineKeys.forEach((key) => {
+        var _a;
+        const keyIndex = dataKeys.indexOf(key);
+        lineConfig[key] = {
+            ...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)
+    const handleComboMouseEnter = React__default.useCallback((e, content, coordinates) => {
+        var _a, _b;
+        // Rebuild content to include all series from the full config
+        const 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((d) => d.name === content.category);
+        if (dataItem) {
+            const allSeries = dataKeys.map((key, idx) => {
+                var _a, _b;
+                const value = dataItem[key];
+                const isNull = value === null || value === undefined || (typeof value === 'number' && !isFinite(value));
+                return {
+                    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(series => {
+                // Only show series that have valid non-zero values
+                const rawVal = dataItem[series.key];
+                return rawVal != null && typeof rawVal === 'number' && isFinite(rawVal) && rawVal > 0;
+            });
+            const enhancedContent = {
+                category: content.category,
+                series: allSeries,
+                total: stacked && allSeries.length > 0
+                    ? allSeries.reduce((acc, s) => 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.
+ */
+const ComboChart = ({ data, config, 
+// Standardized display props with defaults
+showGrid = COMBO_CHART_DEFAULTS.showGrid, showXAxis = COMBO_CHART_DEFAULTS.showXAxis, showYAxis = COMBO_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, 
+// Visual props (inherited from StandardVisualProps)
+barRadius, dotRadius, radius, // @deprecated - kept for backward compatibility
+strokeWidth = COMBO_CHART_DEFAULTS.strokeWidth, gap = COMBO_CHART_DEFAULTS.gap, categoryGap = COMBO_CHART_DEFAULTS.categoryGap, stacked = COMBO_CHART_DEFAULTS.stacked, 
+// Line-specific props
+curved = COMBO_CHART_DEFAULTS.curved, curveType = COMBO_CHART_DEFAULTS.curveType, showDots = COMBO_CHART_DEFAULTS.showDots, 
+// Dual axis (not yet implemented)
+showDualAxis = COMBO_CHART_DEFAULTS.showDualAxis, 
+// Base props
+className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", children, ...props }) => {
+    var _a, _b;
+    // Resolve radius props with backward compatibility
+    const resolvedBarRadius = (_a = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _a !== void 0 ? _a : COMBO_CHART_DEFAULTS.barRadius;
+    const resolvedDotRadius = (_b = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _b !== void 0 ? _b : 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
+    const dataKeys = Object.keys(config || {});
+    // Separate bar and line series
+    const barSeries = dataKeys.filter((key) => {
+        const seriesConfig = config[key];
+        return !(seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) || seriesConfig.type === "bar";
+    });
+    const lineSeries = dataKeys.filter((key) => {
+        const seriesConfig = config[key];
+        return (seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) === "line";
+    });
+    // Use unified chart scales hook
+    const { scales, sanitizedData, isValid, hasWarnings} = useChartScales({
+        data,
+        config,
+        chartType: "combo",
+        stacked,
+        minValue: propMinValue,
+        maxValue: propMaxValue,
+        includeZero: true,
+        innerWidth: 600, // Will be overridden by ChartContainer
+        categoryGap,
+    });
+    // Early return for invalid data with error message
+    if (!isValid) {
+        return (React__default.createElement("div", { 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", { 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((key) => {
+        config[key];
+    });
+    lineSeries.forEach((key) => {
+        config[key];
+    });
+    return (React__default.createElement(ChartContainer, { 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.theme.d.ts

@@ -0,0 +1,7 @@
+import { ChartThemeOverrides } from '../types/chart.types';
+/**
+ * ComboChart Theme Configuration
+ *
+ * Follows the established chart theming pattern with CSS variables
+ */
+export declare const comboChartTheme: ChartThemeOverrides;

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

@@ -0,0 +1,51 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartConfig } from '../types/chart.types';
+/**
+ * Series type for combo chart
+ */
+export type SeriesType = 'bar' | 'line';
+/**
+ * Extended chart config that includes series type information
+ */
+export interface ComboChartConfig extends ChartConfig {
+    [key: string]: {
+        label?: string;
+        color?: string;
+        theme?: string;
+        type?: SeriesType;
+        yAxis?: 'left' | 'right';
+    };
+}
+/**
+ * ComboChart props - extends standard chart interfaces
+ */
+export interface ComboChartProps extends BaseChartProps, StandardChartDisplayProps, Omit<StandardVisualProps, 'curved' | 'curveType' | 'showDots'> {
+    config: ComboChartConfig;
+    curved?: boolean;
+    curveType?: 'linear' | 'monotone';
+    showDots?: boolean;
+    categoryGap?: number;
+    showDualAxis?: boolean;
+    showValidationWarnings?: boolean;
+}
+export declare const COMBO_CHART_DEFAULTS: {
+    readonly barRadius: 32;
+    readonly dotRadius: 4;
+    readonly categoryGap: 16;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly showDots: true;
+    readonly showDualAxis: false;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly gap: 4;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};

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

@@ -0,0 +1,15 @@
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+// Default values using centralized defaults
+const COMBO_CHART_DEFAULTS = {
+    ...CHART_DEFAULTS,
+    barRadius: CHART_DEFAULTS.barRadius, // 24 - For bar corners
+    dotRadius: CHART_DEFAULTS.dotRadius, // 20 - For line markers
+    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/ComboChart/index.d.ts

@@ -0,0 +1,4 @@
+export { ComboChart } from './ComboChart';
+export type { ComboChartProps, ComboChartConfig, SeriesType } from './ComboChart.types';
+export { comboChartTheme } from './ComboChart.theme';
+export { COMBO_CHART_DEFAULTS } from './ComboChart.types';

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

@@ -0,0 +1,171 @@
+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
+ */
+const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, ...props }) => {
+    var _a, _b;
+    const [isHovered, setIsHovered] = useState(false);
+    const [hasAnimated, setHasAnimated] = useState(false);
+    const shouldReduceMotion = useReducedMotion();
+    const containerRef = useRef(null);
+    const isSegmentedVariant = variant === "segmented";
+    // Ensure percentage is between 0-100
+    const safePercentage = Math.min(Math.max(0, percentage), 100);
+    // Calculate SVG parameters - SIMPLE AND CLEAN
+    const svgSize = 100;
+    const center = svgSize / 2;
+    const strokeWidth = thickness * 2;
+    const radius = (svgSize - strokeWidth) / 2;
+    const innerRadius = Math.max(0, radius - strokeWidth / 2);
+    const outerRadius = radius + strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+    // Calculate progress - start from 0, animate to target
+    const progressOffset = circumference - (safePercentage / 100) * circumference;
+    // Merge theme with overrides
+    const theme = {
+        ...donutChartTheme,
+        ...(themeOverrides || {}),
+    };
+    // Generate stable gradient ID based on component instance
+    const gradientId = useMemo(() => `donut-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    // Determine colors based on props or theme - simplified logic
+    const getColors = useMemo(() => {
+        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]);
+    const segmentDefinitions = useMemo(() => {
+        if (!isSegmentedVariant) {
+            return [];
+        }
+        const totalSegments = Math.max(1, Math.floor(segmentCount));
+        const gapRatio = clamp(segmentGap, 0, 0.8);
+        const baseAngle = 360 / totalSegments;
+        const gapAngle = baseAngle * gapRatio;
+        const arcAngle = Math.max(0, baseAngle - gapAngle);
+        const rotationOffset = 0 - gapAngle / 2; // Start at 12 o'clock (0 degrees)
+        const activeValue = (safePercentage / 100) * totalSegments;
+        const fullSegments = Math.floor(activeValue);
+        const partialSegmentProgress = activeValue - fullSegments;
+        return Array.from({ length: totalSegments }, (_, index) => {
+            const startAngle = rotationOffset + index * baseAngle + gapAngle / 2;
+            const endAngle = startAngle + arcAngle;
+            const colorFactor = totalSegments === 1 ? 0 : index / (totalSegments - 1);
+            const isFullActive = index < fullSegments;
+            const isPartialActive = !isFullActive && index === fullSegments && partialSegmentProgress > 0;
+            const 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,
+            };
+        });
+    }, [
+        center,
+        innerRadius,
+        isSegmentedVariant,
+        outerRadius,
+        safePercentage,
+        segmentCount,
+        segmentGap,
+    ]);
+    // Handle component mount for animation
+    useEffect(() => {
+        if (showAnimation && !shouldReduceMotion) {
+            setHasAnimated(true);
+        }
+        else {
+            // If animations disabled, immediately show final state
+            setHasAnimated(true);
+        }
+    }, [showAnimation, shouldReduceMotion]);
+    // Handle hover interactions
+    const handleMouseEnter = () => setIsHovered(true);
+    const handleMouseLeave = () => setIsHovered(false);
+    const containerSize = typeof size === "number" ? `${size}px` : size;
+    // Get stroke color/url
+    const getStroke = () => {
+        if (getColors.type === "solid") {
+            return getColors.color;
+        }
+        return `url(#${gradientId})`;
+    };
+    // Get glow color for hover effect
+    const getGlowColor = () => {
+        if (getColors.type === "solid") {
+            return getColors.color;
+        }
+        return getColors.from;
+    };
+    const resolveSegmentFill = (factor) => {
+        if (getColors.type === "solid") {
+            return getColors.color;
+        }
+        return interpolateHexColor(getColors.from, getColors.to, factor);
+    };
+    return (React__default.createElement(motion.div, { 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: ${safePercentage}%`, ...props },
+        React__default.createElement("svg", { viewBox: `0 0 ${svgSize} ${svgSize}`, width: "100%", height: "100%", className: "overflow-visible relative z-10 rounded-full", style: {
+                filter: isHovered
+                    ? `drop-shadow(0 4px 4px ${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((segment, index) => {
+                    var _a;
+                    return (React__default.createElement("path", { key: `donut-track-${index}`, d: segment.trackPath, fill: ((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.track) || "#e5e7eb", opacity: 0.25 }));
+                }),
+                segmentDefinitions.map((segment, index) => segment.activePath ? (React__default.createElement(motion.path, { key: `donut-active-${index}`, d: segment.activePath, fill: resolveSegmentFill(segment.colorFactor), initial: { opacity: 0, scale: 0.95 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
+                        ? {
+                            ...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 ${center} ${center})`, style: {
+                        filter: isHovered ? `url(#glow-${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((_a = theme.text) === null || _a === void 0 ? void 0 : _a.label) }, label !== undefined ? label : `${safePercentage}%`),
+            subtitle && React__default.createElement("div", { className: cn((_b = theme.text) === null || _b === void 0 ? void 0 : _b.subtitle) }, subtitle),
+            children && React__default.createElement("div", null, children))));
+};
+DonutChart.displayName = "DonutChart";
+
+export { DonutChart };

package/dist/components/charts/DonutChart/DonutChart.theme.d.ts

@@ -72,42 +72,6 @@ export declare const donutChartThickness: {
     readonly bold: 4;
     readonly extraBold: 6;
 };
-/**
- * Animation presets for different use cases
- */
-export declare const donutChartAnimations: {
-    readonly none: {
-        readonly enabled: false;
-    };
-    readonly quick: {
-        readonly enabled: true;
-        readonly duration: 0.6;
-        readonly delay: 0.1;
-        readonly stiffness: 120;
-        readonly damping: 25;
-    };
-    readonly smooth: {
-        readonly enabled: true;
-        readonly duration: 1.2;
-        readonly delay: 0.2;
-        readonly stiffness: 80;
-        readonly damping: 20;
-    };
-    readonly bouncy: {
-        readonly enabled: true;
-        readonly duration: 1.5;
-        readonly delay: 0.2;
-        readonly stiffness: 60;
-        readonly damping: 15;
-    };
-    readonly reveal: {
-        readonly enabled: true;
-        readonly duration: 2;
-        readonly delay: 0.5;
-        readonly stiffness: 50;
-        readonly damping: 25;
-    };
-};
 /**
  * Utility function to create custom color schemes
  */
@@ -161,4 +125,3 @@ export declare const getColorScheme: (name: keyof typeof donutChartColorSchemes)
 export type DonutChartColorScheme = keyof typeof donutChartColorSchemes;
 export type DonutChartSize = keyof typeof donutChartSizes;
 export type DonutChartThickness = keyof typeof donutChartThickness;
-export type DonutChartAnimation = keyof typeof donutChartAnimations;

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

@@ -0,0 +1,24 @@
+/**
+ * Default theme for the DonutChart component
+ */
+const 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/DonutChart.types.d.ts

@@ -42,6 +42,11 @@ export interface DonutChartThemeOverrides {
  * DonutChart component props
  */
 export interface DonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+    /**
+     * Visual variant for the donut chart (solid or segmented)
+     * @default "solid"
+     */
+    variant?: "solid" | "segmented";
     /**
      * Percentage value to display (0-100)
      * Values outside this range will be clamped
@@ -68,6 +73,17 @@ export interface DonutChartProps extends Omit<HTMLMotionProps<"div">, "children"
      * @default 2
      */
     thickness?: number;
+    /**
+     * Total number of segments when using the segmented variant
+     * @default 32
+     */
+    segmentCount?: number;
+    /**
+     * Fraction of each segment kept empty to create spacing (0-0.8)
+     * Only applies to the segmented variant
+     * @default 0.35
+     */
+    segmentGap?: number;
     /**
      * Whether to show entrance animation
      * @default true