flikkui 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/components/charts/hooks/useChartValidation.js

@@ -0,0 +1,59 @@
+import { useMemo, useCallback } from 'react';
+import { validateChart, sanitizeChartData, calculateSafeScaleRange, SafeMath } from '../utils/chart-validation.js';
+
+/**
+ * Hook for comprehensive chart validation and error handling
+ */
+function useChartValidation(data, config, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.autoSanitize, autoSanitize = _a === void 0 ? true : _a, _b = options.logWarnings, logWarnings = _b === void 0 ? process.env.NODE_ENV === 'development' : _b, onValidationError = options.onValidationError, onValidationWarning = options.onValidationWarning;
+    // Memoized validation result
+    var validation = useMemo(function () {
+        var result = validateChart(data, config);
+        // Handle errors
+        if (result.errors.length > 0 && onValidationError) {
+            onValidationError(result.errors);
+        }
+        // Handle warnings
+        if (result.warnings.length > 0) {
+            if (logWarnings) {
+                console.warn('Chart validation warnings:', result.warnings);
+            }
+            if (onValidationWarning) {
+                onValidationWarning(result.warnings);
+            }
+        }
+        return result;
+    }, [data, config, onValidationError, onValidationWarning, logWarnings]);
+    // Sanitized data
+    var sanitizedData = useMemo(function () {
+        if (!autoSanitize || !Array.isArray(data)) {
+            return Array.isArray(data) ? data : [];
+        }
+        return sanitizeChartData(data);
+    }, [data, autoSanitize]);
+    // Safe scale calculation
+    var safeScale = useMemo(function () { return ({
+        calculateRange: function (options) {
+            var validData = autoSanitize ? sanitizedData : (Array.isArray(data) ? data : []);
+            var validConfig = (config && typeof config === 'object') ? config : {};
+            return calculateSafeScaleRange(validData, validConfig, options);
+        }
+    }); }, [sanitizedData, data, config, autoSanitize]);
+    // Manual revalidation trigger
+    var revalidate = useCallback(function () {
+        // This will trigger re-computation of the validation memoized value
+        // by updating a dependency (though in this case, we rely on the data/config changes)
+    }, []);
+    return {
+        validation: validation,
+        sanitizedData: sanitizedData,
+        isValid: validation.isValid,
+        hasWarnings: validation.warnings.length > 0,
+        safeScale: safeScale,
+        safeMath: SafeMath,
+        revalidate: revalidate,
+    };
+}
+
+export { useChartValidation };

package/dist/components/charts/hooks/useTooltipPosition.js

@@ -0,0 +1,292 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+// Optimized animation frame throttle for smooth movement
+function rafThrottle(func) {
+    var rafId = null;
+    var latestArgs = null;
+    var throttledFn = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        latestArgs = args;
+        if (rafId === null) {
+            rafId = requestAnimationFrame(function () {
+                if (latestArgs) {
+                    func.apply(void 0, latestArgs);
+                }
+                rafId = null;
+                latestArgs = null;
+            });
+        }
+    };
+    // Add cleanup method
+    throttledFn.cancel = function () {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+            latestArgs = null;
+        }
+    };
+    return throttledFn;
+}
+function useTooltipPosition(_a) {
+    var containerRef = _a.containerRef, _b = _a.padding, padding = _b === void 0 ? 10 : _b, _c = _a.offset, offset = _c === void 0 ? 15 : _c, _d = _a.isMobile, isMobile = _d === void 0 ? false : _d, _e = _a.animation, animation = _e === void 0 ? {
+        duration: 0.08,
+        ease: "easeOut",
+        enabled: true,
+    } : _e;
+    var _f = useState(null), tooltipData = _f[0], setTooltipData = _f[1];
+    var tooltipRef = useRef(null);
+    var isUnmountedRef = useRef(false);
+    // Track component mount status to prevent state updates after unmount
+    useEffect(function () {
+        isUnmountedRef.current = false;
+        return function () {
+            isUnmountedRef.current = true;
+        };
+    }, []);
+    /**
+     * Safe state setter that checks if component is still mounted
+     * Supports both direct values and function updates like React.setState
+     */
+    var safeSetTooltipData = useCallback(function (data) {
+        if (!isUnmountedRef.current) {
+            setTooltipData(function (prevData) {
+                if (typeof data === 'function') {
+                    return data(prevData);
+                }
+                return data;
+            });
+        }
+    }, []);
+    /**
+     * Calculate bounded position within container with simplified logic
+     */
+    var calculateBoundedPosition = useCallback(function (x, y, tooltipWidth, tooltipHeight) {
+        if (tooltipWidth === void 0) { tooltipWidth = 0; }
+        if (tooltipHeight === void 0) { tooltipHeight = 0; }
+        if (!containerRef.current)
+            return { x: x, y: y };
+        try {
+            var containerRect = containerRef.current.getBoundingClientRect();
+            var viewportWidth = window.innerWidth;
+            var viewportHeight = window.innerHeight;
+            var boundedX = x;
+            var boundedY = y;
+            // Simple X positioning: try right, then left, then clamp
+            if (boundedX + tooltipWidth + padding > Math.min(containerRect.right, viewportWidth)) {
+                // Try positioning to the left of cursor
+                boundedX = x - tooltipWidth - offset;
+            }
+            // Ensure it doesn't go off the left edge
+            boundedX = Math.max(Math.max(containerRect.left, 0) + padding, boundedX);
+            // Final clamp to viewport
+            boundedX = Math.min(boundedX, viewportWidth - tooltipWidth - padding);
+            // Simple Y positioning: try below, then above, then clamp
+            if (boundedY + tooltipHeight + padding > Math.min(containerRect.bottom, viewportHeight)) {
+                // Try positioning above cursor
+                boundedY = y - tooltipHeight - offset;
+            }
+            // Ensure it doesn't go off the top edge
+            boundedY = Math.max(Math.max(containerRect.top, 0) + padding, boundedY);
+            // Final clamp to viewport
+            boundedY = Math.min(boundedY, viewportHeight - tooltipHeight - padding);
+            return { x: boundedX, y: boundedY };
+        }
+        catch (error) {
+            console.warn('Error calculating tooltip position:', error);
+            return { x: x, y: y };
+        }
+    }, [containerRef, padding, offset]);
+    /**
+     * Get tooltip position for mouse events with stable positioning
+     */
+    var getMouseTooltipPosition = useCallback(function (event) {
+        var _a, _b;
+        // Use page coordinates to avoid scroll issues
+        var x = event.clientX;
+        var y = event.clientY - offset;
+        // Get current tooltip dimensions or use estimated defaults
+        var tooltipWidth = ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200; // reasonable default
+        var tooltipHeight = ((_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 60; // reasonable default
+        return calculateBoundedPosition(x, y, tooltipWidth, tooltipHeight);
+    }, [calculateBoundedPosition, offset]);
+    /**
+     * Get tooltip position for SVG elements (mobile/touch)
+     */
+    var getSVGTooltipPosition = useCallback(function (event, svgX, svgY, actualDimensions) {
+        var _a, _b;
+        try {
+            var svgElement = event.currentTarget.closest('svg');
+            var svgRect = svgElement === null || svgElement === void 0 ? void 0 : svgElement.getBoundingClientRect();
+            if (!svgRect || !actualDimensions.width || !actualDimensions.height) {
+                console.warn('SVG positioning fallback: missing SVG rect or dimensions');
+                return getMouseTooltipPosition(event);
+            }
+            // Calculate scale factors using actual dimensions
+            var scaleX = svgRect.width / actualDimensions.width;
+            var scaleY = svgRect.height / actualDimensions.height;
+            // Convert SVG coordinates to screen coordinates
+            var screenX_1 = svgRect.left + svgX * scaleX;
+            var screenY_1 = svgRect.top + svgY * scaleY;
+            var x = screenX_1;
+            var y = screenY_1 - offset;
+            var tooltipWidth = ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200;
+            var tooltipHeight = ((_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 60;
+            return calculateBoundedPosition(x, y, tooltipWidth, tooltipHeight);
+        }
+        catch (error) {
+            console.warn('Error in SVG tooltip positioning:', error);
+            return getMouseTooltipPosition(event);
+        }
+    }, [calculateBoundedPosition, getMouseTooltipPosition, offset]);
+    /**
+     * Show tooltip with content and position
+     */
+    var showTooltip = useCallback(function (content, position) {
+        safeSetTooltipData({
+            x: position.x,
+            y: position.y,
+            content: content,
+        });
+    }, [safeSetTooltipData]);
+    /**
+     * Update tooltip position (for mouse move events)
+     */
+    var updateTooltipPosition = useCallback(function (position) {
+        safeSetTooltipData(function (prev) {
+            return prev ? __assign(__assign({}, prev), { x: position.x, y: position.y }) : null;
+        });
+    }, [safeSetTooltipData]);
+    // Create RAF-throttled version of updateTooltipPosition for smooth movement
+    var rafThrottledUpdateRef = useRef(null);
+    var rafThrottledUpdate = useCallback(function (position) {
+        if (!isUnmountedRef.current) {
+            updateTooltipPosition(position);
+        }
+    }, [updateTooltipPosition]);
+    // Initialize RAF throttling
+    useEffect(function () {
+        rafThrottledUpdateRef.current = rafThrottle(rafThrottledUpdate);
+        return function () {
+            var _a;
+            if ((_a = rafThrottledUpdateRef.current) === null || _a === void 0 ? void 0 : _a.cancel) {
+                rafThrottledUpdateRef.current.cancel();
+            }
+        };
+    }, [rafThrottledUpdate]);
+    /**
+     * Hide tooltip and cancel any pending updates
+     */
+    var hideTooltip = useCallback(function () {
+        var _a;
+        // Cancel any pending RAF updates
+        if ((_a = rafThrottledUpdateRef.current) === null || _a === void 0 ? void 0 : _a.cancel) {
+            rafThrottledUpdateRef.current.cancel();
+        }
+        safeSetTooltipData(null);
+    }, [safeSetTooltipData]);
+    /**
+     * Handle mouse enter for chart elements
+     */
+    var handleMouseEnter = useCallback(function (event, content, svgCoordinates) {
+        try {
+            var position = void 0;
+            if (isMobile && svgCoordinates) {
+                position = getSVGTooltipPosition(event, svgCoordinates.x, svgCoordinates.y, svgCoordinates.dimensions);
+            }
+            else {
+                position = getMouseTooltipPosition(event);
+            }
+            showTooltip(content, position);
+        }
+        catch (error) {
+            console.warn('Error handling mouse enter:', error);
+        }
+    }, [isMobile, getSVGTooltipPosition, getMouseTooltipPosition, showTooltip]);
+    /**
+     * Handle mouse move with optimized RAF throttling for smooth movement
+     */
+    var handleMouseMove = useCallback(function (event, svgCoordinates) {
+        if (!tooltipData)
+            return;
+        try {
+            // Always use mouse position for consistent movement
+            var position = getMouseTooltipPosition(event);
+            if (rafThrottledUpdateRef.current) {
+                rafThrottledUpdateRef.current(position);
+            }
+            else {
+                // Fallback to direct update
+                updateTooltipPosition(position);
+            }
+        }
+        catch (error) {
+            console.warn('Error handling mouse move:', error);
+        }
+    }, [tooltipData, getMouseTooltipPosition, updateTooltipPosition]);
+    /**
+     * Handle mouse leave for chart elements
+     */
+    var handleMouseLeave = useCallback(function () {
+        hideTooltip();
+    }, [hideTooltip]);
+    // Update tooltip position when container resizes (simplified)
+    useEffect(function () {
+        if (!tooltipData || !containerRef.current)
+            return;
+        var handleResize = function () {
+            if (tooltipData && tooltipRef.current && !isUnmountedRef.current) {
+                try {
+                    var tooltipWidth = tooltipRef.current.offsetWidth;
+                    var tooltipHeight = tooltipRef.current.offsetHeight;
+                    var newPosition = calculateBoundedPosition(tooltipData.x, tooltipData.y, tooltipWidth, tooltipHeight);
+                    // Use direct update for resize, not RAF throttled
+                    updateTooltipPosition(newPosition);
+                }
+                catch (error) {
+                    console.warn('Error updating tooltip position on resize:', error);
+                }
+            }
+        };
+        // Use window resize instead of ResizeObserver for better performance
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [tooltipData, containerRef, calculateBoundedPosition, updateTooltipPosition]);
+    return {
+        tooltipData: tooltipData,
+        tooltipRef: tooltipRef,
+        showTooltip: showTooltip,
+        hideTooltip: hideTooltip,
+        updateTooltipPosition: updateTooltipPosition,
+        handleMouseEnter: handleMouseEnter,
+        handleMouseMove: handleMouseMove,
+        handleMouseLeave: handleMouseLeave,
+        getMouseTooltipPosition: getMouseTooltipPosition,
+        getSVGTooltipPosition: getSVGTooltipPosition,
+        // Animation configuration for the consuming component
+        animationConfig: {
+            animate: tooltipData ? { x: tooltipData.x, y: tooltipData.y, opacity: 1 } : { opacity: 0 },
+            transition: animation.enabled ? {
+                duration: animation.duration,
+                ease: animation.ease,
+                // Reduce layout thrashing by using transform instead of changing x/y directly
+                type: "tween",
+            } : { duration: 0 },
+            initial: { opacity: 0 },
+            style: tooltipData ? {
+                position: 'fixed',
+                left: 0,
+                top: 0,
+                transform: "translate(".concat(tooltipData.x, "px, ").concat(tooltipData.y, "px)"),
+                willChange: 'transform, opacity', // Optimize for animations
+            } : {},
+        },
+    };
+}
+
+export { useTooltipPosition };

package/dist/components/charts/shared/ChartAxis/XAxis.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+
+/**
+ * XAxis component for charts
+ * Renders horizontal axis with labels and optional tick marks
+ */
+var XAxis = function (_a) {
+    var data = _a.data, x = _a.x, y = _a.y, width = _a.width, categoryWidth = _a.categoryWidth, _b = _a.categoryGap, categoryGap = _b === void 0 ? 0 : _b, _c = _a.show, show = _c === void 0 ? true : _c, className = _a.className, _d = _a.color, color = _d === void 0 ? 'currentColor' : _d, _e = _a.showTicks, showTicks = _e === void 0 ? true : _e, _f = _a.tickLength, tickLength = _f === void 0 ? 6 : _f, _g = _a.tickPadding, tickPadding = _g === void 0 ? 12 : _g, _h = _a.textAnchor, textAnchor = _h === void 0 ? 'middle' : _h, _j = _a.labelRotation, labelRotation = _j === void 0 ? 0 : _j, labelFormatter = _a.labelFormatter, _k = _a.maxLabelWidth, maxLabelWidth = _k === void 0 ? 100 : _k;
+    if (!show)
+        return null;
+    var formatLabel = function (item, index) {
+        if (labelFormatter) {
+            return labelFormatter(item, index);
+        }
+        return item.name || item.label || String(index);
+    };
+    return (React__default.createElement("g", { className: cn('chart-x-axis', className) },
+        React__default.createElement("line", { x1: x, y1: y, x2: x + width, y2: y, stroke: color, className: "opacity-20", strokeWidth: 1 }),
+        data.map(function (item, index) {
+            var tickX = x + index * (categoryWidth + categoryGap) + categoryWidth / 2;
+            var label = formatLabel(item, index);
+            return (React__default.createElement("g", { key: index },
+                showTicks && (React__default.createElement("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, stroke: color, className: "opacity-40", strokeWidth: 1 })),
+                React__default.createElement(ChartText, { x: tickX, y: y + tickLength + tickPadding, textAnchor: textAnchor, maxWidth: maxLabelWidth, truncate: !!maxLabelWidth, rotation: labelRotation }, label)));
+        })));
+};
+
+export { XAxis };

package/dist/components/charts/shared/ChartAxis/YAxis.js

@@ -0,0 +1,97 @@
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+
+/**
+ * YAxis component for charts
+ * Renders vertical axis with labels, optional tick marks, and grid lines
+ */
+var YAxis = function (_a) {
+    var min = _a.min, max = _a.max, _b = _a.tickCount, tickCount = _b === void 0 ? 5 : _b, x = _a.x, y = _a.y, height = _a.height, _c = _a.show, show = _c === void 0 ? true : _c, className = _a.className, _d = _a.color, color = _d === void 0 ? 'currentColor' : _d, _e = _a.showTicks, showTicks = _e === void 0 ? true : _e, _f = _a.tickLength, tickLength = _f === void 0 ? 6 : _f, _g = _a.tickPadding, tickPadding = _g === void 0 ? 8 : _g, _h = _a.textAnchor, textAnchor = _h === void 0 ? 'end' : _h, tickFormatter = _a.tickFormatter, _j = _a.showGrid, showGrid = _j === void 0 ? false : _j, _k = _a.gridWidth, gridWidth = _k === void 0 ? 0 : _k, customTicks = _a.ticks;
+    if (!show)
+        return null;
+    // Generate tick values
+    var generateTicks = function () {
+        if (customTicks)
+            return customTicks;
+        if (tickCount <= 1)
+            return [min];
+        var range = max - min;
+        // For small ranges (like 0-100), use round numbers
+        if (range <= 100) {
+            var step_1 = Math.ceil(range / (tickCount - 1) / 5) * 5; // Round to nearest 5
+            var ticks_1 = [];
+            for (var i = 0; i < tickCount; i++) {
+                var value = min + i * step_1;
+                if (value <= max) {
+                    ticks_1.push(value);
+                }
+            }
+            // Always include max if it's not already included
+            if (ticks_1[ticks_1.length - 1] < max) {
+                ticks_1.push(max);
+            }
+            return ticks_1;
+        }
+        // For larger ranges, use smarter step calculation
+        var roughStep = range / (tickCount - 1);
+        var step;
+        if (roughStep >= 1000) {
+            step = Math.ceil(roughStep / 1000) * 1000;
+        }
+        else if (roughStep >= 100) {
+            step = Math.ceil(roughStep / 100) * 100;
+        }
+        else if (roughStep >= 10) {
+            step = Math.ceil(roughStep / 10) * 10;
+        }
+        else {
+            step = Math.ceil(roughStep);
+        }
+        var ticks = [];
+        for (var i = 0; i <= tickCount; i++) {
+            var value = min + i * step;
+            if (value <= max) {
+                ticks.push(value);
+            }
+        }
+        return ticks;
+    };
+    var ticks = generateTicks();
+    var formatTick = function (value) {
+        if (tickFormatter) {
+            return tickFormatter(value);
+        }
+        // Default formatting - prioritize whole numbers
+        if (Math.abs(value) >= 1000000) {
+            return "".concat(Math.round(value / 1000000), "M");
+        }
+        else if (Math.abs(value) >= 1000) {
+            return "".concat(Math.round(value / 1000), "K");
+        }
+        else if (Number.isInteger(value) || Math.abs(value - Math.round(value)) < 0.01) {
+            return Math.round(value).toString();
+        }
+        else {
+            return value.toFixed(1);
+        }
+    };
+    var getTickY = function (value) {
+        if (max === min) {
+            return y + height / 2; // Center position when no range
+        }
+        var ratio = (value - min) / (max - min);
+        return y + height - (ratio * height);
+    };
+    return (React__default.createElement("g", { className: cn('chart-y-axis', className) },
+        React__default.createElement("line", { x1: x, y1: y, x2: x, y2: y + height, stroke: color, className: "opacity-10", strokeWidth: 1 }),
+        ticks.map(function (tick, index) {
+            var tickY = getTickY(tick);
+            return (React__default.createElement("g", { key: index },
+                showGrid && gridWidth > 0 && (React__default.createElement("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, stroke: color, className: "opacity-10", strokeWidth: 1 })),
+                showTicks && (React__default.createElement("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, stroke: color, className: "opacity-40", strokeWidth: 1 })),
+                React__default.createElement(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle" }, formatTick(tick))));
+        })));
+};
+
+export { YAxis };

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

@@ -0,0 +1,35 @@
+import React__default from '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);
+    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"
+        } },
+        React__default.createElement(motion.line, { x1: x, y1: margin.top, x2: x, y2: margin.top + innerHeight, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.verticalLine), animate: {
+                x1: x,
+                x2: x
+            }, transition: {
+                duration: 0.2,
+                ease: "easeOut"
+            } }),
+        showHorizontal && y !== undefined && (React__default.createElement(motion.line, { x1: margin.left, y1: y, x2: margin.left + innerWidth, y2: y, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.horizontalLine), animate: {
+                y1: y,
+                y2: y
+            }, transition: {
+                duration: 0.2,
+                ease: "easeOut"
+            } }))))));
+};
+
+export { ChartCrosshair };

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

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

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

@@ -0,0 +1,66 @@
+import { __extends } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+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;
+    }
+    ChartErrorBoundary.getDerivedStateFromError = function (error) {
+        return {
+            hasError: true,
+            error: error,
+        };
+    };
+    ChartErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        this.setState({
+            error: error,
+            errorInfo: errorInfo,
+        });
+        // Call optional error handler
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        }
+        // Log error in development
+        if (process.env.NODE_ENV === 'development') {
+            console.error('Chart Error Boundary caught an error:', error, errorInfo);
+        }
+    };
+    ChartErrorBoundary.prototype.render = function () {
+        var _this = this;
+        var _a;
+        if (this.state.hasError) {
+            // Use custom fallback if provided
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            // Default error UI
+            return (React__default.createElement("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite" },
+                React__default.createElement("div", { className: "flex items-center gap-2 mb-2" },
+                    React__default.createElement("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                        React__default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" })),
+                    React__default.createElement("h3", { className: "text-sm font-medium text-danger-800" }, "Chart Error")),
+                React__default.createElement("p", { className: "text-sm text-danger-600 mb-3" }, "Unable to render chart due to an error"),
+                this.props.showErrorDetails && this.state.error && (React__default.createElement("details", { className: "w-full" },
+                    React__default.createElement("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2" }, "Show error details"),
+                    React__default.createElement("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32" },
+                        React__default.createElement("div", { className: "font-semibold mb-1" }, "Error:"),
+                        React__default.createElement("div", { className: "mb-2" }, this.state.error.message),
+                        ((_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")));
+        }
+        return this.props.children;
+    };
+    return ChartErrorBoundary;
+}(Component));
+
+export { ChartErrorBoundary };

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

@@ -0,0 +1,22 @@
+import React__default from 'react';
+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;
+    if (!show)
+        return null;
+    // Generate grid line positions
+    var positions = tickPositions ||
+        Array.from({ length: lineCount }, function (_, 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 })); })));
+};
+
+export { HorizontalGrid };

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

@@ -0,0 +1,30 @@
+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"]);
+    if (!content) {
+        return null;
+    }
+    var alignClasses = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end',
+    };
+    var verticalAlignClasses = {
+        top: 'items-start',
+        middle: 'items-center',
+        bottom: 'items-end',
+    };
+    var 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));
+};
+
+export { ChartLegend };