flikkui 0.1.0-beta.11

package/dist/components/charts/DonutChart/donut-utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Shared utility functions for DonutChart components
+ */
+/**
+ * Clamps a value between a minimum and maximum
+ */
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Converts polar coordinates to cartesian coordinates
+ */
+export declare const polarToCartesian: (centerX: number, centerY: number, radius: number, angleInDegrees: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Creates an SVG path for a ring segment (donut segment)
+ */
+export declare const describeRingSegmentPath: (centerX: number, centerY: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number) => string;
+/**
+ * Creates an SVG path for an arc (no inner radius)
+ * Draws counter-clockwise (for backwards compatibility)
+ */
+export declare const describeArcPath: (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => string;
+/**
+ * Creates an SVG path for an arc that draws clockwise
+ * Used for stroke-dashoffset animation that reveals clockwise
+ */
+export declare const describeArcPathClockwise: (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => string;
+/**
+ * Converts a hex color to RGB components
+ */
+export declare const hexToRgb: (value: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Interpolates between two hex colors
+ */
+export declare const interpolateHexColor: (from: string, to: string, factor: number) => string;

package/dist/components/charts/DonutChart/index.d.ts

@@ -0,0 +1,9 @@
+export { DonutChart } from './DonutChart';
+export type { DonutChartProps, DonutChartColors, DonutChartThemeOverrides, DonutChartTheme, DonutChartAnimationConfig } from './DonutChart.types';
+export { donutChartTheme, donutChartColorSchemes, donutChartSizes, donutChartThickness, createColorScheme, getColorScheme } from './DonutChart.theme';
+export type { DonutChartColorScheme, DonutChartSize, DonutChartThickness } from './DonutChart.theme';
+export { MultiSegmentDonutChart } from './MultiSegmentDonutChart';
+export type { MultiSegmentDonutChartProps, DonutSegment, MultiSegmentDonutChartThemeOverrides, MultiSegmentDonutChartTheme } from './MultiSegmentDonutChart.types';
+export { multiSegmentDonutChartTheme, multiSegmentColorPalettes, multiSegmentDonutChartSizes, multiSegmentDonutChartThickness, getColorPalette } from './MultiSegmentDonutChart.theme';
+export type { MultiSegmentColorPalette, MultiSegmentDonutChartSize, MultiSegmentDonutChartThickness } from './MultiSegmentDonutChart.theme';
+export { clamp, polarToCartesian, describeRingSegmentPath, describeArcPath, hexToRgb, interpolateHexColor } from './donut-utils';

package/dist/components/charts/FunnelChart/FunnelChart.animations.d.ts

@@ -0,0 +1,35 @@
+import type { Variants, Transition } from 'motion/react';
+/**
+ * Animation variants for FunnelChart segments
+ */
+export declare const segmentVariants: Variants;
+/**
+ * Animation variants for vertical orientation segments
+ */
+export declare const verticalSegmentVariants: Variants;
+/**
+ * Animation variants for labels
+ */
+export declare const labelVariants: Variants;
+/**
+ * Animation variants for conversion badges
+ */
+export declare const badgeVariants: Variants;
+/**
+ * Animation variants for summary box
+ */
+export declare const summaryVariants: Variants;
+/**
+ * Hover animation for segments
+ */
+export declare const hoverTransition: Transition;
+/**
+ * Default animation settings
+ */
+export declare const funnelAnimationDefaults: {
+    staggerDelay: number;
+    segmentDuration: number;
+    labelDelay: number;
+    badgeDelay: number;
+    summaryDelay: number;
+};

package/dist/components/charts/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { FunnelChartProps } from './FunnelChart.types';
+/**
+ * FunnelChart Component
+ *
+ * Displays conversion funnel data with trapezoid shapes showing progressive dropoff.
+ * Features animations, keyboard navigation, and accessibility support.
+ */
+export declare const FunnelChart: React.FC<FunnelChartProps>;

package/dist/components/charts/FunnelChart/FunnelChart.theme.d.ts

@@ -0,0 +1,2 @@
+import { FunnelChartThemeOverrides } from './FunnelChart.types';
+export declare const funnelChartTheme: FunnelChartThemeOverrides;

package/dist/components/charts/FunnelChart/FunnelChart.types.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+/**
+ * Data point for FunnelChart
+ */
+export interface FunnelChartDataPoint {
+    /** Stage name */
+    name: string;
+    /** Value at this stage */
+    value: number;
+    /** Optional custom color */
+    color?: string;
+}
+/**
+ * Theme overrides for FunnelChart
+ */
+export interface FunnelChartThemeOverrides {
+    baseStyle?: string;
+    colors?: string[];
+}
+/**
+ * Point helper for curve calculations
+ */
+export interface FunnelChartPoint {
+    x: number;
+    y: number;
+}
+/**
+ * Tooltip data for funnel stage
+ */
+export interface FunnelTooltipData {
+    stage: FunnelChartDataPoint;
+    index: number;
+    percentage: number;
+    dropoff: number;
+    conversionRate: number;
+    usersLost: number;
+}
+/**
+ * Label position options
+ */
+export type FunnelLabelPosition = 'top' | 'bottom' | 'inside' | 'tooltip-only';
+/**
+ * Summary box position options
+ */
+export type FunnelSummaryPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
+/**
+ * FunnelChart props
+ */
+export interface FunnelChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Funnel stages data */
+    data: FunnelChartDataPoint[];
+    /** Height of the chart */
+    height?: number | string;
+    /** Width of the chart */
+    width?: number | string;
+    /** Whether to show percentages */
+    showPercentages?: boolean;
+    /** Whether to show values */
+    showValues?: boolean;
+    /** Whether to show stage labels (name) */
+    showLabels?: boolean;
+    /** Whether to show dropoff percentages between stages */
+    showDropoff?: boolean;
+    /** Whether to show conversion rates between stages */
+    showConversionRate?: boolean;
+    /** Whether to show summary statistics */
+    showSummary?: boolean;
+    /** Custom colors */
+    colors?: string[];
+    /** Orientation of the funnel */
+    orientation?: 'vertical' | 'horizontal';
+    /** Whether to curve segment edges (horizontal only) */
+    curved?: boolean;
+    /** Whether to use gradient fills */
+    useGradient?: boolean;
+    /** Fill opacity when gradients are disabled or for gradient stops */
+    fillOpacity?: number;
+    /** Theme overrides */
+    theme?: FunnelChartThemeOverrides;
+    /** Additional className */
+    className?: string;
+    /** Callback when a stage is clicked */
+    onStageClick?: (stage: FunnelChartDataPoint, index: number) => void;
+    /** Format function for values */
+    formatValue?: (value: number) => string;
+    /** Position of stage labels */
+    labelPosition?: FunnelLabelPosition;
+    /** Position of summary statistics box */
+    summaryPosition?: FunnelSummaryPosition;
+    /** Whether to animate on mount */
+    animate?: boolean;
+    /** Callback when a stage receives keyboard focus */
+    onStageFocus?: (stage: FunnelChartDataPoint, index: number) => void;
+}
+/**
+ * Internal stage data with computed values
+ */
+export interface ComputedFunnelStage extends FunnelChartDataPoint {
+    percentage: number;
+    dropoff: number;
+    conversionRate: number;
+    usersLost: number;
+    opacity: number;
+    gradientId: string;
+}

package/dist/components/charts/FunnelChart/index.d.ts

@@ -0,0 +1,4 @@
+export { FunnelChart } from './FunnelChart';
+export type { FunnelChartProps, FunnelChartDataPoint, FunnelChartThemeOverrides, FunnelLabelPosition, FunnelSummaryPosition, ComputedFunnelStage, } from './FunnelChart.types';
+export { funnelChartTheme } from './FunnelChart.theme';
+export { segmentVariants, verticalSegmentVariants, labelVariants, badgeVariants, summaryVariants, funnelAnimationDefaults, } from './FunnelChart.animations';

package/dist/components/charts/Heatmap/Heatmap.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { HeatmapProps } from './Heatmap.types';
+/**
+ * Heatmap component for visualizing data in a grid format with color intensity
+ * Supports weekly, monthly, hourly views and custom data structures
+ */
+export declare const Heatmap: React.FC<HeatmapProps>;

package/dist/components/charts/Heatmap/Heatmap.theme.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Heatmap theme configuration
+ * Uses production-ready CSS variables from global.scss
+ */
+export interface HeatmapTheme {
+    containerStyle: string;
+    gridStyle: string;
+    cellBaseStyle: string;
+    axisLabelStyle: string;
+    legendStyle: string;
+}
+export declare const heatmapTheme: HeatmapTheme;

package/dist/components/charts/Heatmap/Heatmap.types.d.ts

@@ -0,0 +1,134 @@
+import { ReactNode } from 'react';
+import { BaseChartProps, ChartConfig } from '../types/chart.types';
+/**
+ * Semantic color options for the heatmap
+ */
+export type SemanticColor = 'primary' | 'success' | 'warning' | 'danger';
+/**
+ * Heatmap data point structure
+ * @property {string | number} x - X-axis category (e.g., day, month, hour)
+ * @property {string | number} y - Y-axis category (e.g., week, year, metric)
+ * @property {number | null} value - Numeric value for color intensity
+ * @property {any} [key] - Additional data for tooltips
+ */
+export interface HeatmapDataPoint {
+    x: string | number;
+    y: string | number;
+    value: number | null;
+    [key: string]: any;
+}
+/**
+ * Heatmap cell props
+ */
+export interface HeatmapCellProps {
+    data: HeatmapDataPoint;
+    intensity: number;
+    minOpacity?: number;
+    color?: string;
+    className?: string;
+    onClick?: (data: HeatmapDataPoint) => void;
+    onHover?: (data: HeatmapDataPoint, event: React.MouseEvent) => void;
+    onMouseMove?: (data: HeatmapDataPoint, event: React.MouseEvent) => void;
+    onLeave?: () => void;
+    children?: ReactNode;
+}
+/**
+ * Color scale configuration
+ */
+export interface HeatmapColorScale {
+    /** Custom color steps from light to dark */
+    colors?: string[];
+    /** Number of color steps (default: 10) */
+    steps?: number;
+    /** Minimum opacity for null/zero values */
+    minOpacity?: number;
+}
+/**
+ * Heatmap layout configuration
+ */
+export interface HeatmapLayout {
+    /** Gap between cells */
+    gap?: number | string;
+}
+/**
+ * Heatmap axis configuration
+ */
+export interface HeatmapAxisConfig {
+    /** Show X-axis labels */
+    showXAxis?: boolean;
+    /** Show Y-axis labels */
+    showYAxis?: boolean;
+    /** X-axis label formatter */
+    xAxisFormatter?: (value: string | number, index: number) => string;
+    /** Y-axis label formatter */
+    yAxisFormatter?: (value: string | number, index: number) => string;
+    /** X-axis label rotation */
+    xAxisRotation?: number;
+    /** Y-axis label rotation */
+    yAxisRotation?: number;
+}
+/**
+ * Heatmap tooltip configuration
+ */
+export interface HeatmapTooltipConfig {
+    /** Show tooltip on hover */
+    enabled?: boolean;
+    /** Custom tooltip formatter */
+    formatter?: (data: HeatmapDataPoint) => ReactNode;
+    /** Tooltip delay in ms */
+    delay?: number;
+}
+/**
+ * Heatmap legend configuration
+ */
+export interface HeatmapLegendConfig {
+    /** Show legend */
+    enabled?: boolean;
+    /** Custom labels for min and max values */
+    labels?: {
+        min?: string;
+        max?: string;
+    };
+}
+/**
+ * Main Heatmap component props
+ */
+export interface HeatmapProps extends Omit<BaseChartProps, 'data' | 'config' | 'variant' | 'theme'> {
+    /** Heatmap data array - optional when using ChartContainer context */
+    data?: HeatmapDataPoint[];
+    /** Chart configuration - optional when using ChartContainer context */
+    config?: ChartConfig;
+    /** Semantic color for heatmap cells (primary, success, warning, danger) */
+    color?: SemanticColor;
+    /** Color scale configuration */
+    colorScale?: HeatmapColorScale;
+    /** Layout configuration */
+    layout?: HeatmapLayout;
+    /** Axis configuration */
+    axis?: HeatmapAxisConfig;
+    /** Tooltip configuration */
+    tooltip?: HeatmapTooltipConfig;
+    /** Legend configuration */
+    legend?: HeatmapLegendConfig;
+    /** Custom value range [min, max] - if not provided, will be calculated from data */
+    valueRange?: [number, number];
+    /** Cell click handler */
+    onCellClick?: (data: HeatmapDataPoint) => void;
+    /** Custom cell renderer */
+    cellRenderer?: (props: HeatmapCellProps) => ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Chart variant */
+    variant?: 'default' | 'minimal' | 'bordered';
+}
+/**
+ * Processed heatmap data with calculated values
+ */
+export interface ProcessedHeatmapData {
+    data: HeatmapDataPoint[];
+    xCategories: (string | number)[];
+    yCategories: (string | number)[];
+    valueRange: [number, number];
+    maxValue: number;
+    minValue: number;
+}

package/dist/components/charts/Heatmap/HeatmapCell.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { HeatmapCellProps } from './Heatmap.types';
+/**
+ * Individual heatmap cell component with hover animations and color intensity
+ */
+export declare const HeatmapCell: React.FC<HeatmapCellProps>;

package/dist/components/charts/Heatmap/HeatmapLegend.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface HeatmapLegendProps {
+    /** Base color key from chart config (e.g., 'value', 'activity') */
+    colorKey?: string;
+    /** Color to use for the gradient */
+    color?: string;
+    /** Minimum value for the legend */
+    minValue?: number;
+    /** Maximum value for the legend */
+    maxValue?: number;
+    /** Custom labels for min and max */
+    labels?: {
+        min?: string;
+        max?: string;
+    };
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const HeatmapLegend: React.FC<HeatmapLegendProps>;

package/dist/components/charts/Heatmap/index.d.ts

@@ -0,0 +1,7 @@
+export { Heatmap } from './Heatmap';
+export { HeatmapCell } from './HeatmapCell';
+export { HeatmapLegend } from './HeatmapLegend';
+export { heatmapTheme } from './Heatmap.theme';
+export type { HeatmapProps, HeatmapDataPoint, HeatmapCellProps, SemanticColor } from './Heatmap.types';
+export * from './Heatmap.types';
+export * from './utils/heatmapUtils';

package/dist/components/charts/Heatmap/utils/heatmapUtils.d.ts

@@ -0,0 +1,30 @@
+import type { HeatmapDataPoint, ProcessedHeatmapData } from '../Heatmap.types';
+/**
+ * Process raw heatmap data and calculate necessary values
+ */
+export declare function processHeatmapData(data: HeatmapDataPoint[], valueRange?: [number, number]): ProcessedHeatmapData;
+/**
+ * Calculate intensity (0-1) for a given value within the range
+ */
+export declare function calculateIntensity(value: number | null, minValue: number, maxValue: number): number;
+/**
+ * Create a complete grid matrix with all x,y combinations
+ * Fills missing data points with null values
+ */
+export declare function createGridMatrix(data: HeatmapDataPoint[], xCategories: (string | number)[], yCategories: (string | number)[]): HeatmapDataPoint[][];
+/**
+ * Generate default tooltip content for a data point
+ */
+export declare function getDefaultTooltipContent(data: HeatmapDataPoint): string;
+/**
+ * Format axis labels with common patterns
+ */
+export declare function formatAxisLabel(value: string | number, type?: 'day' | 'month' | 'hour' | 'date' | 'number' | 'default'): string;
+/**
+ * Calculate responsive cell size based on container dimensions
+ */
+export declare function calculateCellSize(containerWidth: number, containerHeight: number, xCount: number, yCount: number, gap?: number, minSize?: number, maxSize?: number): number;
+/**
+ * Generate sample heatmap data for testing/examples
+ */
+export declare function generateSampleData(type?: 'weekly' | 'monthly' | 'hourly'): HeatmapDataPoint[];

package/dist/components/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { LineChartProps } from "./LineChart.types";
+export declare const LineChart: React.FC<LineChartProps>;

package/dist/components/charts/LineChart/LineChart.types.d.ts

@@ -0,0 +1,33 @@
+import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
+export type SemanticColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export interface LineChartProps extends BaseChartProps, Omit<StandardChartDisplayProps, 'variant' | 'theme'> {
+    color?: SemanticColor;
+    dotRadius?: number;
+    radius?: number;
+    strokeWidth?: number;
+    curved?: boolean;
+    curveType?: 'linear' | 'monotone';
+    showDots?: boolean;
+}
+export declare const LINE_CHART_DEFAULTS: {
+    readonly color: undefined;
+    readonly dotRadius: 4;
+    readonly radius: 4;
+    readonly strokeWidth: 2;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly showDots: true;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly barRadius: 32;
+    readonly cellRadius: 4;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};

package/dist/components/charts/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from './LineChart';
+export type { LineChartProps } from './LineChart.types';

package/dist/components/charts/ScatterPlot/ScatterPlot.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ScatterPlotProps } from './ScatterPlot.types';
+/**
+ * ScatterPlot Component
+ *
+ * Displays correlation between two variables with optional bubble sizing.
+ * Now uses shared axis components with tick marks and value labels like other charts.
+ */
+export declare const ScatterPlot: React.FC<ScatterPlotProps>;

package/dist/components/charts/ScatterPlot/ScatterPlot.theme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ScatterPlot Theme - Uses CSS variables for production-ready styling
+ */
+export declare const scatterPlotTheme: {
+    containerStyle: string;
+    svgStyle: string;
+    emptyStateStyle: string;
+    gridLineStyle: string;
+    axisLineStyle: string;
+    axisLabelStyle: string;
+    dotStyle: string;
+    dotHoverStyle: string;
+    legendContainerStyle: string;
+    legendItemStyle: string;
+    legendDotStyle: string;
+    legendLabelStyle: string;
+    colors: string[];
+};
+/**
+ * Get fill color for category (supports both CSS variables and direct colors)
+ */
+export declare function getCategoryColor(colors: string[], categoryIndex: number): string;

package/dist/components/charts/ScatterPlot/ScatterPlot.types.d.ts

@@ -0,0 +1,71 @@
+import { StandardChartDisplayProps } from '../types/chart.types';
+/**
+ * Data point for ScatterPlot
+ */
+export interface ScatterPlotDataPoint {
+    /** X-axis value */
+    x: number;
+    /** Y-axis value */
+    y: number;
+    /** Optional size for bubble chart effect */
+    size?: number;
+    /** Optional label */
+    label?: string;
+    /** Optional category for coloring */
+    category?: string;
+}
+/**
+ * ScatterPlot props - extends standardized chart props
+ */
+export interface ScatterPlotProps extends StandardChartDisplayProps {
+    /** Data points */
+    data: ScatterPlotDataPoint[];
+    /** X-axis label */
+    xLabel?: string;
+    /** Y-axis label */
+    yLabel?: string;
+    /** Point size (if not using data.size) */
+    dotRadius?: number;
+    pointSize?: number;
+    /** Custom colors for categories (using CSS variables) */
+    colors?: string[];
+    /** Enable tooltip on hover */
+    showTooltip?: boolean;
+    /** Accessibility props */
+    title?: string;
+    description?: string;
+    enableKeyboardNavigation?: boolean;
+    /** Additional className */
+    className?: string;
+    /** className overrides for chart elements (shadcn approach) */
+    svgClassName?: string;
+    dotClassName?: string;
+    gridClassName?: string;
+    axisClassName?: string;
+}
+/**
+ * Default values using centralized defaults
+ */
+export declare const SCATTER_PLOT_DEFAULTS: {
+    readonly dotRadius: 4;
+    readonly pointSize: 4;
+    readonly showTooltip: true;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly barRadius: 32;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly showDots: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};

package/dist/components/charts/ScatterPlot/index.d.ts

@@ -0,0 +1,3 @@
+export { ScatterPlot } from './ScatterPlot';
+export type { ScatterPlotProps, ScatterPlotDataPoint } from './ScatterPlot.types';
+export { scatterPlotTheme } from './ScatterPlot.theme';

package/dist/components/charts/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useChartTheme } from './useChartTheme';
+export { useChartAccessibility } from './useChartAccessibility';
+export { useTooltipPosition } from './useTooltipPosition';
+export { useChartValidation, useChartDataValidation, useChartValidationProduction } from './useChartValidation';
+export { useChartScales } from './useChartScales';
+export type { UseChartScalesOptions, UseChartScalesReturn, ChartScales } from './useChartScales';

package/dist/components/charts/hooks/useChartAccessibility.d.ts

@@ -0,0 +1,39 @@
+import { ChartDataPoint, ChartConfig } from '../types/chart.types';
+export interface UseChartAccessibilityOptions {
+    /** Chart type for ARIA descriptions */
+    chartType: 'bar' | 'line' | 'area' | 'heatmap' | 'combo' | 'scatter';
+    /** Chart data for generating descriptions */
+    data: ChartDataPoint[];
+    /** Chart configuration */
+    config: ChartConfig;
+    /** Custom chart title */
+    title?: string;
+    /** Custom chart description */
+    description?: string;
+    /** Whether keyboard navigation is enabled */
+    enableKeyboardNavigation?: boolean;
+}
+export interface ChartAccessibilityProps {
+    /** ARIA role for the chart container */
+    role: string;
+    /** ARIA label for the chart */
+    'aria-label': string;
+    /** ARIA description ID */
+    'aria-describedby'?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex: number;
+    /** Keyboard event handlers */
+    onKeyDown: (event: React.KeyboardEvent) => void;
+}
+export declare function useChartAccessibility({ chartType, data, config, title, description, enableKeyboardNavigation, }: UseChartAccessibilityOptions): {
+    chartAccessibilityProps: ChartAccessibilityProps;
+    descriptionProps: {
+        id: string;
+        className: string;
+        children: string;
+    } | null;
+    focusedElementIndex: number;
+    isKeyboardMode: boolean;
+    handleMouseInteraction: () => void;
+    generateChartSummary: () => string;
+};