@spatika/react 1.1.0 → 1.2.0

package/dist/composites/chart-ui.d.ts

@@ -0,0 +1,83 @@
+import { type ReactNode } from "react";
+import { type ChartAxisConfig, type ChartMargin } from "../lib/charts";
+export type ChartTooltipItem = {
+    color: string;
+    label: string;
+    value: string;
+};
+export type ChartLegendItem = {
+    id: string;
+    label: string;
+    color: string;
+};
+export type ChartHover = {
+    x: number;
+    y: number;
+    title?: string;
+    items: ChartTooltipItem[];
+} | null;
+export type ChartFrameProps = {
+    slot: string;
+    className?: string;
+    width?: number;
+    height?: number;
+    margin?: ChartMargin;
+    legend?: ChartLegendItem[];
+    hiddenIds?: Set<string>;
+    onToggleSeries?: (id: string) => void;
+    hover?: ChartHover;
+    "aria-label"?: string;
+    children: (plot: {
+        width: number;
+        height: number;
+        m: Required<ChartMargin>;
+    }) => ReactNode;
+};
+export declare function resolveMargin(margin?: ChartMargin): Required<ChartMargin>;
+export declare function ChartFrame({ slot, className, width, height, margin, legend, hiddenIds, onToggleSeries, hover, "aria-label": ariaLabel, children, }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartLegend({ items, hiddenIds, onToggle, }: {
+    items: ChartLegendItem[];
+    hiddenIds?: Set<string>;
+    onToggle?: (id: string) => void;
+}): import("react").JSX.Element;
+export declare function ChartTooltip({ hover, boundsWidth, }: {
+    hover: ChartHover;
+    boundsWidth: number;
+}): import("react").JSX.Element | null;
+export declare function CartesianGrid({ ticks, scale, left, right, top, bottom, }: {
+    ticks: number[];
+    scale: (value: number) => number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}): import("react").JSX.Element;
+export declare function ValueAxis({ ticks, scale, left, width, }: {
+    ticks: number[];
+    scale: (value: number) => number;
+    left: number;
+    width?: number;
+}): import("react").JSX.Element;
+export declare function CategoryAxis({ labels, position, y, }: {
+    labels: Array<string | number | Date>;
+    position: (index: number) => number;
+    y: number;
+}): import("react").JSX.Element;
+export declare function useHiddenSeries(ids: string[]): {
+    hidden: Set<string>;
+    toggle: (id: string) => void;
+    visible: string[];
+};
+export declare function seriesMeta(series: Array<{
+    id?: string;
+    label?: string;
+    color?: string;
+}>, colors?: string[]): ChartLegendItem[];
+export declare function useChartHover(): {
+    hover: ChartHover;
+    setHover: import("react").Dispatch<import("react").SetStateAction<ChartHover>>;
+    clear: () => void;
+};
+export declare function categoryLabels(axis?: ChartAxisConfig, length?: number): Array<string | number | Date>;
+export declare function formatSeriesValue(value: number | [number, number] | undefined): string;
+//# sourceMappingURL=chart-ui.d.ts.map

package/dist/composites/chart-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-ui.d.ts","sourceRoot":"","sources":["../../src/composites/chart-ui.tsx"],"names":[],"mappings":"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"}

package/dist/composites/chart-ui.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn";
+import { DEFAULT_CHART_MARGIN, chartColor, formatAxisValue, formatChartNumber, } from "../lib/charts";
+export function resolveMargin(margin) {
+    return {
+        top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
+        right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
+        bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
+        left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
+    };
+}
+function useElementSize(ref, fallbackWidth, fallbackHeight) {
+    const [size, setSize] = useState({ width: fallbackWidth, height: fallbackHeight });
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const apply = () => {
+            setSize({
+                width: el.clientWidth || fallbackWidth,
+                height: el.clientHeight || fallbackHeight,
+            });
+        };
+        apply();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(apply);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [fallbackWidth, fallbackHeight, ref]);
+    return size;
+}
+export function ChartFrame({ slot, className, width, height = 280, margin, legend, hiddenIds, onToggleSeries, hover, "aria-label": ariaLabel, children, }) {
+    const surfaceRef = useRef(null);
+    const measured = useElementSize(surfaceRef, width ?? 320, height);
+    const plotWidth = width ?? measured.width;
+    const plotHeight = height;
+    const m = resolveMargin(margin);
+    return (_jsxs("div", { "data-slot": slot, className: cn("spk-chart", className), role: "img", "aria-label": ariaLabel, children: [legend?.length ? (_jsx(ChartLegend, { items: legend, hiddenIds: hiddenIds, onToggle: onToggleSeries })) : null, _jsxs("div", { ref: surfaceRef, className: "spk-chart-surface", style: { height: plotHeight }, children: [plotWidth > 0 ? children({ width: plotWidth, height: plotHeight, m }) : null, _jsx(ChartTooltip, { hover: hover ?? null, boundsWidth: plotWidth })] })] }));
+}
+export function ChartLegend({ items, hiddenIds, onToggle, }) {
+    return (_jsx("div", { className: "spk-chart-legend", children: items.map((item) => (_jsxs("button", { type: "button", className: "spk-chart-legend-item", "data-hidden": hiddenIds?.has(item.id) ? "true" : undefined, onClick: () => onToggle?.(item.id), children: [_jsx("span", { className: "spk-chart-swatch", style: { background: item.color } }), item.label] }, item.id))) }));
+}
+export function ChartTooltip({ hover, boundsWidth, }) {
+    if (!hover || !hover.items.length)
+        return null;
+    const left = clampTooltip(hover.x, boundsWidth);
+    return (_jsxs("div", { className: "spk-chart-tooltip", style: { left, top: hover.y }, role: "tooltip", children: [hover.title ? _jsx("p", { className: "spk-chart-tooltip-title", children: hover.title }) : null, _jsx("ul", { children: hover.items.map((item) => (_jsxs("li", { children: [_jsx("span", { className: "spk-chart-swatch", style: { background: item.color } }), _jsx("span", { children: item.label }), _jsx("strong", { children: item.value })] }, item.label))) })] }));
+}
+function clampTooltip(x, width) {
+    return clampNum(x, 72, Math.max(72, width - 72));
+}
+function clampNum(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+export function CartesianGrid({ ticks, scale, left, right, top, bottom, }) {
+    return (_jsxs("g", { "data-slot": "chart-grid", children: [ticks.map((tick) => (_jsx("line", { className: "spk-chart-grid", x1: left, x2: right, y1: scale(tick), y2: scale(tick) }, tick))), _jsx("line", { className: "spk-chart-axis", x1: left, x2: right, y1: bottom, y2: bottom }), _jsx("line", { className: "spk-chart-axis", x1: left, x2: left, y1: top, y2: bottom })] }));
+}
+export function ValueAxis({ ticks, scale, left, width, }) {
+    return (_jsxs("g", { "data-slot": "chart-y-axis", children: [ticks.map((tick) => (_jsx("text", { className: "spk-chart-tick", x: left - 8, y: scale(tick), textAnchor: "end", dominantBaseline: "middle", children: formatChartNumber(tick) }, tick))), width ? (_jsx("text", { className: "spk-chart-axis-label", x: 12, y: width / 2, transform: `rotate(-90 12 ${width / 2})`, textAnchor: "middle" })) : null] }));
+}
+export function CategoryAxis({ labels, position, y, }) {
+    const maxLabels = labels.length > 12 ? Math.ceil(labels.length / 8) : 1;
+    return (_jsx("g", { "data-slot": "chart-x-axis", children: labels.map((label, index) => {
+            if (index % maxLabels !== 0)
+                return null;
+            return (_jsx("text", { className: "spk-chart-tick", x: position(index), y: y + 16, textAnchor: "middle", children: formatAxisValue(label) }, `${index}-${String(label)}`));
+        }) }));
+}
+export function useHiddenSeries(ids) {
+    const [hidden, setHidden] = useState(new Set());
+    const toggle = (id) => {
+        setHidden((current) => {
+            const next = new Set(current);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const visible = ids.filter((id) => !hidden.has(id));
+    return { hidden, toggle, visible };
+}
+export function seriesMeta(series, colors) {
+    return series.map((item, index) => ({
+        id: item.id ?? item.label ?? `series-${index}`,
+        label: item.label ?? item.id ?? `Series ${index + 1}`,
+        color: item.color ?? chartColor(index, colors),
+    }));
+}
+export function useChartHover() {
+    const [hover, setHover] = useState(null);
+    return { hover, setHover, clear: () => setHover(null) };
+}
+export function categoryLabels(axis, length = 0) {
+    if (axis?.data?.length)
+        return axis.data;
+    return Array.from({ length }, (_, i) => i + 1);
+}
+export function formatSeriesValue(value) {
+    if (value == null)
+        return "—";
+    if (Array.isArray(value))
+        return `${formatChartNumber(value[0])} – ${formatChartNumber(value[1])}`;
+    return formatChartNumber(value);
+}

package/dist/composites/charts-3d.d.ts

@@ -0,0 +1,37 @@
+import { type ChartAxisConfig, type ChartMargin } from "../lib/charts";
+import type { NumericSeries } from "./cartesian-charts";
+export type BarChart3DProps = {
+    series: NumericSeries[];
+    xAxis?: ChartAxisConfig[];
+    yAxis?: ChartAxisConfig[];
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    hideGrid?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+    depth?: number;
+};
+export declare function BarChart3D({ series, xAxis, yAxis, height, width, colors, hideLegend, hideGrid, margin, className, depth, }: BarChart3DProps): import("react").JSX.Element;
+export type PieChart3DProps = {
+    series: Array<{
+        data: Array<{
+            id?: string | number;
+            value: number;
+            label?: string;
+            color?: string;
+        }>;
+        innerRadius?: number;
+        paddingAngle?: number;
+    }>;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+    thickness?: number;
+};
+export declare function PieChart3D({ series, height, width, colors, hideLegend, margin, className, thickness, }: PieChart3DProps): import("react").JSX.Element;
+//# sourceMappingURL=charts-3d.d.ts.map

package/dist/composites/charts-3d.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts-3d.d.ts","sourceRoot":"","sources":["../../src/composites/charts-3d.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAWvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAaxD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAU,GACX,EAAE,eAAe,+BAiHjB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,KAAK,CAAC;YAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACrF,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC,CAAC;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,SAAc,GACf,EAAE,eAAe,+BAoHjB"}

package/dist/composites/charts-3d.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extent, formatChartNumber, niceTicks, pieSlices, } from "../lib/charts";
+import { ellipseSlicePath, ellipseWallPath, isoBoxFaces, isoPoint } from "../lib/iso";
+import { CartesianGrid, ChartFrame, categoryLabels, formatSeriesValue, seriesMeta, useChartHover, useHiddenSeries, } from "./chart-ui";
+function box(width, height, m) {
+    return {
+        left: m.left,
+        right: width - m.right,
+        top: m.top,
+        bottom: height - m.bottom,
+        iw: Math.max(1, width - m.left - m.right),
+        ih: Math.max(1, height - m.top - m.bottom),
+    };
+}
+export function BarChart3D({ series, xAxis, yAxis, height = 280, width, colors, hideLegend, hideGrid, margin, className, depth = 14, }) {
+    const meta = seriesMeta(series, colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    const categories = categoryLabels(xAxis?.[0], series[0]?.data?.length ?? 0);
+    const values = series.flatMap((item) => (item.data ?? []).map((v) => v ?? 0));
+    const domain = [
+        yAxis?.[0]?.min ?? Math.min(0, extent(values, 0.08)[0]),
+        yAxis?.[0]?.max ?? extent(values, 0.08)[1],
+    ];
+    const ticks = niceTicks(domain[0], domain[1], 4);
+    return (_jsx(ChartFrame, { slot: "bar-chart-3d", className: className, width: width, height: height, margin: margin ?? { top: 24, right: 28, bottom: 40, left: 48 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": "3D bar chart", children: ({ width: w, height: h, m }) => {
+            const plot = box(w, h, m);
+            const originX = plot.left + plot.iw * 0.16;
+            const originY = plot.bottom - 6;
+            const visible = series
+                .map((item, s) => ({ item, info: meta[s], s }))
+                .filter(({ info }) => !hidden.has(info.id));
+            const n = Math.max(categories.length, 1);
+            const groupW = Math.max(18, (plot.iw * 0.72) / n);
+            const barW = Math.max(8, (groupW * 0.78) / Math.max(visible.length, 1));
+            const gap = Math.max(2, (groupW - barW * visible.length) / Math.max(visible.length + 1, 1));
+            const maxH = plot.ih * 0.78;
+            const yScale = (value) => ((value - domain[0]) / (domain[1] - domain[0] || 1)) * maxH;
+            const yAt = (value) => originY - yScale(value);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [hideGrid ? null : (_jsx(CartesianGrid, { ticks: ticks, scale: yAt, left: plot.left, right: plot.right, top: plot.top, bottom: plot.bottom })), ticks.map((tick) => (_jsx("text", { className: "spk-chart-tick", x: plot.left - 8, y: yAt(tick), textAnchor: "end", children: formatChartNumber(tick) }, tick))), categories.map((label, i) => {
+                        const x0 = i * groupW;
+                        const foot = isoPoint(x0 + groupW / 2, 0, depth, originX, originY);
+                        return (_jsx("text", { className: "spk-chart-tick", x: foot.x, y: plot.bottom + 16, textAnchor: "middle", children: String(label) }, String(label)));
+                    }), categories.flatMap((_, i) => visible.map(({ item, info }, s) => {
+                        const value = item.data?.[i] ?? 0;
+                        const barH = Math.max(2, yScale(value));
+                        const x = i * groupW + gap + s * (barW + gap * 0.2);
+                        const faces = isoBoxFaces(x, 0, 0, barW, barH, depth, originX, originY);
+                        const color = info.color;
+                        return (_jsxs("g", { className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                x: event.nativeEvent.offsetX,
+                                y: event.nativeEvent.offsetY,
+                                title: String(categories[i]),
+                                items: [
+                                    {
+                                        color,
+                                        label: info.label,
+                                        value: formatSeriesValue(value),
+                                    },
+                                ],
+                            }), onMouseLeave: clear, children: [_jsx("path", { d: faces.side, fill: `color-mix(in srgb, ${color} 78%, black)` }), _jsx("path", { d: faces.top, fill: `color-mix(in srgb, ${color} 72%, white)` }), _jsx("path", { d: faces.front, fill: color })] }, `${info.id}-${i}`));
+                    }))] }));
+        } }));
+}
+export function PieChart3D({ series, height = 280, width, colors, hideLegend, margin, className, thickness = 18, }) {
+    const first = series[0] ?? { data: [] };
+    const meta = seriesMeta(first.data.map((item, i) => ({
+        id: String(item.id ?? item.label ?? i),
+        label: item.label ?? `Slice ${i + 1}`,
+        color: item.color,
+    })), colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    return (_jsx(ChartFrame, { slot: "pie-chart-3d", className: className, width: width, height: height, margin: margin ?? { top: 12, right: 12, bottom: 20, left: 12 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": "3D pie chart", children: ({ width: w, height: h, m }) => {
+            const cx = w / 2;
+            const cy = (h - thickness) / 2;
+            const rx = Math.min(w - m.left - m.right, (h - m.top - m.bottom - thickness) * 1.7) / 2;
+            const ry = rx * 0.42;
+            const visible = first.data.map((item, i) => (hidden.has(meta[i].id) ? 0 : item.value));
+            const slices = pieSlices(visible, {
+                cx,
+                cy,
+                innerRadius: 0,
+                outerRadius: rx,
+                paddingAngle: first.paddingAngle,
+            });
+            const ordered = slices
+                .map((slice, i) => ({ slice, info: meta[i], item: first.data[i] }))
+                .filter(({ info, slice }) => !hidden.has(info.id) && slice.path)
+                .sort((a, b) => ellipsePointY(cx, cy, rx, ry, a.slice.midAngle) - ellipsePointY(cx, cy, rx, ry, b.slice.midAngle));
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [ordered.map(({ slice, info, item }) => (_jsx("g", { className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: info.label,
+                            items: [
+                                {
+                                    color: info.color,
+                                    label: info.label,
+                                    value: `${formatChartNumber(item.value)} (${Math.round(slice.percent * 100)}%)`,
+                                },
+                            ],
+                        }), onMouseLeave: clear, children: _jsx("path", { d: ellipseWallPath(cx, cy, rx, ry, slice.startAngle, slice.endAngle, thickness), fill: `color-mix(in srgb, ${info.color} 70%, black)` }) }, `${info.id}-wall`))), ordered.map(({ slice, info, item }) => (_jsxs("g", { className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: info.label,
+                            items: [
+                                {
+                                    color: info.color,
+                                    label: info.label,
+                                    value: `${formatChartNumber(item.value)} (${Math.round(slice.percent * 100)}%)`,
+                                },
+                            ],
+                        }), onMouseLeave: clear, children: [_jsx("path", { d: ellipseSlicePath(cx, cy, rx, ry, slice.startAngle, slice.endAngle), fill: info.color }), slice.percent > 0.08 ? (_jsxs("text", { className: "spk-chart-label", x: cx + Math.cos(((slice.midAngle - 90) * Math.PI) / 180) * rx * 0.55, y: cy + Math.sin(((slice.midAngle - 90) * Math.PI) / 180) * ry * 0.55, textAnchor: "middle", dominantBaseline: "middle", fill: "var(--primary-foreground)", children: [Math.round(slice.percent * 100), "%"] })) : null] }, info.id)))] }));
+        } }));
+}
+function ellipsePointY(cx, cy, rx, ry, angleDeg) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return cy + ry * Math.sin(rad);
+}

package/dist/composites/flow-charts.d.ts

@@ -0,0 +1,89 @@
+import { type ChartAxisConfig, type ChartMargin, type SankeyLink, type SankeyNode, type TreeNode } from "../lib/charts";
+export type HeatDatum = {
+    x: number;
+    y: number;
+    value: number;
+};
+export type HeatmapProps = {
+    xAxis?: ChartAxisConfig[];
+    yAxis?: ChartAxisConfig[];
+    series: Array<{
+        data: HeatDatum[];
+    }>;
+    height?: number;
+    width?: number;
+    hideLegend?: boolean;
+    showColorScale?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+};
+export declare function Heatmap({ xAxis, yAxis, series, height, width, hideLegend, showColorScale, margin, className, }: HeatmapProps): import("react").JSX.Element;
+export type FunnelDatum = {
+    id?: string;
+    label: string;
+    value: number;
+    color?: string;
+};
+export type FunnelSeries = {
+    id?: string;
+    label?: string;
+    data: FunnelDatum[];
+};
+export type FunnelLabelPosition = "inside" | "outside" | "both";
+export type FunnelChartProps = {
+    series: FunnelSeries[];
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    className?: string;
+    variant?: "funnel" | "pyramid";
+    gap?: number;
+    labelPosition?: FunnelLabelPosition;
+    valueFormatter?: (value: number, percent: number) => string;
+};
+export declare function FunnelChart({ series, height, width, colors, hideLegend, className, variant, gap, labelPosition, valueFormatter, }: FunnelChartProps): import("react").JSX.Element;
+export declare function PyramidChart(props: FunnelChartProps): import("react").JSX.Element;
+export type SankeyChartProps = {
+    series: {
+        data: SankeyNode[];
+        links: SankeyLink[];
+    };
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function SankeyChart({ series, height, width, colors, className }: SankeyChartProps): import("react").JSX.Element;
+export type TreemapProps = {
+    series: Array<{
+        data: TreeNode[];
+    }>;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function Treemap({ series, height, width, colors, className }: TreemapProps): import("react").JSX.Element;
+export type SunburstChartProps = {
+    series: Array<{
+        data: TreeNode[];
+    }>;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function SunburstChart({ series, height, width, colors, className }: SunburstChartProps): import("react").JSX.Element;
+export type ChordChartProps = {
+    series: {
+        data: string[];
+        matrix: number[][];
+    };
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function ChordChart({ series, height, width, colors, className }: ChordChartProps): import("react").JSX.Element;
+//# sourceMappingURL=flow-charts.d.ts.map

package/dist/composites/flow-charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-charts.d.ts","sourceRoot":"","sources":["../../src/composites/flow-charts.tsx"],"names":[],"mappings":"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"}