flikkui 0.1.0-beta.11

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

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

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

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

package/dist/components/charts/shared/ChartCrosshair/ChartCrosshair.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.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.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> | React.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/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/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.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;
+}

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

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

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

@@ -0,0 +1,3 @@
+export { ChartLegend } from './ChartLegend';
+export { ChartLegendContent } from './ChartLegendContent';
+export type { ChartLegendProps, ChartLegendContentProps } from './ChartLegend.types';

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ChartMarkerProps } from "./ChartMarker.types";
+/**
+ * ChartMarker component for rendering circular data point markers in charts
+ * Supports hover scaling with React state for reliable SVG interactions
+ */
+export declare const ChartMarker: React.FC<ChartMarkerProps>;

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

@@ -0,0 +1,6 @@
+import type { ChartMarkerTheme } from './ChartMarker.types';
+/**
+ * Default theme for ChartMarker component
+ * Provides consistent styling for chart data point markers
+ */
+export declare const chartMarkerTheme: ChartMarkerTheme;

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

@@ -0,0 +1,21 @@
+export interface ChartMarkerProps {
+    /** X coordinate of the marker center */
+    cx: number;
+    /** Y coordinate of the marker center */
+    cy: number;
+    /** Radius of the marker */
+    radius: number;
+    /** Color class for the marker stroke */
+    colorClass?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom stroke width */
+    strokeWidth?: number;
+    /** Fill color override */
+    fillColor?: string;
+    /** Stroke color override */
+    strokeColor?: string;
+}
+export interface ChartMarkerTheme {
+    baseStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { ChartMarker } from './ChartMarker';
+export type { ChartMarkerProps, ChartMarkerTheme } from './ChartMarker.types';
+export { chartMarkerTheme } from './ChartMarker.theme';

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ChartTextProps } from "./ChartText.types";
+/**
+ * ChartText component for consistent typography in charts
+ * Uses fixed Tailwind styling for consistency
+ */
+export declare const ChartText: React.FC<ChartTextProps>;

package/dist/components/charts/shared/ChartText/ChartText.theme.d.ts

@@ -0,0 +1,6 @@
+import type { ChartTextTheme } from './ChartText.types';
+/**
+ * Default theme for ChartText component
+ * Uses fixed Tailwind styling for consistency across charts
+ */
+export declare const chartTextTheme: ChartTextTheme;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ChartTextProps extends React.SVGProps<SVGTextElement> {
+    /** Text content to display */
+    children: React.ReactNode;
+    /** Text anchor alignment */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Dominant baseline alignment */
+    dominantBaseline?: 'auto' | 'middle' | 'hanging' | 'central' | 'text-before-edge' | 'text-after-edge';
+    /** Maximum width before truncation */
+    maxWidth?: number;
+    /** Whether to truncate text with ellipsis */
+    truncate?: boolean;
+    /** Rotation angle in degrees */
+    rotation?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface ChartTextTheme {
+    /** Base styles for chart text (includes default size, weight, color) */
+    baseStyle: string;
+}

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

@@ -0,0 +1,2 @@
+export { ChartText } from './ChartText';
+export type { ChartTextProps, ChartTextTheme } from './ChartText.types';

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

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

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

@@ -0,0 +1,7 @@
+import { ChartTooltipTheme } from "./ChartTooltip.types";
+/**
+ * ChartTooltip Theme Configuration
+ *
+ * Follows the established theming pattern with CSS variables
+ */
+export declare const chartTooltipTheme: ChartTooltipTheme;

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

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+/**
+ * ChartTooltip theme configuration
+ */
+export interface ChartTooltipTheme {
+    /** Base tooltip container styles */
+    baseStyle?: string;
+    /** Content wrapper styles */
+    contentStyle?: string;
+    /** Multi-series container styles */
+    multiSeriesContainerStyle?: string;
+    /** Category label styles */
+    categoryStyle?: string;
+    /** Series items container styles */
+    seriesContainerStyle?: string;
+    /** Individual series row styles */
+    seriesRowStyle?: string;
+    /** Color indicator dot styles */
+    dotStyle?: string;
+    /** Series label text styles */
+    labelStyle?: string;
+    /** Series value text styles */
+    valueStyle?: string;
+}
+export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    content?: ReactNode;
+    cursor?: boolean | object;
+    wrapperStyle?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+    itemStyle?: React.CSSProperties;
+    active?: boolean;
+    payload?: any[];
+    label?: string | number;
+    className?: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Theme overrides */
+    theme?: ChartTooltipTheme;
+}
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    payload?: any[];
+    label?: string | number;
+    labelKey?: string;
+    nameKey?: string;
+    indicator?: 'dot' | 'line' | 'dashed';
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    className?: string;
+}
+export interface MultiSeriesData {
+    category: string;
+    series: Array<{
+        key: string;
+        label?: string;
+        value: number | string;
+        color?: string;
+    }>;
+    total?: number | string;
+}
+export interface MultiSeriesChartTooltipProps extends Omit<ChartTooltipProps, 'content'> {
+    content?: ReactNode | MultiSeriesData;
+    chartType?: 'line' | 'bar' | 'area' | 'scatter';
+    containerClassName?: string;
+    categoryClassName?: string;
+    seriesContainerClassName?: string;
+    seriesRowClassName?: string;
+    dotClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartTooltipContentProps } from './ChartTooltip.types';
+export declare function ChartTooltipContent({ active, payload, label, labelKey, nameKey, indicator, hideLabel, hideIndicator, className, }: ChartTooltipContentProps): React.JSX.Element | null;

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

@@ -0,0 +1,4 @@
+export { ChartTooltip } from './ChartTooltip';
+export { ChartTooltipContent } from './ChartTooltipContent';
+export { chartTooltipTheme } from './ChartTooltip.theme';
+export type { ChartTooltipProps, ChartTooltipContentProps, ChartTooltipTheme, MultiSeriesData } from './ChartTooltip.types';

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { LineRendererProps } from "./LineRenderer.types";
+/**
+ * LineRenderer Component
+ *
+ * Pure line rendering component that can be used standalone or within ChartContainer.
+ * Handles line paths, data points, and crosshair rendering.
+ */
+export declare const LineRenderer: React.FC<LineRendererProps>;

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

@@ -0,0 +1,83 @@
+import type { ChartDataPoint, ChartConfig, CurveType } from '../../types/chart.types';
+import type { ChartScales } from '../../hooks/useChartScales';
+import type { ChartDimensions, ChartMargins } from '../ChartContainer';
+export interface LineRendererProps {
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart configuration
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales (from useChartScales or ChartContainer)
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions: ChartDimensions;
+    /**
+     * Chart margins
+     */
+    margin: ChartMargins;
+    /**
+     * Line stroke width
+     */
+    strokeWidth?: number;
+    /**
+     * Whether to use curved lines
+     */
+    curved?: boolean;
+    /**
+     * Curve type
+     */
+    curveType?: CurveType;
+    /**
+     * Whether to show data point dots
+     */
+    showDots?: boolean;
+    /**
+     * Dot radius
+     */
+    radius?: number;
+    /**
+     * Hovered point info
+     */
+    hoveredPoint?: {
+        index: number;
+        key: string;
+    } | null;
+    /**
+     * Set hovered point
+     */
+    onHoverPoint?: (point: {
+        index: number;
+        key: string;
+    } | null) => void;
+    /**
+     * Mouse enter handler for tooltip
+     */
+    onMouseEnter?: (e: React.MouseEvent, content: any, coordinates: any) => void;
+    /**
+     * Mouse move handler for tooltip
+     */
+    onMouseMove?: (e: React.MouseEvent, coordinates: any) => void;
+    /**
+     * Mouse leave handler for tooltip
+     */
+    onMouseLeave?: () => void;
+    /**
+     * Focused element index (keyboard navigation)
+     */
+    focusedElementIndex?: number;
+    /**
+     * Whether in keyboard navigation mode
+     */
+    isKeyboardMode?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}

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

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

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

@@ -0,0 +1,14 @@
+export { ChartErrorBoundary, useChartErrorHandler } from './ChartErrorBoundary';
+export { ChartCrosshair } from './ChartCrosshair';
+export { ChartMarker } from './ChartMarker';
+export { HorizontalGrid } from './ChartGrid';
+export { ChartText } from './ChartText';
+export { XAxis, YAxis } from './ChartAxis';
+export { ChartTooltip } from './ChartTooltip';
+export { ChartContainer, useChartContext } from './ChartContainer';
+export type { ChartContainerProps, ChartDimensions, ChartMargins } from './ChartContainer';
+export { BarRenderer } from './BarRenderer';
+export type { BarRendererProps } from './BarRenderer';
+export { BAR_ANIMATION_TIMING } from './BarRenderer';
+export { LineRenderer } from './LineRenderer';
+export type { LineRendererProps } from './LineRenderer';

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

@@ -0,0 +1,6 @@
+import { ChartThemeConfig } from '../types/chart.types';
+/**
+ * Default theme for Chart components
+ * Uses Tailwind classes with CSS variables for consistency with the design system
+ */
+export declare const chartTheme: ChartThemeConfig;