@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/carousel.js

@@ -1,17 +1,17 @@
-"use client";
+'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"];
+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 />");
+        throw new Error('useCarousel must be used within a <Carousel />');
     return context;
 }
 const typing = 'input, textarea, select, [contenteditable="true"]';
@@ -27,11 +27,7 @@ function measure(viewport, horizontal, align) {
         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;
+        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.
@@ -56,9 +52,9 @@ const initialState = {
     snapCount: 0,
     viewportFocusable: false,
 };
-export function Carousel({ orientation = "horizontal", opts, setApi, className, children, onKeyDownCapture, ...props }) {
-    const horizontal = orientation === "horizontal";
-    const align = opts?.align ?? "start";
+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 });
@@ -79,7 +75,7 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
         const api = apiRef.current;
         if (!api)
             return;
-        listeners.current.get(event)?.forEach((listener) => listener(api));
+        listeners.current.get(event)?.forEach(listener => listener(api));
     }, []);
     const update = useCallback(() => {
         const node = viewport.current;
@@ -102,7 +98,7 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
         };
         const changed = next.selectedIndex !== selected.current;
         selected.current = next.selectedIndex;
-        setState((current) => current.canScrollPrev === next.canScrollPrev &&
+        setState(current => current.canScrollPrev === next.canScrollPrev &&
             current.canScrollNext === next.canScrollNext &&
             current.selectedIndex === next.selectedIndex &&
             current.snapCount === next.snapCount &&
@@ -110,7 +106,7 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
             ? current
             : next);
         if (changed)
-            emit("select");
+            emit('select');
     }, [emit, geometry]);
     const go = useCallback((target, instant = false) => {
         const node = viewport.current;
@@ -125,10 +121,10 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
                 update();
             }, 700),
         };
-        const key = settings.current.horizontal ? "left" : "top";
+        const key = settings.current.horizontal ? 'left' : 'top';
         node.scrollTo({
             [key]: target,
-            ...(instant ? { behavior: "instant" } : {}),
+            ...(instant ? { behavior: 'instant' } : {}),
         });
         update();
     }, [update]);
@@ -145,8 +141,8 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
             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);
+            ? 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)
@@ -158,20 +154,18 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
         const api = {
             scrollPrev: () => step(-1),
             scrollNext: () => step(1),
-            scrollTo: (index) => scrollTo(index),
+            scrollTo: index => scrollTo(index),
             canScrollPrev: () => {
                 const shape = geometry();
                 if (!shape)
                     return false;
-                return ((settings.current.loop && shape.snaps.length > 1) ||
-                    shape.position > 1);
+                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);
+                return (settings.current.loop && shape.snaps.length > 1) || shape.position < shape.max - 1;
             },
             selectedScrollSnap: () => selected.current,
             scrollSnapList: () => geometry()?.snaps ?? [],
@@ -202,7 +196,7 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
     const startIndex = opts?.startIndex ?? 0;
     const started = useRef(false);
     const [node, setNode] = useState(null);
-    const carouselRef = useCallback((element) => {
+    const carouselRef = useCallback(element => {
         viewport.current = element;
         setNode(element);
     }, []);
@@ -211,7 +205,7 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
             return;
         const reInit = () => {
             update();
-            emit("reInit");
+            emit('reInit');
         };
         if (!started.current) {
             started.current = true;
@@ -235,13 +229,13 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
                 resize.observe(slide);
             mutation.observe(track, { childList: true, subtree: true });
         }
-        node.addEventListener("scroll", scheduleUpdate, { passive: true });
-        node.addEventListener("scrollend", update);
+        node.addEventListener('scroll', scheduleUpdate, { passive: true });
+        node.addEventListener('scrollend', update);
         return () => {
             resize.disconnect();
             mutation.disconnect();
-            node.removeEventListener("scroll", scheduleUpdate);
-            node.removeEventListener("scrollend", update);
+            node.removeEventListener('scroll', scheduleUpdate);
+            node.removeEventListener('scrollend', update);
             cancelAnimationFrame(frame.current);
             frame.current = 0;
         };
@@ -251,7 +245,7 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
         if (!node)
             return;
         update();
-        emit("reInit");
+        emit('reInit');
     }, [node, horizontal, align, loop, update, emit]);
     useEffect(() => {
         if (!setApi)
@@ -264,24 +258,21 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
     }, []);
     const handleKeyDown = (event) => {
         onKeyDownCapture?.(event);
-        if (event.defaultPrevented ||
-            event.altKey ||
-            event.ctrlKey ||
-            event.metaKey)
+        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");
+        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") {
+        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);
+            scrollTo(event.key === 'Home' ? 0 : Number.MAX_SAFE_INTEGER);
         }
     };
     const value = useMemo(() => ({
@@ -296,32 +287,23 @@ export function Carousel({ orientation = "horizontal", opts, setApi, className,
         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 }) }) }));
+    }), [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 horizontal = orientation === 'horizontal';
     const drag = useRef(null);
     const node = useRef(null);
-    const ref = useCallback((element) => {
+    const ref = useCallback(element => {
         node.current = element;
         carouselRef(element);
     }, [carouselRef]);
-    const coordinate = (event) => horizontal ? event.clientX : event.clientY;
+    const coordinate = (event) => (horizontal ? event.clientX : event.clientY);
     const onPointerDown = (event) => {
-        if (event.pointerType !== "mouse" || event.button !== 0)
+        if (event.pointerType !== 'mouse' || event.button !== 0)
             return;
         if (event.target.closest(typing))
             return;
@@ -343,7 +325,7 @@ export function CarouselContent({ className, ...props }) {
                 return;
             current.moved = true;
             event.currentTarget.setPointerCapture(event.pointerId);
-            event.currentTarget.setAttribute("data-dragging", "");
+            event.currentTarget.setAttribute('data-dragging', '');
         }
         const viewport = event.currentTarget;
         if (horizontal)
@@ -365,11 +347,11 @@ export function CarouselContent({ className, ...props }) {
             click.preventDefault();
             click.stopPropagation();
         };
-        window.addEventListener("click", swallow, { capture: true, once: true });
-        window.setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
+        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");
+                viewport.removeAttribute('data-dragging');
         };
         if (opts?.dragFree)
             return release();
@@ -392,31 +374,31 @@ export function CarouselContent({ className, ...props }) {
         let timer = 0;
         const settle = () => {
             window.clearTimeout(timer);
-            viewport.removeEventListener("scrollend", settle);
+            viewport.removeEventListener('scrollend', settle);
             release();
         };
-        viewport.addEventListener("scrollend", settle);
+        viewport.addEventListener('scrollend', settle);
         timer = window.setTimeout(settle, 700);
-        const smooth = window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+        const smooth = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
         viewport.scrollTo({
-            [horizontal ? "left" : "top"]: target,
-            behavior: smooth ? "smooth" : "instant",
+            [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) => {
+    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 }) }));
+        }, 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 }));
+    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 }) {
+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" }) }));
+    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 }) {
+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" }) }));
+    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

@@ -1,112 +1,5 @@
-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 {};
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, chartColor, chartIndicatorNames, chartOtherColor, chartPalette, chartShade, type ChartConfig, type ChartContainerProps, type ChartIndicator, type ChartLegendContentProps, type ChartRow, type ChartSeries, type ChartStack, type ChartTooltipContentProps, type ChartTooltipProps, type UsageSeries, type ValueFormatter, } from '../internal/chart-kit.js';
+export * from '../internal/charts/bars.js';
+export * from '../internal/charts/lines.js';
+export * from '../internal/charts/parts.js';
+export * from '../internal/charts/more.js';

package/dist/components/chart.js

@@ -1,172 +1,5 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useId, useMemo, } from "react";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
-import { cn } from "../internal/classes.js";
-/** Theme names a `ChartConfig` entry can color, and the selector each one uses. */
-const THEMES = { light: "", dark: ".dark" };
-const INITIAL_DIMENSION = { width: 320, height: 200 };
-export const chartIndicatorNames = ["dot", "line", "dashed"];
-const cssKey = (key) => key.replace(/[^\w-]/g, "_");
-/**
- * The CSS variable a `ChartContainer` sets for one config key. Pass it as a
- * series `fill` or `stroke`, for example `fill={chartColor("tasks")}`.
- */
-export function chartColor(key) {
-    return `var(--sprout-chart-color-${cssKey(key)})`;
-}
-const ChartContext = createContext(null);
-function useChart() {
-    const context = useContext(ChartContext);
-    if (!context)
-        throw new Error("useChart must be used within a <ChartContainer />");
-    return context;
-}
-/**
- * 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 function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
-    const uniqueId = useId();
-    const chartId = `chart-${cssKey(id ?? uniqueId)}`;
-    const value = useMemo(() => ({ config }), [config]);
-    return (_jsx(ChartContext.Provider, { value: value, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("sprout-chart", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
-}
-/**
- * Writes `--sprout-chart-color-<key>` for every colored config entry, with a
- * dark value for entries that pass `theme`. `ChartContainer` renders it.
- */
-export function ChartStyle({ id, config, }) {
-    const colorConfig = Object.entries(config).filter(([, item]) => item.theme ?? item.color);
-    if (!colorConfig.length)
-        return null;
-    const rules = (theme) => colorConfig
-        .map(([key, item]) => {
-        const color = item.theme?.[theme] ?? item.color;
-        return color
-            ? `  --sprout-chart-color-${cssKey(key)}: ${color};`
-            : null;
-    })
-        .filter(Boolean)
-        .join("\n");
-    const scope = `[data-chart="${cssKey(id)}"]`;
-    const themed = colorConfig.some(([, item]) => item.theme);
-    const css = [
-        `${scope} {\n${rules("light")}\n}`,
-        themed ? `${THEMES.dark} ${scope} {\n${rules("dark")}\n}` : "",
-        themed
-            ? `@media (prefers-color-scheme: dark) {\n:root:not(.light):not(.dark) ${scope} {\n${rules("dark")}\n}\n}`
-            : "",
-    ]
-        .filter(Boolean)
-        .join("\n");
-    return _jsx("style", { dangerouslySetInnerHTML: { __html: css } });
-}
-/**
- * Recharts' `Tooltip`, moving in 160ms. Pass `content={<ChartTooltipContent />}`.
- * It stays still when reduced motion is on.
- */
-export function ChartTooltip(props) {
-    return _jsx(Tooltip, { animationDuration: 160, ...props });
-}
-/**
- * The tooltip card: a label, then one row per series with its indicator,
- * config label, and value. Recharts passes `active`, `payload`, and `label`.
- */
-export function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
-    const { config } = useChart();
-    const tooltipLabel = useMemo(() => {
-        if (hideLabel || !payload?.length)
-            return null;
-        const [item] = payload;
-        const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        const value = !labelKey && typeof label === "string"
-            ? (config[label]?.label ?? label)
-            : itemConfig?.label;
-        if (labelFormatter)
-            return (_jsx("div", { className: cn("sprout-chart-tooltip-label", labelClassName), children: labelFormatter(value, payload) }));
-        if (!value)
-            return null;
-        return (_jsx("div", { className: cn("sprout-chart-tooltip-label", labelClassName), children: value }));
-    }, [
-        label,
-        labelFormatter,
-        payload,
-        hideLabel,
-        labelClassName,
-        config,
-        labelKey,
-    ]);
-    if (!active || !payload?.length)
-        return null;
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-    return (_jsxs("div", { "data-slot": "chart-tooltip", "data-indicator": indicator, className: cn("sprout-chart-tooltip", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "sprout-chart-tooltip-items", children: payload
-                    .filter((item) => item.type !== "none")
-                    .map((item, index) => {
-                    const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
-                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
-                    const indicatorColor = color ??
-                        item.payload?.fill ??
-                        item.color;
-                    return (_jsx("div", { "data-slot": "chart-tooltip-item", className: "sprout-chart-tooltip-item", children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("span", { "aria-hidden": "true", "data-slot": "chart-tooltip-indicator", className: "sprout-chart-tooltip-indicator", style: {
-                                        "--sprout-chart-indicator": indicatorColor,
-                                    } }))), _jsxs("div", { className: "sprout-chart-tooltip-row", "data-nested": nestLabel || undefined, children: [_jsxs("div", { className: "sprout-chart-tooltip-name", children: [nestLabel ? tooltipLabel : null, _jsx("span", { children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "sprout-chart-tooltip-value", children: typeof item.value === "number"
-                                                ? item.value.toLocaleString()
-                                                : String(item.value) }))] })] })) }, index));
-                }) })] }));
-}
-/** Recharts' `Legend`. Pass `content={<ChartLegendContent />}`. */
-export const ChartLegend = Legend;
-/** A centered row of swatches and config labels, one per series. */
-export function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
-    const { config } = useChart();
-    if (!payload?.length)
-        return null;
-    return (_jsx("div", { "data-slot": "chart-legend", "data-align": verticalAlign === "top" ? "top" : "bottom", className: cn("sprout-chart-legend", className), children: payload
-            .filter((item) => item.type !== "none")
-            .map((item, index) => {
-            const key = `${nameKey ?? item.dataKey ?? "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (_jsxs("div", { "data-slot": "chart-legend-item", className: "sprout-chart-legend-item", children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("span", { "aria-hidden": "true", className: "sprout-chart-legend-swatch", style: { backgroundColor: item.color } })), itemConfig?.label] }, index));
-        }) }));
-}
-function getPayloadConfigFromPayload(config, payload, key) {
-    if (typeof payload !== "object" || payload === null)
-        return undefined;
-    const inner = "payload" in payload &&
-        typeof payload.payload === "object" &&
-        payload.payload !== null
-        ? payload.payload
-        : undefined;
-    const outer = payload;
-    let configLabelKey = key;
-    if (typeof outer[key] === "string")
-        configLabelKey = outer[key];
-    else if (inner && typeof inner[key] === "string")
-        configLabelKey = inner[key];
-    return configLabelKey in config ? config[configLabelKey] : config[key];
-}
-const seriesConfig = (series) => Object.fromEntries(series.map((item) => [item.key, { label: item.label, color: item.color }]));
-const tooltipCursor = { fill: "var(--sprout-hover)" };
-/**
- * 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 function UsageChart({ days, series, title = "Usage by day", locale, className, }) {
-    const config = useMemo(() => seriesConfig(series), [series]);
-    const usageDay = (date) => new Date(`${String(date)}T00:00:00Z`).toLocaleDateString(locale, {
-        month: "short",
-        day: "numeric",
-        timeZone: "UTC",
-    });
-    return (_jsx(ChartContainer, { "data-variant": "usage", className: cn("sprout-chart-usage", className), config: config, children: _jsxs(BarChart, { data: days, accessibilityLayer: true, title: title, barCategoryGap: "20%", children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "date", tickFormatter: usageDay, tickLine: false, axisLine: false, minTickGap: 24 }), _jsx(YAxis, { width: 40, tickLine: false, axisLine: false, allowDecimals: false }), _jsx(ChartTooltip, { cursor: tooltipCursor, content: _jsx(ChartTooltipContent, { labelFormatter: usageDay }) }), series.map((item, index) => (_jsx(Bar, { dataKey: item.key, stackId: "usage", fill: chartColor(item.key), radius: index === series.length - 1 ? [3, 3, 0, 0] : 0, isAnimationActive: false }, item.key)))] }) }));
-}
-/** Side-by-side bars per category with a legend in series order, 288px tall. */
-export function CategoryChart({ rows, category, series, title, className, }) {
-    const config = useMemo(() => seriesConfig(series), [series]);
-    const name = title ?? `${series.map((item) => item.label).join(", ")} by ${category}`;
-    return (_jsx(ChartContainer, { "data-variant": "category", className: cn("sprout-chart-category", className), config: config, children: _jsxs(BarChart, { data: rows, accessibilityLayer: true, title: name, barCategoryGap: "24%", children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: category, tickLine: false, axisLine: false, minTickGap: 16 }), _jsx(YAxis, { width: 40, tickLine: false, axisLine: false, allowDecimals: false }), _jsx(ChartTooltip, { cursor: tooltipCursor, content: _jsx(ChartTooltipContent, {}) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, {}) }), series.map((item) => (_jsx(Bar, { dataKey: item.key, fill: chartColor(item.key), radius: [3, 3, 0, 0], isAnimationActive: false }, item.key)))] }) }));
-}
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, chartColor, chartIndicatorNames, chartOtherColor, chartPalette, chartShade, } from '../internal/chart-kit.js';
+export * from '../internal/charts/bars.js';
+export * from '../internal/charts/lines.js';
+export * from '../internal/charts/parts.js';
+export * from '../internal/charts/more.js';