@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,92 @@
+import type { ChartDataPoint, ChartConfig, CurveType } from '../../types/chart.types';
+import type { ChartScales } from '../../hooks/useChartScales';
+import type { ChartDimensions, ChartMargins } from '../ChartContainer';
+import type { MultiSeriesData } from '../ChartTooltip';
+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: MultiSeriesData, coordinates: {
+        x: number;
+        y: number;
+        dimensions: ChartDimensions;
+    }) => void;
+    /**
+     * Mouse move handler for tooltip
+     */
+    onMouseMove?: (e: React.MouseEvent, coordinates: {
+        x: number;
+        y: number;
+        dimensions: ChartDimensions;
+    }) => 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;

package/dist/components/charts/theme/chart.theme.js

@@ -0,0 +1,73 @@
+/**
+ * Default theme for Chart components
+ * Uses Tailwind classes with CSS variables for consistency with the design system
+ */
+const chartTheme = {
+    baseStyle: {
+        colors: {
+            // Default series colors using your design system colors
+            series: [
+                "fill-[var(--color-primary)] stroke-[var(--color-primary)]", // Primary
+                "fill-[var(--color-warning)] stroke-[var(--color-warning)]", // Warning/Orange
+                "fill-[var(--color-success)] stroke-[var(--color-success)]", // Success/Green
+                "fill-[var(--color-danger)] stroke-[var(--color-danger)]", // Danger/Red
+                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]", // Primary lighter
+                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]", // Warning lighter
+                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]", // Success lighter
+                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]", // Danger lighter
+            ],
+            // Chart infrastructure colors
+            grid: "stroke-[var(--color-border)]",
+            axis: "stroke-[var(--color-border)]",
+            text: "fill-[var(--color-text-secondary)]",
+            background: "fill-[var(--color-background)]",
+            hover: "fill-[var(--color-background-secondary)]",
+            disabled: "fill-[var(--color-background-disabled)]",
+        },
+        opacity: {
+            default: "opacity-100",
+            hover: "opacity-80",
+            disabled: "opacity-50",
+        },
+        transitions: {
+            default: "transition-all duration-200",
+            hover: "transition-all duration-150",
+        },
+    },
+    variants: {
+        default: {
+            colors: [
+                "fill-[var(--color-primary)] stroke-[var(--color-primary)]",
+                "fill-[var(--color-warning)] stroke-[var(--color-warning)]",
+                "fill-[var(--color-success)] stroke-[var(--color-success)]",
+                "fill-[var(--color-danger)] stroke-[var(--color-danger)]",
+                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]",
+                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]",
+                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]",
+                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]",
+            ],
+        },
+        minimal: {
+            colors: [
+                "fill-[var(--color-neutral-600)] stroke-[var(--color-neutral-600)]",
+                "fill-[var(--color-neutral-500)] stroke-[var(--color-neutral-500)]",
+                "fill-[var(--color-neutral-400)] stroke-[var(--color-neutral-400)]",
+                "fill-[var(--color-neutral-300)] stroke-[var(--color-neutral-300)]",
+                "fill-[var(--color-neutral-700)] stroke-[var(--color-neutral-700)]",
+                "fill-[var(--color-neutral-800)] stroke-[var(--color-neutral-800)]",
+            ],
+        },
+        gradient: {
+            colors: [
+                "fill-[var(--color-primary)] stroke-[var(--color-primary)]",
+                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]",
+                "fill-[var(--color-primary-500)] stroke-[var(--color-primary-500)]",
+                "fill-[var(--color-primary-600)] stroke-[var(--color-primary-600)]",
+                "fill-[var(--color-primary-700)] stroke-[var(--color-primary-700)]",
+                "fill-[var(--color-primary-800)] stroke-[var(--color-primary-800)]",
+            ],
+        },
+    },
+};
+
+export { chartTheme };

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

@@ -0,0 +1,176 @@
+import { ReactNode } from 'react';
+export interface ChartDataPoint {
+    [key: string]: string | number | null | undefined;
+}
+export interface ChartConfig {
+    [key: string]: {
+        label?: string;
+        color?: string;
+        theme?: string;
+        type?: 'bar' | 'line' | 'area';
+    };
+}
+export type ChartVariant = 'default' | 'minimal' | 'gradient';
+export type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+export interface ChartThemeOverrides {
+    baseStyle?: {
+        colors?: Partial<{
+            series: string[];
+            grid: string;
+            axis: string;
+            text: string;
+            background: string;
+            hover: string;
+            disabled: string;
+        }>;
+        opacity?: Partial<{
+            default: string;
+            hover: string;
+            disabled: string;
+        }>;
+        transitions?: Partial<{
+            default: string;
+            hover: string;
+        }>;
+    };
+    variants?: Partial<Record<ChartVariant, {
+        colors: string[];
+    }>>;
+}
+export declare const CHART_DEFAULTS: {
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly barRadius: 32;
+    readonly dotRadius: 4;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly curved: true;
+    readonly curveType: CurveType;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly showDots: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};
+export interface BaseChartProps {
+    data: ChartDataPoint[];
+    config: ChartConfig;
+    className?: string;
+    children?: ReactNode;
+    title?: string;
+    description?: string;
+    enableKeyboardNavigation?: boolean;
+}
+export interface StandardChartDisplayProps {
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    variant?: ChartVariant;
+    theme?: ChartThemeOverrides;
+}
+export interface StandardVisualProps {
+    barRadius?: number;
+    dotRadius?: number;
+    cellRadius?: number;
+    radius?: number;
+    strokeWidth?: number;
+    gap?: number;
+    curved?: boolean;
+    curveType?: CurveType;
+    showDots?: boolean;
+    fillOpacity?: number;
+    showStroke?: boolean;
+    stacked?: boolean;
+}
+export interface BarChartSpecificProps {
+    orientation?: 'vertical' | 'horizontal';
+    categoryGap?: number;
+}
+export interface StandardAxisConfig {
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    tickFormatter?: (value: number) => string;
+    labelFormatter?: (item: ChartDataPoint, index: number) => string;
+}
+export type LineChartData = ChartDataPoint;
+export type AreaChartData = ChartDataPoint;
+export type BarChartData = ChartDataPoint;
+export interface ChartContainerProps extends Omit<BaseChartProps, 'data' | 'config'> {
+    data?: ChartDataPoint[];
+    config?: ChartConfig;
+    minHeight?: string | number;
+    width?: string | number;
+    height?: string | number;
+}
+export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ChartAnimationConfig {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+}
+export interface ChartThemeConfig {
+    baseStyle: {
+        colors: {
+            series: string[];
+            grid: string;
+            axis: string;
+            text: string;
+            background: string;
+            hover: string;
+            disabled: string;
+        };
+        opacity: {
+            default: string;
+            hover: string;
+            disabled: string;
+        };
+        transitions: {
+            default: string;
+            hover: string;
+        };
+    };
+    variants: {
+        default: {
+            colors: string[];
+        };
+        minimal: {
+            colors: string[];
+        };
+        gradient: {
+            colors: string[];
+        };
+    };
+}
+export interface ChartTheme {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        muted: string;
+        background: string;
+        foreground: string;
+        border: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}

package/dist/components/charts/types/chart.types.js

@@ -0,0 +1,31 @@
+// Standardized Chart Defaults
+const CHART_DEFAULTS = {
+    // Display options
+    showGrid: true,
+    showXAxis: true,
+    showYAxis: true,
+    // Visual properties
+    barRadius: 32, // For bar corners (rounded top)
+    dotRadius: 4, // For line/area dot markers
+    cellRadius: 4, // For heatmap cells
+    radius: 20, // @deprecated Use barRadius, dotRadius, or cellRadius instead
+    strokeWidth: 2,
+    gap: 4, // For bars, cells
+    categoryGap: 16, // For bar categories
+    // Line/Area specific
+    curved: true,
+    curveType: 'monotone',
+    fillOpacity: 0.3,
+    showStroke: true,
+    showDots: true,
+    // Bar specific
+    orientation: 'vertical',
+    // Layout
+    stacked: false,
+    // Theme
+    variant: 'default',
+    // Accessibility
+    enableKeyboardNavigation: true,
+};
+
+export { CHART_DEFAULTS };

package/dist/components/charts/utils/animation-utils.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Animation utilities for chart components
+ *
+ * Provides shared spring animation presets and helper functions
+ * to ensure consistent animations across all chart components.
+ */
+/**
+ * Spring animation configuration
+ */
+export interface SpringConfig {
+    type: 'spring';
+    stiffness: number;
+    damping: number;
+    delay?: number;
+}
+/**
+ * No animation configuration
+ */
+export interface NoAnimationConfig {
+    duration: 0;
+}
+/**
+ * Animation preset names
+ */
+export type AnimationPreset = 'smooth' | 'bouncy' | 'quick' | 'slow';
+/**
+ * Spring animation presets for circular charts
+ *
+ * These presets define the physics of spring animations:
+ * - stiffness: How quickly the animation reaches its target (higher = faster)
+ * - damping: How much the animation oscillates (lower = more bouncy)
+ */
+export declare const SPRING_PRESETS: Record<AnimationPreset, Omit<SpringConfig, 'type'>>;
+/**
+ * Get spring animation configuration for circular charts
+ *
+ * @param preset - The animation preset to use
+ * @param shouldReduceMotion - Whether to respect reduced motion preferences
+ * @param delay - Optional delay before animation starts (in seconds)
+ * @returns Animation configuration object for motion components
+ *
+ * @example
+ * ```tsx
+ * const animation = getSpringAnimation('smooth', shouldReduceMotion, 0.2);
+ * <motion.circle
+ *   animate={...}
+ *   transition={animation}
+ * />
+ * ```
+ */
+export declare function getSpringAnimation(preset?: AnimationPreset, shouldReduceMotion?: boolean | null, delay?: number): SpringConfig | NoAnimationConfig;
+/**
+ * Get useSpring configuration (for motion/react useSpring hook)
+ *
+ * @param preset - The animation preset to use
+ * @returns Spring configuration object for useSpring
+ *
+ * @example
+ * ```tsx
+ * const animatedValue = useSpring(value, getUseSpringConfig('bouncy'));
+ * ```
+ */
+export declare function getUseSpringConfig(preset?: AnimationPreset): {
+    stiffness: number;
+    damping: number;
+};
+/**
+ * Create staggered animation delay for multiple elements
+ *
+ * @param index - The element index
+ * @param staggerDelay - The delay between each element (in seconds)
+ * @returns The calculated delay for this element
+ *
+ * @example
+ * ```tsx
+ * rings.map((ring, index) => (
+ *   <motion.circle
+ *     transition={{ ...springConfig, delay: getStaggerDelay(index, 0.1) }}
+ *   />
+ * ))
+ * ```
+ */
+export declare function getStaggerDelay(index: number, staggerDelay?: number): number;
+/**
+ * Pre-configured animation settings for specific circular chart types
+ */
+export declare const CIRCULAR_CHART_ANIMATIONS: {
+    /**
+     * DonutChart: Smooth spring animation with slight delay
+     */
+    readonly donut: {
+        readonly preset: AnimationPreset;
+        readonly initialDelay: 0.2;
+    };
+    /**
+     * ActivityRings: Smooth spring with staggered rings
+     */
+    readonly activityRings: {
+        readonly preset: AnimationPreset;
+        readonly staggerDelay: 0.1;
+        readonly centerLabelDelay: 0.3;
+    };
+    /**
+     * GaugeChart: Bouncy animation for needle
+     */
+    readonly gauge: {
+        readonly preset: AnimationPreset;
+        readonly needleDelay: 0;
+        readonly valueDelay: 0.3;
+    };
+};

package/dist/components/charts/utils/animation-utils.js

@@ -0,0 +1,116 @@
+/**
+ * Animation utilities for chart components
+ *
+ * Provides shared spring animation presets and helper functions
+ * to ensure consistent animations across all chart components.
+ */
+/**
+ * Spring animation presets for circular charts
+ *
+ * These presets define the physics of spring animations:
+ * - stiffness: How quickly the animation reaches its target (higher = faster)
+ * - damping: How much the animation oscillates (lower = more bouncy)
+ */
+const SPRING_PRESETS = {
+    /**
+     * Smooth animation - balanced and natural
+     * Best for: DonutChart, ActivityRings
+     */
+    smooth: {
+        stiffness: 80,
+        damping: 20,
+    },
+    /**
+     * Bouncy animation - more playful with slight overshoot
+     * Best for: GaugeChart needle, interactive elements
+     */
+    bouncy: {
+        stiffness: 60,
+        damping: 15,
+    },
+    /**
+     * Quick animation - fast and snappy
+     * Best for: Small updates, micro-interactions
+     */
+    quick: {
+        stiffness: 120,
+        damping: 25,
+    },
+    /**
+     * Slow animation - gentle and deliberate
+     * Best for: Large value changes, presentations
+     */
+    slow: {
+        stiffness: 50,
+        damping: 25,
+    },
+};
+/**
+ * Get spring animation configuration for circular charts
+ *
+ * @param preset - The animation preset to use
+ * @param shouldReduceMotion - Whether to respect reduced motion preferences
+ * @param delay - Optional delay before animation starts (in seconds)
+ * @returns Animation configuration object for motion components
+ *
+ * @example
+ * ```tsx
+ * const animation = getSpringAnimation('smooth', shouldReduceMotion, 0.2);
+ * <motion.circle
+ *   animate={...}
+ *   transition={animation}
+ * />
+ * ```
+ */
+function getSpringAnimation(preset = 'smooth', shouldReduceMotion = false, delay) {
+    if (shouldReduceMotion) {
+        return { duration: 0 };
+    }
+    const config = SPRING_PRESETS[preset];
+    return {
+        type: 'spring',
+        stiffness: config.stiffness,
+        damping: config.damping,
+        ...(delay !== undefined && { delay }),
+    };
+}
+/**
+ * Create staggered animation delay for multiple elements
+ *
+ * @param index - The element index
+ * @param staggerDelay - The delay between each element (in seconds)
+ * @returns The calculated delay for this element
+ *
+ * @example
+ * ```tsx
+ * rings.map((ring, index) => (
+ *   <motion.circle
+ *     transition={{ ...springConfig, delay: getStaggerDelay(index, 0.1) }}
+ *   />
+ * ))
+ * ```
+ */
+function getStaggerDelay(index, staggerDelay = 0.1) {
+    return index * staggerDelay;
+}
+/**
+ * Pre-configured animation settings for specific circular chart types
+ */
+const CIRCULAR_CHART_ANIMATIONS = {
+    /**
+     * DonutChart: Smooth spring animation with slight delay
+     */
+    donut: {
+        preset: 'smooth',
+        initialDelay: 0.2,
+    },
+    /**
+     * ActivityRings: Smooth spring with staggered rings
+     */
+    activityRings: {
+        preset: 'smooth',
+        staggerDelay: 0.1,
+        centerLabelDelay: 0.3,
+    }};
+
+export { CIRCULAR_CHART_ANIMATIONS, SPRING_PRESETS, getSpringAnimation, getStaggerDelay };