@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/ai/StreamingResponse/StreamingResponse.animations.js

@@ -9,8 +9,8 @@
 const tokenFadeIn = {
     hidden: {
         opacity: 0,
-        y: 6,
-        filter: 'blur(4px)',
+        y: 4,
+        filter: 'blur(1.5px)',
     },
     visible: {
         opacity: 1,
@@ -19,8 +19,8 @@ const tokenFadeIn = {
     },
 };
 const tokenTransition = {
-    duration: 0.35,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.25,
+    ease: [0.2, 0.8, 0.2, 1], // snappy easing
 };
 /**
  * Block slide-in animation
@@ -29,7 +29,7 @@ const tokenTransition = {
 const blockSlideIn = {
     hidden: {
         opacity: 0,
-        y: 8,
+        y: 6,
     },
     visible: {
         opacity: 1,
@@ -37,8 +37,8 @@ const blockSlideIn = {
     },
 };
 const blockTransition = {
-    duration: 0.4,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.35,
+    ease: [0.2, 0.8, 0.2, 1],
 };
 /**
  * Streaming cursor (caret) animation
@@ -54,6 +54,25 @@ const cursorPulse = {
         },
     },
 };
+/**
+ * Inline token fade-in animation
+ * Used for word-by-word animation inside markdown prose elements
+ * No y-movement to prevent layout jitter in inline text
+ */
+const inlineTokenFadeIn = {
+    hidden: {
+        opacity: 0,
+        filter: 'blur(1.5px)',
+    },
+    visible: {
+        opacity: 1,
+        filter: 'blur(0px)',
+    },
+};
+const inlineTokenTransition = {
+    duration: 0.25,
+    ease: [0.2, 0.8, 0.2, 1],
+};
 /**
  * Container animation for staggered children
  */
@@ -65,4 +84,4 @@ const staggerContainer = {
     },
 };
 
-export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition };
+export { blockSlideIn, blockTransition, cursorPulse, inlineTokenFadeIn, inlineTokenTransition, staggerContainer, tokenFadeIn, tokenTransition };

package/dist/components/ai/StreamingResponse/StreamingResponse.js

@@ -3,6 +3,13 @@ import { useRef, useEffect } from 'react';
 import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
 import { Message } from '../../core/Message/Message.js';
 import { TypeWriter } from '../../core/Message/TypeWriter.js';
+import '../../core/Message/MessageBody.js';
+import 'clsx';
+import 'tailwind-merge';
+import '../../core/Button/Button.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 import { ErrorDisplay } from './ErrorDisplay.js';
 import { MarkdownRenderer } from './MarkdownRenderer.js';
 import { AnimatedText } from './AnimatedText.js';
@@ -32,7 +39,7 @@ onToken, onComplete, onError, onStart, onAbort,
 // Display options
 typingSpeed = 100, enableTypewriter = true, enableMarkdown = true, markdownOptions, 
 // Animation
-animated = true, showCursor = true, 
+animated = true, showCursor = true, animateLastN = 12, 
 // Message component props
 role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
 // Error handling
@@ -65,7 +72,7 @@ className, }) => {
     }
     else if (enableMarkdown) {
         // Render markdown with block-level slide-in animations and streaming cursor
-        messageContent = (jsx(MarkdownRenderer, { content: accumulatedText, options: markdownOptions, isStreaming: isStreaming, animated: animated, showCursor: showCursor }));
+        messageContent = (jsx(MarkdownRenderer, { content: accumulatedText, options: markdownOptions, isStreaming: isStreaming, animated: animated, showCursor: showCursor, animateLastN: animateLastN }));
     }
     else if (isStreaming) {
         // During streaming without markdown: use per-token fade-in animation
@@ -73,11 +80,11 @@ className, }) => {
     }
     else if (enableTypewriter && isComplete && accumulatedText) {
         // Use typewriter animation after streaming completes
-        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap break-words" }));
+        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap wrap-break-word" }));
     }
     else {
         // Show raw text (streaming complete, typewriter disabled)
-        messageContent = (jsx("p", { className: "whitespace-pre-wrap break-words", children: accumulatedText }));
+        messageContent = (jsx("p", { className: "whitespace-pre-wrap wrap-break-word", children: accumulatedText }));
     }
     // Render with Message component
     return (jsx(Message, { role: role, content: messageContent, avatar: avatar, timestamp: startTimeRef.current, showTimestamp: showTimestamp, isStreaming: isStreaming, showActions: showActions && !error, onCopy: onCopy, onRegenerate: onRegenerate, className: className }));

package/dist/components/ai/StreamingResponse/StreamingResponse.theme.js

@@ -1,9 +1,9 @@
 const streamingResponseTheme = {
     errorContainerStyle: "flex items-start gap-3 rounded-[var(--radius-base)] border border-[var(--color-danger-200)] bg-[var(--color-danger-50)] px-4 py-3",
-    errorTitleStyle: "text-sm font-medium text-[var(--color-danger)]",
-    errorMessageStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
-    errorRetryButtonStyle: "mt-2 text-sm font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
-    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-sm",
+    errorTitleStyle: "text-base font-medium text-[var(--color-danger)]",
+    errorMessageStyle: "text-base text-[var(--color-text-secondary)] mt-1",
+    errorRetryButtonStyle: "mt-2 text-base font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
+    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-base",
     loadingDotStyle: "w-1.5 h-1.5 rounded-full bg-current animate-pulse",
 };
 

package/dist/components/ai/StreamingResponse/StreamingResponse.types.d.ts

@@ -2,16 +2,16 @@
  * StreamingResponse Component Types
  * Type definitions for the StreamingResponse component
  */
-import type { ReactNode } from 'react';
-import type { SSEFormat, SSEParser } from '../../../utils/sseFormatParsers';
-import type { StreamingError, RetryConfig } from '../../../utils';
-import type { MessageRole } from '../../core/Message';
+import type { ReactNode } from "react";
+import type { SSEFormat, SSEParser } from "../../../utils/sseFormatParsers";
+import type { StreamingError, RetryConfig } from "../../../utils";
+import type { MessageRole } from "../../core/Message";
 /**
  * Avatar configuration for Message component
  */
 export interface MessageAvatarProps {
     src?: string;
-    alt: string;
+    name: string;
     fallback?: ReactNode;
 }
 /**
@@ -21,7 +21,7 @@ export interface MarkdownOptions {
     /** Allow HTML in markdown (default: false) */
     allowHtml?: boolean;
     /** Syntax highlighting theme (default: 'light') */
-    syntaxTheme?: 'light' | 'dark';
+    syntaxTheme?: "light" | "dark";
     /** Custom code block renderer */
     renderCodeBlock?: (code: string, language: string) => ReactNode;
 }
@@ -32,7 +32,7 @@ export interface StreamingResponseProps {
     /** The SSE endpoint URL */
     url: string;
     /** HTTP method (default: 'POST') */
-    method?: 'GET' | 'POST';
+    method?: "GET" | "POST";
     /** Request headers */
     headers?: Record<string, string>;
     /** Request body (for POST requests) */
@@ -63,6 +63,8 @@ export interface StreamingResponseProps {
     animated?: boolean;
     /** Show blinking cursor while streaming (default: true) */
     showCursor?: boolean;
+    /** Number of recent words to animate during streaming (default: 6) */
+    animateLastN?: number;
     /** Message role (default: 'assistant') */
     role?: MessageRole;
     /** Avatar configuration */

package/dist/components/ai/StreamingResponse/WordAnimationContext.d.ts

@@ -0,0 +1,27 @@
+/**
+ * WordAnimationContext
+ * Provides a global word counter for word-by-word fade-in animation
+ * inside markdown-rendered content. Works like AnimatedText but across
+ * all markdown elements (paragraphs, headings, lists, blockquotes, etc.).
+ */
+import React from "react";
+interface WordAnimationContextValue {
+    /** Process children of a prose element, animating recent words */
+    processChildren: (children: React.ReactNode) => React.ReactNode;
+    /** Count words in children without animating (for code blocks, tables, etc.) */
+    skipChildren: (children: React.ReactNode) => void;
+}
+export declare const useWordAnimation: () => WordAnimationContextValue | null;
+export interface WordAnimationProviderProps {
+    children: React.ReactNode;
+    /** Full markdown content string — used to compute total word count */
+    content: string;
+    /** Whether animation is active */
+    enabled: boolean;
+    /** Number of recent words to animate (older ones render as static text) */
+    animateLastN?: number;
+    /** Whether cursor is present in content */
+    hasCursor?: boolean;
+}
+export declare const WordAnimationProvider: React.FC<WordAnimationProviderProps>;
+export {};

package/dist/components/ai/StreamingResponse/WordAnimationContext.js

@@ -0,0 +1,134 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { createContext, useRef, useMemo, useContext } from 'react';
+import { motion } from 'motion/react';
+import { inlineTokenTransition, inlineTokenFadeIn } from './StreamingResponse.animations.js';
+
+const WordAnimationContext = createContext(null);
+const useWordAnimation = () => useContext(WordAnimationContext);
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Split a string into word tokens, preserving trailing whitespace on each */
+const tokenize = (text) => {
+    if (!text)
+        return [];
+    return text.match(/\S+\s*/g) || [];
+};
+/** Count prose words in a React children tree (recursive) */
+const countWordsInChildren = (children) => {
+    let count = 0;
+    React__default.Children.forEach(children, (child) => {
+        if (typeof child === "string") {
+            count += tokenize(child).length;
+        }
+        else if (React__default.isValidElement(child)) {
+            const props = child.props;
+            if (props.children) {
+                count += countWordsInChildren(props.children);
+            }
+        }
+    });
+    return count;
+};
+const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12, hasCursor = false, }) => {
+    const settledCountRef = useRef(0);
+    // Count total prose words in the raw content
+    const totalWords = useMemo(() => {
+        // Strip the cursor character before counting
+        const cleanContent = hasCursor ? content.replace(/\s*▏\s*$/, "") : content;
+        return tokenize(cleanContent).length;
+    }, [content, hasCursor]);
+    // Update settled count — words that have aged out of the animation window
+    if (totalWords > settledCountRef.current + animateLastN) {
+        settledCountRef.current = totalWords - animateLastN;
+    }
+    // Mutable counter — reset each render, incremented as text nodes are processed
+    const wordIndexRef = useRef(0);
+    wordIndexRef.current = 0;
+    const settledCount = settledCountRef.current;
+    const contextValue = useMemo(() => {
+        if (!enabled) {
+            return {
+                processChildren: (children) => children,
+                skipChildren: () => { },
+            };
+        }
+        /**
+         * Process React children, wrapping recent words in motion.span
+         * Preserves element structure (strong, em, a, etc.) by recursing into them
+         */
+        const processChildren = (children) => {
+            return React__default.Children.map(children, (child) => {
+                if (typeof child === "string") {
+                    return processTextNode(child);
+                }
+                if (React__default.isValidElement(child)) {
+                    const props = child.props;
+                    if (props.children) {
+                        // Recurse into inline elements (strong, em, a, del, code, etc.)
+                        const processed = processChildren(props.children);
+                        return React__default.cloneElement(child, {}, processed);
+                    }
+                }
+                return child;
+            });
+        };
+        /**
+         * Process a text string node — split into words, settled words become plain,
+         * recent words become motion.span with fade-in
+         */
+        const processTextNode = (text) => {
+            const tokens = tokenize(text);
+            if (tokens.length === 0)
+                return text;
+            const result = [];
+            let staticBuffer = "";
+            for (const token of tokens) {
+                const currentIndex = wordIndexRef.current;
+                wordIndexRef.current++;
+                // Check if this is the cursor character
+                if (token.trim() === "▏") {
+                    // Flush static buffer
+                    if (staticBuffer) {
+                        result.push(staticBuffer);
+                        staticBuffer = "";
+                    }
+                    result.push(jsx("span", { className: "animate-pulse font-light", "aria-hidden": "true", children: "\u258F" }, "streaming-cursor"));
+                    continue;
+                }
+                if (currentIndex < settledCount) {
+                    // Settled word — accumulate into static string
+                    staticBuffer += token;
+                }
+                else {
+                    // Flush static buffer before animated tokens
+                    if (staticBuffer) {
+                        result.push(staticBuffer);
+                        staticBuffer = "";
+                    }
+                    // Animated word
+                    result.push(jsx(motion.span, { variants: inlineTokenFadeIn, initial: "hidden", animate: "visible", transition: inlineTokenTransition, style: { display: "inline" }, children: token }, `word-${currentIndex}-${token.trim()}`));
+                }
+            }
+            // Flush any remaining static buffer
+            if (staticBuffer) {
+                result.push(staticBuffer);
+            }
+            return result.length === 1 ? result[0] : jsx(Fragment, { children: result });
+        };
+        /**
+         * Count words in children without producing animated output.
+         * Used for non-prose elements (code blocks, tables) to keep counter in sync.
+         */
+        const skipChildren = (children) => {
+            const count = countWordsInChildren(children);
+            wordIndexRef.current += count;
+        };
+        return { processChildren, skipChildren };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, settledCount, totalWords]);
+    return (jsx(WordAnimationContext.Provider, { value: contextValue, children: children }));
+};
+WordAnimationProvider.displayName = "WordAnimationProvider";
+
+export { WordAnimationProvider, useWordAnimation };

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

@@ -7,9 +7,11 @@ export { ErrorDisplay } from './ErrorDisplay';
 export { MarkdownRenderer } from './MarkdownRenderer';
 export { AnimatedText } from './AnimatedText';
 export { StreamingCursor } from './StreamingCursor';
+export { WordAnimationProvider, useWordAnimation } from './WordAnimationContext';
 export { streamingResponseTheme } from './StreamingResponse.theme';
-export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
+export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, inlineTokenFadeIn, inlineTokenTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, MessageAvatarProps, } from './StreamingResponse.types';
 export type { AnimatedTextProps } from './AnimatedText';
 export type { StreamingCursorProps } from './StreamingCursor';
 export type { MarkdownRendererProps } from './MarkdownRenderer';
+export type { WordAnimationProviderProps } from './WordAnimationContext';

package/dist/components/ai/TokenCounter/TokenCounter.theme.js

@@ -8,19 +8,19 @@ const tokenCounterTheme = {
     progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
     sizes: {
         sm: {
-            container: "text-xs",
+            container: "text-sm",
             icon: "size-3",
-            text: "text-xs",
+            text: "text-sm",
         },
         md: {
-            container: "text-sm",
+            container: "text-base",
             icon: "size-4",
-            text: "text-sm",
+            text: "text-base",
         },
         lg: {
-            container: "text-base",
+            container: "text-lg",
             icon: "size-5",
-            text: "text-base",
+            text: "text-lg",
         },
     },
 };

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

@@ -1,11 +1,7 @@
 export { Message, messageTheme } from "../core/Message";
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
-export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
-export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory";
 export { PromptInput, promptInputTheme } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
-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 { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
@@ -14,6 +10,3 @@ export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, Stream
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
-export { ApprovalCard } from "./ApprovalCard";
-export type { ApprovalCardProps, ApprovalRiskLevel, } from "./ApprovalCard";
-export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";

package/dist/components/ai/index.js

@@ -1,12 +1,17 @@
 export { Message } from '../core/Message/Message.js';
 export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
-export { MessageHistory } from './MessageHistory/MessageHistory.js';
-export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
+import '../core/Message/MessageBody.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'tailwind-merge';
+import 'react';
+import '../core/Button/Button.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
-export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
-export { thinkingIndicatorTheme } from './ThinkingIndicator/ThinkingIndicator.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
 export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
 export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';
@@ -17,9 +22,8 @@ export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
 export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';
 export { AnimatedText } from './StreamingResponse/AnimatedText.js';
 export { StreamingCursor } from './StreamingResponse/StreamingCursor.js';
+import './StreamingResponse/WordAnimationContext.js';
 export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.theme.js';
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
 export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
-export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
-export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';

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

@@ -83,7 +83,7 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
     }
     // Early return for invalid configuration
     if (!Array.isArray(rings) || rings.length === 0) {
-        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-sm text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
+        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
     }
     // State for controlling initial animation
     const [hasAnimated, setHasAnimated] = useState(false);

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

@@ -18,8 +18,8 @@ const activityRingsTheme = {
         ],
     },
     centerText: {
-        label: "text-xl font-semibold text-[var(--color-text-primary)]",
-        suffix: "text-sm font-normal text-[var(--color-text-secondary)]/80",
+        label: "text-2xl font-semibold text-[var(--color-text-primary)]",
+        suffix: "text-base font-normal text-[var(--color-text-secondary)]/80",
     },
 };
 

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

@@ -89,9 +89,9 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     });
     // 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: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", 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-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
                         "Unable to render chart due to data validation errors" }), process.env.NODE_ENV === "development" &&
-                    validation.errors.length > 1 && (jsxs("details", { className: "text-xs text-warning-500", children: [jsxs("summary", { className: "cursor-pointer", children: ["Show all errors (", validation.errors.length, ")"] }), jsx("ul", { className: "mt-2 text-left", children: validation.errors.map((error, index) => (jsxs("li", { children: ["\u2022 ", error.message] }, index))) })] }))] }));
+                    validation.errors.length > 1 && (jsxs("details", { className: "text-sm text-warning-500", children: [jsxs("summary", { className: "cursor-pointer", children: ["Show all errors (", validation.errors.length, ")"] }), jsx("ul", { className: "mt-2 text-left", children: validation.errors.map((error, index) => (jsxs("li", { children: ["\u2022 ", error.message] }, index))) })] }))] }));
     }
     // Early return for empty data
     if (!sanitizedData || sanitizedData.length === 0) {
@@ -415,7 +415,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 }
                 : undefined }, keyIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("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", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("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-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings
                                 .filter((warning) => !warning.message.includes("has no valid numeric values"))
                                 .map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) }), validation.warnings.some((warning) => warning.message.includes("has no valid numeric values")) && (jsx("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]", children: jsx("span", { className: "text-[var(--color-warning)]", children: "\u2139\uFE0F Null/undefined values are handled by using averages from other data points" }) }))] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx("defs", { children: jsxs("pattern", { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [jsx("rect", { width: "8", height: "8", fill: "var(--color-neutral-50)" }), jsx("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } })] }) }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                                 if (Math.abs(value) >= 1000)

package/dist/components/charts/ChartContainer.js

@@ -34,7 +34,7 @@ function ChartContainer({ data, config, className, children, minHeight = 200, wi
             minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight
         }),
     };
-    return (jsx(ChartContext.Provider, { value: { data: data || [], config: safeConfig }, children: jsx("div", { className: cn("flex aspect-auto justify-center text-xs", 
+    return (jsx(ChartContext.Provider, { value: { data: data || [], config: safeConfig }, children: jsx("div", { className: cn("flex aspect-auto justify-center text-sm", 
             // Add w-full as default if no width class is specified
             !hasWidthClass && "w-full", className), style: inlineStyles, ...props, children: children }) }));
 }

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

@@ -129,7 +129,7 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
     });
     // 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" })] }));
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", 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-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base 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) {
@@ -141,7 +141,7 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
     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] }));
+    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-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), " Some data validation warnings occurred."] }) })), children] }));
 };
 
 export { ComboChart };

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

@@ -10,7 +10,7 @@ import { resolveCssVariable, describeRingSegmentPath, interpolateHexColor, clamp
  * 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 }) => {
+const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = useState(false);
     const [hasAnimated, setHasAnimated] = useState(false);

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

@@ -11,7 +11,7 @@ const donutChartTheme = {
     // 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",
+        subtitle: "text-base 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

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 /**
  * Color configuration for the donut chart
  */
@@ -41,7 +40,7 @@ export interface DonutChartThemeOverrides {
 /**
  * DonutChart component props
  */
-export interface DonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+export interface DonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Visual variant for the donut chart (solid or segmented)
      * @default "solid"

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

@@ -93,7 +93,7 @@ const AnimatedStrokeSegment = React__default.memo(AnimatedStrokeSegmentInner);
  * MultiSegmentDonutChart component for displaying multiple data values in a circular chart
  * Each segment represents a different data point with its own value and optional color
  */
-const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, ...restProps }) => {
+const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...restProps }) => {
     const [hoveredSegment, setHoveredSegment] = useState(null);
     const [hasAnimated, setHasAnimated] = useState(false);
     const shouldReduceMotion = useReducedMotion();
@@ -243,7 +243,7 @@ const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap =
             }) }));
     };
     if (!data || data.length === 0) {
-        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, children: jsx("div", { className: "text-sm text-[var(--color-text-secondary)]", children: "No data" }) }));
+        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, children: jsx("div", { className: "text-base text-[var(--color-text-secondary)]", children: "No data" }) }));
     }
     return (jsxs("div", { className: cn("flex gap-4 items-center", getLayoutClasses(), className), children: [jsxs(motion.div, { className: cn(theme.baseStyle), style: { width: containerSize, height: containerSize }, role: "img", "aria-label": `Donut chart with ${segments.length} segments`, ...restProps, children: [jsxs("svg", { viewBox: `0 0 ${svgSize} ${svgSize}`, width: "100%", height: "100%", className: "overflow-visible relative z-10", children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#000000", strokeWidth: strokeWidth > 2 ? strokeWidth - 2 : 1, opacity: 0.03 }), segments.map((segment, index) => roundedCaps ? (jsx(AnimatedStrokeSegment, { center: center, radius: radius, strokeWidth: strokeWidth, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: () => handleSegmentMouseEnter(index), onMouseLeave: handleSegmentMouseLeave, onClick: () => handleSegmentClick(index), clickable: !!onSegmentClick }, `segment-${index}`)) : (jsx(AnimatedSegment, { center: center, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, duration: segment.animationDuration, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: () => handleSegmentMouseEnter(index), onMouseLeave: handleSegmentMouseLeave, onClick: () => handleSegmentClick(index), clickable: !!onSegmentClick }, `segment-${index}`)))] }), centerContent && (jsx("div", { className: cn(theme.centerContent), children: centerContent }))] }), renderLegend()] }));
 };

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

@@ -8,7 +8,7 @@ const multiSegmentDonutChartTheme = {
     track: "text-[var(--color-border)]",
     // Legend styling
     legend: {
-        container: "flex flex-col gap-2 text-sm",
+        container: "flex flex-col gap-2 text-base",
         item: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity",
         label: "text-[var(--color-text-primary)] font-medium",
         value: "text-[var(--color-text-secondary)] ml-auto",

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.types.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 /**
  * Data segment for the multi-segment donut chart
  */
@@ -52,7 +51,7 @@ export interface MultiSegmentDonutChartThemeOverrides {
 /**
  * MultiSegmentDonutChart component props
  */
-export interface MultiSegmentDonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+export interface MultiSegmentDonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Array of data segments to display
      * Each segment should have value and percentage