@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/card.d.ts

@@ -0,0 +1,43 @@
+import { useRender } from "@base-ui/react/use-render";
+export declare const cardSizeNames: readonly ["default", "sm"];
+export declare const cardSurfaceNames: readonly ["default", "raised"];
+export type CardSize = (typeof cardSizeNames)[number];
+export type CardSurface = (typeof cardSurfaceNames)[number];
+export interface CardVariantOptions {
+    size?: CardSize | null;
+    surface?: CardSurface | null;
+    className?: string;
+}
+export declare function cardVariants({ size, surface, className, }?: CardVariantOptions): string;
+export interface CardState extends Record<string, unknown> {
+    slot: "card";
+    size: CardSize;
+    surface: CardSurface;
+}
+export interface CardProps extends useRender.ComponentProps<"div", CardState> {
+    /** `sm` tightens padding and gaps from 16px to 12px and shrinks the title. */
+    size?: CardSize;
+    /** `raised` lifts the card off a surface of the same color. */
+    surface?: CardSurface;
+}
+/**
+ * A bordered panel that groups related content. Compose it with
+ * `CardHeader`, `CardContent`, and `CardFooter`.
+ */
+export declare function Card({ className, size, surface, render, ref, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type PartSlot = "card-header" | "card-title" | "card-description" | "card-action" | "card-content" | "card-footer";
+export interface CardPartState extends Record<string, unknown> {
+    slot: PartSlot;
+}
+export type CardPartProps = useRender.ComponentProps<"div", CardPartState>;
+/** Lays out the title, description, and an optional `CardAction`. */
+export declare const CardHeader: ({ className, render, ref, ...props }: CardPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** A `div` by default. Pass `render={<h3 />}` to put it in the outline. */
+export declare const CardTitle: ({ className, render, ref, ...props }: CardPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const CardDescription: ({ className, render, ref, ...props }: CardPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Pins a badge or compact control to the header's top-right corner. */
+export declare const CardAction: ({ className, render, ref, ...props }: CardPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const CardContent: ({ className, render, ref, ...props }: CardPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** A tinted bar along the bottom edge for actions and status. */
+export declare const CardFooter: ({ className, render, ref, ...props }: CardPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/card.js

@@ -0,0 +1,42 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../internal/classes.js";
+export const cardSizeNames = ["default", "sm"];
+export const cardSurfaceNames = ["default", "raised"];
+export function cardVariants({ size, surface, className, } = {}) {
+    return cn("sprout-card", size === "sm" && "sprout-card-sm", surface === "raised" && "sprout-card-raised", className);
+}
+/**
+ * A bordered panel that groups related content. Compose it with
+ * `CardHeader`, `CardContent`, and `CardFooter`.
+ */
+export function Card({ className, size = "default", surface = "default", render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        ref,
+        render,
+        props: mergeProps({ className: cardVariants({ size, surface, className }) }, props),
+        state: { slot: "card", size, surface },
+    });
+}
+function part(slot, base) {
+    return function CardPart({ className, render, ref, ...props }) {
+        return useRender({
+            defaultTagName: "div",
+            ref,
+            render,
+            props: mergeProps({ className: cn(base, className) }, props),
+            state: { slot },
+        });
+    };
+}
+/** Lays out the title, description, and an optional `CardAction`. */
+export const CardHeader = part("card-header", "sprout-card-header");
+/** A `div` by default. Pass `render={<h3 />}` to put it in the outline. */
+export const CardTitle = part("card-title", "sprout-card-title");
+export const CardDescription = part("card-description", "sprout-card-description");
+/** Pins a badge or compact control to the header's top-right corner. */
+export const CardAction = part("card-action", "sprout-card-action");
+export const CardContent = part("card-content", "sprout-card-content");
+/** A tinted bar along the bottom edge for actions and status. */
+export const CardFooter = part("card-footer", "sprout-card-footer");

package/dist/components/carousel.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentProps, type RefCallback } from "react";
+import { type ButtonProps } from "./button.js";
+export declare const carouselOrientationNames: readonly ["horizontal", "vertical"];
+export declare const carouselAlignNames: readonly ["start", "center", "end"];
+export type CarouselOrientation = (typeof carouselOrientationNames)[number];
+export type CarouselAlign = (typeof carouselAlignNames)[number];
+export type CarouselEvent = "select" | "reInit";
+export interface CarouselOptions {
+    /** Where a slide lands in the viewport when it is the current one. Default `start`. */
+    align?: CarouselAlign | undefined;
+    /** Scroll freely without snapping to slides. Arrows and keys still step one slide. */
+    dragFree?: boolean | undefined;
+    /** Next on the last slide goes back to the first, and Previous on the first goes to the last. */
+    loop?: boolean | undefined;
+    /** The slide to show first, without animation. Default `0`. */
+    startIndex?: number | undefined;
+}
+export interface CarouselApi {
+    scrollPrev(): void;
+    scrollNext(): void;
+    scrollTo(index: number): void;
+    canScrollPrev(): boolean;
+    canScrollNext(): boolean;
+    selectedScrollSnap(): number;
+    /** Scroll offsets, in px, of each stop. Slides that share the end stop share one entry. */
+    scrollSnapList(): number[];
+    slideNodes(): HTMLElement[];
+    on(event: CarouselEvent, listener: (api: CarouselApi) => void): CarouselApi;
+    off(event: CarouselEvent, listener: (api: CarouselApi) => void): CarouselApi;
+}
+export interface CarouselProps extends ComponentProps<"div"> {
+    opts?: CarouselOptions | undefined;
+    orientation?: CarouselOrientation | undefined;
+    /** Receives the carousel API once it mounts. */
+    setApi?: ((api: CarouselApi) => void) | undefined;
+}
+export interface CarouselContextValue {
+    /** Attach to the scrolling viewport. `CarouselContent` does this. */
+    carouselRef: RefCallback<HTMLDivElement>;
+    api: CarouselApi;
+    opts: CarouselOptions | undefined;
+    orientation: CarouselOrientation;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number) => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+    selectedIndex: number;
+    snapCount: number;
+}
+export declare function useCarousel(): CarouselContextValue;
+export declare function Carousel({ orientation, opts, setApi, className, children, onKeyDownCapture, ...props }: CarouselProps): import("react").JSX.Element;
+export declare function CarouselContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CarouselItem({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export type CarouselButtonProps = Omit<ButtonProps, "state" | "pendingLabel">;
+export declare function CarouselPrevious({ className, variant, size, children, ...props }: CarouselButtonProps): import("react").JSX.Element;
+export declare function CarouselNext({ className, variant, size, children, ...props }: CarouselButtonProps): import("react").JSX.Element;

package/dist/components/carousel.js

@@ -0,0 +1,422 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+export const carouselOrientationNames = ["horizontal", "vertical"];
+export const carouselAlignNames = ["start", "center", "end"];
+const CarouselContext = createContext(null);
+export function useCarousel() {
+    const context = useContext(CarouselContext);
+    if (!context)
+        throw new Error("useCarousel must be used within a <Carousel />");
+    return context;
+}
+const typing = 'input, textarea, select, [contenteditable="true"]';
+const focusable = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+function measure(viewport, horizontal, align) {
+    const position = horizontal ? viewport.scrollLeft : viewport.scrollTop;
+    const view = horizontal ? viewport.clientWidth : viewport.clientHeight;
+    const max = Math.max(0, (horizontal ? viewport.scrollWidth : viewport.scrollHeight) - view);
+    const frame = viewport.getBoundingClientRect();
+    const slides = Array.from(viewport.firstElementChild?.children ?? []);
+    const snaps = [];
+    for (const slide of slides) {
+        const box = slide.getBoundingClientRect();
+        const start = (horizontal ? box.left - frame.left : box.top - frame.top) + position;
+        const length = horizontal ? box.width : box.height;
+        const target = align === "start"
+            ? start
+            : align === "center"
+                ? start + length / 2 - view / 2
+                : start + length - view;
+        snaps.push(Math.round(Math.min(max, Math.max(0, target))));
+    }
+    // Like a contained scroll: the first stop is the start and the last is the end.
+    if (snaps.length) {
+        snaps[0] = 0;
+        snaps[snaps.length - 1] = Math.round(max);
+    }
+    const unique = snaps.filter((snap, index) => index === 0 || Math.abs(snap - snaps[index - 1]) > 1);
+    return { position, max, snaps: unique.length ? unique : [0] };
+}
+function nearest(snaps, position) {
+    let best = 0;
+    for (let index = 1; index < snaps.length; index += 1)
+        if (Math.abs(snaps[index] - position) < Math.abs(snaps[best] - position))
+            best = index;
+    return best;
+}
+const initialState = {
+    canScrollPrev: false,
+    canScrollNext: false,
+    selectedIndex: 0,
+    snapCount: 0,
+    viewportFocusable: false,
+};
+export function Carousel({ orientation = "horizontal", opts, setApi, className, children, onKeyDownCapture, ...props }) {
+    const horizontal = orientation === "horizontal";
+    const align = opts?.align ?? "start";
+    const loop = opts?.loop ?? false;
+    const viewport = useRef(null);
+    const settings = useRef({ horizontal, align, loop });
+    settings.current = { horizontal, align, loop };
+    const pending = useRef(null);
+    const selected = useRef(0);
+    const listeners = useRef(new Map());
+    const [state, setState] = useState(initialState);
+    const geometry = useCallback(() => {
+        const node = viewport.current;
+        if (!node)
+            return null;
+        const { horizontal, align } = settings.current;
+        return measure(node, horizontal, align);
+    }, []);
+    const apiRef = useRef(null);
+    const emit = useCallback((event) => {
+        const api = apiRef.current;
+        if (!api)
+            return;
+        listeners.current.get(event)?.forEach((listener) => listener(api));
+    }, []);
+    const update = useCallback(() => {
+        const node = viewport.current;
+        const shape = geometry();
+        if (!node || !shape)
+            return;
+        const { position, max, snaps } = shape;
+        const target = pending.current?.target;
+        if (target !== undefined && Math.abs(position - target) <= 1) {
+            window.clearTimeout(pending.current.timer);
+            pending.current = null;
+        }
+        const wraps = settings.current.loop && snaps.length > 1;
+        const next = {
+            canScrollPrev: wraps || position > 1,
+            canScrollNext: wraps || position < max - 1,
+            selectedIndex: nearest(snaps, position),
+            snapCount: snaps.length,
+            viewportFocusable: max > 0 && !node.firstElementChild?.querySelector(focusable),
+        };
+        const changed = next.selectedIndex !== selected.current;
+        selected.current = next.selectedIndex;
+        setState((current) => current.canScrollPrev === next.canScrollPrev &&
+            current.canScrollNext === next.canScrollNext &&
+            current.selectedIndex === next.selectedIndex &&
+            current.snapCount === next.snapCount &&
+            current.viewportFocusable === next.viewportFocusable
+            ? current
+            : next);
+        if (changed)
+            emit("select");
+    }, [emit, geometry]);
+    const go = useCallback((target, instant = false) => {
+        const node = viewport.current;
+        if (!node)
+            return;
+        if (pending.current)
+            window.clearTimeout(pending.current.timer);
+        pending.current = {
+            target,
+            timer: window.setTimeout(() => {
+                pending.current = null;
+                update();
+            }, 700),
+        };
+        const key = settings.current.horizontal ? "left" : "top";
+        node.scrollTo({
+            [key]: target,
+            ...(instant ? { behavior: "instant" } : {}),
+        });
+        update();
+    }, [update]);
+    const scrollTo = useCallback((index, instant = false) => {
+        const shape = geometry();
+        if (!shape)
+            return;
+        const clamped = Math.min(shape.snaps.length - 1, Math.max(0, index));
+        go(shape.snaps[clamped], instant);
+    }, [geometry, go]);
+    const step = useCallback((direction) => {
+        const shape = geometry();
+        if (!shape)
+            return;
+        const from = pending.current?.target ?? shape.position;
+        const target = direction > 0
+            ? shape.snaps.find((snap) => snap > from + 1)
+            : [...shape.snaps].reverse().find((snap) => snap < from - 1);
+        if (target !== undefined)
+            go(target);
+        else if (settings.current.loop && shape.snaps.length > 1)
+            go(direction > 0 ? 0 : shape.max);
+    }, [geometry, go]);
+    const scrollPrev = useCallback(() => step(-1), [step]);
+    const scrollNext = useCallback(() => step(1), [step]);
+    if (!apiRef.current) {
+        const api = {
+            scrollPrev: () => step(-1),
+            scrollNext: () => step(1),
+            scrollTo: (index) => scrollTo(index),
+            canScrollPrev: () => {
+                const shape = geometry();
+                if (!shape)
+                    return false;
+                return ((settings.current.loop && shape.snaps.length > 1) ||
+                    shape.position > 1);
+            },
+            canScrollNext: () => {
+                const shape = geometry();
+                if (!shape)
+                    return false;
+                return ((settings.current.loop && shape.snaps.length > 1) ||
+                    shape.position < shape.max - 1);
+            },
+            selectedScrollSnap: () => selected.current,
+            scrollSnapList: () => geometry()?.snaps ?? [],
+            slideNodes: () => Array.from(viewport.current?.firstElementChild?.children ?? []),
+            on: (event, listener) => {
+                const set = listeners.current.get(event) ?? new Set();
+                set.add(listener);
+                listeners.current.set(event, set);
+                return api;
+            },
+            off: (event, listener) => {
+                listeners.current.get(event)?.delete(listener);
+                return api;
+            },
+        };
+        apiRef.current = api;
+    }
+    const api = apiRef.current;
+    const frame = useRef(0);
+    const scheduleUpdate = useCallback(() => {
+        if (frame.current)
+            return;
+        frame.current = requestAnimationFrame(() => {
+            frame.current = 0;
+            update();
+        });
+    }, [update]);
+    const startIndex = opts?.startIndex ?? 0;
+    const started = useRef(false);
+    const [node, setNode] = useState(null);
+    const carouselRef = useCallback((element) => {
+        viewport.current = element;
+        setNode(element);
+    }, []);
+    useEffect(() => {
+        if (!node)
+            return;
+        const reInit = () => {
+            update();
+            emit("reInit");
+        };
+        if (!started.current) {
+            started.current = true;
+            if (startIndex > 0)
+                scrollTo(startIndex, true);
+        }
+        update();
+        const resize = new ResizeObserver(reInit);
+        resize.observe(node);
+        const track = node.firstElementChild;
+        if (track)
+            resize.observe(track);
+        const mutation = new MutationObserver(() => {
+            if (track)
+                for (const slide of track.children)
+                    resize.observe(slide);
+            reInit();
+        });
+        if (track) {
+            for (const slide of track.children)
+                resize.observe(slide);
+            mutation.observe(track, { childList: true, subtree: true });
+        }
+        node.addEventListener("scroll", scheduleUpdate, { passive: true });
+        node.addEventListener("scrollend", update);
+        return () => {
+            resize.disconnect();
+            mutation.disconnect();
+            node.removeEventListener("scroll", scheduleUpdate);
+            node.removeEventListener("scrollend", update);
+            cancelAnimationFrame(frame.current);
+            frame.current = 0;
+        };
+    }, [node, emit, scheduleUpdate, scrollTo, startIndex, update]);
+    // Orientation, alignment, and looping change the stops.
+    useEffect(() => {
+        if (!node)
+            return;
+        update();
+        emit("reInit");
+    }, [node, horizontal, align, loop, update, emit]);
+    useEffect(() => {
+        if (!setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    useEffect(() => () => {
+        if (pending.current)
+            window.clearTimeout(pending.current.timer);
+    }, []);
+    const handleKeyDown = (event) => {
+        onKeyDownCapture?.(event);
+        if (event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey)
+            return;
+        if (event.target.closest(typing))
+            return;
+        const back = event.key === "ArrowLeft" || (!horizontal && event.key === "ArrowUp");
+        const forward = event.key === "ArrowRight" || (!horizontal && event.key === "ArrowDown");
+        if (back || forward) {
+            event.preventDefault();
+            step(back ? -1 : 1);
+        }
+        else if (event.key === "Home" || event.key === "End") {
+            if (!event.target.closest('[data-slot="carousel-content"]'))
+                return;
+            event.preventDefault();
+            scrollTo(event.key === "Home" ? 0 : Number.MAX_SAFE_INTEGER);
+        }
+    };
+    const value = useMemo(() => ({
+        carouselRef,
+        api,
+        opts,
+        orientation,
+        scrollPrev,
+        scrollNext,
+        scrollTo: (index) => scrollTo(index),
+        canScrollPrev: state.canScrollPrev,
+        canScrollNext: state.canScrollNext,
+        selectedIndex: state.selectedIndex,
+        snapCount: state.snapCount,
+    }), [
+        carouselRef,
+        api,
+        opts,
+        orientation,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        state,
+    ]);
+    return (_jsx(CarouselContext.Provider, { value: value, children: _jsx(ViewportFocus.Provider, { value: state.viewportFocusable, children: _jsx("div", { role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", "data-orientation": orientation, className: cn("sprout-carousel", className), onKeyDownCapture: handleKeyDown, ...props, children: children }) }) }));
+}
+const ViewportFocus = createContext(false);
+export function CarouselContent({ className, ...props }) {
+    const { carouselRef, orientation, opts, api } = useCarousel();
+    const focusableViewport = useContext(ViewportFocus);
+    const horizontal = orientation === "horizontal";
+    const drag = useRef(null);
+    const node = useRef(null);
+    const ref = useCallback((element) => {
+        node.current = element;
+        carouselRef(element);
+    }, [carouselRef]);
+    const coordinate = (event) => horizontal ? event.clientX : event.clientY;
+    const onPointerDown = (event) => {
+        if (event.pointerType !== "mouse" || event.button !== 0)
+            return;
+        if (event.target.closest(typing))
+            return;
+        const viewport = node.current;
+        drag.current = {
+            id: event.pointerId,
+            start: coordinate(event),
+            scroll: horizontal ? viewport.scrollLeft : viewport.scrollTop,
+            moved: false,
+        };
+    };
+    const onPointerMove = (event) => {
+        const current = drag.current;
+        if (!current || current.id !== event.pointerId)
+            return;
+        const delta = coordinate(event) - current.start;
+        if (!current.moved) {
+            if (Math.abs(delta) < 5)
+                return;
+            current.moved = true;
+            event.currentTarget.setPointerCapture(event.pointerId);
+            event.currentTarget.setAttribute("data-dragging", "");
+        }
+        const viewport = event.currentTarget;
+        if (horizontal)
+            viewport.scrollLeft = current.scroll - delta;
+        else
+            viewport.scrollTop = current.scroll - delta;
+    };
+    const onPointerEnd = (event) => {
+        const current = drag.current;
+        if (!current || current.id !== event.pointerId)
+            return;
+        drag.current = null;
+        if (!current.moved)
+            return;
+        const viewport = event.currentTarget;
+        if (viewport.hasPointerCapture(event.pointerId))
+            viewport.releasePointerCapture(event.pointerId);
+        const swallow = (click) => {
+            click.preventDefault();
+            click.stopPropagation();
+        };
+        window.addEventListener("click", swallow, { capture: true, once: true });
+        window.setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
+        const release = () => {
+            if (!drag.current)
+                viewport.removeAttribute("data-dragging");
+        };
+        if (opts?.dragFree)
+            return release();
+        const position = horizontal ? viewport.scrollLeft : viewport.scrollTop;
+        const view = horizontal ? viewport.clientWidth : viewport.clientHeight;
+        const moved = position - current.scroll;
+        const snaps = api.scrollSnapList();
+        const from = nearest(snaps, current.scroll);
+        // A short flick still moves one slide; a long drag lands on the nearest.
+        const index = Math.abs(moved) > view * 0.5
+            ? nearest(snaps, position)
+            : Math.abs(moved) > Math.min(40, view * 0.15)
+                ? from + Math.sign(moved)
+                : from;
+        const target = snaps[Math.min(snaps.length - 1, Math.max(0, index))];
+        if (target === undefined || Math.abs(target - position) < 1)
+            return release();
+        // Snapping stays off until the settle scroll ends; turning it back on
+        // earlier makes the browser pull the viewport to the closest stop instead.
+        let timer = 0;
+        const settle = () => {
+            window.clearTimeout(timer);
+            viewport.removeEventListener("scrollend", settle);
+            release();
+        };
+        viewport.addEventListener("scrollend", settle);
+        timer = window.setTimeout(settle, 700);
+        const smooth = window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+        viewport.scrollTo({
+            [horizontal ? "left" : "top"]: target,
+            behavior: smooth ? "smooth" : "instant",
+        });
+    };
+    return (_jsx("div", { ref: ref, "data-slot": "carousel-content", "data-orientation": orientation, "data-align": opts?.align ?? "start", "data-drag-free": opts?.dragFree ? "" : undefined, tabIndex: focusableViewport ? 0 : undefined, className: "sprout-carousel-content", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onDragStart: (event) => {
+            if (drag.current)
+                event.preventDefault();
+        }, children: _jsx("div", { "data-slot": "carousel-track", className: cn("sprout-carousel-track", className), ...props }) }));
+}
+export function CarouselItem({ className, ...props }) {
+    const { orientation } = useCarousel();
+    return (_jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", "data-orientation": orientation, className: cn("sprout-carousel-item", className), ...props }));
+}
+export function CarouselPrevious({ className, variant = "secondary", size = "icon", children, ...props }) {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (_jsx(Button, { "data-slot": "carousel-previous", "data-orientation": orientation, variant: variant, size: size, "aria-label": "Previous slide", focusableWhenDisabled: true, className: cn("sprout-carousel-control", "sprout-carousel-previous", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: children ?? _jsx(ChevronLeft, { "aria-hidden": "true" }) }));
+}
+export function CarouselNext({ className, variant = "secondary", size = "icon", children, ...props }) {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (_jsx(Button, { "data-slot": "carousel-next", "data-orientation": orientation, variant: variant, size: size, "aria-label": "Next slide", focusableWhenDisabled: true, className: cn("sprout-carousel-control", "sprout-carousel-next", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: children ?? _jsx(ChevronRight, { "aria-hidden": "true" }) }));
+}

package/dist/components/chart.d.ts

@@ -0,0 +1,112 @@
+import { type ComponentProps, type ComponentType, type ReactNode } from "react";
+import { ResponsiveContainer, Tooltip, type DefaultLegendContentProps, type DefaultTooltipContentProps, type TooltipValueType } from "recharts";
+/** Theme names a `ChartConfig` entry can color, and the selector each one uses. */
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export declare const chartIndicatorNames: readonly ["dot", "line", "dashed"];
+export type ChartIndicator = (typeof chartIndicatorNames)[number];
+export type ChartConfig = Record<string, {
+    label?: ReactNode;
+    icon?: ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+/**
+ * The CSS variable a `ChartContainer` sets for one config key. Pass it as a
+ * series `fill` or `stroke`, for example `fill={chartColor("tasks")}`.
+ */
+export declare function chartColor(key: string): string;
+export type ChartContainerProps = ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: ComponentProps<typeof ResponsiveContainer>["children"];
+    /** Size used before the container is measured, and on the server. */
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+};
+/**
+ * Sizes a Recharts chart to its box and turns `config` into series colors
+ * and labels for the tooltip and legend. The box is 16:9 unless `className`
+ * or `style` gives it a height.
+ */
+export declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: ChartContainerProps): import("react").JSX.Element;
+/**
+ * Writes `--sprout-chart-color-<key>` for every colored config entry, with a
+ * dark value for entries that pass `theme`. `ChartContainer` renders it.
+ */
+export declare function ChartStyle({ id, config, }: {
+    id: string;
+    config: ChartConfig;
+}): import("react").JSX.Element | null;
+export type ChartTooltipProps = ComponentProps<typeof Tooltip>;
+/**
+ * Recharts' `Tooltip`, moving in 160ms. Pass `content={<ChartTooltipContent />}`.
+ * It stays still when reduced motion is on.
+ */
+export declare function ChartTooltip(props: ChartTooltipProps): import("react").JSX.Element;
+type TooltipNameType = number | string;
+export type ChartTooltipContentProps = ComponentProps<typeof Tooltip> & ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: ChartIndicator;
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">;
+/**
+ * The tooltip card: a label, then one row per series with its indicator,
+ * config label, and value. Recharts passes `active`, `payload`, and `label`.
+ */
+export declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react").JSX.Element | null;
+/** Recharts' `Legend`. Pass `content={<ChartLegendContent />}`. */
+export declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
+export type ChartLegendContentProps = ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & DefaultLegendContentProps;
+/** A centered row of swatches and config labels, one per series. */
+export declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ChartLegendContentProps): import("react").JSX.Element | null;
+/** One bar series: its data key, legend and tooltip label, and color. */
+export type UsageSeries = {
+    key: string;
+    label: string;
+    color: string;
+};
+export type UsageDay = {
+    date: string;
+} & Record<string, number | string | null>;
+export interface UsageChartProps {
+    /** One row per UTC day (`YYYY-MM-DD`), keyed by series. */
+    days: UsageDay[];
+    series: UsageSeries[];
+    /** Names the chart for screen readers. */
+    title?: string;
+    /** Locale for day labels. Defaults to the reader's. */
+    locale?: string;
+    className?: string;
+}
+/**
+ * Stacked daily bars, 256px tall. Days are rows keyed by series; a missing or
+ * null value keeps that series out of the day's tooltip. The top series gets
+ * rounded corners.
+ */
+export declare function UsageChart({ days, series, title, locale, className, }: UsageChartProps): import("react").JSX.Element;
+export interface CategoryChartProps {
+    /** One row per category, keyed by `category` and by each series key. */
+    rows: Record<string, number | string>[];
+    /** The row key whose value names each group of bars. */
+    category: string;
+    series: UsageSeries[];
+    /** Names the chart for screen readers. */
+    title?: string;
+    className?: string;
+}
+/** Side-by-side bars per category with a legend in series order, 288px tall. */
+export declare function CategoryChart({ rows, category, series, title, className, }: CategoryChartProps): import("react").JSX.Element;
+export {};