@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,85 @@
+import React from "react";
+import { useTooltipPosition } from "../../hooks/useTooltipPosition";
+import type { ChartContainerProps, ChartDimensions, ChartMargins } from "./ChartContainer.types";
+import type { ChartScales } from "../../hooks/useChartScales";
+import type { ChartDataPoint, ChartConfig } from "../../types/chart.types";
+/**
+ * Chart context for sharing state between ChartContainer and Renderers
+ */
+export interface ChartContextValue {
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart config
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions: ChartDimensions;
+    /**
+     * Chart margins
+     */
+    margin: ChartMargins;
+    /**
+     * Inner width (width - margins)
+     */
+    innerWidth: number;
+    /**
+     * Inner height (height - margins)
+     */
+    innerHeight: number;
+    /**
+     * Hovered category index
+     */
+    hoveredCategory: number | null;
+    /**
+     * Set hovered category
+     */
+    setHoveredCategory: (index: number | null) => void;
+    /**
+     * Hovered point (for line charts)
+     */
+    hoveredPoint: {
+        index: number;
+        key: string;
+    } | null;
+    /**
+     * Set hovered point
+     */
+    setHoveredPoint: (point: {
+        index: number;
+        key: string;
+    } | null) => void;
+    /**
+     * Tooltip handlers
+     */
+    handleMouseEnter: ReturnType<typeof useTooltipPosition>['handleMouseEnter'];
+    handleMouseMove: ReturnType<typeof useTooltipPosition>['handleMouseMove'];
+    handleMouseLeave: ReturnType<typeof useTooltipPosition>['handleMouseLeave'];
+    /**
+     * Keyboard focus index
+     */
+    focusedElementIndex: number;
+    /**
+     * Whether in keyboard navigation mode
+     */
+    isKeyboardMode: boolean;
+}
+/**
+ * Hook to access chart context from renderers
+ */
+export declare const useChartContext: () => ChartContextValue;
+/**
+ * ChartContainer Component
+ *
+ * Manages SVG container, axes, grid, tooltip, dimensions, and provides
+ * context to child rendering components (BarRenderer, LineRenderer, etc.)
+ */
+export declare const ChartContainer: React.FC<ChartContainerProps>;

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

@@ -0,0 +1,185 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { 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 (Math.abs(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 = useMemo(() => propMargins || {
+        top: 15,
+        right: showYAxis ? 20 : 0,
+        bottom: showXAxis ? 20 : 0,
+        left: showYAxis ? 60 : 0,
+    }, [propMargins, showYAxis, showXAxis]);
+    // 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 = useMemo(() => ({
+        data,
+        config,
+        scales: adjustedScales,
+        dimensions,
+        margin,
+        innerWidth,
+        innerHeight,
+        hoveredCategory,
+        setHoveredCategory,
+        hoveredPoint,
+        setHoveredPoint,
+        handleMouseEnter,
+        handleMouseMove,
+        handleMouseLeave,
+        focusedElementIndex,
+        isKeyboardMode,
+    }), [
+        data,
+        config,
+        adjustedScales,
+        dimensions,
+        margin,
+        innerWidth,
+        innerHeight,
+        hoveredCategory,
+        hoveredPoint,
+        handleMouseEnter,
+        handleMouseMove,
+        handleMouseLeave,
+        focusedElementIndex,
+        isKeyboardMode,
+    ]);
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsx(ChartContext.Provider, { value: contextValue, children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: gridLineCount }), jsx(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 }), adjustedScales.y.min < 0 && adjustedScales.y.max > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), children, jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: resolvedCategoryWidth, categoryGap: categoryGap })] }), jsx(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]: unknown;
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ChartCrosshairProps } from "./ChartCrosshair.types";
+/**
+ * ChartCrosshair component for rendering crosshair lines in charts
+ * Supports both vertical and horizontal lines with smooth Framer Motion transitions
+ */
+export declare const ChartCrosshair: React.FC<ChartCrosshairProps>;

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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../../utils/cn.js';
+import { chartCrosshairTheme } from './ChartCrosshair.theme.js';
+
+/**
+ * ChartCrosshair component for rendering crosshair lines in charts
+ * Supports both vertical and horizontal lines with smooth Framer Motion transitions
+ */
+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 (jsx(AnimatePresence, { children: show && (jsxs(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                duration: 0.3,
+                ease: "easeInOut"
+            }, children: [jsx(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 && (jsx(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.d.ts

@@ -0,0 +1,6 @@
+import type { ChartCrosshairTheme } from './ChartCrosshair.types';
+/**
+ * Default theme for ChartCrosshair component
+ * Provides consistent styling for chart crosshair lines with Framer Motion animations
+ */
+export declare const chartCrosshairTheme: ChartCrosshairTheme;

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
+ */
+const chartCrosshairTheme = {
+    baseStyle: "pointer-events-none",
+    verticalLine: "stroke-gray-500",
+    horizontalLine: "stroke-gray-500",
+};
+
+export { chartCrosshairTheme };

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

@@ -0,0 +1,35 @@
+export interface ChartCrosshairProps {
+    /** Whether to show the crosshair */
+    show: boolean;
+    /** X coordinate for the vertical line */
+    x: number;
+    /** Y coordinate for the horizontal line (optional) */
+    y?: number;
+    /** Chart margins */
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Inner chart dimensions */
+    innerWidth: number;
+    innerHeight: number;
+    /** Whether to show the horizontal line */
+    showHorizontal?: boolean;
+    /** Custom stroke color */
+    strokeColor?: string;
+    /** Custom stroke width */
+    strokeWidth?: number;
+    /** Custom stroke dash array */
+    strokeDasharray?: string;
+    /** Custom opacity */
+    opacity?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface ChartCrosshairTheme {
+    baseStyle?: string;
+    verticalLine?: string;
+    horizontalLine?: string;
+}

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

@@ -0,0 +1,3 @@
+export { ChartCrosshair } from './ChartCrosshair';
+export type { ChartCrosshairProps, ChartCrosshairTheme } from './ChartCrosshair.types';
+export { chartCrosshairTheme } from './ChartCrosshair.theme';

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

@@ -0,0 +1,34 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+interface ChartErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    className?: string;
+    showErrorDetails?: boolean;
+}
+interface ChartErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+    errorInfo?: ErrorInfo;
+}
+/**
+ * Error boundary specifically designed for chart components
+ * Provides graceful error handling and fallback UI
+ */
+export declare class ChartErrorBoundary extends Component<ChartErrorBoundaryProps, ChartErrorBoundaryState> {
+    constructor(props: ChartErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ChartErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+/**
+ * Hook version of error boundary for functional components
+ * Note: This is a simplified version - full error boundaries require class components
+ */
+export declare function useChartErrorHandler(): {
+    error: Error | null;
+    resetError: () => void;
+    handleError: (error: Error) => void;
+    hasError: boolean;
+};
+export {};

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

@@ -0,0 +1,48 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * Error boundary specifically designed for chart components
+ * Provides graceful error handling and fallback UI
+ */
+class ChartErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.setState({
+            error,
+            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);
+        }
+    }
+    render() {
+        var _a;
+        if (this.state.hasError) {
+            // Use custom fallback if provided
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            // Default error UI
+            return (jsxs("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", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("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" }) }), jsx("h3", { className: "text-sm font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-sm text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-xs", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("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", children: "Try Again" })] }));
+        }
+        return this.props.children;
+    }
+}
+
+export { ChartErrorBoundary };

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

@@ -0,0 +1 @@
+export { ChartErrorBoundary, useChartErrorHandler } from './ChartErrorBoundary';

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+export interface HorizontalGridProps {
+    /** X position to start the grid */
+    x: number;
+    /** Y position to start the grid */
+    y: number;
+    /** Width of the grid area */
+    width: number;
+    /** Height of the grid area */
+    height: number;
+    /** Number of grid lines */
+    lineCount?: number;
+    /** Whether to show the grid */
+    show?: boolean;
+    /** Grid line color */
+    color?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom tick positions (overrides lineCount) */
+    tickPositions?: number[];
+}
+/**
+ * HorizontalGrid component for charts
+ * Renders horizontal grid lines at specified intervals
+ */
+export declare const HorizontalGrid: React.FC<HorizontalGridProps>;

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * HorizontalGrid component for charts
+ * Renders horizontal grid lines at specified intervals
+ */
+const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, color = "currentColor", className, tickPositions, }) => {
+    if (!show)
+        return null;
+    // Generate grid line positions
+    const positions = tickPositions ||
+        Array.from({ length: lineCount }, (_, i) => {
+            if (lineCount <= 1)
+                return y;
+            return y + (i * height) / (lineCount - 1);
+        });
+    return (jsx("g", { className: cn("chart-horizontal-grid", className), children: positions.map((lineY, index) => (jsx("line", { x1: x, y1: lineY, x2: x + width, y2: lineY, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 }, index))) }));
+};
+
+export { HorizontalGrid };

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

@@ -0,0 +1,2 @@
+export { HorizontalGrid } from './HorizontalGrid';
+export type { HorizontalGridProps } from './HorizontalGrid';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ChartLegendProps } from './ChartLegend.types';
+/**
+ * Basic ChartLegend component - minimal implementation
+ * TODO: Enhance with full legend functionality when needed
+ */
+export declare const ChartLegend: React.FC<ChartLegendProps>;

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

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Basic ChartLegend component - minimal implementation
+ * TODO: Enhance with full legend functionality when needed
+ */
+const ChartLegend = ({ content, className, wrapperStyle, layout = 'horizontal', align = 'center', verticalAlign = 'bottom', ...props }) => {
+    if (!content) {
+        return null;
+    }
+    const alignClasses = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end',
+    };
+    const verticalAlignClasses = {
+        top: 'items-start',
+        middle: 'items-center',
+        bottom: 'items-end',
+    };
+    const layoutClasses = {
+        horizontal: 'flex-row',
+        vertical: 'flex-col',
+    };
+    return (jsx("div", { className: `flex ${layoutClasses[layout]} ${alignClasses[align]} ${verticalAlignClasses[verticalAlign]} ${className || ''}`, style: wrapperStyle, ...props, children: content }));
+};
+
+export { ChartLegend };

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface ChartLegendProps {
+    content?: ReactNode;
+    wrapperStyle?: React.CSSProperties;
+    iconType?: 'line' | 'rect' | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+    layout?: 'horizontal' | 'vertical';
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    className?: string;
+}
+export interface ChartLegendContentProps {
+    payload?: any[];
+    nameKey?: string;
+    className?: string;
+}