flikkui 0.1.0-beta.9 → 0.2.0-beta.1

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

@@ -1,132 +1,143 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useChartTheme } from '../hooks/useChartTheme.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 { getColorValue } from '../utils/color-utils.js';
 import { HeatmapLegend } from './HeatmapLegend.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.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
  */
-var Heatmap = function (_a) {
-    var dataProp = _a.data, configProp = _a.config, _b = _a.colorScale, colorScale = _b === void 0 ? { minOpacity: 0.1 } : _b, _c = _a.layout, layout = _c === void 0 ? { gap: 6} : _c, _d = _a.axis, axis = _d === void 0 ? { showXAxis: true, showYAxis: true } : _d, _e = _a.tooltip, tooltip = _e === void 0 ? { enabled: true } : _e, _f = _a.legend, legend = _f === void 0 ? { enabled: true } : _f, valueRange = _a.valueRange, _g = _a.showNullValues, showNullValues = _g === void 0 ? true : _g, onCellClick = _a.onCellClick, cellRenderer = _a.cellRenderer, className = _a.className, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, children = _a.children, props = __rest(_a, ["data", "config", "colorScale", "layout", "axis", "tooltip", "legend", "valueRange", "showNullValues", "onCellClick", "cellRenderer", "className", "variant", "children"]);
+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
-    var chartContext = useChart();
-    var data = dataProp || chartContext.data;
-    var config = configProp || chartContext.config;
-    var _j = useChartTheme({
-        config: config,
-        variant: variant === 'bordered' ? 'default' : variant
-    }); _j.getThemeValue; var getSeriesColor = _j.getSeriesColor;
-    var containerRef = useRef(null);
-    var _k = useState({ width: 600, height: 400 }); _k[0]; var setDimensions = _k[1];
+    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
-    var isMobile = typeof window !== 'undefined' &&
+    const isMobile = typeof window !== 'undefined' &&
         ('ontouchstart' in window || navigator.maxTouchPoints > 0);
     // Use the new tooltip positioning hook
-    var _l = useTooltipPosition({
-        containerRef: containerRef,
-        isMobile: isMobile,
-    }), tooltipData = _l.tooltipData, tooltipRef = _l.tooltipRef, handleMouseEnter = _l.handleMouseEnter, handleMouseMove = _l.handleMouseMove, handleMouseLeave = _l.handleMouseLeave;
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
     // Process data
-    var processedData = useMemo(function () {
+    const processedData = useMemo(() => {
         return processHeatmapData(data, valueRange);
     }, [data, valueRange]);
-    var xCategories = processedData.xCategories, yCategories = processedData.yCategories, minValue = processedData.minValue, maxValue = processedData.maxValue;
+    const { xCategories, yCategories, minValue, maxValue } = processedData;
     // Create grid matrix
-    var gridMatrix = useMemo(function () {
+    const gridMatrix = useMemo(() => {
         return createGridMatrix(data, xCategories, yCategories);
     }, [data, xCategories, yCategories]);
     // Measure container dimensions
-    useEffect(function () {
-        var updateDimensions = function () {
+    useEffect(() => {
+        const updateDimensions = () => {
             if (containerRef.current) {
-                var _a = containerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
-                setDimensions({ width: width, height: height });
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({ width, height });
             }
         };
         updateDimensions();
         window.addEventListener('resize', updateDimensions);
-        return function () { return window.removeEventListener('resize', updateDimensions); };
+        return () => window.removeEventListener('resize', updateDimensions);
     }, []);
-    // Get the color for heatmap cells
-    var cellColorClass = getSeriesColor('value', 0); // Get the first series color for 'value' key
-    var cellColor = getColorValue(cellColorClass); // Convert Tailwind class to CSS color value
+    // 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
-    var handleCellHover = function (data, event) {
+    const handleCellHover = (data, event) => {
         if (!tooltip.enabled)
             return;
-        var content = tooltip.formatter
+        const content = tooltip.formatter
             ? tooltip.formatter(data)
             : getDefaultTooltipContent(data);
         handleMouseEnter(event, content);
     };
     // Handle cell mouse move using new tooltip system
-    var handleCellMouseMove = function (data, event) {
+    const handleCellMouseMove = (data, event) => {
         if (!tooltip.enabled || !tooltipData)
             return;
         handleMouseMove(event);
     };
     // Handle cell leave using new tooltip system
-    var handleCellLeave = function () {
+    const handleCellLeave = () => {
         if (!tooltip.enabled)
             return;
         handleMouseLeave();
     };
     // Calculate grid styles
-    var gridStyles = {
+    const gridStyles = {
         display: 'grid',
-        gridTemplateColumns: "repeat(".concat(xCategories.length, ", 1fr)"),
-        gridTemplateRows: "repeat(".concat(yCategories.length, ", 1fr)"),
-        gap: typeof layout.gap === 'number' ? "".concat(layout.gap, "px") : layout.gap,
+        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
-    var renderXAxisLabels = function () {
+    // Render axis labels - using theme for base styles
+    const renderXAxisLabels = () => {
         if (!axis.showXAxis)
             return null;
-        return (React__default.createElement("div", { className: "flex justify-between items-center px-1 py-2 text-xs text-neutral-600 dark:text-neutral-400 select-none", style: { gridColumn: "1 / -1" }, role: "list", "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description" },
-            xCategories.map(function (category, index) { return (React__default.createElement("div", { key: category, className: "flex-1 text-center font-medium px-1", style: {
-                    transform: axis.xAxisRotation ? "rotate(".concat(axis.xAxisRotation, "deg)") : undefined
-                }, role: "listitem", "aria-label": "X-axis label: ".concat(axis.xAxisFormatter
+        return (React__default.createElement("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" },
+            xCategories.map((category, index) => (React__default.createElement("div", { key: category, 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)) }, axis.xAxisFormatter
+                    : String(category)}` }, axis.xAxisFormatter
                 ? axis.xAxisFormatter(category, index)
-                : String(category))); }),
+                : String(category)))),
             React__default.createElement("span", { id: "heatmap-x-axis-description", className: "sr-only" },
                 "X-axis contains ",
                 xCategories.length,
                 " categories representing the horizontal dimension of the heatmap")));
     };
-    var renderYAxisLabels = function () {
+    const renderYAxisLabels = () => {
         if (!axis.showYAxis)
             return null;
-        return (React__default.createElement("div", { className: "grid text-xs text-neutral-600 dark:text-neutral-400 pr-3", style: {
-                gridTemplateRows: "repeat(".concat(yCategories.length, ", 1fr)"),
-                gap: typeof layout.gap === 'number' ? "".concat(layout.gap, "px") : layout.gap,
+        return (React__default.createElement("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" },
-            yCategories.map(function (category, index) { return (React__default.createElement("div", { key: category, className: "flex items-center justify-end font-medium", style: {
-                    transform: axis.yAxisRotation ? "rotate(".concat(axis.yAxisRotation, "deg)") : undefined
-                }, role: "listitem", "aria-label": "Y-axis label: ".concat(axis.yAxisFormatter
+            yCategories.map((category, index) => (React__default.createElement("div", { key: category, 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)) }, axis.yAxisFormatter
+                    : String(category)}` }, axis.yAxisFormatter
                 ? axis.yAxisFormatter(category, index)
-                : String(category))); }),
+                : String(category)))),
             React__default.createElement("span", { id: "heatmap-y-axis-description", className: "sr-only" },
                 "Y-axis contains ",
                 yCategories.length,
                 " categories representing the vertical dimension of the heatmap")));
     };
-    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn('relative w-full h-full min-h-[200px] flex flex-col', variant === 'bordered' && 'border border-neutral-200 dark:border-neutral-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className) }, props),
+    return (React__default.createElement("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 },
         React__default.createElement("div", { className: "flex flex-1 min-h-0" },
             axis.showYAxis && (React__default.createElement("div", { className: "flex-shrink-0 w-16 flex flex-col" },
                 axis.showXAxis && React__default.createElement("div", { className: "flex-shrink-0 h-8" }),
@@ -134,15 +145,15 @@ var Heatmap = function (_a) {
             React__default.createElement("div", { className: "flex-1 flex flex-col min-w-0" },
                 axis.showXAxis && (React__default.createElement("div", { className: "flex-shrink-0 h-8" }, renderXAxisLabels())),
                 React__default.createElement("div", { className: "flex-1 relative min-h-0" },
-                    React__default.createElement(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: "absolute inset-0" }, gridMatrix.flat().map(function (cellData, index) {
-                        var intensity = calculateIntensity(cellData.value, minValue, maxValue);
-                        "".concat(cellData.x, "-").concat(cellData.y);
-                        // Skip null values if not showing them
-                        if (!showNullValues && cellData.value === null) {
-                            return (React__default.createElement("div", { key: "".concat(cellData.x, "-").concat(cellData.y, "-").concat(index), className: "bg-transparent" }));
+                    React__default.createElement(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: heatmapTheme.gridStyle }, 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 (React__default.createElement("div", { key: `${cellData.x}-${cellData.y}-${index}`, className: "bg-transparent" }));
                         }
-                        var CellComponent = cellRenderer || HeatmapCell;
-                        return (React__default.createElement(CellComponent, { key: "".concat(cellData.x, "-").concat(cellData.y, "-").concat(index), 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" }));
+                        const CellComponent = cellRenderer || HeatmapCell;
+                        return (React__default.createElement(CellComponent, { key: `${cellData.x}-${cellData.y}-${index}`, 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" }));
                     }))))),
         ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (React__default.createElement("div", { className: "flex-shrink-0 mt-2" },
             React__default.createElement(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }))),

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 standard Tailwind classes (acceptable for labels)
+    axisLabelStyle: "text-xs text-gray-600 dark:text-gray-400 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

@@ -1,5 +1,9 @@
 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)
@@ -45,10 +49,6 @@ export interface HeatmapColorScale {
 export interface HeatmapLayout {
     /** Gap between cells */
     gap?: number | string;
-    /** Minimum cell size in pixels */
-    minCellSize?: number;
-    /** Maximum cell size in pixels */
-    maxCellSize?: number;
 }
 /**
  * Heatmap axis configuration
@@ -93,11 +93,13 @@ export interface HeatmapLegendConfig {
 /**
  * Main Heatmap component props
  */
-export interface HeatmapProps extends Omit<BaseChartProps, 'data' | 'config'> {
+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 */
@@ -110,8 +112,6 @@ export interface HeatmapProps extends Omit<BaseChartProps, 'data' | 'config'> {
     legend?: HeatmapLegendConfig;
     /** Custom value range [min, max] - if not provided, will be calculated from data */
     valueRange?: [number, number];
-    /** Handle null/missing values */
-    showNullValues?: boolean;
     /** Cell click handler */
     onCellClick?: (data: HeatmapDataPoint) => void;
     /** Custom cell renderer */
@@ -132,20 +132,3 @@ export interface ProcessedHeatmapData {
     maxValue: number;
     minValue: number;
 }
-/**
- * Heatmap theme configuration
- */
-export interface HeatmapTheme {
-    colors: {
-        primary: string[];
-        secondary: string[];
-        neutral: string[];
-    };
-    spacing: {
-        gap: string;
-        padding: string;
-    };
-    transitions: {
-        hover: string;
-    };
-}

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

@@ -1,85 +1,77 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useRef } from 'react';
+import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { heatmapTheme } from './Heatmap.theme.js';
 
 /**
  * Individual heatmap cell component with hover animations and color intensity
  */
-var HeatmapCell = function (_a) {
-    var data = _a.data, intensity = _a.intensity, _b = _a.minOpacity, minOpacity = _b === void 0 ? 0.1 : _b, _c = _a.color, color = _c === void 0 ? 'var(--color-primary-base)' : _c, // Default to primary color
-    className = _a.className, onClick = _a.onClick, onHover = _a.onHover, onMouseMove = _a.onMouseMove, onLeave = _a.onLeave, children = _a.children;
-    // Use CSS variables like Shadcn does
-    var getColorStyle = function (intensity) {
+const HeatmapCell = ({ 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
-        var baseOpacity;
+        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
-            var opacityStep = Math.ceil(intensity * 10) / 10; // Round up to nearest 10%
+            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 instead of non-existent CSS variable
+        // Use the passed color prop with calculated opacity
         return {
             backgroundColor: color,
             opacity: baseOpacity
         };
     };
-    var getColorClass = function (intensity) {
-        // Only use neutral colors for null values (missing data)
+    const getColorClass = (intensity) => {
+        // Only use gray colors for null values (missing data)
         if (data.value === null) {
-            return 'bg-transparent border border-neutral-200/80';
+            return 'bg-transparent border border-gray-200/80';
         }
         // For non-null values, we'll use inline styles
         return '';
     };
-    var handleClick = function () {
+    const handleClick = () => {
         if (onClick) {
             onClick(data);
         }
     };
-    var handleMouseEnter = function (event) {
+    const handleMouseEnter = (event) => {
         if (onHover) {
             onHover(data, event);
         }
     };
-    var handleMouseMove = function (event) {
+    const handleMouseMove = (event) => {
         if (onMouseMove) {
             onMouseMove(data, event);
         }
     };
-    var handleMouseLeave = function () {
+    const handleMouseLeave = () => {
         if (onLeave) {
             onLeave();
         }
     };
-    var handleAnimationEnd = function () {
+    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]');
         }
     };
-    var containerRef = useRef(null);
-    return (React__default.createElement(motion.div, { ref: containerRef, className: cn(
-        // Base styles
-        'relative w-full h-full cursor-pointer', 'border border-transparent', 
-        // Color based on intensity
-        getColorClass(), 
-        // CSS flickering animation on load
-        'animate-[flicker_0.6s_ease-out_forwards]', 
-        // Smooth transitions for hover effects
-        'transition-all duration-500', 
-        // Interactive states
-        onClick && 'cursor-pointer', className), style: __assign(__assign({}, getColorStyle(intensity)), { 
+    const containerRef = useRef(null);
+    return (React__default.createElement(motion.div, { ref: containerRef, className: cn(heatmapTheme.cellBaseStyle, getColorClass(), onClick && 'cursor-pointer', className), style: {
+            ...getColorStyle(intensity),
             // CSS custom properties for the animation
-            '--flicker-delay': "".concat(Math.random() * 0.3, "s"), animationDelay: "var(--flicker-delay)" }), onAnimationEnd: handleAnimationEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 
+            '--flicker-delay': `${Math.random() * 0.3}s`,
+            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,
@@ -89,12 +81,12 @@ var HeatmapCell = function (_a) {
             transition: { duration: 0.1, ease: 'easeOut' }
         }, 
         // Accessibility
-        role: "gridcell", tabIndex: onClick ? 0 : -1, "aria-label": "Value: ".concat(data.value, ", X: ").concat(data.x, ", Y: ").concat(data.y), onKeyDown: function (e) {
+        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 && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-neutral-700 dark:text-neutral-300" }, children))));
+        } }, children && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300" }, children))));
 };
 
 export { HeatmapCell };

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

@@ -17,4 +17,3 @@ export interface HeatmapLegendProps {
     className?: string;
 }
 export declare const HeatmapLegend: React.FC<HeatmapLegendProps>;
-export default HeatmapLegend;

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

@@ -1,20 +1,21 @@
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { heatmapTheme } from './Heatmap.theme.js';
 
-var HeatmapLegend = function (_a) {
-    _a.colorKey; var _c = _a.color, color = _c === void 0 ? 'var(--color-primary-base)' : _c; _a.minValue; _a.maxValue; var _f = _a.labels, labels = _f === void 0 ? {
-        min: 'Low activity',
-        max: 'High activity'
-    } : _f, className = _a.className;
-    // Use the passed color prop instead of non-existent CSS variable
-    var gradientStyle = {
-        background: "linear-gradient(to right, color-mix(in srgb, ".concat(color, " 20%, transparent), ").concat(color, ")")
+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 (React__default.createElement("div", { className: cn('w-full space-y-1.5 mt-3', className) },
+    return (React__default.createElement("div", { className: cn(heatmapTheme.legendStyle, className) },
         React__default.createElement("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }),
-        React__default.createElement("div", { className: "flex items-center justify-between text-xs font-medium text-text-secondary/80" },
+        React__default.createElement("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]" },
             React__default.createElement("div", null, labels.min),
             React__default.createElement("div", null, labels.max))));
 };
 
-export { HeatmapLegend, HeatmapLegend as default };
+export { HeatmapLegend };

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

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