flikkui 0.2.0-beta.1 → 0.2.0-beta.4

package/dist/components/ai/PromptSuggestions/PromptSuggestion.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { PromptSuggestionProps } from "./PromptSuggestion.types";
+/**
+ * PromptSuggestion - Individual clickable suggestion chip
+ *
+ * Simple, focused component for AI prompt interfaces.
+ * White background with border styling, fully customizable via className.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <div className="flex gap-2">
+ *   <PromptSuggestion onSelect={handleSelect}>Write a poem</PromptSuggestion>
+ *   <PromptSuggestion onSelect={handleSelect}>Summarize document</PromptSuggestion>
+ * </div>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain code
+ * </PromptSuggestion>
+ * ```
+ */
+export declare const PromptSuggestion: React.ForwardRefExoticComponent<PromptSuggestionProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ai/PromptSuggestions/PromptSuggestion.js

@@ -0,0 +1,62 @@
+import React__default, { useCallback } from 'react';
+import { promptSuggestionTheme } from './PromptSuggestion.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * PromptSuggestion - Individual clickable suggestion chip
+ *
+ * Simple, focused component for AI prompt interfaces.
+ * White background with border styling, fully customizable via className.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <div className="flex gap-2">
+ *   <PromptSuggestion onSelect={handleSelect}>Write a poem</PromptSuggestion>
+ *   <PromptSuggestion onSelect={handleSelect}>Summarize document</PromptSuggestion>
+ * </div>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain code
+ * </PromptSuggestion>
+ * ```
+ */
+const PromptSuggestion = React__default.forwardRef(({ children, onSelect, icon, className, onClick, ...props }, ref) => {
+    const theme = promptSuggestionTheme;
+    // Extract text content from children for onSelect callback
+    const getTextContent = useCallback(() => {
+        if (typeof children === "string") {
+            return children;
+        }
+        if (typeof children === "number") {
+            return String(children);
+        }
+        return "";
+    }, [children]);
+    // Handle click with onSelect callback
+    const handleClick = useCallback((event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (onSelect) {
+            const text = getTextContent();
+            if (text) {
+                onSelect(text);
+            }
+        }
+    }, [onClick, onSelect, getTextContent]);
+    return (React__default.createElement("span", { ref: ref, role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleClick(e);
+            }
+        }, className: cn(theme.baseStyle, className), "aria-label": typeof children === "string" ? `Use suggestion: ${children}` : undefined, ...props },
+        icon && React__default.createElement("span", { className: theme.iconStyle }, icon),
+        children));
+});
+PromptSuggestion.displayName = "PromptSuggestion";
+
+export { PromptSuggestion };

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * PromptSuggestion theme configuration
+ */
+export interface PromptSuggestionTheme {
+    /** Base styles for the suggestion chip */
+    baseStyle: string;
+    /** Icon container styles */
+    iconStyle: string;
+}
+export declare const promptSuggestionTheme: PromptSuggestionTheme;

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -0,0 +1,12 @@
+const promptSuggestionTheme = {
+    baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 rounded-full " +
+        "bg-white dark:bg-[var(--color-background)] " +
+        "border border-[var(--color-border)] " +
+        "text-sm font-medium text-[var(--color-text-primary)] " +
+        "cursor-pointer transition-all duration-300 " +
+        "hover:bg-[var(--color-background-secondary)] dark:hover:bg-[var(--color-background-secondary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    iconStyle: "size-4 flex-shrink-0",
+};
+
+export { promptSuggestionTheme };

package/dist/components/ai/PromptSuggestions/PromptSuggestion.types.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+/**
+ * PromptSuggestion component props
+ *
+ * Individual clickable suggestion chip for AI prompt interfaces.
+ * Simple, focused component with white background and border styling.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PromptSuggestion onSelect={handleSelect}>
+ *   Write a poem
+ * </PromptSuggestion>
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain this code
+ * </PromptSuggestion>
+ * ```
+ *
+ * @example Custom styling (shadcn approach)
+ * ```tsx
+ * <PromptSuggestion
+ *   className="bg-purple-100 border-purple-300"
+ *   onSelect={handleSelect}
+ * >
+ *   Custom styled
+ * </PromptSuggestion>
+ * ```
+ */
+export interface PromptSuggestionProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onSelect"> {
+    /**
+     * Suggestion text content
+     */
+    children: React.ReactNode;
+    /**
+     * Callback when suggestion is clicked
+     * Receives the text content as a string
+     */
+    onSelect?: (text: string) => void;
+    /**
+     * Optional icon displayed before the text
+     */
+    icon?: React.ReactNode;
+    /**
+     * Additional className for full customization (highest priority)
+     */
+    className?: string;
+}

package/dist/components/ai/PromptSuggestions/index.d.ts

@@ -1,2 +1,4 @@
-export { PromptSuggestions } from "./PromptSuggestions";
-export type { PromptSuggestionsProps, PromptSuggestion, PillVariant, PillColor, } from "./PromptSuggestions.types";
+export { PromptSuggestion } from "./PromptSuggestion";
+export { promptSuggestionTheme } from "./PromptSuggestion.theme";
+export type { PromptSuggestionProps } from "./PromptSuggestion.types";
+export type { PromptSuggestionTheme } from "./PromptSuggestion.theme";

package/dist/components/ai/index.d.ts

@@ -10,8 +10,8 @@ export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
 export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
 export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
-export { PromptSuggestions } from "./PromptSuggestions";
-export type { PromptSuggestionsProps, PromptSuggestion, } from "./PromptSuggestions";
+export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
+export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestions";
 export { StreamingResponse, ErrorDisplay, MarkdownRenderer, streamingResponseTheme, } from "./StreamingResponse";
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
@@ -19,15 +19,5 @@ export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeO
 export { ApprovalCard } from "./ApprovalCard";
 export type { ApprovalCardProps, ApprovalRiskLevel, ApprovalMode, } from "./ApprovalCard";
 export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";
-export { EditingIndicator, editingIndicatorTheme } from "./EditingIndicator";
-export type { EditingIndicatorProps, EditingIndicatorTheme, } from "./EditingIndicator";
-export { PresenceIndicator, presenceIndicatorTheme } from "./PresenceIndicator";
-export type { PresenceIndicatorProps, PresenceIndicatorTheme, PresenceSort, } from "./PresenceIndicator";
-export { PresenceProvider, usePresenceContext, PresenceContext, MockPresenceAdapter, } from "./PresenceProvider";
-export type { PresenceProviderProps, PresenceUser, TypingUser, ConnectionStatus, PresenceEvent, PresenceAdapter, PresenceAdapterConfig, PresenceContextValue, PresenceProviderTheme, } from "./PresenceProvider";
 export { ArtifactContainer, artifactContainerTheme, handleSizes, } from "./ArtifactContainer";
 export type { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps, ArtifactContainerTheme, SplitDirection, } from "./ArtifactContainer";
-export { GenerativeRenderer, generativeRendererTheme, } from "./GenerativeRenderer";
-export type { GenerativeRendererProps, GenerativeRendererTheme, RendererType, } from "./GenerativeRenderer";
-export { VersionSlider, versionSliderTheme } from "./VersionSlider";
-export type { VersionSliderProps, VersionSliderTheme, Version, } from "./VersionSlider";

package/dist/components/charts/ActivityRings/ActivityRings.js

@@ -14,8 +14,8 @@ import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '
  * Multiple concentric circular progress rings, inspired by Apple Activity.
  * Features smooth animations, accessibility support, and production-ready CSS variables.
  */
-const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS_DEFAULTS.size, strokeWidth: propStrokeWidth, gap: propGap, showAnimation = ACTIVITY_RINGS_DEFAULTS.showAnimation, theme: themeOverrides, className, title, description, showValidationWarnings = process.env.NODE_ENV === "development", ...props }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS_DEFAULTS.size, strokeWidth: propStrokeWidth, gap: propGap, showAnimation = ACTIVITY_RINGS_DEFAULTS.showAnimation, colors, theme: themeOverrides, className, title, description, darkMode = false, showValidationWarnings = process.env.NODE_ENV === "development", ...props }) => {
+    var _a, _b, _c, _d, _e, _f;
     const theme = { ...activityRingsTheme, ...(themeOverrides || {}) };
     const shouldReduceMotion = useReducedMotion();
     const containerRef = useRef(null);
@@ -81,8 +81,25 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
             return maxRadius - index * (strokeWidth + gap);
         });
     }, [normalizedRings.length, strokeWidth, gap, center]);
-    // Get default colors from theme
-    const defaultColors = ((_e = theme.ringDefaults) === null || _e === void 0 ? void 0 : _e.colors) || [];
+    // Get color for a ring by index
+    // Priority: ring.color > colors prop > theme colors > fallback
+    const getRingColor = (ring, index) => {
+        var _a;
+        // 1. Individual ring color override (highest priority)
+        if (ring.color)
+            return ring.color;
+        // 2. Component-level colors prop (overrides theme defaults)
+        if (colors && colors.length > 0) {
+            return colors[index % colors.length];
+        }
+        // 3. Theme colors
+        const themeColors = ((_a = theme.ringDefaults) === null || _a === void 0 ? void 0 : _a.colors) || [];
+        if (themeColors.length > 0) {
+            return themeColors[index % themeColors.length];
+        }
+        // 4. Fallback
+        return "var(--color-primary)";
+    };
     // Container size
     const containerSize = typeof size === "number" ? `${size}px` : size;
     // Calculate average progress for ARIA
@@ -90,72 +107,67 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
         const sum = normalizedRings.reduce((acc, ring) => acc + ring.value, 0);
         return Math.round(sum / normalizedRings.length);
     }, [normalizedRings]);
-    return (React__default.createElement("div", { ref: containerRef, className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, role: "progressbar", "aria-valuenow": averageProgress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": title ||
+    return (React__default.createElement("div", { ref: containerRef, className: cn(theme.baseStyle, darkMode && "dark", className), style: { width: containerSize, height: containerSize }, role: "progressbar", "aria-valuenow": averageProgress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": title ||
             `Activity rings: ${normalizedRings
                 .map((r, i) => `${r.label || `Ring ${i + 1}`} ${r.value}%`)
                 .join(", ")}`, "aria-describedby": description ? "rings-description" : undefined, tabIndex: 0, ...props },
         description && (React__default.createElement("span", { id: "rings-description", className: "sr-only" }, description)),
-        React__default.createElement("svg", { className: cn(theme.svgStyle), viewBox: `0 0 ${svgSize} ${svgSize}`, width: containerSize, height: containerSize, preserveAspectRatio: "xMidYMid meet", role: "presentation", "aria-hidden": "true" },
-            React__default.createElement("title", null, title || "Activity Rings Chart"),
-            description && React__default.createElement("desc", null, description),
-            normalizedRings.map((ring, index) => {
-                const radius = ringRadii[index];
-                const circumference = 2 * Math.PI * radius;
-                const offset = circumference - (ring.value / 100) * circumference;
-                const ringColor = ring.color ||
-                    defaultColors[index % defaultColors.length] ||
-                    "var(--color-primary)";
-                const animationDelay = getStaggerDelay(index, CIRCULAR_CHART_ANIMATIONS.activityRings.staggerDelay);
-                // Check if radius is valid (prevent negative or zero radius)
-                if (radius <= 0) {
-                    if (process.env.NODE_ENV !== "production") {
-                        console.warn(`[ActivityRings]: Ring ${index} has invalid radius (${radius}). Too many rings or strokeWidth/gap too large.`);
-                    }
-                    return null;
+        React__default.createElement("svg", { className: cn(theme.svgStyle), viewBox: `0 0 ${svgSize} ${svgSize}`, width: containerSize, height: containerSize, preserveAspectRatio: "xMidYMid meet", role: "presentation", "aria-hidden": "true" }, normalizedRings.map((ring, index) => {
+            const radius = ringRadii[index];
+            const circumference = 2 * Math.PI * radius;
+            const offset = circumference - (ring.value / 100) * circumference;
+            const ringColor = getRingColor(ring, index);
+            const animationDelay = getStaggerDelay(index, CIRCULAR_CHART_ANIMATIONS.activityRings.staggerDelay);
+            // Check if radius is valid (prevent negative or zero radius)
+            if (radius <= 0) {
+                if (process.env.NODE_ENV !== "production") {
+                    console.warn(`[ActivityRings]: Ring ${index} has invalid radius (${radius}). Too many rings or strokeWidth/gap too large.`);
                 }
-                // Create shared hover handlers
-                const createHoverHandlers = () => ({
-                    onMouseEnter: (e) => {
-                        const content = {
-                            category: "", // Empty to avoid duplicate text in tooltip
-                            series: [
-                                {
-                                    key: `ring-${index}`,
-                                    label: ring.label || `Ring ${index + 1}`,
-                                    value: ring.value,
-                                    color: ringColor,
-                                },
-                            ],
-                        };
-                        const svgCoordinates = {
-                            x: center,
-                            y: center - radius,
-                            dimensions: {
-                                width: svgSize,
-                                height: svgSize,
-                                left: 0,
-                                top: 0,
+                return null;
+            }
+            // Create shared hover handlers
+            const createHoverHandlers = () => ({
+                onMouseEnter: (e) => {
+                    const content = {
+                        category: "", // Empty to avoid duplicate text in tooltip
+                        series: [
+                            {
+                                key: `ring-${index}`,
+                                label: ring.label || `Ring ${index + 1}`,
+                                value: ring.value,
+                                color: ringColor,
                             },
-                        };
-                        handleMouseEnter(e, content, svgCoordinates);
-                    },
-                    onMouseMove: (e) => handleMouseMove(e),
-                    onMouseLeave: () => handleMouseLeave(),
-                });
-                return (React__default.createElement("g", { key: index },
-                    React__default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#00000010", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() }),
-                    React__default.createElement(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: ringColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, className: "cursor-pointer transition-opacity duration-200", initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: offset } : {}, transition: showAnimation && !shouldReduceMotion
-                            ? getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.activityRings.preset, shouldReduceMotion, animationDelay)
-                            : { duration: 0 }, transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() })));
-            })),
+                        ],
+                    };
+                    const svgCoordinates = {
+                        x: center,
+                        y: center - radius,
+                        dimensions: {
+                            width: svgSize,
+                            height: svgSize,
+                            left: 0,
+                            top: 0,
+                        },
+                    };
+                    handleMouseEnter(e, content, svgCoordinates);
+                },
+                onMouseMove: (e) => handleMouseMove(e),
+                onMouseLeave: () => handleMouseLeave(),
+            });
+            return (React__default.createElement("g", { key: index },
+                React__default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-chart-track)", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() }),
+                React__default.createElement(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: ringColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, className: "cursor-pointer transition-opacity duration-200", initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: offset } : {}, transition: showAnimation && !shouldReduceMotion
+                        ? getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.activityRings.preset, shouldReduceMotion, animationDelay)
+                        : { duration: 0 }, transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() })));
+        })),
         (centerLabel || centerSuffix) && (React__default.createElement(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", initial: { opacity: 0, scale: 0.8 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
                 ? {
                     delay: CIRCULAR_CHART_ANIMATIONS.activityRings.centerLabelDelay,
                     duration: 0.4,
                 }
-                : { duration: 0 } }, centerLabel && (React__default.createElement("div", { className: cn((_f = theme.centerText) === null || _f === void 0 ? void 0 : _f.label, "flex  flex-col items-center") },
+                : { duration: 0 } }, centerLabel && (React__default.createElement("div", { className: cn((_e = theme.centerText) === null || _e === void 0 ? void 0 : _e.label, "flex  flex-col items-center") },
             React__default.createElement("span", null, centerLabel),
-            centerSuffix && (React__default.createElement("span", { className: (_g = theme.centerText) === null || _g === void 0 ? void 0 : _g.suffix }, centerSuffix)))))),
+            centerSuffix && (React__default.createElement("span", { className: (_f = theme.centerText) === null || _f === void 0 ? void 0 : _f.suffix }, centerSuffix)))))),
         React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 } })));
 };
 ActivityRings.displayName = "ActivityRings";

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

@@ -9,7 +9,6 @@ const activityRingsTheme = {
     ringDefaults: {
         strokeWidth: 8,
         gap: 1,
-        // Default colors using primary family gradient (dark to light)
         colors: [
             "var(--color-primary-600)", // Outer: Darkest
             "var(--color-primary-400)", // Middle-outer

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

@@ -22,6 +22,7 @@ export interface ActivityRingsThemeOverrides {
     ringDefaults?: {
         strokeWidth?: number;
         gap?: number;
+        /** Default colors */
         colors?: string[];
     };
     /** Center text styles */
@@ -48,8 +49,24 @@ export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | '
     gap?: number;
     /** Whether to show animations (default: true) */
     showAnimation?: boolean;
+    /**
+     * Custom color palette for rings. Colors are applied in order from outer to inner ring.
+     * If fewer colors than rings, colors will cycle. Individual ring.color takes precedence.
+     * When provided, overrides both light and dark theme defaults - choose colors appropriate
+     * for your background.
+     * @example ['#3b82f6', '#10b981', '#f59e0b']
+     * @example ['var(--color-primary)', 'var(--color-success)', 'var(--color-warning)']
+     */
+    colors?: string[];
     /** Theme overrides */
     theme?: ActivityRingsThemeOverrides;
+    /**
+     * Force dark mode styling for the chart. Use when placing the chart on a dark background
+     * while the page is in light mode. This applies the 'dark' class to the chart container,
+     * making text, borders, and other elements use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
     /** Development and debugging props */
     showValidationWarnings?: boolean;
 }

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

@@ -24,8 +24,10 @@ orientation = BAR_CHART_DEFAULTS.orientation,
 showAnimation = BAR_CHART_DEFAULTS.showAnimation, 
 // Placeholder bar props
 showPlaceholderBars = BAR_CHART_DEFAULTS.showPlaceholderBars, placeholderData, 
+// Color customization
+colors, 
 // Base props
-className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", children, ...props }) => {
+className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", darkMode = false, children, ...props }) => {
     var _a, _b;
     // Resolve barRadius with backward compatibility
     const resolvedBarRadius = (_a = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _a !== void 0 ? _a : BAR_CHART_DEFAULTS.barRadius;
@@ -75,13 +77,15 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     }
     // Simple color functions based on direct CSS variables (following guidelines)
     const getSeriesFillColor = (index) => {
-        const colorVars = [
+        const defaultColors = [
             "var(--color-primary)",
             "var(--color-warning)",
             "var(--color-success)",
             "var(--color-danger)",
         ];
-        return colorVars[index % colorVars.length];
+        // Use custom colors if provided, otherwise fall back to defaults
+        const palette = colors && colors.length > 0 ? colors : defaultColors;
+        return palette[index % palette.length];
     };
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
@@ -408,7 +412,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 : undefined }));
     };
     return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development" },
-        React__default.createElement("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
+        React__default.createElement("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
             descriptionProps && React__default.createElement("div", { ...descriptionProps }),
             showValidationWarnings && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm" },
                 React__default.createElement("strong", null, "Chart Warnings:"),

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

@@ -4,10 +4,24 @@ export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps
     radius?: number;
     gap?: number;
     categoryGap?: number;
+    /**
+     * Custom color palette for bar series. Colors are applied in order to each data series.
+     * If fewer colors than series, colors will cycle. Supports any valid CSS color value
+     * including hex, rgb, hsl, and CSS variables like `var(--color-primary)`.
+     * @example ['#3b82f6', '#10b981', '#f59e0b']
+     * @example ['var(--color-primary)', 'var(--color-success)']
+     */
+    colors?: string[];
     showAnimation?: boolean;
     showPlaceholderBars?: boolean;
     placeholderData?: BaseChartProps["data"];
     showValidationWarnings?: boolean;
+    /**
+     * Force dark mode styling for the chart. Use when placing the chart on a dark background
+     * while the page is in light mode. This applies the 'dark' class to the chart container,
+     * making axis labels, grid lines, and text use light colors for visibility.
+     */
+    darkMode?: boolean;
 }
 export declare const BAR_CHART_DEFAULTS: {
     readonly barRadius: 32;

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

@@ -3,7 +3,7 @@ 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';
+import { resolveCssVariable, describeRingSegmentPath, interpolateHexColor, clamp } from './donut-utils.js';
 
 /**
  * DonutChart component for displaying a percentage value with a circular progress indicator
@@ -36,28 +36,31 @@ const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200
     // 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: colors.from,
-                to: colors.to,
+                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: colors.primary,
+                color: resolveCssVariable(colors.primary),
             };
         }
-        // Use theme defaults (gradient)
+        // 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: ((_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",
+            from: primaryColor,
+            to: secondaryColor,
         };
     }, [colors, theme.colors]);
     const segmentDefinitions = useMemo(() => {
@@ -148,7 +151,7 @@ const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200
             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 }));
+                    return (React__default.createElement("path", { key: `donut-track-${index}`, d: segment.trackPath, fill: resolveCssVariable(((_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
                         ? {

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

@@ -5,6 +5,9 @@ import { DonutChartThemeOverrides } from "./DonutChart.types";
 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: {

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

@@ -13,11 +13,12 @@ const donutChartTheme = {
         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
+    // Default color palette (CSS variables for dark mode support)
+    // Note: These are resolved at runtime via getComputedStyle
     colors: {
-        primary: "#3b82f6", // blue-500
-        secondary: "#10b981", // emerald-500
-        track: "#e5e7eb", // neutral-200
+        primary: "var(--color-primary)",
+        secondary: "var(--color-success)",
+        track: "var(--color-border)",
     },
 };
 

package/dist/components/charts/DonutChart/donut-utils.d.ts

@@ -1,6 +1,11 @@
 /**
  * Shared utility functions for DonutChart components
  */
+/**
+ * Resolves a CSS variable to its computed value
+ * Falls back to the provided value if not a CSS variable or resolution fails
+ */
+export declare const resolveCssVariable: (value: string, fallback?: string) => string;
 /**
  * Clamps a value between a minimum and maximum
  */

package/dist/components/charts/DonutChart/donut-utils.js

@@ -1,6 +1,31 @@
 /**
  * Shared utility functions for DonutChart components
  */
+/**
+ * Resolves a CSS variable to its computed value
+ * Falls back to the provided value if not a CSS variable or resolution fails
+ */
+const resolveCssVariable = (value, fallback) => {
+    var _a;
+    // If not a CSS variable, return as-is
+    if (!value.startsWith("var(")) {
+        return value;
+    }
+    // Check if we're in a browser environment
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return fallback || value;
+    }
+    // Extract variable name from var(--name) or var(--name, fallback)
+    const match = value.match(/var\(([^,)]+)(?:,\s*([^)]+))?\)/);
+    if (!match) {
+        return fallback || value;
+    }
+    const varName = match[1].trim();
+    const cssDefault = (_a = match[2]) === null || _a === void 0 ? void 0 : _a.trim();
+    // Get computed value from document root
+    const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    return computed || cssDefault || fallback || value;
+};
 /**
  * Clamps a value between a minimum and maximum
  */
@@ -112,4 +137,4 @@ const interpolateHexColor = (from, to, factor) => {
     return `rgb(${r}, ${g}, ${b})`;
 };
 
-export { clamp, describeArcPathClockwise, describeRingSegmentPath, hexToRgb, interpolateHexColor, polarToCartesian };
+export { clamp, describeArcPathClockwise, describeRingSegmentPath, hexToRgb, interpolateHexColor, polarToCartesian, resolveCssVariable };

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

@@ -9,8 +9,8 @@ const heatmapTheme = {
     gridStyle: "absolute inset-0",
     // Base cell styles (individual cells add opacity via inline styles)
     cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
-    // Axis labels using standard Tailwind classes (acceptable for labels)
-    axisLabelStyle: "text-xs text-gray-600 dark:text-gray-400 font-medium select-none",
+    // Axis labels using CSS variables for dark mode support
+    axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
     // Legend using correct CSS variables
     legendStyle: "w-full space-y-1.5 mt-3",
 };