@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,27 @@
+/**
+ * Default theme for the RadarChart component
+ *
+ * SVG stroke/fill attributes use raw hex values because CSS variables
+ * are not resolved inside SVG attribute strings.  Tailwind utility
+ * classes are used only for the HTML wrapper elements (labels, legend).
+ */
+const radarChartTheme = {
+    // Outer wrapper
+    baseStyle: "flex flex-col items-center gap-4",
+    // Grid ring stroke color (gray-200 equivalent)
+    gridColor: "#e5e7eb",
+    // Axis spoke stroke color (gray-300 equivalent)
+    axisColor: "#d1d5db",
+    // Axis label classes (applied to <text> elements via className)
+    labelStyle: "text-xs fill-[#6b7280] select-none",
+    // Legend container
+    legendStyle: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2",
+    // Individual legend item
+    legendItemStyle: "flex items-center gap-2 text-sm",
+    // Colored dot in legend
+    legendDotStyle: "w-2.5 h-2.5 rounded-full shrink-0",
+    // Legend label text
+    legendLabelStyle: "text-[var(--color-text-secondary)]",
+};
+
+export { radarChartTheme };

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

@@ -0,0 +1,110 @@
+import React from "react";
+/**
+ * A single data series to plot on the radar chart
+ */
+export interface RadarChartSeries {
+    /** Series label displayed in the legend */
+    label: string;
+    /** Data values for each axis -- must match the length of the axes array */
+    data: number[];
+    /** Color as a hex string (e.g. "#a78bfa") */
+    color: string;
+}
+/**
+ * Theme overrides for the RadarChart component
+ */
+export interface RadarChartThemeOverrides {
+    /** Base container style */
+    baseStyle?: string;
+    /** Grid line stroke color (hex for SVG compatibility) */
+    gridColor?: string;
+    /** Axis spoke stroke color (hex for SVG compatibility) */
+    axisColor?: string;
+    /** Axis label CSS classes */
+    labelStyle?: string;
+    /** Legend container CSS classes */
+    legendStyle?: string;
+    /** Legend item CSS classes */
+    legendItemStyle?: string;
+    /** Legend dot CSS classes */
+    legendDotStyle?: string;
+    /** Legend label CSS classes */
+    legendLabelStyle?: string;
+}
+/**
+ * Full theme configuration (all fields required)
+ */
+export interface RadarChartTheme extends Required<RadarChartThemeOverrides> {
+}
+/**
+ * RadarChart component props
+ */
+export interface RadarChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of axis/category labels displayed at each spoke endpoint
+     */
+    axes: string[];
+    /**
+     * Array of data series to plot as filled polygons
+     */
+    series: RadarChartSeries[];
+    /**
+     * SVG size in pixels (width and height of the SVG viewBox)
+     * @default 400
+     */
+    size?: number;
+    /**
+     * Number of concentric grid rings drawn from center to outer edge
+     * @default 5
+     */
+    gridLevels?: number;
+    /**
+     * Maximum data value used for scaling.
+     * When omitted, auto-detected from the largest value across all series.
+     * @default undefined (auto)
+     */
+    maxValue?: number;
+    /**
+     * Whether to render the concentric grid polygons
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Whether to render axis labels at each spoke endpoint
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Whether to render the legend below the chart
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to animate on mount using Framer Motion
+     * @default true
+     */
+    showAnimation?: boolean;
+    /**
+     * Fill opacity for the data polygons (0 to 1)
+     * @default 0.25
+     */
+    fillOpacity?: number;
+    /**
+     * Stroke width for the data polygon outlines
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Additional CSS classes applied to the wrapper div
+     */
+    className?: string;
+    /**
+     * Whether to show a tooltip on hover over data points
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Theme overrides for customizing the chart appearance
+     */
+    theme?: RadarChartThemeOverrides;
+}

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

@@ -0,0 +1,4 @@
+export { RadarChart } from "./RadarChart";
+export type { RadarChartProps, RadarChartSeries, RadarChartThemeOverrides, RadarChartTheme, } from "./RadarChart.types";
+export { radarChartTheme } from "./RadarChart.theme";
+export { RADAR_CHART_ANIMATIONS } from "./RadarChart.animations";

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

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

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -0,0 +1,208 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { XAxis } from '../shared/ChartAxis/XAxis.js';
+import { YAxis } from '../shared/ChartAxis/YAxis.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { SCATTER_PLOT_DEFAULTS } from './ScatterPlot.types.js';
+import { getCategoryColor, scatterPlotTheme } from './ScatterPlot.theme.js';
+
+/**
+ * ScatterPlot Component
+ *
+ * Displays correlation between two variables with optional bubble sizing.
+ * Now uses shared axis components with tick marks and value labels like other charts.
+ */
+const ScatterPlot = ({ data, xLabel, yLabel, dotRadius: propDotRadius, pointSize, // @deprecated
+showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.showXAxis, showYAxis = SCATTER_PLOT_DEFAULTS.showYAxis, showTooltip = SCATTER_PLOT_DEFAULTS.showTooltip, colors, minValue: propMinValue, maxValue: propMaxValue, theme: themeOverrides, className, svgClassName, dotClassName, gridClassName, axisClassName, title, description, enableKeyboardNavigation = SCATTER_PLOT_DEFAULTS.enableKeyboardNavigation, ...props }) => {
+    var _a;
+    const theme = { ...scatterPlotTheme, ...(themeOverrides || {}) };
+    const chartColors = colors || theme.colors || scatterPlotTheme.colors;
+    // Use dotRadius, fallback to pointSize for backward compatibility
+    const dotRadiusValue = (_a = propDotRadius !== null && propDotRadius !== void 0 ? propDotRadius : pointSize) !== null && _a !== void 0 ? _a : SCATTER_PLOT_DEFAULTS.dotRadius;
+    // Responsive container dimensions
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    // Update dimensions on mount and resize
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const rect = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: rect.width || 600,
+                    height: rect.height || 400,
+                });
+            }
+        };
+        // Initial measurement
+        updateDimensions();
+        // Setup ResizeObserver
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Calculate ranges and categories
+    const { xMin, xMax, yMin, yMax, categories, validData } = useMemo(() => {
+        // Filter out invalid data points
+        const valid = data.filter((d) => typeof d.x === 'number' &&
+            typeof d.y === 'number' &&
+            !isNaN(d.x) &&
+            !isNaN(d.y) &&
+            isFinite(d.x) &&
+            isFinite(d.y));
+        if (valid.length === 0) {
+            return {
+                xMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                xMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
+                yMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                yMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
+                categories: [],
+                validData: [],
+            };
+        }
+        const xValues = valid.map((d) => d.x);
+        const yValues = valid.map((d) => d.y);
+        const cats = Array.from(new Set(valid.map((d) => d.category).filter(Boolean)));
+        const minX = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...xValues);
+        const maxX = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...xValues);
+        const minY = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...yValues);
+        const maxY = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...yValues);
+        return {
+            xMin: minX,
+            xMax: maxX === minX ? minX + 1 : maxX, // Avoid same min/max
+            yMin: minY,
+            yMax: maxY === minY ? minY + 1 : maxY, // Avoid same min/max
+            categories: cats,
+            validData: valid,
+        };
+    }, [data, propMinValue, propMaxValue]);
+    // Chart dimensions with margins (pixel-based like other charts)
+    const margin = {
+        top: 20,
+        right: 20,
+        bottom: showXAxis ? 60 : 20,
+        left: showYAxis ? 60 : 20,
+    };
+    const innerWidth = dimensions.width - margin.left - margin.right;
+    const innerHeight = dimensions.height - margin.top - margin.bottom;
+    // Scale functions (pixel-based)
+    const scaleX = useCallback((value) => {
+        const ratio = (value - xMin) / (xMax - xMin);
+        return margin.left + ratio * innerWidth;
+    }, [xMin, xMax, margin.left, innerWidth]);
+    const scaleY = useCallback((value) => {
+        const ratio = (value - yMin) / (yMax - yMin);
+        return margin.top + innerHeight - ratio * innerHeight;
+    }, [yMin, yMax, margin.top, innerHeight]);
+    // Get color for category
+    const getColor = (category) => {
+        if (!category)
+            return chartColors[0];
+        const index = categories.indexOf(category);
+        return getCategoryColor(chartColors, index);
+    };
+    // Tooltip setup
+    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    // Accessibility setup (create config from data for accessibility)
+    const config = useMemo(() => {
+        const configObj = {};
+        categories.forEach((cat, idx) => {
+            configObj[cat] = {
+                label: cat,
+                color: getCategoryColor(chartColors, idx),
+            };
+        });
+        return configObj;
+    }, [categories, chartColors]);
+    const chartDataForAccessibility = useMemo(() => {
+        return validData.map((point) => ({
+            category: point.category || 'Point',
+            x: point.x,
+            y: point.y,
+            size: point.size,
+            label: point.label,
+        }));
+    }, [validData]);
+    const { chartAccessibilityProps, descriptionProps, handleMouseInteraction, } = useChartAccessibility({
+        chartType: 'scatter',
+        data: chartDataForAccessibility,
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
+    // Generate X-axis data for axis component
+    const xAxisData = useMemo(() => {
+        // Create tick marks for X axis
+        const tickCount = 5;
+        const range = xMax - xMin;
+        const step = range / (tickCount - 1);
+        return Array.from({ length: tickCount }, (_, i) => ({
+            name: (xMin + i * step).toFixed(0),
+            value: xMin + i * step,
+        }));
+    }, [xMin, xMax]);
+    // Return empty state if no data
+    if (validData.length === 0) {
+        return (jsx("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' }, ...props, children: jsx("div", { className: theme.emptyStateStyle, children: data.length === 0 ? 'No data available' : 'No valid data points' }) }));
+    }
+    return (jsxs("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' }, ...chartAccessibilityProps, ...props, children: [jsxs("svg", { width: dimensions.width, height: dimensions.height, className: cn(theme.svgStyle, svgClassName), ...descriptionProps, children: [jsx(YAxis, { show: showYAxis, min: yMin, max: yMax, x: margin.left, y: margin.top, height: innerHeight, showGrid: showGrid, gridWidth: innerWidth, tickCount: 5, className: cn(axisClassName) }), validData.map((point, index) => {
+                        const cx = scaleX(point.x);
+                        const cy = scaleY(point.y);
+                        const size = point.size ? Math.sqrt(point.size) / 2 : dotRadiusValue;
+                        const pointColor = getColor(point.category);
+                        return (jsx(motion.circle, { cx: cx, cy: cy, r: size, fill: pointColor, className: cn(theme.dotStyle, dotClassName), strokeWidth: "0.5", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.01, duration: 0.3 }, whileHover: { scale: 1.5, opacity: 1 }, onMouseEnter: (e) => {
+                                if (showTooltip) {
+                                    const content = {
+                                        category: point.label || point.category || `Point ${index + 1}`,
+                                        series: [
+                                            {
+                                                key: 'x',
+                                                label: xLabel || 'X',
+                                                value: point.x.toFixed(2),
+                                                color: pointColor,
+                                            },
+                                            {
+                                                key: 'y',
+                                                label: yLabel || 'Y',
+                                                value: point.y.toFixed(2),
+                                                color: pointColor,
+                                            },
+                                            ...(point.size
+                                                ? [
+                                                    {
+                                                        key: 'size',
+                                                        label: 'Size',
+                                                        value: point.size.toFixed(2),
+                                                        color: pointColor,
+                                                    },
+                                                ]
+                                                : []),
+                                        ],
+                                    };
+                                    // Pass SVG coordinates for proper positioning (especially in mobile/constrained containers)
+                                    const svgCoordinates = isMobile ? {
+                                        x: cx,
+                                        y: cy,
+                                        dimensions
+                                    } : undefined;
+                                    handleMouseEnter(e, content, svgCoordinates);
+                                }
+                                handleMouseInteraction();
+                            }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
+                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
+};
+ScatterPlot.displayName = 'ScatterPlot';
+
+export { ScatterPlot };

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * ScatterPlot Theme - Uses CSS variables for production-ready styling
+ */
+const scatterPlotTheme = {
+    containerStyle: 'relative inline-flex flex-col items-center w-full',
+    svgStyle: 'overflow-visible',
+    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
+    // Grid styles
+    gridLineStyle: 'stroke-[var(--color-border)]',
+    // Axis styles
+    axisLineStyle: 'stroke-[var(--color-text-secondary)]',
+    axisLabelStyle: 'fill-[var(--color-text-secondary)]',
+    // Data point styles
+    dotStyle: 'fill-opacity-70 stroke-white',
+    dotHoverStyle: 'fill-opacity-100',
+    // Legend styles
+    legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
+    legendItemStyle: 'flex items-center gap-2',
+    legendDotStyle: 'w-3 h-3 rounded-full',
+    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
+    // Default category colors using CSS variables
+    colors: [
+        'var(--color-primary)',
+        'var(--color-success)',
+        'var(--color-warning)',
+        'var(--color-danger)',
+        'hsl(262, 83%, 58%)', // violet
+        'hsl(328, 86%, 70%)', // pink
+    ],
+};
+/**
+ * Get fill color for category (supports both CSS variables and direct colors)
+ */
+function getCategoryColor(colors, categoryIndex) {
+    return colors[categoryIndex % colors.length];
+}
+
+export { getCategoryColor, scatterPlotTheme };

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

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

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

@@ -0,0 +1,12 @@
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+/**
+ * Default values using centralized defaults
+ */
+const SCATTER_PLOT_DEFAULTS = {
+    ...CHART_DEFAULTS,
+    dotRadius: 4,
+    showTooltip: true,
+};
+
+export { SCATTER_PLOT_DEFAULTS };

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

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

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

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