@shohojdhara/atomix 0.3.3 → 0.3.5

package/dist/charts.d.ts

@@ -0,0 +1,1929 @@
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+
+/**
+ * Displacement mode for glass effect
+ */
+type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader';
+/**
+ * Mouse position coordinates
+ */
+interface MousePosition {
+    x: number;
+    y: number;
+}
+/**
+ * OverLight configuration - can be boolean, 'auto', or object with settings
+ *
+ * @example
+ * // Boolean - explicit control
+ * overLight={true}
+ *
+ * @example
+ * // Auto-detection - automatically detects background brightness
+ * overLight="auto"
+ *
+ * @example
+ * // Object config - auto-detection with custom settings
+ * overLight={{
+ *   threshold: 0.8,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.0,
+ *   saturationBoost: 1.5
+ * }}
+ */
+type OverLightConfig = boolean | 'auto' | OverLightObjectConfig;
+/**
+ * OverLight object configuration
+ *
+ * When using object mode, the component will auto-detect background brightness
+ * and apply the custom settings. All properties are optional and will use
+ * sensible defaults if not provided.
+ *
+ * @example
+ * // Minimal config - only threshold
+ * overLight={{ threshold: 0.8 }}
+ *
+ * @example
+ * // Full config with all properties
+ * overLight={{
+ *   threshold: 0.75,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.1,
+ *   saturationBoost: 1.5
+ * }}
+ */
+interface OverLightObjectConfig {
+    /**
+     * Luminance threshold for auto-detection (0.1 - 1.0)
+     *
+     * Backgrounds with average luminance above this threshold will be
+     * considered "light" and trigger overLight mode.
+     *
+     * @default 0.7
+     * @minimum 0.1
+     * @maximum 1.0
+     *
+     * @example
+     * // More sensitive detection (triggers on lighter backgrounds)
+     * threshold: 0.6
+     *
+     * @example
+     * // Less sensitive detection (only very light backgrounds)
+     * threshold: 0.85
+     */
+    threshold?: number;
+    /**
+     * Base opacity for overLight layers (0.1 - 1.0)
+     *
+     * Controls the opacity of the base and overlay layers when overLight
+     * mode is active. This value is multiplied by hover/active intensity
+     * multipliers for dynamic effects.
+     *
+     * @default 0.5 (dynamic, depends on hover/active state)
+     * @minimum 0.1
+     * @maximum 1.0
+     *
+     * @example
+     * // Subtle overlay
+     * opacity: 0.3
+     *
+     * @example
+     * // Strong overlay
+     * opacity: 0.7
+     */
+    opacity?: number;
+    /**
+     * Contrast enhancement multiplier (0.5 - 2.5)
+     *
+     * Increases the contrast of the glass effect for better visibility
+     * on light backgrounds. Higher values create more dramatic effects.
+     *
+     * @default 1.4 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 2.5
+     *
+     * @example
+     * // Subtle contrast boost
+     * contrast: 1.2
+     *
+     * @example
+     * // High contrast for maximum visibility
+     * contrast: 2.0
+     */
+    contrast?: number;
+    /**
+     * Brightness adjustment multiplier (0.5 - 2.0)
+     *
+     * Adjusts the overall brightness of the glass effect. Values above 1.0
+     * brighten the effect, while values below 1.0 darken it.
+     *
+     * @default 0.85 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 2.0
+     *
+     * @example
+     * // Neutral brightness
+     * brightness: 1.0
+     *
+     * @example
+     * // Brighter effect
+     * brightness: 1.2
+     */
+    brightness?: number;
+    /**
+     * Saturation boost multiplier (0.5 - 3.0)
+     *
+     * Enhances color saturation for more vibrant glass effects on light
+     * backgrounds. This works in conjunction with the base saturation prop.
+     *
+     * @default 1.3 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 3.0
+     *
+     * @example
+     * // Moderate saturation boost
+     * saturationBoost: 1.2
+     *
+     * @example
+     * // High saturation for vivid effects
+     * saturationBoost: 2.0
+     */
+    saturationBoost?: number;
+}
+/**
+ * AtomixGlass component props interface
+ */
+interface AtomixGlassProps {
+    children: React.ReactNode;
+    displacementScale?: number;
+    blurAmount?: number;
+    saturation?: number;
+    aberrationIntensity?: number;
+    elasticity?: number;
+    cornerRadius?: number;
+    globalMousePosition?: MousePosition;
+    mouseOffset?: MousePosition;
+    mouseContainer?: React.RefObject<HTMLElement | null> | null;
+    className?: string;
+    padding?: string;
+    style?: React.CSSProperties;
+    overLight?: OverLightConfig;
+    mode?: DisplacementMode;
+    onClick?: () => void;
+    /**
+     * Shader variant for shader mode
+     */
+    shaderVariant?: 'liquidGlass' | 'premiumGlass';
+    /**
+     * Accessibility props
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: string;
+    tabIndex?: number;
+    /**
+     * Performance and accessibility options
+     */
+    reducedMotion?: boolean;
+    highContrast?: boolean;
+    disableEffects?: boolean;
+    enableLiquidBlur?: boolean;
+    enableBorderEffect?: boolean;
+    enableOverLightLayers?: boolean;
+    /**
+     * Performance monitoring
+     */
+    enablePerformanceMonitoring?: boolean;
+    /**
+     * Debug mode for cornerRadius extraction
+     */
+    debugCornerRadius?: boolean;
+    /**
+     * Debug mode for overLight detection and configuration
+     *
+     * When enabled, logs detailed information about:
+     * - Auto-detection results (luminance values, threshold comparison)
+     * - Final overLight configuration values
+     * - Detection timing and performance
+     *
+     * Useful for debugging auto-detection issues and fine-tuning thresholds.
+     *
+     * @default false
+     *
+     * @example
+     * <AtomixGlass overLight="auto" debugOverLight={true}>
+     *   Content
+     * </AtomixGlass>
+     */
+    debugOverLight?: boolean;
+}
+/**
+ * Common component size options
+ */
+type Size = 'sm' | 'md' | 'lg';
+/**
+ * Theme color variants
+ */
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'invert' | 'brand' | 'error' | 'success' | 'warning' | 'info' | 'light' | 'dark';
+/**
+ * Component variant including theme colors and outline variants
+ */
+type Variant = ThemeColor | `outline-${ThemeColor}` | 'link';
+/**
+ * Base component properties interface
+ */
+interface BaseComponentProps {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Component disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Component children
+     */
+    children?: ReactNode;
+    /**
+     * Inline style for the component root element
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Chart type options
+ */
+type ChartType$1 = 'line' | 'area' | 'bar' | 'horizontal-bar' | 'pie' | 'donut' | 'doughnut' | 'scatter' | 'radar' | 'bubble' | 'candlestick' | 'interactive' | 'advanced' | 'gauge' | 'funnel' | 'waterfall' | 'heatmap' | 'treemap' | 'realtime';
+/**
+ * Extended size options for charts
+ */
+type ChartSize$1 = Size | 'xl' | 'full';
+/**
+ * Chart data point interface
+ */
+interface ChartDataPoint$1 {
+    /**
+     * Data point label
+     */
+    label: string;
+    /**
+     * Data point value
+     */
+    value: number;
+    /**
+     * Optional color for this data point
+     */
+    color?: string;
+    /**
+     * Optional metadata
+     */
+    metadata?: Record<string, any>;
+}
+/**
+ * Chart dataset interface
+ */
+interface ChartDataset$1 {
+    /**
+     * Dataset label
+     */
+    label: string;
+    /**
+     * Dataset data points
+     */
+    data: ChartDataPoint$1[];
+    /**
+     * Dataset color
+     */
+    color?: string;
+    /**
+     * Whether this dataset is visible
+     */
+    visible?: boolean;
+}
+/**
+ * Chart axis configuration
+ */
+interface ChartAxis$1 {
+    /**
+     * Axis label
+     */
+    label?: string;
+    /**
+     * Whether to show grid lines
+     */
+    showGrid?: boolean;
+    /**
+     * Whether to show axis labels
+     */
+    showLabels?: boolean;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Value formatter function
+     */
+    formatter?: (value: number) => string;
+    /**
+     * Number of ticks
+     */
+    ticks?: number;
+}
+/**
+ * Chart configuration
+ */
+interface ChartConfig$1 {
+    /**
+     * X-axis configuration
+     */
+    xAxis?: ChartAxis$1;
+    /**
+     * Y-axis configuration
+     */
+    yAxis?: ChartAxis$1;
+    /**
+     * Whether to show legend
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to show tooltips
+     */
+    showTooltips?: boolean;
+    /**
+     * Whether to animate the chart
+     */
+    animate?: boolean;
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration?: number;
+}
+/**
+ * Chart component properties
+ */
+interface ChartProps$1 extends BaseComponentProps {
+    /**
+     * Chart type
+     */
+    type?: ChartType$1;
+    /**
+     * Chart datasets
+     */
+    datasets?: ChartDataset$1[];
+    /**
+     * Chart configuration
+     */
+    config?: ChartConfig$1;
+    /**
+     * Chart title
+     */
+    title?: string;
+    /**
+     * Chart subtitle
+     */
+    subtitle?: string;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Chart size
+     */
+    size?: ChartSize$1;
+    /**
+     * Chart variant
+     */
+    variant?: Variant;
+    /**
+     * Chart content (for wrapper chart component)
+     */
+    children?: React.ReactNode;
+    /**
+     * Click handler for data points
+     */
+    onDataPointClick?: (dataPoint: ChartDataPoint$1, datasetIndex: number, pointIndex: number) => void;
+    /**
+     * Legend item click handler
+     */
+    onLegendItemClick?: (datasetIndex: number, visible: boolean) => void;
+    /**
+     * Interactive mode - enables hover/click effects
+     */
+    interactive?: boolean;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Fullscreen mode
+     */
+    fullscreen?: boolean;
+    /**
+     * Minimized mode
+     */
+    minimized?: boolean;
+    /**
+     * Show toolbar with actions
+     */
+    showToolbar?: boolean;
+    /**
+     * Enable fullscreen functionality
+     */
+    enableFullscreen?: boolean;
+    /**
+     * Enable export functionality
+     */
+    enableExport?: boolean;
+    /**
+     * Enable refresh functionality
+     */
+    enableRefresh?: boolean;
+    /**
+     * Available export formats
+     */
+    exportFormats?: ('png' | 'svg' | 'csv' | 'json')[];
+    /**
+     * Fullscreen state change handler
+     */
+    onFullscreen?: (isFullscreen: boolean) => void;
+    /**
+     * Export handler
+     */
+    onExport?: (format: string) => Promise<void> | void;
+    /**
+     * Refresh handler
+     */
+    onRefresh?: () => void;
+    /**
+     * Custom toolbar actions
+     */
+    toolbarActions?: React.ReactNode;
+    /**
+     * Empty state configuration
+     */
+    emptyState?: {
+        message?: string;
+        icon?: React.ReactNode;
+    };
+    /**
+     * Accessibility label
+     */
+    'aria-label'?: string;
+}
+
+/**
+ * Chart types - comprehensive list
+ */
+type ChartType = 'line' | 'area' | 'bar' | 'horizontal-bar' | 'pie' | 'donut' | 'doughnut' | 'scatter' | 'radar' | 'bubble' | 'candlestick' | 'interactive' | 'advanced' | 'gauge' | 'funnel' | 'waterfall' | 'heatmap' | 'treemap' | 'realtime';
+/**
+ * Chart data point interface
+ */
+interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+    metadata?: Record<string, any>;
+}
+/**
+ * Scatter chart data point interface
+ */
+interface ScatterDataPoint extends ChartDataPoint {
+    x: number;
+    y: number;
+    size?: number;
+}
+/**
+ * Chart dataset interface
+ */
+interface ChartDataset {
+    label: string;
+    data: ChartDataPoint[];
+    color?: string;
+    visible?: boolean;
+}
+/**
+ * Chart axis configuration
+ */
+interface ChartAxis {
+    label?: string;
+    showGrid?: boolean;
+    showLabels?: boolean;
+    min?: number;
+    max?: number;
+    formatter?: (value: number) => string;
+    ticks?: number;
+}
+/**
+ * Chart configuration
+ */
+interface ChartConfig {
+    xAxis?: ChartAxis;
+    yAxis?: ChartAxis;
+    showLegend?: boolean;
+    showTooltips?: boolean;
+    animate?: boolean;
+    animationDuration?: number;
+}
+/**
+ * Extended chart size options
+ */
+type ChartSize = Size | 'xl' | 'full';
+/**
+ * Comprehensive chart props interface
+ */
+interface ChartProps extends BaseComponentProps {
+    /**
+     * Chart type
+     */
+    type?: ChartType;
+    /**
+     * Chart data (simplified)
+     */
+    data?: ChartDataPoint[];
+    /**
+     * Chart datasets (advanced)
+     */
+    datasets?: ChartDataset[];
+    /**
+     * Chart configuration
+     */
+    config?: ChartConfig;
+    /**
+     * Chart size
+     */
+    size?: ChartSize;
+    /**
+     * Chart variant
+     */
+    variant?: Variant;
+    /**
+     * Glass morphism effect
+     * When true, applies default glass effect. When an object, allows custom glass configuration.
+     */
+    glass?: boolean | AtomixGlassProps;
+    /**
+     * Chart title
+     */
+    title?: string;
+    /**
+     * Chart subtitle
+     */
+    subtitle?: string;
+    /**
+     * Whether to show legend
+     */
+    showLegend?: boolean;
+    /**
+     * Whether chart is interactive
+     */
+    interactive?: boolean;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Fullscreen mode
+     */
+    fullscreen?: boolean;
+    /**
+     * Show toolbar with actions
+     */
+    showToolbar?: boolean;
+    /**
+     * Enable fullscreen functionality
+     */
+    enableFullscreen?: boolean;
+    /**
+     * Enable export functionality
+     */
+    enableExport?: boolean;
+    /**
+     * Enable refresh functionality
+     */
+    enableRefresh?: boolean;
+    /**
+     * Available export formats
+     */
+    exportFormats?: ('png' | 'svg' | 'csv' | 'json')[];
+    /**
+     * Data point click handler
+     */
+    onDataPointClick?: (dataPoint: ChartDataPoint, datasetIndex: number, pointIndex: number) => void;
+    /**
+     * Legend item click handler
+     */
+    onLegendItemClick?: (datasetIndex: number, visible: boolean) => void;
+    /**
+     * Fullscreen state change handler
+     */
+    onFullscreen?: (isFullscreen: boolean) => void;
+    /**
+     * Export handler
+     */
+    onExport?: (format: string) => Promise<void> | void;
+    /**
+     * Refresh handler
+     */
+    onRefresh?: () => void;
+    /**
+     * Chart content for wrapper usage
+     */
+    children?: ReactNode;
+    /**
+     * Accessibility label
+     */
+    'aria-label'?: string;
+    /**
+     * Toolbar configuration
+     */
+    toolbarConfig?: {
+        enableDefaults?: boolean;
+        defaults?: {
+            refresh?: boolean;
+            export?: boolean;
+            fullscreen?: boolean;
+            settings?: boolean;
+            zoom?: boolean;
+            pan?: boolean;
+            reset?: boolean;
+            grid?: boolean;
+            legend?: boolean;
+            tooltips?: boolean;
+            animations?: boolean;
+        };
+        handlers?: {
+            onRefresh?: () => void;
+            onExport?: (format: string) => Promise<void> | void;
+            onFullscreen?: (isFullscreen: boolean) => void;
+            onZoomIn?: () => void;
+            onZoomOut?: () => void;
+            onZoomReset?: () => void;
+            onPanToggle?: (enabled: boolean) => void;
+            onReset?: () => void;
+            onGridToggle?: (show: boolean) => void;
+            onLegendToggle?: (show: boolean) => void;
+            onTooltipsToggle?: (show: boolean) => void;
+            onAnimationsToggle?: (enabled: boolean) => void;
+        };
+    };
+    /**
+     * Custom toolbar actions
+     */
+    customToolbarActions?: Array<{
+        id: string;
+        label: string;
+        icon: string;
+        onClick: () => void;
+        disabled?: boolean;
+        active?: boolean;
+        variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+        tooltip?: string;
+    }>;
+    /**
+     * Custom toolbar groups
+     */
+    customToolbarGroups?: Array<{
+        id: string;
+        label?: string;
+        actions: Array<{
+            id: string;
+            label: string;
+            icon: string;
+            onClick: () => void;
+            disabled?: boolean;
+            active?: boolean;
+            variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+            tooltip?: string;
+        }>;
+        separator?: boolean;
+    }>;
+}
+/**
+ * Chart scales interface
+ */
+interface ChartScales {
+    xScale: (index: number, dataLength?: number) => number;
+    yScale: (value: number) => number;
+    minValue: number;
+    maxValue: number;
+    valueRange: number;
+    innerWidth: number;
+    innerHeight: number;
+    width: number;
+    height: number;
+    padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+/**
+ * Chart interaction state
+ */
+interface ChartInteraction {
+    hoveredIndex: number | null;
+    selectedIndex: number | null;
+}
+/**
+ * Chart hovered point state
+ */
+interface ChartHoveredPoint {
+    datasetIndex: number;
+    pointIndex: number;
+    x: number;
+    y: number;
+    clientX: number;
+    clientY: number;
+}
+/**
+ * Chart event handlers interface
+ */
+interface ChartHandlers {
+    onDataPointClick?: (dataPoint: ChartDataPoint, datasetIndex: number, pointIndex: number) => void;
+    onPointHover: (datasetIndex: number, pointIndex: number, x: number, y: number, clientX: number, clientY: number) => void;
+    onPointLeave: () => void;
+    onMouseMove: (event: react__default.MouseEvent<SVGSVGElement>) => void;
+    onMouseDown: (event: react__default.MouseEvent<SVGSVGElement>) => void;
+    onMouseUp: () => void;
+    onWheel: (event: react__default.WheelEvent<SVGSVGElement>) => void;
+}
+/**
+ * Chart accessibility interface
+ */
+interface ChartAccessibility {
+    announcement: string;
+    focusedPoint: {
+        datasetIndex: number;
+        pointIndex: number;
+    };
+    getAccessibleDescription: () => string;
+}
+/**
+ * Chart toolbar state
+ */
+interface ChartToolbarState {
+    showTooltips?: boolean;
+    showLegend?: boolean;
+    animationsEnabled?: boolean;
+    showGrid?: boolean;
+}
+/**
+ * Chart render content parameters
+ */
+interface ChartRenderContentParams {
+    scales: ChartScales;
+    colors: string[];
+    datasets: ChartDataset[];
+    interactionState?: ChartInteraction;
+    handlers: ChartHandlers;
+    accessibility: ChartAccessibility;
+    hoveredPoint: ChartHoveredPoint | null;
+    toolbarState?: ChartToolbarState;
+    config?: ChartConfig;
+}
+
+interface AnimatedChartProps extends Omit<ChartProps, 'type'> {
+    chartType?: 'line' | 'bar' | 'area';
+    animationConfig?: {
+        duration?: number;
+        easing?: 'ease-out' | 'bounce';
+    };
+    particleEffects?: {
+        enabled: boolean;
+        count: number;
+        colors: string[];
+        speed: number;
+        size: number;
+    };
+}
+declare const AnimatedChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<AnimatedChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+/**
+ * Line chart specific options
+ */
+interface LineChartOptions {
+    /**
+     * Whether to show area fill under the line
+     */
+    showArea?: boolean;
+    /**
+     * Whether to show data points
+     */
+    showDataPoints?: boolean;
+    /**
+     * Whether to use smooth curves
+     */
+    smooth?: boolean;
+    /**
+     * Curve tension (0-1)
+     */
+    tension?: number;
+    /**
+     * Fill opacity for area charts
+     */
+    fillOpacity?: number;
+    /**
+     * Whether to use gradient fills
+     */
+    useGradient?: boolean;
+    /**
+     * Gradient direction
+     */
+    gradientDirection?: 'horizontal' | 'vertical';
+    /**
+     * Line width in pixels
+     */
+    lineWidth?: number;
+    /**
+     * Point radius in pixels
+     */
+    pointRadius?: number;
+    /**
+     * Whether to show point labels
+     */
+    showPointLabels?: boolean;
+    /**
+     * Whether to enable zoom functionality
+     */
+    enableZoom?: boolean;
+    /**
+     * Whether to enable pan functionality
+     */
+    enablePan?: boolean;
+    /**
+     * Whether to show crosshair
+     */
+    showCrosshair?: boolean;
+    /**
+     * Whether to enable keyboard navigation
+     */
+    enableKeyboardNavigation?: boolean;
+    /**
+     * Whether to show trend lines
+     */
+    showTrendLines?: boolean;
+    /**
+     * Whether to show moving averages
+     */
+    showMovingAverages?: boolean;
+    /**
+     * Moving average periods
+     */
+    movingAveragePeriods?: number[];
+    /**
+     * Whether to enable real-time updates
+     */
+    enableRealTime?: boolean;
+    /**
+     * Real-time update interval in milliseconds
+     */
+    realTimeInterval?: number;
+    /**
+     * Maximum number of data points for performance
+     */
+    maxDataPoints?: number;
+    /**
+     * Whether to enable data decimation
+     */
+    enableDecimation?: boolean;
+}
+
+interface LineChartProps extends Omit<ChartProps, 'type'> {
+    /**
+     * Line chart specific options
+     */
+    lineOptions?: LineChartOptions;
+    /**
+     * Real-time data update handler
+     */
+    onRealTimeUpdate?: () => void;
+    /**
+     * Zoom change handler
+     */
+    onZoomChange?: (zoomLevel: number, centerX: number) => void;
+    /**
+     * Pan change handler
+     */
+    onPanChange?: (offsetX: number, offsetY: number) => void;
+    /**
+     * Brush selection handler
+     */
+    onBrushSelection?: (startIndex: number, endIndex: number) => void;
+}
+declare const LineChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<LineChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface AreaChartProps extends Omit<LineChartProps, 'lineOptions'> {
+    /**
+     * Area chart specific options (extends line chart options)
+     */
+    areaOptions?: LineChartProps['lineOptions'];
+}
+declare const AreaChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<AreaChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+/**
+ * Bar chart specific options
+ */
+interface BarChartOptions {
+    /**
+     * Whether bars are stacked
+     */
+    stacked?: boolean;
+    /**
+     * Whether to show values on bars
+     */
+    showValues?: boolean;
+    /**
+     * Corner radius for bars
+     */
+    cornerRadius?: number;
+    /**
+     * Padding between bar groups
+     */
+    groupPadding?: number;
+    /**
+     * Padding between individual bars
+     */
+    barPadding?: number;
+    /**
+     * Whether to enable animations
+     */
+    enableAnimations?: boolean;
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration?: number;
+    /**
+     * Animation delay between bars
+     */
+    animationDelay?: number;
+    /**
+     * Whether to use gradients
+     */
+    useGradients?: boolean;
+    /**
+     * Whether to enable hover effects
+     */
+    enableHoverEffects?: boolean;
+    /**
+     * Whether to enable data labels
+     */
+    enableDataLabels?: boolean;
+    /**
+     * Data label position
+     */
+    dataLabelPosition?: 'inside' | 'outside' | 'center';
+    /**
+     * Value formatter function
+     */
+    valueFormatter?: (value: number) => string;
+    /**
+     * Minimum bar height
+     */
+    minBarHeight?: number;
+    /**
+     * Maximum bar width
+     */
+    maxBarWidth?: number;
+}
+
+interface BarChartProps extends Omit<ChartProps, 'type'> {
+    /**
+     * Bar chart specific options
+     */
+    barOptions?: BarChartOptions;
+    /**
+     * Whether to render as horizontal bar chart
+     */
+    horizontal?: boolean;
+}
+declare const BarChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<BarChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface BubbleDataPoint {
+    label: string;
+    x: number;
+    y: number;
+    size: number;
+    value: number;
+    color?: string;
+    metadata?: Record<string, any>;
+}
+interface BubbleChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
+    /**
+     * Bubble chart data
+     */
+    bubbleData: BubbleDataPoint[];
+    /**
+     * Bubble chart specific options
+     */
+    bubbleOptions?: {
+        /**
+         * Minimum bubble size
+         */
+        minBubbleSize?: number;
+        /**
+         * Maximum bubble size
+         */
+        maxBubbleSize?: number;
+        /**
+         * Bubble opacity
+         */
+        bubbleOpacity?: number;
+        /**
+         * Whether to show bubble labels
+         */
+        showLabels?: boolean;
+        /**
+         * Label position relative to bubble
+         */
+        labelPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+        /**
+         * Whether to enable bubble animations
+         */
+        enableAnimations?: boolean;
+        /**
+         * Animation duration in milliseconds
+         */
+        animationDuration?: number;
+        /**
+         * Whether to show size legend
+         */
+        showSizeLegend?: boolean;
+        /**
+         * Size legend title
+         */
+        sizeLegendTitle?: string;
+        /**
+         * Color scheme for bubbles
+         */
+        colorScheme?: string[];
+        /**
+         * Whether to use size-based coloring
+         */
+        sizeBasedColoring?: boolean;
+    };
+}
+declare const BubbleChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<BubbleChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface CandlestickDataPoint {
+    /**
+     * Date or timestamp
+     */
+    date: string | Date;
+    /**
+     * Opening price
+     */
+    open: number;
+    /**
+     * Highest price
+     */
+    high: number;
+    /**
+     * Lowest price
+     */
+    low: number;
+    /**
+     * Closing price
+     */
+    close: number;
+    /**
+     * Trading volume (optional)
+     */
+    volume?: number;
+    /**
+     * Additional metadata
+     */
+    metadata?: Record<string, any>;
+}
+interface CandlestickChartProps extends Omit<ChartProps, 'type' | 'datasets' | 'data'> {
+    /**
+     * Candlestick chart data
+     */
+    candlestickData?: CandlestickDataPoint[];
+    /**
+     * Candlestick chart specific options
+     */
+    candlestickOptions?: {
+        /**
+         * Whether to show volume bars
+         */
+        showVolume?: boolean;
+        /**
+         * Volume bar height ratio (0-1)
+         */
+        volumeHeightRatio?: number;
+        /**
+         * Up color (when close > open)
+         */
+        upColor?: string;
+        /**
+         * Down color (when close < open)
+         */
+        downColor?: string;
+        /**
+         * Wick color
+         */
+        wickColor?: string;
+        /**
+         * Border color
+         */
+        borderColor?: string;
+        /**
+         * Whether to show moving averages
+         */
+        showMovingAverages?: boolean;
+        /**
+         * Moving average periods
+         */
+        movingAveragePeriods?: number[];
+        /**
+         * Moving average colors
+         */
+        movingAverageColors?: string[];
+        /**
+         * Date format
+         */
+        dateFormat?: 'short' | 'medium' | 'long' | 'numeric' | 'custom';
+        /**
+         * Custom date formatter function
+         */
+        dateFormatter?: (date: string | Date) => string;
+        /**
+         * Whether to show grid lines
+         */
+        showGrid?: boolean;
+        /**
+         * Grid color
+         */
+        gridColor?: string;
+        /**
+         * Whether to show tooltips
+         */
+        showTooltips?: boolean;
+    };
+}
+declare const CandlestickChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<CandlestickChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+declare const Chart: react.MemoExoticComponent<react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+/**
+ * Enhanced chart renderer component with comprehensive functionality
+ */
+declare const ChartRenderer: react.MemoExoticComponent<react.ForwardRefExoticComponent<{
+    datasets: ChartProps$1["datasets"];
+    config?: ChartProps$1["config"];
+    width?: number;
+    height?: number;
+    onDataPointClick?: ChartProps$1["onDataPointClick"];
+    interactive?: boolean;
+    enableRealTime?: boolean;
+    enableAccessibility?: boolean;
+    enablePerformanceOptimization?: boolean;
+    renderContent: (params: ChartRenderContentParams) => React.ReactNode;
+} & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Pie chart specific options
+ */
+interface PieChartOptions {
+    /**
+     * Inner radius for donut charts (0-1)
+     */
+    innerRadius?: number;
+    /**
+     * Whether to show labels
+     */
+    showLabels?: boolean;
+    /**
+     * Whether to show percentages
+     */
+    showPercentages?: boolean;
+    /**
+     * Whether to show values
+     */
+    showValues?: boolean;
+    /**
+     * Start angle in degrees
+     */
+    startAngle?: number;
+    /**
+     * Whether to sort slices by value
+     */
+    sortByValue?: boolean;
+    /**
+     * Padding angle between slices in degrees
+     */
+    padAngle?: number;
+    /**
+     * Whether to enable animations
+     */
+    enableAnimations?: boolean;
+    /**
+     * Whether to enable hover effects
+     */
+    enableHoverEffects?: boolean;
+    /**
+     * Whether to enable selection
+     */
+    enableSelection?: boolean;
+    /**
+     * Hover offset in pixels
+     */
+    hoverOffset?: number;
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration?: number;
+    /**
+     * Label formatter function
+     */
+    labelFormatter?: (value: number, percentage: number, label: string) => string;
+}
+
+interface PieChartProps extends Omit<ChartProps, 'type'> {
+    /**
+     * Pie chart specific options
+     */
+    pieOptions?: PieChartOptions;
+}
+declare const PieChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<PieChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface DonutChartProps extends Omit<PieChartProps, 'type'> {
+    /**
+     * Donut chart specific options
+     */
+    donutOptions?: {
+        /**
+         * Inner radius as a percentage of outer radius (0-1)
+         */
+        innerRadiusRatio?: number;
+        /**
+         * Whether to show total in the center
+         */
+        showTotal?: boolean;
+        /**
+         * Custom center label
+         */
+        centerLabel?: string;
+        /**
+         * Custom center value
+         */
+        centerValue?: string | number;
+        /**
+         * Whether to use rounded corners for donut segments
+         */
+        roundedCorners?: boolean;
+    };
+}
+declare const DonutChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<DonutChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface FunnelDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+    percentage?: number;
+    metadata?: Record<string, any>;
+}
+interface FunnelChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
+    /**
+     * Funnel chart data
+     */
+    funnelData: FunnelDataPoint[];
+    /**
+     * Funnel chart specific options
+     */
+    funnelOptions?: {
+        /**
+         * Funnel direction
+         */
+        direction?: 'vertical' | 'horizontal';
+        /**
+         * Whether to show labels
+         */
+        showLabels?: boolean;
+        /**
+         * Whether to show values
+         */
+        showValues?: boolean;
+        /**
+         * Whether to show percentages
+         */
+        showPercentages?: boolean;
+        /**
+         * Label position
+         */
+        labelPosition?: 'inside' | 'outside' | 'center';
+        /**
+         * Funnel neck width ratio (0-1)
+         */
+        neckWidth?: number;
+        /**
+         * Funnel neck height ratio (0-1)
+         */
+        neckHeight?: number;
+        /**
+         * Gap between segments
+         */
+        segmentGap?: number;
+        /**
+         * Color scheme
+         */
+        colorScheme?: string[];
+        /**
+         * Whether to use gradient
+         */
+        useGradient?: boolean;
+        /**
+         * Whether to animate
+         */
+        animate?: boolean;
+        /**
+         * Animation duration in milliseconds
+         */
+        animationDuration?: number;
+        /**
+         * Animation delay between segments
+         */
+        animationDelay?: number;
+        /**
+         * Value formatter function
+         */
+        valueFormatter?: (value: number) => string;
+        /**
+         * Whether to show conversion rates
+         */
+        showConversionRates?: boolean;
+        /**
+         * Conversion rate position
+         */
+        conversionRatePosition?: 'between' | 'onSegment';
+        /**
+         * Whether to use proportional segments
+         */
+        proportional?: boolean;
+        /**
+         * Minimum segment ratio (0-1)
+         */
+        minSegmentRatio?: number;
+    };
+}
+declare const FunnelChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<FunnelChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface GaugeChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
+    /**
+     * Current value to display
+     */
+    value: number;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Gauge chart specific options
+     */
+    gaugeOptions?: {
+        /**
+         * Start angle in degrees (0 = right, 90 = bottom, 180 = left, 270 = top)
+         */
+        startAngle?: number;
+        /**
+         * End angle in degrees
+         */
+        endAngle?: number;
+        /**
+         * Gauge thickness (0-1, where 1 is full radius)
+         */
+        thickness?: number;
+        /**
+         * Whether to show the needle
+         */
+        showNeedle?: boolean;
+        /**
+         * Needle color
+         */
+        needleColor?: string;
+        /**
+         * Whether to show value text in center
+         */
+        showValue?: boolean;
+        /**
+         * Value text format function
+         */
+        valueFormatter?: (value: number) => string;
+        /**
+         * Whether to show min/max labels
+         */
+        showMinMaxLabels?: boolean;
+        /**
+         * Whether to show tick marks
+         */
+        showTicks?: boolean;
+        /**
+         * Number of major ticks
+         */
+        majorTicks?: number;
+        /**
+         * Number of minor ticks between major ticks
+         */
+        minorTicks?: number;
+        /**
+         * Color zones for different value ranges
+         */
+        colorZones?: Array<{
+            from: number;
+            to: number;
+            color: string;
+            label?: string;
+        }>;
+        /**
+         * Whether to animate value changes
+         */
+        animate?: boolean;
+        /**
+         * Animation duration in milliseconds
+         */
+        animationDuration?: number;
+        /**
+         * Animation easing function
+         */
+        animationEasing?: string;
+        /**
+         * Whether to show a gradient effect
+         */
+        useGradient?: boolean;
+        /**
+         * Custom label
+         */
+        label?: string;
+        /**
+         * Label position
+         */
+        labelPosition?: 'top' | 'bottom' | 'center';
+    };
+}
+declare const GaugeChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<GaugeChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface HeatmapDataPoint {
+    x: string | number;
+    y: string | number;
+    value: number;
+    label?: string;
+    metadata?: Record<string, any>;
+}
+interface HeatmapChartProps extends Omit<ChartProps, 'type' | 'datasets' | 'variant' | 'data'> {
+    /**
+     * Heatmap data points
+     */
+    data: HeatmapDataPoint[];
+    /**
+     * Color scale configuration
+     */
+    colorScale?: {
+        /**
+         * Color scheme - enhanced with GitHub-style contribution colors
+         */
+        scheme: 'viridis' | 'plasma' | 'inferno' | 'magma' | 'blues' | 'reds' | 'greens' | 'github' | 'custom';
+        /**
+         * Custom colors for custom scheme
+         */
+        colors?: string[];
+        /**
+         * Number of color steps
+         */
+        steps?: number;
+        /**
+         * Min value for color mapping
+         */
+        min?: number;
+        /**
+         * Max value for color mapping
+         */
+        max?: number;
+    };
+    /**
+     * Cell configuration
+     */
+    cellConfig?: {
+        /**
+         * Cell width
+         */
+        width?: number;
+        /**
+         * Cell height
+         */
+        height?: number;
+        /**
+         * Spacing between cells
+         */
+        spacing?: number;
+        /**
+         * Border radius for cells
+         */
+        borderRadius?: number;
+        /**
+         * Whether to show cell labels
+         */
+        showLabels?: boolean;
+    };
+    /**
+     * Whether to show color legend
+     */
+    showColorLegend?: boolean;
+    /**
+     * Whether to show grid lines
+     */
+    showGrid?: boolean;
+}
+declare const HeatmapChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<HeatmapChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface AxisConfig {
+    /**
+     * Axis ID
+     */
+    id: string;
+    /**
+     * Axis position
+     */
+    position: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Axis label
+     */
+    label?: string;
+    /**
+     * Axis color
+     */
+    color?: string;
+    /**
+     * Min value
+     */
+    min?: number;
+    /**
+     * Max value
+     */
+    max?: number;
+    /**
+     * Number format
+     */
+    format?: (value: number) => string;
+    /**
+     * Grid lines
+     */
+    showGrid?: boolean;
+    /**
+     * Tick count
+     */
+    tickCount?: number;
+}
+interface MultiAxisDataset extends ChartDataset$1 {
+    /**
+     * Y-axis ID this dataset should use
+     */
+    yAxisId?: string;
+    /**
+     * X-axis ID this dataset should use
+     */
+    xAxisId?: string;
+}
+interface MultiAxisChartProps extends Omit<ChartProps$1, 'type'> {
+    /**
+     * Multi-axis chart datasets
+     */
+    datasets: MultiAxisDataset[];
+    /**
+     * Y-axis configurations
+     */
+    yAxes?: AxisConfig[];
+    /**
+     * X-axis configurations
+     */
+    xAxes?: AxisConfig[];
+    /**
+     * Multi-axis chart specific options
+     */
+    multiAxisOptions?: {
+        /**
+         * Whether to show legend
+         */
+        showLegend?: boolean;
+        /**
+         * Legend position
+         */
+        legendPosition?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+         * Whether to synchronize axis ranges
+         */
+        syncAxes?: boolean;
+        /**
+         * Padding between axes
+         */
+        axisPadding?: number;
+        /**
+         * Whether to show tooltips
+         */
+        showTooltips?: boolean;
+        /**
+         * Tooltip position
+         */
+        tooltipPosition?: 'auto' | 'nearest' | 'average';
+        /**
+         * Interpolation method for line charts
+         */
+        interpolation?: 'linear' | 'step' | 'natural' | 'monotone';
+        /**
+         * Whether to show area under lines
+         */
+        showArea?: boolean;
+        /**
+         * Area opacity (0-1)
+         */
+        areaOpacity?: number;
+        /**
+         * Whether to show data points
+         */
+        showDataPoints?: boolean;
+        /**
+         * Data point radius
+         */
+        pointRadius?: number;
+        /**
+         * Whether to connect points across null values
+         */
+        spanGaps?: boolean;
+    };
+}
+declare const MultiAxisChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<MultiAxisChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface RadarChartProps extends Omit<ChartProps$1, 'type'> {
+    /**
+     * Radar chart specific options
+     */
+    radarOptions?: {
+        /**
+         * Number of grid levels
+         */
+        gridLevels?: number;
+        /**
+         * Whether to show grid lines
+         */
+        showGrid?: boolean;
+        /**
+         * Whether to show axis labels
+         */
+        showAxisLabels?: boolean;
+        /**
+         * Whether to fill the area
+         */
+        fillArea?: boolean;
+        /**
+         * Fill opacity (0-1)
+         */
+        fillOpacity?: number;
+        /**
+         * Whether to show data points
+         */
+        showDataPoints?: boolean;
+        /**
+         * Point radius
+         */
+        pointRadius?: number;
+        /**
+         * Line width
+         */
+        lineWidth?: number;
+        /**
+         * Whether to use smooth curves
+         */
+        smooth?: boolean;
+        /**
+         * Scale type
+         */
+        scaleType?: 'linear' | 'logarithmic';
+        /**
+         * Minimum scale value
+         */
+        scaleMin?: number;
+        /**
+         * Maximum scale value
+         */
+        scaleMax?: number;
+    };
+}
+declare const RadarChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<RadarChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface ScatterChartProps extends Omit<ChartProps, 'type'> {
+    /**
+     * Scatter chart specific options
+     */
+    scatterOptions?: {
+        /**
+         * Point radius
+         */
+        pointRadius?: number;
+        /**
+         * Whether to show point labels
+         */
+        showLabels?: boolean;
+        /**
+         * Enable hover effects
+         */
+        enableHoverEffects?: boolean;
+    };
+}
+declare const ScatterChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<ScatterChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface TreemapDataPoint {
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+    parent?: string;
+    children?: TreemapDataPoint[];
+    metadata?: Record<string, any>;
+}
+interface TreemapNode {
+    id: string;
+    label: string;
+    value: number;
+    color: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+    parent?: TreemapNode;
+    children: TreemapNode[];
+    originalData: TreemapDataPoint;
+}
+interface TreemapChartProps extends Omit<ChartProps$1, 'type' | 'datasets'> {
+    /**
+     * Treemap data
+     */
+    data: TreemapDataPoint[];
+    /**
+     * Treemap algorithm
+     */
+    algorithm?: 'squarified' | 'slice-dice' | 'binary';
+    /**
+     * Color configuration
+     */
+    colorConfig?: {
+        /**
+         * Color scheme
+         */
+        scheme: 'category' | 'value' | 'depth' | 'custom';
+        /**
+         * Color palette
+         */
+        palette?: string[];
+        /**
+         * Whether to use gradients
+         */
+        useGradients?: boolean;
+    };
+    /**
+     * Label configuration
+     */
+    labelConfig?: {
+        /**
+         * Whether to show labels
+         */
+        showLabels?: boolean;
+        /**
+         * Minimum size for showing labels
+         */
+        minSize?: number;
+        /**
+         * Font size
+         */
+        fontSize?: number;
+        /**
+         * Text color
+         */
+        textColor?: string;
+    };
+    /**
+     * Interaction configuration
+     */
+    interactionConfig?: {
+        /**
+         * Whether to enable tooltips
+         */
+        enableTooltips?: boolean;
+        /**
+         * Whether to enable zoom
+         */
+        enableZoom?: boolean;
+        /**
+         * Whether to enable selection
+         */
+        enableSelection?: boolean;
+    };
+}
+declare const TreemapChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<TreemapChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface WaterfallDataPoint {
+    label: string;
+    value: number;
+    type?: 'positive' | 'negative' | 'total' | 'subtotal';
+    color?: string;
+    isConnector?: boolean;
+}
+interface WaterfallChartProps extends Omit<ChartProps$1, 'type' | 'datasets'> {
+    /**
+     * Waterfall chart data
+     */
+    waterfallData: WaterfallDataPoint[];
+    /**
+     * Waterfall chart specific options
+     */
+    waterfallOptions?: {
+        /**
+         * Whether to show connecting lines
+         */
+        showConnectors?: boolean;
+        /**
+         * Connector line color
+         */
+        connectorColor?: string;
+        /**
+         * Connector line style
+         */
+        connectorStyle?: 'solid' | 'dashed' | 'dotted';
+        /**
+         * Whether to show values on bars
+         */
+        showValues?: boolean;
+        /**
+         * Value position on bars
+         */
+        valuePosition?: 'top' | 'center' | 'bottom';
+        /**
+         * Colors for different bar types
+         */
+        colors?: {
+            positive?: string;
+            negative?: string;
+            total?: string;
+            subtotal?: string;
+        };
+        /**
+         * Bar width ratio (0-1)
+         */
+        barWidth?: number;
+        /**
+         * Whether to show cumulative line
+         */
+        showCumulativeLine?: boolean;
+        /**
+         * Cumulative line color
+         */
+        cumulativeLineColor?: string;
+        /**
+         * Whether to animate bars
+         */
+        animate?: boolean;
+        /**
+         * Animation duration in milliseconds
+         */
+        animationDuration?: number;
+        /**
+         * Animation delay between bars
+         */
+        animationDelay?: number;
+        /**
+         * Value formatter function
+         */
+        valueFormatter?: (value: number) => string;
+        /**
+         * Whether to show baseline at zero
+         */
+        showBaseline?: boolean;
+        /**
+         * Baseline color
+         */
+        baselineColor?: string;
+    };
+}
+declare const WaterfallChart: react.MemoExoticComponent<react.ForwardRefExoticComponent<WaterfallChartProps & react.RefAttributes<HTMLDivElement>>>;
+
+export { AnimatedChart, AreaChart, BarChart, BubbleChart, CandlestickChart, Chart, ChartRenderer, DonutChart, FunnelChart, GaugeChart, HeatmapChart, LineChart, MultiAxisChart, PieChart, RadarChart, ScatterChart, TreemapChart, WaterfallChart };
+export type { AreaChartProps, BarChartProps, BubbleChartProps, BubbleDataPoint, CandlestickChartProps, CandlestickDataPoint, ChartProps$1 as ChartProps, DonutChartProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, HeatmapChartProps, HeatmapDataPoint, LineChartProps, MultiAxisChartProps, PieChartProps, RadarChartProps, ScatterChartProps, ScatterDataPoint, TreemapChartProps, TreemapDataPoint, TreemapNode, WaterfallChartProps, WaterfallDataPoint };