@cronus-ui/ui 0.6.0

package/dist/components/carousel.d.ts

@@ -0,0 +1,82 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Snap alignment for items inside the viewport. `"start"` lines each slide up
+ * with the left edge (the default, classic gallery feel); `"center"` parks the
+ * active slide in the middle of the viewport (good for peek-a-boo layouts where
+ * neighbours are partially visible).
+ */
+export type CarouselAlign = "start" | "center";
+export interface CarouselOptions {
+    /** Where each slide snaps relative to the viewport. Defaults to `"start"`. */
+    align?: CarouselAlign;
+    /**
+     * When the user scrolls past the last slide (or before the first), wrap around
+     * to the other end instead of stopping. The prev/next buttons stay enabled at
+     * the edges so they can perform the wrap. Defaults to `false`.
+     */
+    loop?: boolean;
+}
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll"> {
+    /** Tuning for snap alignment and looping. */
+    opts?: CarouselOptions;
+    children?: ReactNode;
+}
+/**
+ * Root of the carousel. Owns the shared scroll state — selected index, whether
+ * the viewport can scroll further in each direction, and the live slide count —
+ * and exposes imperative scroll helpers through context. Dependency-free: the
+ * actual sliding is native CSS scroll-snap on {@link CarouselContent}, so touch
+ * drag, momentum and `prefers-reduced-motion` all come for free from the
+ * browser (the OS reduce-motion setting overrides `scroll-smooth`, so no extra
+ * work is needed to honour it).
+ *
+ * Renders a `role="region"` / `aria-roledescription="carousel"` wrapper and
+ * wires ArrowLeft / ArrowRight on the region to scroll prev / next.
+ */
+export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * The scroll viewport: a horizontal flex row with native scroll-snap. Holds the
+ * {@link CarouselItem}s, owns the rAF-throttled `scroll` listener and a
+ * {@link ResizeObserver} that keep the root's `selectedIndex` /
+ * `canScrollPrev` / `canScrollNext` / item count in sync. The scrollbar is
+ * visually hidden (drag/touch still work). Uses the shadcn `-ml-4` gutter trick
+ * paired with `pl-4` on each item to produce an even inter-item gap.
+ */
+export declare const CarouselContent: import("react").ForwardRefExoticComponent<CarouselContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * A single slide. Defaults to full-width (`basis-full`); override `basis-*` via
+ * `className` for multi-item views (e.g. `md:basis-1/2`, `lg:basis-1/3`). The
+ * `pl-4` left padding pairs with the viewport's `-ml-4` to make an even gap.
+ */
+export declare const CarouselItem: import("react").ForwardRefExoticComponent<CarouselItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CarouselPreviousProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * Outline icon button that scrolls to the previous slide. Disabled at the start
+ * (unless `opts.loop`). Renders inline by default; absolutely position it from
+ * the consumer via `className` (e.g. `absolute left-2 top-1/2 -translate-y-1/2`).
+ */
+export declare const CarouselPrevious: import("react").ForwardRefExoticComponent<CarouselPreviousProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface CarouselNextProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * Outline icon button that scrolls to the next slide. Disabled at the end
+ * (unless `opts.loop`). Renders inline by default; absolutely position it from
+ * the consumer via `className` (e.g. `absolute right-2 top-1/2 -translate-y-1/2`).
+ */
+export declare const CarouselNext: import("react").ForwardRefExoticComponent<CarouselNextProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface CarouselDotsProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * One dot per slide; the active dot is filled (`bg-fg`) while the rest are muted
+ * (`bg-border`). Clicking a dot scrolls to that slide. Each dot is a labelled
+ * button ("Go to slide N") and the active one carries `aria-current`.
+ */
+export declare const CarouselDots: import("react").ForwardRefExoticComponent<CarouselDotsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=carousel.d.ts.map

package/dist/components/carousel.js

@@ -0,0 +1,310 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+const CarouselContext = createContext(null);
+function useCarousel(component) {
+    const context = useContext(CarouselContext);
+    if (context === null) {
+        throw new Error(`<${component}> must be used within <Carousel>.`);
+    }
+    return context;
+}
+/**
+ * Reads the per-item width (including the inter-item gap) from the viewport's
+ * first real child. Falls back to the viewport's own client width when the
+ * viewport is empty so callers never divide by zero.
+ */
+function getStep(viewport) {
+    const first = viewport.firstElementChild;
+    if (!first)
+        return viewport.clientWidth || 1;
+    const second = first.nextElementSibling;
+    // Distance between two adjacent item left-edges captures width + flex gap.
+    // `Math.abs` keeps the step positive in RTL, where the delta is negative.
+    if (second)
+        return Math.max(1, Math.abs(second.offsetLeft - first.offsetLeft));
+    return Math.max(1, first.offsetWidth);
+}
+/**
+ * Root of the carousel. Owns the shared scroll state — selected index, whether
+ * the viewport can scroll further in each direction, and the live slide count —
+ * and exposes imperative scroll helpers through context. Dependency-free: the
+ * actual sliding is native CSS scroll-snap on {@link CarouselContent}, so touch
+ * drag, momentum and `prefers-reduced-motion` all come for free from the
+ * browser (the OS reduce-motion setting overrides `scroll-smooth`, so no extra
+ * work is needed to honour it).
+ *
+ * Renders a `role="region"` / `aria-roledescription="carousel"` wrapper and
+ * wires ArrowLeft / ArrowRight on the region to scroll prev / next.
+ */
+export const Carousel = forwardRef(({ opts, className, children, onKeyDown, ...props }, ref) => {
+    const viewportRef = useRef(null);
+    const carouselId = useId();
+    // Synchronously-tracked navigation target. Driven by prev/next (incremented
+    // before the smooth scroll settles) and re-synced by manual swipes via
+    // setTargetIndex, so rapid taps advance more than one slide.
+    const targetIndexRef = useRef(0);
+    // While a programmatic scroll (button/dot/keyboard) is in flight, ignore the
+    // scroll observer's target re-sync — otherwise a rapid burst of taps reads a
+    // mid-animation index and never accumulates past one slide.
+    const navigatingRef = useRef(false);
+    const navTimerRef = useRef(null);
+    const resolvedOpts = useMemo(() => ({ align: opts?.align ?? "start", loop: opts?.loop ?? false }), [opts?.align, opts?.loop]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [itemCount, setItemCount] = useState(0);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    // Looping keeps both buttons live so the edge taps can wrap around.
+    const exposedCanScrollPrev = resolvedOpts.loop ? itemCount > 1 : canScrollPrev;
+    const exposedCanScrollNext = resolvedOpts.loop ? itemCount > 1 : canScrollNext;
+    const scrollTo = useCallback((index) => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        // Mark a programmatic scroll so the observer's re-sync is suppressed until
+        // the smooth scroll settles (the timer outlasts the animation).
+        navigatingRef.current = true;
+        if (navTimerRef.current)
+            clearTimeout(navTimerRef.current);
+        navTimerRef.current = setTimeout(() => {
+            navigatingRef.current = false;
+        }, 500);
+        const rtl = getComputedStyle(viewport).direction === "rtl";
+        const child = viewport.children.item(index);
+        if (child) {
+            // Park the slide at the snap point: its centre under the viewport
+            // centre for center-align, or its left edge for start-align.
+            const raw = resolvedOpts.align === "center"
+                ? child.offsetLeft + child.offsetWidth / 2 - viewport.clientWidth / 2
+                : child.offsetLeft;
+            const left = Math.max(0, raw);
+            // In RTL the reachable scroll range is 0..-maxScroll, so flip the sign.
+            viewport.scrollTo({ left: rtl ? -left : left, behavior: "smooth" });
+            return;
+        }
+        // No child at that index (empty viewport): fall back to a step scroll.
+        const left = index * getStep(viewport);
+        viewport.scrollTo({ left: rtl ? -left : left, behavior: "smooth" });
+    }, [resolvedOpts.align]);
+    const scrollPrev = useCallback(() => {
+        // Step from the synchronous target (not lagging React state) so rapid taps
+        // queue up multiple slides instead of all reading the same mid-scroll spot.
+        const prev = targetIndexRef.current - 1;
+        targetIndexRef.current =
+            resolvedOpts.loop && prev < 0 ? Math.max(0, itemCount - 1) : Math.max(0, prev);
+        scrollTo(targetIndexRef.current);
+    }, [resolvedOpts.loop, itemCount, scrollTo]);
+    const scrollNext = useCallback(() => {
+        const last = itemCount - 1;
+        const next = targetIndexRef.current + 1;
+        targetIndexRef.current = resolvedOpts.loop && next > last ? 0 : Math.min(last, next);
+        scrollTo(targetIndexRef.current);
+    }, [resolvedOpts.loop, itemCount, scrollTo]);
+    // Lets CarouselContent re-anchor the target after a manual swipe/scroll —
+    // but only when no programmatic scroll is in flight, so rapid button taps
+    // (which the observer would otherwise reset mid-animation) still accumulate.
+    const setTargetIndex = useCallback((index) => {
+        if (navigatingRef.current)
+            return;
+        targetIndexRef.current = index;
+    }, []);
+    useEffect(() => () => {
+        if (navTimerRef.current)
+            clearTimeout(navTimerRef.current);
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [onKeyDown, scrollPrev, scrollNext]);
+    const contextValue = useMemo(() => ({
+        viewportRef,
+        selectedIndex,
+        itemCount,
+        canScrollPrev: exposedCanScrollPrev,
+        canScrollNext: exposedCanScrollNext,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        setItemCount,
+        setTargetIndex,
+        opts: resolvedOpts,
+        carouselId,
+    }), [
+        selectedIndex,
+        itemCount,
+        exposedCanScrollPrev,
+        exposedCanScrollNext,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        setTargetIndex,
+        resolvedOpts,
+        carouselId,
+    ]);
+    // Internal setters used by CarouselContent's scroll/resize observers.
+    const internals = useMemo(() => ({ setSelectedIndex, setCanScrollPrev, setCanScrollNext }), []);
+    return (_jsx(CarouselContext.Provider, { value: contextValue, children: _jsx(CarouselInternalsContext.Provider, { value: internals, children: _jsx("div", { ref: ref, "data-slot": "carousel", role: "region", "aria-roledescription": "carousel", onKeyDown: handleKeyDown, className: cn("relative outline-none", className), ...props, children: children }) }) }));
+});
+Carousel.displayName = "Carousel";
+const CarouselInternalsContext = createContext(null);
+/**
+ * The scroll viewport: a horizontal flex row with native scroll-snap. Holds the
+ * {@link CarouselItem}s, owns the rAF-throttled `scroll` listener and a
+ * {@link ResizeObserver} that keep the root's `selectedIndex` /
+ * `canScrollPrev` / `canScrollNext` / item count in sync. The scrollbar is
+ * visually hidden (drag/touch still work). Uses the shadcn `-ml-4` gutter trick
+ * paired with `pl-4` on each item to produce an even inter-item gap.
+ */
+export const CarouselContent = forwardRef(({ className, children, ...props }, forwardedRef) => {
+    const { viewportRef, setItemCount, setTargetIndex, opts, carouselId } = useCarousel("CarouselContent");
+    const internals = useContext(CarouselInternalsContext);
+    const setRefs = useCallback((node) => {
+        viewportRef.current = node;
+        if (typeof forwardedRef === "function") {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [viewportRef, forwardedRef]);
+    const update = useCallback(() => {
+        const viewport = viewportRef.current;
+        if (!viewport || !internals)
+            return;
+        const count = viewport.children.length;
+        setItemCount(count);
+        const { scrollLeft, scrollWidth, clientWidth } = viewport;
+        const maxScroll = scrollWidth - clientWidth;
+        // RTL scrollLeft is negative-going; compare snap targets in positive space.
+        const pos = Math.abs(scrollLeft);
+        // Clamped snap target for a slide: its centre (center align) or left edge
+        // (start align), bounded to the reachable [0, maxScroll] range so the last
+        // slide — whose ideal target may exceed maxScroll — stays selectable.
+        const snapTarget = (child) => {
+            const raw = opts.align === "center"
+                ? child.offsetLeft + child.offsetWidth / 2 - clientWidth / 2
+                : child.offsetLeft;
+            return Math.max(0, Math.min(maxScroll, raw));
+        };
+        // Argmin: pick the slide whose actual snap target is nearest the current
+        // (RTL-normalized) scroll position.
+        let index = 0;
+        let best = Number.POSITIVE_INFINITY;
+        for (let i = 0; i < count; i++) {
+            const child = viewport.children.item(i);
+            if (!child)
+                continue;
+            const distance = Math.abs(pos - snapTarget(child));
+            if (distance < best) {
+                best = distance;
+                index = i;
+            }
+        }
+        internals.setSelectedIndex(index);
+        // Re-anchor the navigation target so a manual swipe then a button press
+        // steps from the slide the user actually landed on.
+        setTargetIndex(index);
+        // 1px slack absorbs sub-pixel rounding at the extremes.
+        internals.setCanScrollPrev(pos > 1);
+        internals.setCanScrollNext(pos < maxScroll - 1);
+    }, [viewportRef, internals, setItemCount, setTargetIndex, opts.align]);
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        let frame = 0;
+        const onScroll = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                update();
+            });
+        };
+        // Mirror live DOM changes (slides added/removed) into the index + count.
+        const mutationObserver = new MutationObserver(() => update());
+        mutationObserver.observe(viewport, { childList: true });
+        const resizeObserver = new ResizeObserver(() => update());
+        resizeObserver.observe(viewport);
+        viewport.addEventListener("scroll", onScroll, { passive: true });
+        // Initial sync once layout is measured.
+        update();
+        return () => {
+            if (frame)
+                cancelAnimationFrame(frame);
+            viewport.removeEventListener("scroll", onScroll);
+            mutationObserver.disconnect();
+            resizeObserver.disconnect();
+        };
+    }, [viewportRef, update]);
+    return (_jsx("div", { ref: setRefs, id: `${carouselId}-viewport`, "data-slot": "carousel-content", 
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: the slides viewport is intentionally focusable so keyboard users can scroll/arrow through the slides.
+        tabIndex: 0, className: cn("-ml-4 flex overflow-x-auto scroll-smooth snap-x snap-mandatory outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", 
+        // Hide the scrollbar across engines; drag + touch still work.
+        "[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", className), ...props, children: children }));
+});
+CarouselContent.displayName = "CarouselContent";
+/**
+ * A single slide. Defaults to full-width (`basis-full`); override `basis-*` via
+ * `className` for multi-item views (e.g. `md:basis-1/2`, `lg:basis-1/3`). The
+ * `pl-4` left padding pairs with the viewport's `-ml-4` to make an even gap.
+ */
+export const CarouselItem = forwardRef(({ className, ...props }, ref) => {
+    const { opts } = useCarousel("CarouselItem");
+    return (_jsx("div", { ref: ref, "data-slot": "carousel-item", role: "group", "aria-roledescription": "slide", className: cn("min-w-0 shrink-0 grow-0 basis-full pl-4", opts.align === "center" ? "snap-center" : "snap-start", className), ...props }));
+});
+CarouselItem.displayName = "CarouselItem";
+/**
+ * Outline icon button that scrolls to the previous slide. Disabled at the start
+ * (unless `opts.loop`). Renders inline by default; absolutely position it from
+ * the consumer via `className` (e.g. `absolute left-2 top-1/2 -translate-y-1/2`).
+ */
+export const CarouselPrevious = forwardRef(({ className, onClick, disabled, children, ...props }, ref) => {
+    const { scrollPrev, canScrollPrev, carouselId } = useCarousel("CarouselPrevious");
+    return (_jsx(Button, { ref: ref, "data-slot": "carousel-previous", variant: "outline", size: "icon", "aria-label": "Previous slide", "aria-controls": `${carouselId}-viewport`, disabled: disabled ?? !canScrollPrev, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                scrollPrev();
+        }, className: cn("rounded-full", className), ...props, children: children ?? _jsx(ChevronLeft, {}) }));
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+/**
+ * Outline icon button that scrolls to the next slide. Disabled at the end
+ * (unless `opts.loop`). Renders inline by default; absolutely position it from
+ * the consumer via `className` (e.g. `absolute right-2 top-1/2 -translate-y-1/2`).
+ */
+export const CarouselNext = forwardRef(({ className, onClick, disabled, children, ...props }, ref) => {
+    const { scrollNext, canScrollNext, carouselId } = useCarousel("CarouselNext");
+    return (_jsx(Button, { ref: ref, "data-slot": "carousel-next", variant: "outline", size: "icon", "aria-label": "Next slide", "aria-controls": `${carouselId}-viewport`, disabled: disabled ?? !canScrollNext, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                scrollNext();
+        }, className: cn("rounded-full", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+});
+CarouselNext.displayName = "CarouselNext";
+/**
+ * One dot per slide; the active dot is filled (`bg-fg`) while the rest are muted
+ * (`bg-border`). Clicking a dot scrolls to that slide. Each dot is a labelled
+ * button ("Go to slide N") and the active one carries `aria-current`.
+ */
+export const CarouselDots = forwardRef(({ className, ...props }, ref) => {
+    const { itemCount, selectedIndex, scrollTo } = useCarousel("CarouselDots");
+    return (_jsx("div", { ref: ref, "data-slot": "carousel-dots", className: cn("flex items-center justify-center gap-2", className), ...props, children: Array.from({ length: itemCount }, (_, index) => {
+            const active = index === selectedIndex;
+            return (_jsx("button", { type: "button", "data-slot": "carousel-dot", "data-active": active || undefined, "aria-label": `Go to slide ${index + 1}`, "aria-current": active || undefined, onClick: () => scrollTo(index), className: cn("size-2 rounded-full transition-colors", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", active ? "bg-fg" : "bg-border hover:bg-fg-muted") }, index));
+        }) }));
+});
+CarouselDots.displayName = "CarouselDots";
+//# sourceMappingURL=carousel.js.map

package/dist/components/chart.d.ts

@@ -0,0 +1,100 @@
+import * as RechartsPrimitive from "recharts";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+/** One series in a ready-made chart (AreaChart, LineChart, …). */
+export interface ChartSeries {
+    key: string;
+    label: string;
+    color?: string;
+}
+/** Map series to a ChartConfig using chart-1..5 when color is omitted. */
+export declare function chartSeriesConfig(series: readonly ChartSeries[]): ChartConfig;
+declare const ChartContainer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function isSafeChartColor(value: string): boolean;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => import("react").JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+interface TooltipPayloadItem {
+    value?: number | string;
+    name?: number | string;
+    dataKey?: number | string;
+    color?: string;
+    payload?: any;
+}
+interface ChartTooltipContentProps extends React.ComponentProps<"div"> {
+    active?: boolean;
+    payload?: TooltipPayloadItem[];
+    label?: React.ReactNode;
+    labelKey?: string;
+    nameKey?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    /** Format a numeric series value (default: en-US grouping). */
+    formatValue?: (value: number, name: string) => string;
+}
+declare const ChartTooltipContent: import("react").ForwardRefExoticComponent<Omit<ChartTooltipContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Vertical crosshair + optional axis pill for cartesian tooltips.
+ * Pass as `cursor={<ChartCursor labelKey="date" />}` on ChartTooltip.
+ */
+export interface ChartCursorProps {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    top?: number;
+    left?: number;
+    points?: {
+        x: number;
+        y: number;
+    }[];
+    payload?: TooltipPayloadItem[];
+    /** Field on the datum shown in the axis pill. */
+    labelKey?: string;
+    /**
+     * Draw the hovered label as a pill on the x-axis.
+     * Turn off when the axis already prints that tick — otherwise the pill
+     * stacks on the label (e.g. "Aug 6" over "Aug 7").
+     * @default true
+     */
+    showAxisLabel?: boolean;
+}
+declare function ChartCursor({ x, points, height, top, payload, labelKey, showAxisLabel, }: ChartCursorProps): import("react").JSX.Element | null;
+declare namespace ChartCursor {
+    var displayName: string;
+}
+declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+interface LegendPayloadItem {
+    value?: number | string;
+    dataKey?: number | string;
+    color?: string;
+}
+interface ChartLegendContentProps extends React.ComponentProps<"div"> {
+    payload?: LegendPayloadItem[];
+    verticalAlign?: "top" | "bottom" | "middle";
+    hideIcon?: boolean;
+    nameKey?: string;
+}
+declare const ChartLegendContent: import("react").ForwardRefExoticComponent<Omit<ChartLegendContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { ChartContainer, ChartCursor, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, isSafeChartColor, };
+//# sourceMappingURL=chart.d.ts.map