@flikk/ui 1.0.0-beta.1

package/dist/components/charts/Heatmap/Heatmap.js

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChart } from '../ChartContainer.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { HeatmapCell } from './HeatmapCell.js';
+import { processHeatmapData, createGridMatrix, calculateIntensity, getDefaultTooltipContent } from './utils/heatmapUtils.js';
+import { HeatmapLegend } from './HeatmapLegend.js';
+import { heatmapTheme } from './Heatmap.theme.js';
+
+/**
+ * Heatmap component for visualizing data in a grid format with color intensity
+ * Supports weekly, monthly, hourly views and custom data structures
+ */
+const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorScale = { steps: 10, minOpacity: 0.1 }, layout = { gap: 6 }, axis = { showXAxis: true, showYAxis: true }, tooltip = { enabled: true }, legend = { enabled: true }, valueRange, onCellClick, cellRenderer, className, variant = 'default', children, ...props }) => {
+    // Get data and config from context if not provided as props
+    const chartContext = useChart();
+    const data = dataProp || chartContext.data;
+    const config = configProp || chartContext.config;
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    // Detect if device is mobile/touch
+    const isMobile = typeof window !== 'undefined' &&
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    // Use the new tooltip positioning hook
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    // Process data
+    const processedData = useMemo(() => {
+        return processHeatmapData(data, valueRange);
+    }, [data, valueRange]);
+    const { xCategories, yCategories, minValue, maxValue } = processedData;
+    // Create grid matrix
+    const gridMatrix = useMemo(() => {
+        return createGridMatrix(data, xCategories, yCategories);
+    }, [data, xCategories, yCategories]);
+    // Measure container dimensions
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({ width, height });
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Simple color resolution - similar to AreaChart
+    const getCellColor = () => {
+        var _a;
+        // Check config for custom color
+        if ((_a = config === null || config === void 0 ? void 0 : config.value) === null || _a === void 0 ? void 0 : _a.color) {
+            const customColor = config.value.color;
+            // Support direct hex/rgb colors
+            if (customColor.startsWith('#') || customColor.startsWith('rgb')) {
+                return customColor;
+            }
+            // Support CSS variables
+            if (customColor.startsWith('var(')) {
+                return customColor;
+            }
+            // Support semantic color strings
+            return `var(--color-${customColor})`;
+        }
+        // Use color prop (semantic color)
+        return `var(--color-${color})`;
+    };
+    const cellColor = getCellColor();
+    // Handle cell hover using new tooltip system
+    const handleCellHover = (data, event) => {
+        if (!tooltip.enabled)
+            return;
+        const content = tooltip.formatter
+            ? tooltip.formatter(data)
+            : getDefaultTooltipContent(data);
+        handleMouseEnter(event, content);
+    };
+    // Handle cell mouse move using new tooltip system
+    const handleCellMouseMove = (data, event) => {
+        if (!tooltip.enabled || !tooltipData)
+            return;
+        handleMouseMove(event);
+    };
+    // Handle cell leave using new tooltip system
+    const handleCellLeave = () => {
+        if (!tooltip.enabled)
+            return;
+        handleMouseLeave();
+    };
+    // Calculate grid styles
+    const gridStyles = {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${xCategories.length}, 1fr)`,
+        gridTemplateRows: `repeat(${yCategories.length}, 1fr)`,
+        gap: typeof layout.gap === 'number' ? `${layout.gap}px` : layout.gap,
+        width: '100%',
+        height: '100%',
+    };
+    // Render axis labels - using theme for base styles
+    const renderXAxisLabels = () => {
+        if (!axis.showXAxis)
+            return null;
+        return (jsxs("div", { className: cn("flex justify-between items-center px-1 py-2", heatmapTheme.axisLabelStyle), style: { gridColumn: `1 / -1` }, role: "list", "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description", children: [xCategories.map((category, index) => (jsx("div", { className: "flex-1 text-center px-1", style: {
+                        transform: axis.xAxisRotation ? `rotate(${axis.xAxisRotation}deg)` : undefined
+                    }, role: "listitem", "aria-label": `X-axis label: ${axis.xAxisFormatter
+                        ? axis.xAxisFormatter(category, index)
+                        : String(category)}`, children: axis.xAxisFormatter
+                        ? axis.xAxisFormatter(category, index)
+                        : String(category) }, category))), jsxs("span", { id: "heatmap-x-axis-description", className: "sr-only", children: ["X-axis contains ", xCategories.length, " categories representing the horizontal dimension of the heatmap"] })] }));
+    };
+    const renderYAxisLabels = () => {
+        if (!axis.showYAxis)
+            return null;
+        return (jsxs("div", { className: cn("grid pr-3", heatmapTheme.axisLabelStyle), style: {
+                gridTemplateRows: `repeat(${yCategories.length}, 1fr)`,
+                gap: typeof layout.gap === 'number' ? `${layout.gap}px` : layout.gap,
+                height: '100%',
+            }, role: "list", "aria-label": "Y-axis labels", "aria-describedby": "heatmap-y-axis-description", children: [yCategories.map((category, index) => (jsx("div", { className: "flex items-center justify-end", style: {
+                        transform: axis.yAxisRotation ? `rotate(${axis.yAxisRotation}deg)` : undefined
+                    }, role: "listitem", "aria-label": `Y-axis label: ${axis.yAxisFormatter
+                        ? axis.yAxisFormatter(category, index)
+                        : String(category)}`, children: axis.yAxisFormatter
+                        ? axis.yAxisFormatter(category, index)
+                        : String(category) }, category))), jsxs("span", { id: "heatmap-y-axis-description", className: "sr-only", children: ["Y-axis contains ", yCategories.length, " categories representing the vertical dimension of the heatmap"] })] }));
+    };
+    return (jsxs("div", { ref: containerRef, className: cn(heatmapTheme.containerStyle, variant === 'bordered' && 'border border-gray-200 dark:border-gray-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className), ...props, children: [jsxs("div", { className: "flex flex-1 min-h-0", children: [axis.showYAxis && (jsxs("div", { className: "flex-shrink-0 w-16 flex flex-col", children: [axis.showXAxis && jsx("div", { className: "flex-shrink-0 h-8" }), jsx("div", { className: "flex-1", children: renderYAxisLabels() })] })), jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [axis.showXAxis && (jsx("div", { className: "flex-shrink-0 h-8", children: renderXAxisLabels() })), jsx("div", { className: "flex-1 relative min-h-0", children: jsx(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: heatmapTheme.gridStyle, children: gridMatrix.flat().map((cellData, index) => {
+                                        const intensity = calculateIntensity(cellData.value, minValue, maxValue);
+                                        `${cellData.x}-${cellData.y}`;
+                                        // Skip null values entirely
+                                        if (cellData.value === null) {
+                                            return (jsx("div", { className: "bg-transparent" }, `${cellData.x}-${cellData.y}-${index}`));
+                                        }
+                                        const CellComponent = cellRenderer || HeatmapCell;
+                                        return (jsx(CellComponent, { data: cellData, intensity: intensity, minOpacity: colorScale === null || colorScale === void 0 ? void 0 : colorScale.minOpacity, color: cellColor, onClick: onCellClick, onHover: handleCellHover, onMouseMove: handleCellMouseMove, onLeave: handleCellLeave, className: "rounded-sm" }, `${cellData.x}-${cellData.y}-${index}`));
+                                    }) }) })] })] }), ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (jsx("div", { className: "flex-shrink-0 mt-2", children: jsx(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }) })), tooltip.enabled && (jsx(ChartTooltip, { content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef })), children] }));
+};
+
+export { Heatmap };

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.theme.js

@@ -0,0 +1,18 @@
+/**
+ * Heatmap theme configuration
+ * Uses production-ready CSS variables from global.scss
+ */
+const heatmapTheme = {
+    // Container with variants handled inline
+    containerStyle: "relative w-full h-full min-h-[200px] flex flex-col",
+    // Grid container (applied via inline styles for CSS Grid)
+    gridStyle: "absolute inset-0",
+    // Base cell styles (individual cells add opacity via inline styles)
+    cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
+    // Axis labels using CSS variables for dark mode support
+    axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
+    // Legend using correct CSS variables
+    legendStyle: "w-full space-y-1.5 mt-3",
+};
+
+export { 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]: unknown;
+}
+/**
+ * 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,3 @@
+import React from 'react';
+import type { HeatmapCellProps } from './Heatmap.types';
+export declare const HeatmapCell: React.NamedExoticComponent<HeatmapCellProps>;

package/dist/components/charts/Heatmap/HeatmapCell.js

@@ -0,0 +1,95 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { heatmapTheme } from './Heatmap.theme.js';
+
+/**
+ * Individual heatmap cell component with hover animations and color intensity
+ */
+const HeatmapCellInner = ({ data, intensity, minOpacity = 0.1, color = 'var(--color-primary)', // Default to primary color (correct CSS variable)
+className, onClick, onHover, onMouseMove, onLeave, children, }) => {
+    // Calculate cell color and opacity based on intensity
+    const getColorStyle = (intensity) => {
+        // Only return empty object for null values (will use CSS class)
+        if (data.value === null) {
+            return {};
+        }
+        // Calculate base opacity from intensity
+        let baseOpacity;
+        // For 0 values, use minOpacity
+        if (data.value === 0) {
+            baseOpacity = minOpacity;
+        }
+        else {
+            // Map intensity (0-1) to opacity levels (minOpacity-1.0) in 10% increments
+            const opacityStep = Math.ceil(intensity * 10) / 10; // Round up to nearest 10%
+            baseOpacity = Math.max(minOpacity, Math.min(1.0, opacityStep));
+        }
+        // Use the passed color prop with calculated opacity
+        return {
+            backgroundColor: color,
+            opacity: baseOpacity
+        };
+    };
+    const getColorClass = (intensity) => {
+        // Only use gray colors for null values (missing data)
+        if (data.value === null) {
+            return 'bg-transparent border border-gray-200/80';
+        }
+        // For non-null values, we'll use inline styles
+        return '';
+    };
+    const handleClick = () => {
+        if (onClick) {
+            onClick(data);
+        }
+    };
+    const handleMouseEnter = (event) => {
+        if (onHover) {
+            onHover(data, event);
+        }
+    };
+    const handleMouseMove = (event) => {
+        if (onMouseMove) {
+            onMouseMove(data, event);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (onLeave) {
+            onLeave();
+        }
+    };
+    const handleAnimationEnd = () => {
+        // Remove animation class after flicker completes to prevent interference with opacity
+        if (containerRef.current) {
+            containerRef.current.classList.remove('animate-[flicker_0.6s_ease-out_forwards]');
+        }
+    };
+    const containerRef = useRef(null);
+    const flickerDelayRef = useRef(`${Math.random() * 0.3}s`);
+    return (jsx(motion.div, { ref: containerRef, className: cn(heatmapTheme.cellBaseStyle, getColorClass(), onClick && 'cursor-pointer', className), style: {
+            ...getColorStyle(intensity),
+            // CSS custom properties for the animation
+            '--flicker-delay': flickerDelayRef.current,
+            animationDelay: `var(--flicker-delay)`,
+        }, onAnimationEnd: handleAnimationEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 
+        // Framer Motion animations (just for hover/tap, not initial load)
+        whileHover: {
+            scale: 1.025,
+            transition: { duration: 0.15, ease: 'easeOut' }
+        }, whileTap: {
+            scale: 0.95,
+            transition: { duration: 0.1, ease: 'easeOut' }
+        }, 
+        // Accessibility
+        role: "gridcell", tabIndex: onClick ? 0 : -1, "aria-label": `Value: ${data.value}, X: ${data.x}, Y: ${data.y}`, onKeyDown: (e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && onClick) {
+                e.preventDefault();
+                onClick(data);
+            }
+        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300", children: children })) }));
+};
+const HeatmapCell = React__default.memo(HeatmapCellInner);
+
+export { HeatmapCell };

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/HeatmapLegend.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { heatmapTheme } from './Heatmap.theme.js';
+
+const HeatmapLegend = ({ colorKey = 'value', color = 'var(--color-primary)', // Correct CSS variable
+minValue = 0, maxValue = 100, labels = {
+    min: 'Low activity',
+    max: 'High activity'
+}, className }) => {
+    // Create gradient using passed color (supports CSS variables and hex)
+    const gradientStyle = {
+        background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
+    };
+    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
+};
+
+export { HeatmapLegend };

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/Heatmap/utils/heatmapUtils.js

@@ -0,0 +1,170 @@
+/**
+ * Process raw heatmap data and calculate necessary values
+ */
+function processHeatmapData(data, valueRange) {
+    // Extract unique categories preserving the order they appear in the data
+    const xCategories = [];
+    const yCategories = [];
+    // Preserve order by iterating through data and collecting unique values
+    data.forEach(point => {
+        if (!xCategories.includes(point.x)) {
+            xCategories.push(point.x);
+        }
+        if (!yCategories.includes(point.y)) {
+            yCategories.push(point.y);
+        }
+    });
+    // Calculate value range if not provided
+    const values = data.map(d => d.value).filter(v => v !== null);
+    const calculatedMin = Math.min(...values);
+    const calculatedMax = Math.max(...values);
+    const finalValueRange = valueRange || [calculatedMin, calculatedMax];
+    return {
+        data,
+        xCategories,
+        yCategories,
+        valueRange: finalValueRange,
+        minValue: finalValueRange[0],
+        maxValue: finalValueRange[1],
+    };
+}
+/**
+ * Calculate intensity (0-1) for a given value within the range
+ */
+function calculateIntensity(value, minValue, maxValue) {
+    if (value === null)
+        return 0;
+    if (minValue === maxValue)
+        return 1;
+    return Math.max(0, Math.min(1, (value - minValue) / (maxValue - minValue)));
+}
+/**
+ * Create a complete grid matrix with all x,y combinations
+ * Fills missing data points with null values
+ */
+function createGridMatrix(data, xCategories, yCategories) {
+    // Create a map for quick lookup
+    const dataMap = new Map();
+    data.forEach(point => {
+        const key = `${point.x}-${point.y}`;
+        dataMap.set(key, point);
+    });
+    // Create complete grid
+    return yCategories.map(y => xCategories.map(x => {
+        const key = `${x}-${y}`;
+        return dataMap.get(key) || { x, y, value: null };
+    }));
+}
+/**
+ * Generate default tooltip content for a data point
+ */
+function getDefaultTooltipContent(data) {
+    const value = data.value !== null ? data.value.toString() : 'No data';
+    return `${data.x}, ${data.y}: ${value}`;
+}
+/**
+ * Format axis labels with common patterns
+ */
+function formatAxisLabel(value, type = 'default') {
+    switch (type) {
+        case 'day':
+            if (typeof value === 'string') {
+                // Handle day abbreviations
+                const dayMap = {
+                    'Mon': 'Mo', 'Monday': 'Mo',
+                    'Tue': 'Tu', 'Tuesday': 'Tu',
+                    'Wed': 'We', 'Wednesday': 'We',
+                    'Thu': 'Th', 'Thursday': 'Th',
+                    'Fri': 'Fr', 'Friday': 'Fr',
+                    'Sat': 'Sa', 'Saturday': 'Sa',
+                    'Sun': 'Su', 'Sunday': 'Su',
+                };
+                return dayMap[value] || value.substring(0, 2);
+            }
+            break;
+        case 'month':
+            if (typeof value === 'string') {
+                // Handle month abbreviations
+                const monthMap = {
+                    'January': 'Jan', 'February': 'Feb', 'March': 'Mar',
+                    'April': 'Apr', 'May': 'May', 'June': 'Jun',
+                    'July': 'Jul', 'August': 'Aug', 'September': 'Sep',
+                    'October': 'Oct', 'November': 'Nov', 'December': 'Dec',
+                };
+                return monthMap[value] || value.substring(0, 3);
+            }
+            break;
+        case 'hour':
+            if (typeof value === 'number') {
+                return value === 0 ? '12am' : value === 12 ? '12pm' :
+                    value < 12 ? `${value}am` : `${value - 12}pm`;
+            }
+            break;
+        case 'date':
+            if (typeof value === 'string') {
+                // Try to parse as date string
+                const date = new Date(value);
+                if (!isNaN(date.getTime())) {
+                    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+                }
+            }
+            break;
+        case 'number':
+            if (typeof value === 'number') {
+                return value.toLocaleString();
+            }
+            break;
+    }
+    return String(value);
+}
+/**
+ * Generate sample heatmap data for testing/examples
+ */
+function generateSampleData(type = 'weekly') {
+    const data = [];
+    switch (type) {
+        case 'weekly':
+            const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+            const weeks = Array.from({ length: 12 }, (_, i) => `Week ${i + 1}`);
+            weeks.forEach(week => {
+                days.forEach(day => {
+                    data.push({
+                        x: day,
+                        y: week,
+                        value: Math.floor(Math.random() * 20),
+                    });
+                });
+            });
+            break;
+        case 'monthly':
+            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+            const years = ['2022', '2023', '2024'];
+            years.forEach(year => {
+                months.forEach(month => {
+                    data.push({
+                        x: month,
+                        y: year,
+                        value: Math.floor(Math.random() * 100),
+                    });
+                });
+            });
+            break;
+        case 'hourly':
+            const hours = Array.from({ length: 24 }, (_, i) => i);
+            const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+            daysOfWeek.forEach(day => {
+                hours.forEach(hour => {
+                    data.push({
+                        x: hour,
+                        y: day,
+                        value: Math.floor(Math.random() * 50),
+                    });
+                });
+            });
+            break;
+    }
+    return data;
+}
+
+export { calculateIntensity, createGridMatrix, formatAxisLabel, generateSampleData, getDefaultTooltipContent, processHeatmapData };

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>;