flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/charts/shared/ChartContainer/ChartContainer.js

@@ -0,0 +1,178 @@
+import React__default, { createContext, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { useTooltipPosition } from '../../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../../hooks/useChartAccessibility.js';
+import { ChartErrorBoundary } from '../ChartErrorBoundary/ChartErrorBoundary.js';
+import { XAxis } from '../ChartAxis/XAxis.js';
+import { YAxis } from '../ChartAxis/YAxis.js';
+import { HorizontalGrid } from '../ChartGrid/HorizontalGrid.js';
+import { ChartTooltip } from '../ChartTooltip/ChartTooltip.js';
+
+const ChartContext = createContext(null);
+/**
+ * Hook to access chart context from renderers
+ */
+const useChartContext = () => {
+    const context = useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChartContext must be used within a ChartContainer');
+    }
+    return context;
+};
+/**
+ * Default Y-axis tick formatter
+ */
+const defaultYAxisTickFormatter = (value) => {
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(0)}k`;
+    return value.toString();
+};
+/**
+ * ChartContainer Component
+ *
+ * Manages SVG container, axes, grid, tooltip, dimensions, and provides
+ * context to child rendering components (BarRenderer, LineRenderer, etc.)
+ */
+const ChartContainer = ({ children, data, config, scales, dimensions: propDimensions, margins: propMargins, showGrid = true, showXAxis = true, showYAxis = true, gridLineCount = 5, yAxisTickFormatter = defaultYAxisTickFormatter, categoryWidth, categoryGap = 8, className, title, description, enableKeyboardNavigation = true, chartType = 'bar', ...props }) => {
+    var _a;
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState(propDimensions || { width: 600, height: 400 });
+    const [hoveredCategory, setHoveredCategory] = useState(null);
+    const [hoveredPoint, setHoveredPoint] = useState(null);
+    // Detect if device is mobile/touch
+    const isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    // Use the tooltip positioning hook
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    // Use accessibility hook
+    const { chartAccessibilityProps, descriptionProps, focusedElementIndex, isKeyboardMode, handleMouseInteraction, } = useChartAccessibility({
+        chartType,
+        data,
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
+    // Measure container dimensions
+    useEffect(() => {
+        if (propDimensions) {
+            setDimensions(propDimensions);
+            return;
+        }
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: width || 600,
+                    height: height || 400,
+                });
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [propDimensions]);
+    // Calculate margins (can be overridden by prop)
+    const margin = propMargins || {
+        top: 15,
+        right: showYAxis ? 20 : 0,
+        bottom: showXAxis ? 20 : 0,
+        left: showYAxis ? 60 : 0,
+    };
+    // Calculate inner dimensions
+    const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    const dataLength = (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0;
+    // Derive category width and point positions using the measured width
+    const autoCategoryWidth = useMemo(() => {
+        if (dataLength === 0)
+            return 0;
+        if (chartType === "line") {
+            if (dataLength === 1) {
+                return innerWidth;
+            }
+            return innerWidth / Math.max(1, dataLength - 1);
+        }
+        const totalCategoryGap = Math.max(0, (dataLength - 1) * categoryGap);
+        const availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+        return availableWidth / dataLength;
+    }, [chartType, dataLength, innerWidth, categoryGap]);
+    const resolvedCategoryWidth = typeof categoryWidth === "number"
+        ? categoryWidth
+        : autoCategoryWidth;
+    const adjustedPointPosition = useCallback((index) => {
+        if (dataLength === 0)
+            return 0;
+        if (chartType === "line") {
+            if (dataLength === 1) {
+                return innerWidth / 2;
+            }
+            return (index / Math.max(1, dataLength - 1)) * innerWidth;
+        }
+        return index * (resolvedCategoryWidth + categoryGap);
+    }, [chartType, dataLength, innerWidth, resolvedCategoryWidth, categoryGap]);
+    const adjustedScales = useMemo(() => {
+        const totalCategoryGap = Math.max(0, (dataLength - 1) * categoryGap);
+        const computedTotalWidth = chartType === "line"
+            ? innerWidth
+            : resolvedCategoryWidth * dataLength + totalCategoryGap;
+        return {
+            ...scales,
+            x: {
+                ...scales.x,
+                categoryWidth: resolvedCategoryWidth,
+                totalWidth: computedTotalWidth,
+                pointPosition: adjustedPointPosition,
+            },
+        };
+    }, [
+        scales,
+        chartType,
+        innerWidth,
+        dataLength,
+        resolvedCategoryWidth,
+        categoryGap,
+        adjustedPointPosition,
+    ]);
+    // Create context value
+    const contextValue = {
+        data,
+        config,
+        scales: adjustedScales,
+        dimensions,
+        margin,
+        innerWidth,
+        innerHeight,
+        hoveredCategory,
+        setHoveredCategory,
+        hoveredPoint,
+        setHoveredPoint,
+        handleMouseEnter,
+        handleMouseMove,
+        handleMouseLeave,
+        focusedElementIndex,
+        isKeyboardMode,
+    };
+    return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development" },
+        React__default.createElement(ChartContext.Provider, { value: contextValue },
+            React__default.createElement("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
+                descriptionProps && React__default.createElement("div", { ...descriptionProps }),
+                React__default.createElement("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}` },
+                    React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: gridLineCount }),
+                    React__default.createElement(YAxis, { show: showYAxis, min: adjustedScales.y.min, max: adjustedScales.y.max, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: yAxisTickFormatter }),
+                    children,
+                    React__default.createElement(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: resolvedCategoryWidth, categoryGap: categoryGap })),
+                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 } })))));
+};
+
+export { ChartContainer, useChartContext };

package/dist/components/charts/shared/ChartContainer/ChartContainer.types.d.ts

@@ -0,0 +1,91 @@
+import { ReactNode } from 'react';
+import type { ChartDataPoint, ChartConfig } from '../../types/chart.types';
+import type { ChartScales } from '../../hooks/useChartScales';
+export interface ChartDimensions {
+    width: number;
+    height: number;
+}
+export interface ChartMargins {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface ChartContainerProps {
+    /**
+     * Child components to render within the chart (BarRenderer, LineRenderer, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart configuration
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales for X and Y axes
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions?: ChartDimensions;
+    /**
+     * Chart margins
+     */
+    margins?: ChartMargins;
+    /**
+     * Whether to show grid lines
+     */
+    showGrid?: boolean;
+    /**
+     * Whether to show X axis
+     */
+    showXAxis?: boolean;
+    /**
+     * Whether to show Y axis
+     */
+    showYAxis?: boolean;
+    /**
+     * Number of grid lines
+     */
+    gridLineCount?: number;
+    /**
+     * Custom tick formatter for Y axis
+     */
+    yAxisTickFormatter?: (value: number) => string;
+    /**
+     * Category width for X axis (bar charts)
+     */
+    categoryWidth?: number;
+    /**
+     * Category gap for X axis (bar charts)
+     */
+    categoryGap?: number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Chart title for accessibility
+     */
+    title?: string;
+    /**
+     * Chart description for accessibility
+     */
+    description?: string;
+    /**
+     * Whether to enable keyboard navigation
+     */
+    enableKeyboardNavigation?: boolean;
+    /**
+     * Chart type (affects margin calculations and axis rendering)
+     */
+    chartType?: 'bar' | 'line' | 'combo';
+    /**
+     * Additional props to pass to container div
+     */
+    [key: string]: any;
+}

package/dist/components/charts/shared/ChartContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartContainer, useChartContext } from './ChartContainer';
+export type { ChartContainerProps, ChartDimensions, ChartMargins, } from './ChartContainer.types';
+export type { ChartContextValue } from './ChartContainer';

package/dist/components/charts/shared/ChartCrosshair/ChartCrosshair.js

@@ -1,17 +1,15 @@
 import React__default from 'react';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../../utils/cn.js';
 import { chartCrosshairTheme } from './ChartCrosshair.theme.js';
-import { AnimatePresence } from '../../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 /**
  * ChartCrosshair component for rendering crosshair lines in charts
  * Supports both vertical and horizontal lines with smooth Framer Motion transitions
  */
-var ChartCrosshair = function (_a) {
-    var show = _a.show, x = _a.x, y = _a.y, margin = _a.margin, innerWidth = _a.innerWidth, innerHeight = _a.innerHeight, _b = _a.showHorizontal, showHorizontal = _b === void 0 ? false : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? "#6b7280" : _c, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, _e = _a.strokeDasharray, strokeDasharray = _e === void 0 ? "4 4" : _e, _f = _a.opacity, opacity = _f === void 0 ? 0.4 : _f, className = _a.className;
-    var theme = chartCrosshairTheme;
-    var baseClasses = cn(theme.baseStyle, className);
+const ChartCrosshair = ({ show, x, y, margin, innerWidth, innerHeight, showHorizontal = false, strokeColor = "#6b7280", strokeWidth = 1, strokeDasharray = "4 4", opacity = 0.4, className, }) => {
+    const theme = chartCrosshairTheme;
+    const baseClasses = cn(theme.baseStyle, className);
     return (React__default.createElement(AnimatePresence, null, show && (React__default.createElement(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
             duration: 0.3,
             ease: "easeInOut"

package/dist/components/charts/shared/ChartCrosshair/ChartCrosshair.theme.js

@@ -2,7 +2,7 @@
  * Default theme for ChartCrosshair component
  * Provides consistent styling for chart crosshair lines with Framer Motion animations
  */
-var chartCrosshairTheme = {
+const chartCrosshairTheme = {
     baseStyle: "pointer-events-none",
     verticalLine: "stroke-gray-500",
     horizontalLine: "stroke-gray-500",

package/dist/components/charts/shared/ChartErrorBoundary/ChartErrorBoundary.js

@@ -1,4 +1,3 @@
-import { __extends } from '../../../../node_modules/tslib/tslib.es6.js';
 import React__default, { Component } from 'react';
 import { cn } from '../../../../utils/cn.js';
 
@@ -6,23 +5,21 @@ import { cn } from '../../../../utils/cn.js';
  * Error boundary specifically designed for chart components
  * Provides graceful error handling and fallback UI
  */
-var ChartErrorBoundary = /** @class */ (function (_super) {
-    __extends(ChartErrorBoundary, _super);
-    function ChartErrorBoundary(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = { hasError: false };
-        return _this;
+class ChartErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
     }
-    ChartErrorBoundary.getDerivedStateFromError = function (error) {
+    static getDerivedStateFromError(error) {
         return {
             hasError: true,
-            error: error,
+            error,
         };
-    };
-    ChartErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+    }
+    componentDidCatch(error, errorInfo) {
         this.setState({
-            error: error,
-            errorInfo: errorInfo,
+            error,
+            errorInfo,
         });
         // Call optional error handler
         if (this.props.onError) {
@@ -32,9 +29,8 @@ var ChartErrorBoundary = /** @class */ (function (_super) {
         if (process.env.NODE_ENV === 'development') {
             console.error('Chart Error Boundary caught an error:', error, errorInfo);
         }
-    };
-    ChartErrorBoundary.prototype.render = function () {
-        var _this = this;
+    }
+    render() {
         var _a;
         if (this.state.hasError) {
             // Use custom fallback if provided
@@ -56,11 +52,10 @@ var ChartErrorBoundary = /** @class */ (function (_super) {
                         ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (React__default.createElement(React__default.Fragment, null,
                             React__default.createElement("div", { className: "font-semibold mb-1" }, "Component Stack:"),
                             React__default.createElement("pre", { className: "whitespace-pre-wrap text-xs" }, this.state.errorInfo.componentStack)))))),
-                React__default.createElement("button", { onClick: function () { return _this.setState({ hasError: false, error: undefined, errorInfo: undefined }); }, className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors" }, "Try Again")));
+                React__default.createElement("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors" }, "Try Again")));
         }
         return this.props.children;
-    };
-    return ChartErrorBoundary;
-}(Component));
+    }
+}
 
 export { ChartErrorBoundary };

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.js

@@ -5,18 +5,17 @@ import { cn } from '../../../../utils/cn.js';
  * HorizontalGrid component for charts
  * Renders horizontal grid lines at specified intervals
  */
-var HorizontalGrid = function (_a) {
-    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, _b = _a.lineCount, lineCount = _b === void 0 ? 5 : _b, _c = _a.show, show = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'currentColor' : _d, className = _a.className, tickPositions = _a.tickPositions;
+const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, color = 'currentColor', className, tickPositions, }) => {
     if (!show)
         return null;
     // Generate grid line positions
-    var positions = tickPositions ||
-        Array.from({ length: lineCount }, function (_, i) {
+    const positions = tickPositions ||
+        Array.from({ length: lineCount }, (_, i) => {
             if (lineCount <= 1)
                 return y;
             return y + (i * height) / (lineCount - 1);
         });
-    return (React__default.createElement("g", { className: cn('chart-horizontal-grid', className) }, positions.map(function (lineY, index) { return (React__default.createElement("line", { key: index, x1: x, y1: lineY, x2: x + width, y2: lineY, stroke: color, className: "opacity-10", strokeWidth: 1 })); })));
+    return (React__default.createElement("g", { className: cn('chart-horizontal-grid', className) }, positions.map((lineY, index) => (React__default.createElement("line", { key: index, x1: x, y1: lineY, x2: x + width, y2: lineY, stroke: color, className: "opacity-10", strokeWidth: 1 })))));
 };
 
 export { HorizontalGrid };

package/dist/components/charts/shared/ChartLegend/ChartLegend.js

@@ -1,30 +1,28 @@
-import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 
 /**
  * Basic ChartLegend component - minimal implementation
  * TODO: Enhance with full legend functionality when needed
  */
-var ChartLegend = function (_a) {
-    var content = _a.content, className = _a.className, wrapperStyle = _a.wrapperStyle, _b = _a.layout, layout = _b === void 0 ? 'horizontal' : _b, _c = _a.align, align = _c === void 0 ? 'center' : _c, _d = _a.verticalAlign, verticalAlign = _d === void 0 ? 'bottom' : _d, props = __rest(_a, ["content", "className", "wrapperStyle", "layout", "align", "verticalAlign"]);
+const ChartLegend = ({ content, className, wrapperStyle, layout = 'horizontal', align = 'center', verticalAlign = 'bottom', ...props }) => {
     if (!content) {
         return null;
     }
-    var alignClasses = {
+    const alignClasses = {
         left: 'justify-start',
         center: 'justify-center',
         right: 'justify-end',
     };
-    var verticalAlignClasses = {
+    const verticalAlignClasses = {
         top: 'items-start',
         middle: 'items-center',
         bottom: 'items-end',
     };
-    var layoutClasses = {
+    const layoutClasses = {
         horizontal: 'flex-row',
         vertical: 'flex-col',
     };
-    return (React__default.createElement("div", __assign({ className: "flex ".concat(layoutClasses[layout], " ").concat(alignClasses[align], " ").concat(verticalAlignClasses[verticalAlign], " ").concat(className || ''), style: wrapperStyle }, props), content));
+    return (React__default.createElement("div", { className: `flex ${layoutClasses[layout]} ${alignClasses[align]} ${verticalAlignClasses[verticalAlign]} ${className || ''}`, style: wrapperStyle, ...props }, content));
 };
 
 export { ChartLegend };

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -1,18 +1,16 @@
-import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 
 /**
  * Basic ChartLegendContent component - minimal implementation
  * TODO: Enhance with full legend content functionality when needed
  */
-var ChartLegendContent = function (_a) {
-    var _b = _a.payload, payload = _b === void 0 ? [] : _b, _c = _a.nameKey, nameKey = _c === void 0 ? 'name' : _c, className = _a.className, props = __rest(_a, ["payload", "nameKey", "className"]);
+const ChartLegendContent = ({ payload = [], nameKey = 'name', className, ...props }) => {
     if (!payload || payload.length === 0) {
         return null;
     }
-    return (React__default.createElement("div", __assign({ className: "flex flex-wrap gap-4 ".concat(className || '') }, props), payload.map(function (entry, index) {
-        var name = entry[nameKey] || entry.dataKey || "Series ".concat(index + 1);
-        var color = entry.color || '#8884d8';
+    return (React__default.createElement("div", { className: `flex flex-wrap gap-4 ${className || ''}`, ...props }, payload.map((entry, index) => {
+        const name = entry[nameKey] || entry.dataKey || `Series ${index + 1}`;
+        const color = entry.color || '#8884d8';
         return (React__default.createElement("div", { key: index, className: "flex items-center gap-2" },
             React__default.createElement("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }),
             React__default.createElement("span", { className: "text-sm text-gray-600" }, name)));

package/dist/components/charts/shared/ChartMarker/ChartMarker.js

@@ -6,17 +6,14 @@ import { chartMarkerTheme } from './ChartMarker.theme.js';
  * ChartMarker component for rendering circular data point markers in charts
  * Supports hover scaling with React state for reliable SVG interactions
  */
-var ChartMarker = function (_a) {
-    var cx = _a.cx, cy = _a.cy, radius = _a.radius, colorClass = _a.colorClass, className = _a.className, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 2 : _b, fillColor = _a.fillColor, strokeColor = _a.strokeColor;
-    var theme = chartMarkerTheme;
-    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    // Extract stroke color from colorClass if not provided
-    var extractedStrokeColor = strokeColor || colorClass;
-    var baseClasses = cn(theme.baseStyle, extractedStrokeColor, className);
+const ChartMarker = ({ cx, cy, radius, colorClass, className, strokeWidth = 2, fillColor, strokeColor, }) => {
+    const theme = chartMarkerTheme;
+    const [isHovered, setIsHovered] = useState(false);
+    const baseClasses = cn(theme.baseStyle, colorClass, className);
     // Calculate hover radius
-    var currentRadius = isHovered ? radius * 1.1 : radius;
+    const currentRadius = isHovered ? radius * 1.1 : radius;
     return (React__default.createElement("g", { className: "chart-marker" },
-        React__default.createElement("circle", { cx: cx, cy: cy, r: currentRadius, className: baseClasses, fill: fillColor || "white", strokeWidth: strokeWidth, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, style: {
+        React__default.createElement("circle", { cx: cx, cy: cy, r: currentRadius, className: baseClasses, fill: fillColor || "white", stroke: strokeColor, strokeWidth: strokeWidth, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
                 transition: 'linear 0.2s ease-out',
                 cursor: 'pointer'
             } })));

package/dist/components/charts/shared/ChartMarker/ChartMarker.theme.js

@@ -2,7 +2,7 @@
  * Default theme for ChartMarker component
  * Provides consistent styling for chart data point markers
  */
-var chartMarkerTheme = {
+const chartMarkerTheme = {
     baseStyle: "fill-white stroke-2",
 };
 

package/dist/components/charts/shared/ChartMarker/ChartMarker.types.d.ts

@@ -6,7 +6,7 @@ export interface ChartMarkerProps {
     /** Radius of the marker */
     radius: number;
     /** Color class for the marker stroke */
-    colorClass: string;
+    colorClass?: string;
     /** Additional CSS classes */
     className?: string;
     /** Custom stroke width */

package/dist/components/charts/shared/ChartText/ChartText.js

@@ -1,4 +1,3 @@
-import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../../utils/cn.js';
 import { chartTextTheme } from './ChartText.theme.js';
@@ -7,27 +6,26 @@ import { chartTextTheme } from './ChartText.theme.js';
  * ChartText component for consistent typography in charts
  * Uses fixed Tailwind styling for consistency
  */
-var ChartText = function (_a) {
-    var children = _a.children, _b = _a.textAnchor, textAnchor = _b === void 0 ? "start" : _b, _c = _a.dominantBaseline, dominantBaseline = _c === void 0 ? "auto" : _c, maxWidth = _a.maxWidth, _d = _a.truncate, truncate = _d === void 0 ? false : _d, _e = _a.rotation, rotation = _e === void 0 ? 0 : _e, className = _a.className, props = __rest(_a, ["children", "textAnchor", "dominantBaseline", "maxWidth", "truncate", "rotation", "className"]);
-    var theme = chartTextTheme;
+const ChartText = ({ children, textAnchor = "start", dominantBaseline = "auto", maxWidth, truncate = false, rotation = 0, className, ...props }) => {
+    const theme = chartTextTheme;
     // Truncate text if needed
-    var truncateText = function (text, maxWidth) {
+    const truncateText = (text, maxWidth) => {
         // Rough estimate: 6px per character for text-sm
         if (!maxWidth || text.length <= maxWidth / 6) {
             return text;
         }
-        var maxChars = Math.floor(maxWidth / 6) - 3;
+        const maxChars = Math.floor(maxWidth / 6) - 3;
         return text.substring(0, maxChars) + "...";
     };
     // Process children to handle truncation
-    var processedChildren = React__default.useMemo(function () {
+    const processedChildren = React__default.useMemo(() => {
         if (!truncate || !maxWidth || typeof children !== "string") {
             return children;
         }
         return truncateText(children, maxWidth);
     }, [children, truncate, maxWidth]);
-    var x = props.x, y = props.y;
-    return (React__default.createElement("text", __assign({ textAnchor: textAnchor, dominantBaseline: dominantBaseline, className: cn(theme.baseStyle, className), transform: rotation !== 0 && x !== undefined && y !== undefined ? "rotate(".concat(rotation, ", ").concat(x, ", ").concat(y, ")") : undefined }, props), processedChildren));
+    const { x, y } = props;
+    return (React__default.createElement("text", { textAnchor: textAnchor, dominantBaseline: dominantBaseline, className: cn(theme.baseStyle, className), transform: rotation !== 0 && x !== undefined && y !== undefined ? `rotate(${rotation}, ${x}, ${y})` : undefined, ...props }, processedChildren));
 };
 
 export { ChartText };

package/dist/components/charts/shared/ChartText/ChartText.theme.js

@@ -2,8 +2,8 @@
  * Default theme for ChartText component
  * Uses fixed Tailwind styling for consistency across charts
  */
-var chartTextTheme = {
-    baseStyle: "transition-all duration-200 text-xs  text-text-secondary/80 fill-text-secondary/80 font-medium select-none",
+const chartTextTheme = {
+    baseStyle: "transition-all duration-200 text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
 };
 
 export { chartTextTheme };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.d.ts

@@ -1,13 +1,13 @@
 import React from "react";
 import { ChartTooltipProps, MultiSeriesChartTooltipProps } from "./ChartTooltip.types";
-export declare function ChartTooltip({ content, className, active, position, children, chartType, containerClassName, categoryClassName, seriesContainerClassName, seriesRowClassName, dotClassName, labelClassName, valueClassName, tooltipRef, ...props }: (ChartTooltipProps | MultiSeriesChartTooltipProps) & {
+export declare function ChartTooltip({ content, className, active, position, children, chartType, containerClassName, categoryClassName, seriesContainerClassName, seriesRowClassName, dotClassName, labelClassName, valueClassName, tooltipRef, theme: themeOverrides, cursor, wrapperStyle, labelStyle, contentStyle, itemStyle, payload, label, onAnimationStart, onAnimationEnd, onDragStart, onDragEnd, onDrag, ...props }: (ChartTooltipProps | MultiSeriesChartTooltipProps) & {
     active?: boolean;
     position?: {
         x: number;
         y: number;
     };
     children?: React.ReactNode;
-    chartType?: 'line' | 'bar' | 'area';
+    chartType?: 'line' | 'bar' | 'area' | 'scatter';
     containerClassName?: string;
     categoryClassName?: string;
     seriesContainerClassName?: string;