@flikk/ui 1.0.0-beta.1

package/dist/components/charts/shared/BarRenderer/BarRenderer.js

@@ -0,0 +1,324 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../../utils/cn.js';
+
+// Animation timing constants
+const STACKED_CATEGORY_DELAY = 0.25;
+const STACKED_SEGMENT_STAGGER = 0.12;
+const GROUPED_BAR_STAGGER = 0.05;
+/**
+ * Simple color functions based on direct CSS variables
+ */
+const getSeriesFillColor = (index) => {
+    const colorVars = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    return colorVars[index % colorVars.length];
+};
+/**
+ * Helper function to create a path for bars with only top corners rounded
+ */
+const createRoundedTopBarPath = (x, y, width, height, radius) => {
+    const r = Math.min(radius, width / 2, height / 2);
+    return `
+    M ${x},${y + height}
+    L ${x},${y + r}
+    Q ${x},${y} ${x + r},${y}
+    L ${x + width - r},${y}
+    Q ${x + width},${y} ${x + width},${y + r}
+    L ${x + width},${y + height}
+    Z
+  `.trim();
+};
+/**
+ * Helper function to create a path for bars with only bottom corners rounded (for negative bars)
+ */
+const createRoundedBottomBarPath = (x, y, width, height, radius) => {
+    const r = Math.min(radius, width / 2, height / 2);
+    return `
+    M ${x},${y}
+    L ${x + width},${y}
+    L ${x + width},${y + height - r}
+    Q ${x + width},${y + height} ${x + width - r},${y + height}
+    L ${x + r},${y + height}
+    Q ${x},${y + height} ${x},${y + height - r}
+    Z
+  `.trim();
+};
+/**
+ * BarRenderer Component
+ *
+ * Pure bar rendering component that can be used standalone or within ChartContainer.
+ * Handles both grouped and stacked bar layouts with Framer Motion animations.
+ */
+const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false, radius = 4, gap = 4, categoryGap = 8, showAnimation = true, hoveredCategory: externalHoveredCategory, onHoverCategory, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Get all data keys from config
+    const dataKeys = Object.keys(config || {});
+    // Calculate inner dimensions
+    const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // Get min/max from scales
+    const { min: minValue, max: maxValue } = scales.y;
+    // Safe division helper
+    const safeDivide = (numerator, denominator, fallback = 0) => {
+        if (denominator === 0 || !isFinite(denominator))
+            return fallback;
+        const result = numerator / denominator;
+        return isFinite(result) ? result : fallback;
+    };
+    // Safe scale helper
+    const safeScale = (value, inMin, inMax, outMin, outMax) => {
+        const inRange = inMax - inMin;
+        if (inRange === 0 || !isFinite(inRange))
+            return outMin;
+        const normalized = (value - inMin) / inRange;
+        const scaled = normalized * (outMax - outMin) + outMin;
+        return isFinite(scaled) ? scaled : outMin;
+    };
+    // Calculate bar dimensions
+    const totalCategoryGap = Math.max(0, (data.length - 1) * categoryGap);
+    const availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+    const barWidth = safeDivide(availableWidth, data.length, 0);
+    const totalBarGap = Math.max(0, (dataKeys.length - 1) * gap);
+    const availableBarWidth = Math.max(0, barWidth - totalBarGap);
+    const individualBarWidth = stacked
+        ? barWidth
+        : safeDivide(availableBarWidth, dataKeys.length, 0);
+    // Helper function to calculate average of non-null values for a specific key
+    const calculateAverageForKey = useCallback((key) => {
+        const nonNullValues = data
+            .map((item) => item[key])
+            .filter((value) => typeof value === "number" && isFinite(value));
+        if (nonNullValues.length === 0)
+            return 0;
+        const sum = nonNullValues.reduce((acc, val) => acc + val, 0);
+        return safeDivide(sum, nonNullValues.length);
+    }, [data]);
+    // Render individual bar path
+    const renderBarPath = useCallback((item, index, key, keyIndex, barX, barY, barHeight, applyRadius, isStacked, stackOrderIndex, isNegative) => {
+        var _a;
+        const rawValue = item[key];
+        const isNull = rawValue === null ||
+            rawValue === undefined ||
+            (typeof rawValue === "number" && !isFinite(rawValue));
+        // Get fill color for this data series
+        const fillColor = ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) || getSeriesFillColor(keyIndex);
+        const isHovered = externalHoveredCategory === index;
+        const isAnyBarHovered = externalHoveredCategory !== null;
+        const shouldReduceOpacity = isAnyBarHovered && !isHovered;
+        const isFocused = isKeyboardMode && focusedElementIndex === index;
+        // Don't render null bars
+        if (isNull) {
+            return null;
+        }
+        // Skip rendering if bar dimensions are invalid
+        if (barHeight <= 0 || individualBarWidth <= 0) {
+            return null;
+        }
+        const pathD = isNegative
+            ? createRoundedBottomBarPath(barX, barY, individualBarWidth, barHeight, applyRadius ? radius : 0)
+            : createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, applyRadius ? radius : 0);
+        const stackedDelayOrder = typeof stackOrderIndex === "number" ? stackOrderIndex : keyIndex;
+        const delay = isStacked
+            ? index * STACKED_CATEGORY_DELAY +
+                stackedDelayOrder * STACKED_SEGMENT_STAGGER
+            : (index * dataKeys.length + keyIndex) * GROUPED_BAR_STAGGER;
+        return (jsx(motion.path, { d: pathD, initial: showAnimation && !shouldReduceMotion
+                ? { scaleY: 0, opacity: 0 }
+                : { scaleY: 1, opacity: 1 }, animate: {
+                scaleY: 1,
+                opacity: 1,
+            }, transition: isStacked
+                ? {
+                    duration: 0.4,
+                    ease: "easeOut",
+                    delay,
+                }
+                : {
+                    type: "spring",
+                    stiffness: 100,
+                    damping: 20,
+                    delay,
+                }, className: cn("transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
+                originY: isNegative ? 0 : 1,
+                transformOrigin: isNegative ? "top" : "bottom",
+                fill: isNull
+                    ? "var(--color-background-tertiary)"
+                    : shouldReduceOpacity
+                        ? "var(--color-background-tertiary)"
+                        : fillColor,
+                opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
+                stroke: isFocused ? "var(--color-primary)" : "none",
+            }, onMouseEnter: !isNull && onMouseEnter
+                ? (e) => {
+                    if (onHoverCategory) {
+                        onHoverCategory(index);
+                    }
+                    // Create content with ALL series for this category
+                    const series = dataKeys
+                        .map((dataKey, idx) => {
+                        var _a, _b;
+                        const seriesValue = item[dataKey];
+                        const isSeriesNull = seriesValue === null ||
+                            seriesValue === undefined ||
+                            (typeof seriesValue === "number" &&
+                                !isFinite(seriesValue));
+                        return {
+                            key: dataKey,
+                            label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                            value: isSeriesNull ? 0 : seriesValue,
+                            color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
+                        };
+                    })
+                        .filter((series) => {
+                        // Only include non-null and non-zero values in tooltip
+                        const rawVal = item[series.key];
+                        return (rawVal != null &&
+                            typeof rawVal === "number" &&
+                            isFinite(rawVal) &&
+                            rawVal !== 0);
+                    });
+                    const content = {
+                        category: item.name || `Category ${index + 1}`,
+                        series: stacked ? series.reverse() : series,
+                        total: stacked
+                            ? series.reduce((acc, s) => acc + (typeof s.value === "number" ? s.value : 0), 0)
+                            : undefined,
+                    };
+                    const svgCoordinates = {
+                        x: barX + individualBarWidth / 2,
+                        y: barY,
+                        dimensions,
+                    };
+                    onMouseEnter(e, content, svgCoordinates);
+                }
+                : undefined, onMouseMove: !isNull && onMouseMove
+                ? (e) => {
+                    if (externalHoveredCategory === index) {
+                        const svgCoordinates = {
+                            x: barX + individualBarWidth / 2,
+                            y: barY,
+                            dimensions,
+                        };
+                        onMouseMove(e, svgCoordinates);
+                    }
+                }
+                : undefined, onMouseLeave: !isNull && onMouseLeave
+                ? () => {
+                    if (onHoverCategory) {
+                        onHoverCategory(null);
+                    }
+                    onMouseLeave();
+                }
+                : undefined }, keyIndex));
+    }, [
+        config,
+        dataKeys,
+        dimensions,
+        externalHoveredCategory,
+        focusedElementIndex,
+        individualBarWidth,
+        isKeyboardMode,
+        onHoverCategory,
+        onMouseEnter,
+        onMouseLeave,
+        onMouseMove,
+        radius,
+        shouldReduceMotion,
+        showAnimation,
+        stacked,
+    ]);
+    // Render all bars
+    const bars = useMemo(() => {
+        return data.map((item, index) => {
+            const x = margin.left + index * (barWidth + categoryGap);
+            if (stacked) {
+                const visibleBarCount = dataKeys.filter((key) => typeof item[key] === 'number' && item[key] !== 0).length;
+                let stackedY = margin.top + innerHeight;
+                let visibleStackIndex = 0;
+                // Find the index of the topmost visible (non-zero) bar to apply radius
+                const topmostVisibleIndex = dataKeys.reduce((topIndex, key, idx) => {
+                    const rawVal = item[key];
+                    const isVisible = typeof rawVal === "number" &&
+                        isFinite(rawVal) &&
+                        rawVal !== 0;
+                    return isVisible ? idx : topIndex;
+                }, -1);
+                return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
+                        const rawValue = item[key];
+                        const value = typeof rawValue === "number" && isFinite(rawValue)
+                            ? rawValue
+                            : 0;
+                        const isNull = rawValue === null ||
+                            rawValue === undefined ||
+                            (typeof rawValue === "number" && !isFinite(rawValue));
+                        // For null values, use the average
+                        const actualValue = isNull
+                            ? calculateAverageForKey(key)
+                            : value;
+                        const range = maxValue - minValue;
+                        const barHeight = range > 0
+                            ? safeScale(actualValue, minValue, maxValue, 0, innerHeight)
+                            : 0;
+                        const currentY = stackedY - barHeight;
+                        stackedY = currentY;
+                        const stackOrderIndex = !isNull && barHeight > 0
+                            ? visibleBarCount - 1 - visibleStackIndex++
+                            : null;
+                        return renderBarPath(item, index, key, keyIndex, x, currentY, barHeight, keyIndex === topmostVisibleIndex, true, stackOrderIndex);
+                    }) }, index));
+            }
+            else {
+                // Calculate the zero baseline position (where value=0 maps to in pixel space)
+                const scaledZero = safeScale(0, minValue, maxValue, 0, innerHeight);
+                const zeroY = margin.top + innerHeight - scaledZero;
+                return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
+                        const rawValue = item[key];
+                        const value = typeof rawValue === "number" && isFinite(rawValue)
+                            ? rawValue
+                            : 0;
+                        const isNull = rawValue === null ||
+                            rawValue === undefined ||
+                            (typeof rawValue === "number" && !isFinite(rawValue));
+                        // For null values, use the average
+                        const actualValue = isNull
+                            ? calculateAverageForKey(key)
+                            : value;
+                        const range = maxValue - minValue;
+                        const scaledValue = range > 0
+                            ? safeScale(actualValue, minValue, maxValue, 0, innerHeight)
+                            : 0;
+                        const barHeight = Math.abs(scaledValue - scaledZero);
+                        const isNeg = actualValue < 0;
+                        const barX = x + keyIndex * (individualBarWidth + gap);
+                        // Positive: bar extends upward from zero baseline
+                        // Negative: bar extends downward from zero baseline
+                        const barY = isNeg ? zeroY : zeroY - barHeight;
+                        return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, false, undefined, isNeg);
+                    }) }, index));
+            }
+        });
+    }, [
+        data,
+        dataKeys,
+        margin,
+        barWidth,
+        categoryGap,
+        innerHeight,
+        stacked,
+        minValue,
+        maxValue,
+        individualBarWidth,
+        gap,
+        calculateAverageForKey,
+        renderBarPath,
+    ]);
+    return (jsx("g", { className: cn("chart-bars", className), children: bars }));
+};
+
+export { BarRenderer };

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

@@ -0,0 +1,94 @@
+import type { ChartDataPoint, ChartConfig } from '../../types/chart.types';
+import type { ChartScales } from '../../hooks/useChartScales';
+import type { ChartDimensions, ChartMargins } from '../ChartContainer';
+import type { MultiSeriesData } from '../ChartTooltip';
+export interface BarRendererProps {
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart configuration
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales (from useChartScales or ChartContainer)
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions: ChartDimensions;
+    /**
+     * Chart margins
+     */
+    margin: ChartMargins;
+    /**
+     * Whether bars are stacked
+     */
+    stacked?: boolean;
+    /**
+     * Bar radius (rounded corners)
+     */
+    radius?: number;
+    /**
+     * Gap between bars in a group
+     */
+    gap?: number;
+    /**
+     * Gap between categories
+     */
+    categoryGap?: number;
+    /**
+     * Whether to show animation
+     */
+    showAnimation?: boolean;
+    /**
+     * Hovered category index
+     */
+    hoveredCategory?: number | null;
+    /**
+     * Set hovered category
+     */
+    onHoverCategory?: (index: number | 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;
+}
+/**
+ * Animation timing constants
+ */
+export declare const BAR_ANIMATION_TIMING: {
+    readonly STACKED_CATEGORY_DELAY: 0.25;
+    readonly STACKED_SEGMENT_STAGGER: 0.12;
+    readonly GROUPED_BAR_STAGGER: 0.05;
+};

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

@@ -0,0 +1,3 @@
+export { BarRenderer } from './BarRenderer';
+export type { BarRendererProps } from './BarRenderer.types';
+export { BAR_ANIMATION_TIMING } from './BarRenderer.types';

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

@@ -0,0 +1,93 @@
+import type { ChartDataPoint } from '../../types/chart.types';
+export interface BaseAxisProps {
+    /** Whether to show the axis */
+    show?: boolean;
+    /** Custom className for styling */
+    className?: string;
+    /** Color of the axis line and text */
+    color?: string;
+    /** Font size for axis labels */
+    fontSize?: number;
+    /** Whether to show tick marks */
+    showTicks?: boolean;
+    /** Length of tick marks */
+    tickLength?: number;
+    /** Spacing between ticks and labels */
+    tickPadding?: number;
+}
+export interface XAxisProps extends BaseAxisProps {
+    /** Data points for the x-axis */
+    data: Array<{
+        name?: string;
+        label?: string;
+        [key: string]: string | number | null | undefined;
+    }>;
+    /** X position of the axis */
+    x: number;
+    /** Y position of the axis */
+    y: number;
+    /** Width of the axis */
+    width: number;
+    /** Width of each category/bar group */
+    categoryWidth: number;
+    /** Gap between categories */
+    categoryGap?: number;
+    /** Text anchor for labels */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Rotation angle for labels */
+    labelRotation?: number;
+    /** Custom label formatter */
+    labelFormatter?: (value: ChartDataPoint, index: number) => string;
+    /** Maximum width for labels before truncation */
+    maxLabelWidth?: number;
+    /** Whether tick marks should align directly with the left/right edges (for line/area charts) */
+    alignWithEdge?: boolean;
+}
+export interface YAxisProps extends BaseAxisProps {
+    /** Minimum value for the y-axis */
+    min: number;
+    /** Maximum value for the y-axis */
+    max: number;
+    /** Number of ticks on the y-axis */
+    tickCount?: number;
+    /** X position of the axis */
+    x: number;
+    /** Y position of the axis */
+    y: number;
+    /** Height of the axis */
+    height: number;
+    /** Text anchor for labels */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Custom tick formatter */
+    tickFormatter?: (value: number) => string;
+    /** Whether to show grid lines */
+    showGrid?: boolean;
+    /** Width of the chart area for grid lines */
+    gridWidth?: number;
+    /** Custom tick values */
+    ticks?: number[];
+}
+export interface AxisTickProps {
+    /** Value of the tick */
+    value: number | string;
+    /** X position */
+    x: number;
+    /** Y position */
+    y: number;
+    /** Whether to show the tick mark */
+    showTick?: boolean;
+    /** Length of the tick mark */
+    tickLength?: number;
+    /** Text anchor */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Custom formatter */
+    formatter?: (value: number | string) => string;
+    /** Font size */
+    fontSize?: number;
+    /** Color */
+    color?: string;
+    /** Rotation angle */
+    rotation?: number;
+    /** Maximum width before truncation */
+    maxWidth?: number;
+}

package/dist/components/charts/shared/ChartAxis/XAxis.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { XAxisProps } from "./ChartAxis.types";
+/**
+ * XAxis component for charts
+ * Renders horizontal axis with labels and optional tick marks
+ */
+export declare const XAxis: React.FC<XAxisProps>;

package/dist/components/charts/shared/ChartAxis/XAxis.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+
+/**
+ * XAxis component for charts
+ * Renders horizontal axis with labels and optional tick marks
+ */
+const XAxis = React__default.memo(({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
+    if (!show)
+        return null;
+    const formatLabel = (item, index) => {
+        if (labelFormatter) {
+            return labelFormatter(item, index);
+        }
+        return item.name || item.label || String(index);
+    };
+    const getTickX = (index) => {
+        if (alignWithEdge) {
+            if (data.length <= 1) {
+                return x + width / 2;
+            }
+            const relativeIndex = index / (data.length - 1);
+            return x + relativeIndex * width;
+        }
+        return x + index * (categoryWidth + categoryGap) + categoryWidth / 2;
+    };
+    return (jsxs("g", { className: cn("chart-x-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x + width, y2: y, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), data.map((item, index) => {
+                const tickX = getTickX(index);
+                const label = formatLabel(item, index);
+                return (jsxs("g", { children: [showTicks && (jsx("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: tickX, y: y + tickLength + tickPadding, textAnchor: textAnchor, maxWidth: maxLabelWidth, truncate: !!maxLabelWidth, rotation: labelRotation, children: label })] }, index));
+            })] }));
+});
+
+export { XAxis };

package/dist/components/charts/shared/ChartAxis/YAxis.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { YAxisProps } from "./ChartAxis.types";
+/**
+ * YAxis component for charts
+ * Renders vertical axis with labels, optional tick marks, and grid lines
+ */
+export declare const YAxis: React.FC<YAxisProps>;

package/dist/components/charts/shared/ChartAxis/YAxis.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+import { generateNiceTicks } from '../../utils/chart-validation.js';
+
+/**
+ * YAxis component for charts
+ * Renders vertical axis with labels, optional tick marks, and grid lines
+ */
+const YAxis = React__default.memo(({ min, max, tickCount = 5, x, y, height, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", tickFormatter, showGrid = false, gridWidth = 0, ticks: customTicks, }) => {
+    if (!show)
+        return null;
+    // Generate tick values using Heckbert's nice numbers algorithm
+    const ticks = (() => {
+        if (customTicks)
+            return customTicks;
+        if (tickCount <= 1)
+            return [min];
+        const { ticks: niceTicks } = generateNiceTicks(min, max, tickCount);
+        return niceTicks;
+    })();
+    const formatTick = (value) => {
+        if (tickFormatter) {
+            return tickFormatter(value);
+        }
+        // Default formatting - prioritize whole numbers
+        if (Math.abs(value) >= 1000000) {
+            return `${Math.round(value / 1000000)}M`;
+        }
+        else if (Math.abs(value) >= 1000) {
+            return `${Math.round(value / 1000)}K`;
+        }
+        else if (Number.isInteger(value) ||
+            Math.abs(value - Math.round(value)) < 0.01) {
+            return Math.round(value).toString();
+        }
+        else {
+            return value.toFixed(1);
+        }
+    };
+    const getTickY = (value) => {
+        if (max === min) {
+            return y + height / 2; // Center position when no range
+        }
+        const ratio = (value - min) / (max - min);
+        return y + height - ratio * height;
+    };
+    return (jsxs("g", { className: cn("chart-y-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x, y2: y + height, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), ticks.map((tick, index) => {
+                const tickY = getTickY(tick);
+                return (jsxs("g", { children: [showGrid && gridWidth > 0 && (jsx("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 })), showTicks && (jsx("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle", children: formatTick(tick) })] }, index));
+            })] }));
+});
+
+export { YAxis };

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

@@ -0,0 +1,3 @@
+export { XAxis } from './XAxis';
+export { YAxis } from './YAxis';
+export type { BaseAxisProps, XAxisProps, YAxisProps, AxisTickProps, } from './ChartAxis.types';