doom-design-system 0.4.12 → 0.4.13

package/dist/components/Chart/Chart.d.ts

@@ -1,3 +1,15 @@
+import { ChartFooter } from "./ChartFooter";
+import { ChartHeader } from "./ChartHeader";
+import { ChartLegend } from "./ChartLegend";
+import { ChartPlot } from "./ChartPlot";
+import { ChartRoot } from "./ChartRoot";
 import { ChartProps } from "./types";
-export type { ChartConfig, ChartProps, DrawContext, LegendConfig, LegendItem, LegendPosition, } from "./types";
-export declare function Chart<T>({ data, type, variant, x, y, d3Config, className, style, renderTooltip, flat, title, subtitle, legend, render, withFrame, onValueChange, }: ChartProps<T>): import("react/jsx-runtime").JSX.Element;
+export type { ChartConfig, ChartProps, DrawContext, LegendConfig, LegendItem, } from "./types";
+declare function ChartInternal<T>(props: ChartProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const Chart: typeof ChartInternal & {
+    Root: typeof ChartRoot;
+    Header: typeof ChartHeader;
+    Footer: typeof ChartFooter;
+    Legend: typeof ChartLegend;
+    Plot: typeof ChartPlot;
+};

package/dist/components/Chart/Chart.js

@@ -1,292 +1,29 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { pointer, select } from "d3-selection";
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
-import { Card } from "../Card/Card.js";
 import { Flex, Stack } from "../Layout/Layout.js";
-import { Text } from "../Text/Text.js";
-import styles from "./Chart.module.css";
-// Theme-compatible color palette for auto-assigned legend colors
-const LEGEND_PALETTE = [
-    "var(--primary)",
-    "var(--secondary)",
-    "var(--accent)",
-    "var(--success)",
-    "var(--warning)",
-    "var(--error)",
-];
-import { createScales, drawAxes, drawBars, drawGrid, drawLineArea, setupGradient, } from "./renderers.js";
-export function Chart({ data, type = "line", variant = "default", x, y, d3Config, className, style, renderTooltip, flat, title, subtitle, legend, render, withFrame = true, onValueChange, }) {
-    var _a, _b, _c, _d;
-    // Constants
-    const MOBILE_ASPECT_RATIO = 0.75; // 4:3 aspect ratio for mobile
-    const TOOLTIP_OFFSET = 20;
-    const HIDE_DELAY_MS = 16;
-    const MOBILE_BREAKPOINT = 480;
-    const svgRef = useRef(null);
-    const containerRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const tooltipPosRef = useRef({ x: 0, y: 0, isTouch: false });
-    const hideTimeoutRef = useRef(null);
-    const gradientId = React.useId().replace(/:/g, "");
-    const [activeData, setActiveData] = useState(null);
-    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-    const [containerWidth, setContainerWidth] = useState(0);
-    const isMobile = containerWidth > 0 && containerWidth < MOBILE_BREAKPOINT;
-    // Determine legend position based on device
-    const legendPosition = isMobile
-        ? ((_b = (_a = legend === null || legend === void 0 ? void 0 : legend.position) === null || _a === void 0 ? void 0 : _a.mobile) !== null && _b !== void 0 ? _b : "bottom")
-        : ((_d = (_c = legend === null || legend === void 0 ? void 0 : legend.position) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : "top");
-    // Calculate auto height for mobile if not explicitly set
-    const autoHeight = useMemo(() => {
-        if (d3Config === null || d3Config === void 0 ? void 0 : d3Config.height) {
-            return d3Config.height;
-        }
-        // On mobile, use aspect ratio for balanced proportions
-        if (isMobile && containerWidth > 0) {
-            return Math.round(containerWidth * MOBILE_ASPECT_RATIO);
-        }
-        return 400; // Default height
-    }, [d3Config === null || d3Config === void 0 ? void 0 : d3Config.height, isMobile, containerWidth]);
-    useEffect(() => {
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(activeData !== null && activeData !== void 0 ? activeData : null);
-    }, [activeData, onValueChange]);
-    // Effective y-axis label (hidden on mobile for space)
-    const effectiveYAxisLabel = isMobile ? undefined : d3Config === null || d3Config === void 0 ? void 0 : d3Config.yAxisLabel;
-    const config = useMemo(() => (Object.assign(Object.assign({ margin: {
-            top: isMobile ? 10 : 20,
-            right: isMobile ? 10 : 20,
-            bottom: isMobile ? 40 : (d3Config === null || d3Config === void 0 ? void 0 : d3Config.xAxisLabel) ? 60 : 30,
-            // On mobile, use minimal left margin since y-axis label is hidden
-            left: isMobile ? 35 : (d3Config === null || d3Config === void 0 ? void 0 : d3Config.yAxisLabel) ? 90 : 60,
-        }, curve: undefined, showAxes: true, grid: false, withGradient: type === "area", showDots: false }, d3Config), { 
-        // Override yAxisLabel for mobile
-        yAxisLabel: effectiveYAxisLabel })), [d3Config, type, isMobile, effectiveYAxisLabel]);
-    const calculateTooltipTransform = (tx, ty, isTouch = false) => {
-        if (!tooltipRef.current || !wrapperRef.current) {
-            return "";
-        }
-        const rect = wrapperRef.current.getBoundingClientRect();
-        const tooltipWidth = tooltipRef.current.offsetWidth;
-        const absX = rect.left + tx;
-        let xOffset = TOOLTIP_OFFSET;
-        // Check right edge
-        if (absX + tooltipWidth + TOOLTIP_OFFSET > window.innerWidth - 10) {
-            xOffset = -TOOLTIP_OFFSET - tooltipWidth;
-        }
-        // Check left edge (after potential flip)
-        if (rect.left + tx + xOffset < 10) {
-            xOffset = 10 - (rect.left + tx);
-        }
-        // Apply Y offset for touch to avoid finger occlusion
-        // Shift tooltip 50px above touch point to clear the finger
-        const effectiveY = isTouch ? ty - 50 : ty;
-        return `translate3d(${tx + xOffset}px, calc(${effectiveY}px - 50%), 0)`;
-    };
-    useLayoutEffect(() => {
-        if (activeData && tooltipRef.current && wrapperRef.current) {
-            const { x, y, isTouch } = tooltipPosRef.current;
-            const transform = calculateTooltipTransform(x, y, !!isTouch);
-            if (transform) {
-                tooltipRef.current.style.transform = transform;
-            }
-        }
-    }, [activeData]);
-    useEffect(() => {
-        return () => {
-            if (hideTimeoutRef.current) {
-                clearTimeout(hideTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Track container width for auto aspect ratio
-    useEffect(() => {
-        if (!containerRef.current) {
-            return;
-        }
-        const containerObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (entry) {
-                setContainerWidth(entry.contentRect.width);
-            }
-        });
-        containerObserver.observe(containerRef.current);
-        return () => containerObserver.disconnect();
-    }, []);
-    useEffect(() => {
-        if (!wrapperRef.current) {
-            return;
-        }
-        const resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (entry) {
-                setDimensions({
-                    width: entry.contentRect.width,
-                    height: entry.contentRect.height,
-                });
-            }
-        });
-        resizeObserver.observe(wrapperRef.current);
-        return () => resizeObserver.disconnect();
-    }, []);
-    useEffect(() => {
-        if (!svgRef.current ||
-            !data.length ||
-            dimensions.width === 0 ||
-            dimensions.height === 0) {
-            return;
-        }
-        const { width, height } = dimensions;
-        const margin = config.margin;
-        if (width <= 0 || height <= 0) {
-            return;
-        }
-        const svg = select(svgRef.current);
-        svg.selectAll("*").remove();
-        const g = svg
-            .attr("width", width)
-            .attr("height", height)
-            .append("g")
-            .attr("transform", `translate(${margin.left},${margin.top})`);
-        if (config.withGradient) {
-            setupGradient(svg, gradientId);
-        }
-        const { xScale, yScale, innerWidth, innerHeight } = createScales(data, width, height, margin, x, y, type);
-        if (innerWidth <= 0 || innerHeight <= 0) {
-            return;
-        }
-        if (config.grid) {
-            drawGrid(g, yScale, innerWidth, styles.grid, isMobile);
-        }
-        if (config.showAxes) {
-            drawAxes(g, xScale, yScale, innerWidth, innerHeight, margin, config, styles, isMobile);
-        }
-        const updateTooltip = (tx, ty, data, isTouch = false) => {
-            if (hideTimeoutRef.current) {
-                clearTimeout(hideTimeoutRef.current);
-                hideTimeoutRef.current = null;
-            }
-            tooltipPosRef.current = { x: tx, y: ty, isTouch };
-            if (tooltipRef.current && wrapperRef.current) {
-                const transform = calculateTooltipTransform(tx, ty, isTouch);
-                if (transform) {
-                    tooltipRef.current.style.transform = transform;
-                }
-            }
-            setActiveData((prev) => (prev === data ? prev : data));
-        };
-        const showTooltip = (event, data) => {
-            const [px, py] = select(svgRef.current).select("g").empty()
-                ? [0, 0]
-                : pointer(event, g.node());
-            const tx = px + margin.left;
-            const ty = py + margin.top;
-            updateTooltip(tx, ty, data);
-        };
-        const hideTooltip = () => {
-            hideTimeoutRef.current = setTimeout(() => setActiveData(null), HIDE_DELAY_MS);
-        };
-        const ctx = {
-            g,
-            data,
-            xScale,
-            yScale,
-            x,
-            y,
-            innerWidth,
-            innerHeight,
-            margin,
-            config,
-            styles,
-            gradientId,
-            setHoverState: (state) => {
-                var _a;
-                if (!state) {
-                    hideTooltip();
-                }
-                else {
-                    updateTooltip(state.x, state.y, state.data, (_a = state.isTouch) !== null && _a !== void 0 ? _a : false);
-                }
-            },
-            showTooltip,
-            hideTooltip,
-            type,
-            isMobile,
-            resolveInteraction: (event) => {
-                if (event.cancelable && event.type.startsWith("touch")) {
-                    event.preventDefault();
-                }
-                let el = null;
-                if (event.touches && event.touches.length > 0) {
-                    const touch = event.touches[0];
-                    el = document.elementFromPoint(touch.clientX, touch.clientY);
-                }
-                else {
-                    el = event.currentTarget;
-                }
-                if (!el) {
-                    return null;
-                }
-                const data = select(el).datum();
-                if (Array.isArray(data)) {
-                    return null;
-                }
-                return data ? { element: el, data } : null;
-            },
-        };
-        if (render) {
-            render(ctx);
-        }
-        else if (type === "bar") {
-            drawBars(ctx);
-        }
-        else {
-            drawLineArea(ctx);
-        }
-    }, [data, config, type, gradientId, dimensions, render, isMobile, x, y]);
-    // Render legend items
-    // Render legend items
-    const renderLegend = (isBottom = false, isMobile = false, layout = "horizontal") => {
-        var _a;
-        const paddingRight = isMobile ? 28 : 30;
-        if (!((_a = legend === null || legend === void 0 ? void 0 : legend.data) === null || _a === void 0 ? void 0 : _a.length)) {
-            return null;
-        }
-        // Standard chart (no custom render) supports only 1 series,
-        // so we limit the legend to 1 item to match the single curve/bar series.
-        // If a custom render function is provided, we respect all legend items.
-        const activeData = !render && legend.data.length > 1 ? legend.data.slice(0, 1) : legend.data;
-        const isVertical = layout === "vertical";
-        return (_jsx(Flex, { className: clsx(styles.legend, isBottom && styles.legendBottom), gap: isVertical ? 2 : 4, style: Object.assign(Object.assign({ flexWrap: "wrap", flexDirection: isVertical ? "column" : "row", alignItems: isVertical ? "flex-start" : "center" }, (!isBottom &&
-                !isVertical && {
-                paddingRight: config.margin.left - paddingRight,
-            })), (isBottom && !isMobile && { marginLeft: config.margin.left })), children: activeData.map((item, index) => (_jsxs(Flex, { align: "center", className: styles.legendItem, gap: 1, children: [_jsx("span", { className: styles.legendDot, style: {
-                            backgroundColor: item.color || LEGEND_PALETTE[index % LEGEND_PALETTE.length],
-                        } }), _jsx(Text, { className: styles.legendLabel, variant: "small", children: item.label })] }, item.label))) }));
-    };
-    // Header with title/subtitle on left, legend on right (when position is top)
-    const renderHeader = (isMobile, legendPosition) => {
-        var _a;
-        const hasTitle = title || subtitle;
-        const hasLegendTop = legendPosition === "top" && ((_a = legend === null || legend === void 0 ? void 0 : legend.data) === null || _a === void 0 ? void 0 : _a.length);
-        let marginLeft = isMobile ? 28 : 30;
-        if (legendPosition && legendPosition === "left") {
-            marginLeft = config.margin.left;
-        }
-        if (!hasTitle && !hasLegendTop) {
-            return null;
-        }
-        return (_jsxs(Flex, { align: "center", className: styles.chartHeader, justify: "space-between", style: {
-                marginLeft: config.margin.left - marginLeft,
-                flex: 1, // Allow header to fill available space or share it
-            }, children: [hasTitle ? (_jsxs(Stack, { gap: 2, children: [title && (_jsx("div", { children: typeof title === "string" ? (_jsx(Text, { style: { margin: 0 }, variant: "h5", children: title })) : (title) })), subtitle && (_jsx(Text, { className: styles.subtitle, variant: "small", children: subtitle }))] })) : (_jsx("div", {})), hasLegendTop && renderLegend(false, isMobile)] }));
-    };
-    return (_jsx("div", { ref: containerRef, className: clsx(styles.chartContainer, variant === "solid" && styles.solid, flat && styles.flat, isMobile && styles.mobile, !withFrame && styles.frameless, className), style: Object.assign({ height: autoHeight, width: config.width || "100%" }, style), children: _jsxs(Stack, { gap: isMobile ? 2 : 4, style: { flex: 1, minHeight: 0 }, children: [_jsx(Flex, { justify: "space-between", style: { width: "100%" }, children: renderHeader(isMobile, legendPosition) }), _jsxs(Flex, { gap: 8, style: { flex: 1, minHeight: 0 }, children: [legendPosition === "left" && (_jsx("div", { className: styles.legendVertical, children: renderLegend(false, isMobile, "vertical") })), _jsxs("div", { ref: wrapperRef, className: styles.responsiveWrapper, children: [_jsx("svg", { ref: svgRef, className: styles.chart, style: { display: "block", width: "100%", height: "100%" } }), activeData && (_jsx("div", { ref: tooltipRef, className: styles.tooltipWrapper, style: { pointerEvents: "none" }, children: renderTooltip ? (renderTooltip(activeData)) : (_jsxs(Card, { className: styles.tooltipCard, children: [_jsx("div", { style: { marginBottom: 4 }, children: _jsx(Text, { style: {
-                                                        color: "var(--muted-foreground)",
-                                                        textTransform: "uppercase",
-                                                        fontSize: "10px",
-                                                        letterSpacing: "0.5px",
-                                                    }, variant: "h6", children: x(activeData) }) }), _jsx("div", { children: _jsx(Text, { style: { margin: 0 }, variant: "h4", children: y(activeData) }) })] })) }))] }), legendPosition === "right" && (_jsx("div", { className: styles.legendVertical, children: renderLegend(false, isMobile, "vertical") }))] }), legendPosition === "bottom" && renderLegend(true, isMobile)] }) }));
+import { useChartContext } from "./ChartContext.js";
+import { ChartFooter } from "./ChartFooter.js";
+import { ChartHeader } from "./ChartHeader.js";
+import { ChartLegend } from "./ChartLegend.js";
+import { ChartPlot } from "./ChartPlot.js";
+import { ChartRoot } from "./ChartRoot.js";
+function ChartInternal(props) {
+    const { title, subtitle, withLegend, type, render, renderTooltip } = props;
+    return (_jsx(ChartRoot, Object.assign({}, props, { children: _jsx(StandardChartLayout, { render: render, renderTooltip: renderTooltip, subtitle: subtitle, title: title, type: type, withLegend: withLegend }) })));
 }
+function StandardChartLayout({ title, subtitle, withLegend, type, render, renderTooltip, }) {
+    // Standard Layout:
+    // - Header (Title + Subtitle + Legend Top Right)
+    // - Plot
+    // - (No side/bottom legends in standard mode - usage Composition for that)
+    const { legendItems } = useChartContext();
+    const showLegend = withLegend && legendItems.length > 0;
+    return (_jsxs(Stack, { style: { flex: 1, minHeight: 0 }, children: [_jsx(Flex, { justify: "space-between", style: { width: "100%" }, children: _jsx(ChartHeader, { subtitle: subtitle, title: title, children: showLegend && (_jsx(ChartLegend, { align: "end", items: legendItems, layout: "horizontal" })) }) }), _jsx(Flex, { gap: 8, style: { flex: 1, minHeight: 0 }, children: _jsx(ChartPlot, { render: render, renderTooltip: renderTooltip, type: type }) })] }));
+}
+export const Chart = Object.assign(ChartInternal, {
+    Root: ChartRoot,
+    Header: ChartHeader,
+    Footer: ChartFooter,
+    Legend: ChartLegend,
+    Plot: ChartPlot,
+});

package/dist/components/Chart/Chart.module.css

@@ -18,8 +18,8 @@
 }
 .chart :global .tick text {
   fill: var(--foreground);
-  font-size: 11px;
-  font-weight: 700;
+  font-size: var(--text-xs);
+  font-weight: var(--font-bold);
   text-transform: uppercase;
 }
 
@@ -58,7 +58,7 @@
 
 .cursorLine {
   stroke: var(--muted-foreground);
-  stroke-width: 2px;
+  stroke-width: var(--border-width);
   stroke-dasharray: 4 4;
   opacity: 0;
   pointer-events: none;
@@ -89,7 +89,7 @@
   border: var(--border-width) solid var(--card-border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-hard);
-  padding: 1rem;
+  padding: var(--spacing-lg);
   overflow: visible;
   display: flex;
   flex-direction: column;
@@ -131,13 +131,7 @@
   border-color: var(--solid-fg);
 }
 .chartContainer.mobile {
-  padding: 0.75rem;
-}
-.chartContainer.mobile .axisLabel {
-  font-size: 0.75rem;
-}
-.chartContainer.mobile :global(.tick) text {
-  font-size: 0.75rem;
+  padding: var(--spacing-sm);
 }
 
 .responsiveWrapper {
@@ -159,15 +153,15 @@
 }
 
 .tooltipCard {
-  padding: 8px 12px;
-  font-size: 12px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-xs);
   white-space: nowrap;
 }
 
 .axisLabel {
   fill: var(--foreground);
-  font-size: 11px;
-  font-weight: 700;
+  font-size: var(--text-xs);
+  font-weight: var(--font-bold);
   text-transform: uppercase;
   text-anchor: middle;
 }
@@ -211,6 +205,6 @@
   display: flex;
   flex-direction: column;
   align-self: center;
-  gap: 8px;
-  padding: 0 8px;
+  gap: var(--spacing-sm);
+  padding: 0 var(--spacing-sm);
 }

package/dist/components/Chart/ChartContext.d.ts

@@ -0,0 +1,27 @@
+import { ChartConfig, LegendItem } from "./types";
+export interface ChartContextValue<T = unknown> {
+    data: T[];
+    dimensions: {
+        containerWidth: number;
+        isMobile: boolean;
+    };
+    config: ChartConfig & {
+        margin: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    colorPalette: string[];
+    activeData: T | null;
+    setActiveData: (data: T | null) => void;
+    x: (d: T) => string | number;
+    y: (d: T) => number;
+    legendItems: LegendItem[];
+    type?: "line" | "area" | "bar";
+    render?: (context: any) => void;
+    registerSeries?: (item: LegendItem) => () => void;
+}
+export declare const ChartContext: import("react").Context<ChartContextValue<unknown> | null>;
+export declare function useChartContext<T = unknown>(): ChartContextValue<T>;

package/dist/components/Chart/ChartContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const ChartContext = createContext(null);
+export function useChartContext() {
+    const context = useContext(ChartContext);
+    if (!context) {
+        throw new Error("Chart components must be used within a Chart.Root");
+    }
+    return context;
+}

package/dist/components/Chart/ChartFooter.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ChartFooterProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    align?: "start" | "center" | "end" | "between";
+}
+export declare function ChartFooter({ className, style, children, align, }: ChartFooterProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Chart/ChartFooter.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Flex } from "../Layout/Layout.js";
+import styles from "./Chart.module.css";
+export function ChartFooter({ className, style, children, align = "center", }) {
+    if (!children) {
+        return null;
+    }
+    const justifyMap = {
+        start: "flex-start",
+        center: "center",
+        end: "flex-end",
+        between: "space-between",
+    };
+    return (_jsx(Flex, { align: "center", className: clsx(styles.chartFooter, className), justify: justifyMap[align], style: Object.assign({ width: "100%", marginTop: "var(--spacing-md)" }, style), children: children }));
+}

package/dist/components/Chart/ChartHeader.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ChartHeaderProps {
+    title?: React.ReactNode;
+    subtitle?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function ChartHeader({ title, subtitle, className, style, children, }: ChartHeaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Chart/ChartHeader.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Flex, Stack } from "../Layout/Layout.js";
+import { Text } from "../Text/Text.js";
+// Use relative import for styles to ensure sharing
+import styles from "./Chart.module.css";
+export function ChartHeader({ title, subtitle, className, style, children, }) {
+    const hasTitle = title || subtitle;
+    if (!hasTitle && !children) {
+        return null;
+    }
+    return (_jsxs(Flex, { align: "center", className: clsx(styles.chartHeader, className), justify: "space-between", style: Object.assign({ width: "100%" }, style), children: [hasTitle ? (_jsxs(Stack, { gap: 2, children: [title && (_jsx("div", { children: typeof title === "string" ? (_jsx(Text, { style: { margin: 0 }, variant: "h5", children: title })) : (title) })), subtitle && (_jsx(Text, { className: styles.subtitle, variant: "small", children: subtitle }))] })) : (_jsx("div", {})), children] }));
+}

package/dist/components/Chart/ChartLegend.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { LegendItem } from "./types";
+export interface ChartLegendProps {
+    items?: LegendItem[] | ((items: LegendItem[]) => LegendItem[]);
+    layout?: "horizontal" | "vertical";
+    align?: "start" | "center" | "end";
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function ChartLegend({ items, layout, align, className, style, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Chart/ChartLegend.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { Flex } from "../Layout/Layout.js";
+import { Text } from "../Text/Text.js";
+import styles from "./Chart.module.css";
+import { useChartContext } from "./ChartContext.js";
+export function ChartLegend({ items, layout = "horizontal", align = "start", className, style, }) {
+    const { legendItems, type, render } = useChartContext();
+    const contextItems = useMemo(() => {
+        if (render || (type === "bar" && legendItems.length > 1)) {
+            return legendItems;
+        }
+        return legendItems.slice(0, 1);
+    }, [legendItems, type, render]);
+    const activeItems = typeof items === "function" ? items(contextItems) : (items !== null && items !== void 0 ? items : contextItems);
+    if (!(activeItems === null || activeItems === void 0 ? void 0 : activeItems.length)) {
+        return null;
+    }
+    const isVertical = layout === "vertical";
+    const alignMap = {
+        start: "flex-start",
+        center: "center",
+        end: "flex-end",
+    };
+    return (_jsx(Flex, { className: clsx(styles.legend, className), gap: isVertical ? 2 : 4, style: Object.assign({ flexWrap: "wrap", flexDirection: isVertical ? "column" : "row", justifyContent: isVertical ? "flex-start" : alignMap[align], alignItems: isVertical ? alignMap[align] : "center" }, style), children: activeItems.map((item, index) => (_jsxs(Flex, { align: "center", className: styles.legendItem, gap: 1, children: [_jsx("span", { className: styles.legendDot, style: {
+                        backgroundColor: item.color,
+                    } }), _jsx(Text, { className: styles.legendLabel, variant: "small", children: item.label })] }, item.label || index))) }));
+}

package/dist/components/Chart/ChartPlot.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ChartProps } from "./types";
+export interface ChartPlotProps<T> {
+    type?: ChartProps<T>["type"];
+    render?: ChartProps<T>["render"];
+    renderTooltip?: ChartProps<T>["renderTooltip"];
+    className?: string;
+    style?: React.CSSProperties;
+    label?: string;
+    color?: string;
+}
+export declare function ChartPlot<T>({ type, render, renderTooltip, className, style, label, color, }: ChartPlotProps<T>): import("react/jsx-runtime").JSX.Element;