@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,147 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+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) => {
+        // Rebuild content to include all series from the full config
+        const dataItem = 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 (jsxs(Fragment, { children: [barKeys.length > 0 && (jsx(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 && (jsx(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 (jsxs("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, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: "Unable to render chart due to data validation errors" })] }));
+    }
+    // Early return for empty data
+    if (!sanitizedData || sanitizedData.length === 0) {
+        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty combo chart", ...props, children: jsx("span", { children: "No data available" }) }));
+    }
+    barSeries.forEach((key) => {
+        config[key];
+    });
+    lineSeries.forEach((key) => {
+        config[key];
+    });
+    return (jsxs(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, children: [jsx(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 && (jsx("foreignObject", { x: "0", y: "0", width: "100%", height: "50", children: jsxs("div", { className: "p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "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.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DonutChartProps } from "./DonutChart.types";
+/**
+ * DonutChart component for displaying a percentage value with a circular progress indicator
+ * Supports customization of size, thickness, animations, and theming
+ */
+export declare const DonutChart: React.FC<DonutChartProps>;

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

@@ -0,0 +1,162 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { 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 { resolveCssVariable, 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
+    // Resolves CSS variables to computed values for SVG attribute compatibility
+    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: resolveCssVariable(colors.from),
+                to: resolveCssVariable(colors.to),
+            };
+        }
+        // If colors prop has primary, use solid color
+        if (colors === null || colors === void 0 ? void 0 : colors.primary) {
+            return {
+                type: "solid",
+                color: resolveCssVariable(colors.primary),
+            };
+        }
+        // Use theme defaults (gradient) - resolve CSS variables
+        const primaryColor = resolveCssVariable(((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) || "", "#3b82f6");
+        const secondaryColor = resolveCssVariable(((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) || "", "#10b981");
+        return {
+            type: "gradient",
+            from: primaryColor,
+            to: secondaryColor,
+        };
+    }, [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 (jsxs(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, children: [jsxs("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",
+                }, children: [jsx("defs", { children: getColors.type === "gradient" && (jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: getColors.from }), jsx("stop", { offset: "100%", stopColor: getColors.to })] })) }), isSegmentedVariant ? (jsxs("g", { children: [segmentDefinitions.map((segment, index) => {
+                                var _a;
+                                return (jsx("path", { d: segment.trackPath, fill: resolveCssVariable(((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.track) || "", "#e5e7eb"), opacity: 0.25 }, `donut-track-${index}`));
+                            }), segmentDefinitions.map((segment, index) => segment.activePath ? (jsx(motion.path, { 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%" } }, `donut-active-${index}`)) : null)] })) : (jsxs(Fragment, { children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#000000", strokeWidth: strokeWidth > 2 ? strokeWidth - 2 : 1, opacity: 0.05 }), jsx(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",
+                                } })] }))] }), jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center z-20", children: [jsx("div", { className: cn((_a = theme.text) === null || _a === void 0 ? void 0 : _a.label), children: label !== undefined ? label : `${safePercentage}%` }), subtitle && jsx("div", { className: cn((_b = theme.text) === null || _b === void 0 ? void 0 : _b.subtitle), children: subtitle }), children && jsx("div", { children: children })] })] }));
+};
+DonutChart.displayName = "DonutChart";
+
+export { DonutChart };

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

@@ -0,0 +1,130 @@
+import { DonutChartThemeOverrides } from "./DonutChart.types";
+/**
+ * Default theme for the DonutChart component
+ */
+export declare const donutChartTheme: DonutChartThemeOverrides;
+/**
+ * Pre-defined color schemes for quick customization
+ * Note: These use hex values as they're required for gradient interpolation
+ * via the interpolateHexColor function. Users can also pass CSS variables
+ * which will be resolved at runtime.
+ */
+export declare const donutChartColorSchemes: {
+    readonly default: {
+        readonly from: "#3b82f6";
+        readonly to: "#10b981";
+    };
+    readonly success: {
+        readonly primary: "#10b981";
+    };
+    readonly warning: {
+        readonly primary: "#f59e0b";
+    };
+    readonly error: {
+        readonly primary: "#ef4444";
+    };
+    readonly purple: {
+        readonly from: "#8b5cf6";
+        readonly to: "#ec4899";
+    };
+    readonly ocean: {
+        readonly from: "#0ea5e9";
+        readonly to: "#06b6d4";
+    };
+    readonly sunset: {
+        readonly from: "#f97316";
+        readonly to: "#ef4444";
+    };
+    readonly forest: {
+        readonly from: "#22c55e";
+        readonly to: "#16a34a";
+    };
+    readonly cosmic: {
+        readonly from: "#6366f1";
+        readonly to: "#8b5cf6";
+    };
+    readonly monochrome: {
+        readonly primary: "#6b7280";
+    };
+    readonly highContrast: {
+        readonly primary: "#000000";
+    };
+    readonly brand: {
+        readonly from: "#3b82f6";
+        readonly to: "#1d4ed8";
+    };
+};
+/**
+ * Size presets for common use cases
+ */
+export declare const donutChartSizes: {
+    readonly xs: 120;
+    readonly sm: 160;
+    readonly md: 200;
+    readonly lg: 280;
+    readonly xl: 360;
+    readonly "2xl": 480;
+};
+/**
+ * Thickness presets
+ */
+export declare const donutChartThickness: {
+    readonly thin: 1;
+    readonly normal: 2;
+    readonly thick: 3;
+    readonly bold: 4;
+    readonly extraBold: 6;
+};
+/**
+ * Utility function to create custom color schemes
+ */
+export declare const createColorScheme: (colors: {
+    primary?: string;
+    from?: string;
+    to?: string;
+}) => {
+    primary?: string;
+    from?: string;
+    to?: string;
+};
+/**
+ * Utility function to get color scheme by name
+ */
+export declare const getColorScheme: (name: keyof typeof donutChartColorSchemes) => {
+    readonly from: "#3b82f6";
+    readonly to: "#10b981";
+} | {
+    readonly primary: "#10b981";
+} | {
+    readonly primary: "#f59e0b";
+} | {
+    readonly primary: "#ef4444";
+} | {
+    readonly from: "#8b5cf6";
+    readonly to: "#ec4899";
+} | {
+    readonly from: "#0ea5e9";
+    readonly to: "#06b6d4";
+} | {
+    readonly from: "#f97316";
+    readonly to: "#ef4444";
+} | {
+    readonly from: "#22c55e";
+    readonly to: "#16a34a";
+} | {
+    readonly from: "#6366f1";
+    readonly to: "#8b5cf6";
+} | {
+    readonly primary: "#6b7280";
+} | {
+    readonly primary: "#000000";
+} | {
+    readonly from: "#3b82f6";
+    readonly to: "#1d4ed8";
+};
+/**
+ * Type definitions for exported constants
+ */
+export type DonutChartColorScheme = keyof typeof donutChartColorSchemes;
+export type DonutChartSize = keyof typeof donutChartSizes;
+export type DonutChartThickness = keyof typeof donutChartThickness;

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

@@ -0,0 +1,25 @@
+/**
+ * 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 (CSS variables for dark mode support)
+    // Note: These are resolved at runtime via getComputedStyle
+    colors: {
+        primary: "var(--color-primary)",
+        secondary: "var(--color-success)",
+        track: "var(--color-border)",
+    },
+};
+
+export { donutChartTheme };