@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -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(3px)',
+    },
+    visible: {
+        opacity: 1,
+        filter: 'blur(0px)',
+    },
+};
+const inlineTokenTransition = {
+    duration: 0.3,
+    ease: [0.25, 0.4, 0.55, 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

@@ -32,7 +32,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 = 6, 
 // Message component props
 role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
 // Error handling
@@ -65,7 +65,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

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

@@ -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 = 6, 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: "\u258D" }, "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/ThinkingIndicator/ThinkingIndicator.theme.js

@@ -7,12 +7,12 @@ const thinkingIndicatorTheme = {
         sm: {
             container: "py-1",
             dot: "size-1",
-            label: "text-xs",
+            label: "text-sm",
         },
         md: {
             container: "py-1",
             dot: "size-1.5",
-            label: "text-sm",
+            label: "text-base",
         },
     },
 };

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.js

@@ -17,6 +17,7 @@ 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';

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.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

@@ -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

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -72,7 +72,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
     const containerWidth = typeof width === "number" ? `${width}px` : width;
     // Return empty state if no valid data
     if (stages.length === 0) {
-        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available", ...props, children: jsx("div", { className: "flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm", children: "No data available" }) }));
+        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available", ...props, children: jsx("div", { className: "flex items-center justify-center h-full text-[var(--color-text-muted)] text-base", children: "No data available" }) }));
     }
     const viewBoxWidth = 150;
     const viewBoxHeight = 100;
@@ -356,9 +356,9 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: [jsx("div", { className: cn("text-sm font-semibold whitespace-nowrap", labelPosition === "inside"
+                            : {}), children: [jsx("div", { className: cn("text-base font-semibold whitespace-nowrap", labelPosition === "inside"
                                     ? "text-white drop-shadow-md"
-                                    : "text-[var(--color-text-primary)]"), children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: cn("text-xs whitespace-nowrap", labelPosition === "inside"
+                                    : "text-[var(--color-text-primary)]"), children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: cn("text-sm whitespace-nowrap", labelPosition === "inside"
                                     ? "text-white/90 drop-shadow-md"
                                     : "text-[var(--color-text-secondary)]"), children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
                 }), orientation === "vertical" &&
@@ -376,7 +376,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: [jsx("div", { className: "text-sm font-semibold text-white drop-shadow-md whitespace-nowrap text-center", children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: "text-xs text-white/90 drop-shadow-md whitespace-nowrap text-center", children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
+                            : {}), children: [jsx("div", { className: "text-base font-semibold text-white drop-shadow-md whitespace-nowrap text-center", children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: "text-sm text-white/90 drop-shadow-md whitespace-nowrap text-center", children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
                 }), orientation === "horizontal" &&
                 showDropoff &&
                 stages.map((stage, index) => {
@@ -394,7 +394,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs("span", { className: "text-xs text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
+                            : {}), children: jsxs("span", { className: "text-sm text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
                 }), orientation === "vertical" &&
                 showDropoff &&
                 stages.map((stage, index) => {
@@ -411,7 +411,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs("span", { className: "text-xs text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
+                            : {}), children: jsxs("span", { className: "text-sm text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
                 }), orientation === "horizontal" &&
                 showConversionRate &&
                 stages.map((stage, index) => {
@@ -455,7 +455,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                         initial: "hidden",
                         animate: "visible",
                     }
-                    : {}), children: [jsx("div", { className: "text-xs text-[var(--color-text-secondary)] mb-1", children: "Overall Conversion" }), jsxs("div", { className: "text-lg font-bold text-[var(--color-text-primary)]", children: [overallConversion, "%"] }), jsxs("div", { className: "text-xs text-[var(--color-text-muted)] mt-1", children: [formatDisplayValue(stages[0].value), " \u2192", " ", formatDisplayValue(stages[stages.length - 1].value)] })] })), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" })] }));
+                    : {}), children: [jsx("div", { className: "text-sm text-[var(--color-text-secondary)] mb-1", children: "Overall Conversion" }), jsxs("div", { className: "text-xl font-bold text-[var(--color-text-primary)]", children: [overallConversion, "%"] }), jsxs("div", { className: "text-sm text-[var(--color-text-muted)] mt-1", children: [formatDisplayValue(stages[0].value), " \u2192", " ", formatDisplayValue(stages[stages.length - 1].value)] })] })), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" })] }));
 };
 FunnelChart.displayName = "FunnelChart";
 

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

@@ -10,7 +10,7 @@ const heatmapTheme = {
     // 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 CSS variables for dark mode support
-    axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
+    axisLabelStyle: "text-sm text-[var(--color-text-secondary)] font-medium select-none",
     // Legend using correct CSS variables
     legendStyle: "w-full space-y-1.5 mt-3",
 };

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

@@ -88,7 +88,7 @@ className, onClick, onHover, onMouseMove, onLeave, children, }) => {
                 e.preventDefault();
                 onClick(data);
             }
-        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300", children: children })) }));
+        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-700 dark:text-gray-300", children: children })) }));
 };
 const HeatmapCell = React__default.memo(HeatmapCellInner);
 

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

@@ -11,7 +11,7 @@ minValue = 0, maxValue = 100, labels = {
     const gradientStyle = {
         background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
     };
-    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
+    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
 };
 
 export { HeatmapLegend };

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

@@ -13,11 +13,11 @@ const radarChartTheme = {
     // Axis spoke stroke color (gray-300 equivalent)
     axisColor: "#d1d5db",
     // Axis label classes (applied to <text> elements via className)
-    labelStyle: "text-xs fill-[#6b7280] select-none",
+    labelStyle: "text-sm fill-[#6b7280] select-none",
     // Legend container
     legendStyle: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2",
     // Individual legend item
-    legendItemStyle: "flex items-center gap-2 text-sm",
+    legendItemStyle: "flex items-center gap-2 text-base",
     // Colored dot in legend
     legendDotStyle: "w-2.5 h-2.5 rounded-full shrink-0",
     // Legend label text

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -201,7 +201,7 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
                                 }
                                 handleMouseInteraction();
                             }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
-                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
+                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
 };
 ScatterPlot.displayName = 'ScatterPlot';
 

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

@@ -4,7 +4,7 @@
 const scatterPlotTheme = {
     containerStyle: 'relative inline-flex flex-col items-center w-full',
     svgStyle: 'overflow-visible',
-    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
+    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-base',
     // Grid styles
     gridLineStyle: 'stroke-[var(--color-border)]',
     // Axis styles
@@ -17,7 +17,7 @@ const scatterPlotTheme = {
     legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
     legendItemStyle: 'flex items-center gap-2',
     legendDotStyle: 'w-3 h-3 rounded-full',
-    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
+    legendLabelStyle: 'text-base text-[var(--color-text-secondary)]',
     // Default category colors using CSS variables
     colors: [
         'var(--color-primary)',