nanoplot 0.0.33 → 0.0.35

package/dist/index.css

@@ -185,6 +185,10 @@
   margin-top: 0.25rem;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -583,6 +587,10 @@
   border-bottom-width: 1px;
 }
 
+.border-solid {
+  border-style: solid;
+}
+
 .border-dotted {
   border-style: dotted;
 }

package/dist/src/components/Area/Area.d.ts

@@ -7,8 +7,13 @@ interface Props extends React.SVGAttributes<SVGSVGElement> {
     loading?: boolean;
 }
 export declare const Area: {
-    ({ className, curve, children, loading }: Props): import("react/jsx-runtime").JSX.Element | null;
+    ({ className, curve, children, loading }: Props): React.JSX.Element | null;
     context(ctx: GraphContext): GraphContext;
-    Tooltip: (props: Record<any, unknown>) => import("react/jsx-runtime").JSX.Element;
+    Tooltip: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & {
+        tooltip?: (points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
+            data: import("../../export").CartesianDataset[number]["data"][number];
+        }>, x: number | string | Date) => React.ReactNode;
+        joints?: boolean;
+    }>;
 };
 export {};

package/dist/src/components/Area/Area.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { GraphUtils } from "../../utils/graph/graph";
 import { useGraph } from "../../hooks/use-graph/use-graph";
@@ -24,30 +23,34 @@ export const Area = ({ className, curve = "linear", children, loading }) => {
             })) });
     });
     const grouped = Object.entries(ObjectUtils.groupBy(lines, ({ group, id }) => group !== null && group !== void 0 ? group : id));
-    return (_jsxs("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, preserveAspectRatio: "none", className: cx("area h-full w-full [grid-area:graph]", className), children: [grouped.flatMap(([, lines], index) => {
-                return lines === null || lines === void 0 ? void 0 : lines.map((line, i) => {
-                    var _a, _b;
-                    const data = line.data.map(({ x, y }, ii) => {
-                        return {
-                            x: x,
-                            y: y - lines.slice(0, i).reduce((acc, { data }) => acc + (viewbox.y - data[ii].y), 0),
-                        };
-                    });
-                    return Object.assign(Object.assign({}, line), { data, stroke: (_b = (_a = line.stroke) !== null && _a !== void 0 ? _a : colors[i]) !== null && _b !== void 0 ? _b : colors.at(-1), path: CurveUtils[curve](data) });
-                }).map(({ id, stroke, data, path, fill }, i, segments) => {
-                    var _a, _b;
-                    const previous = segments[i - 1] ? CurveUtils[curve]((_a = segments[i - 1]) === null || _a === void 0 ? void 0 : _a.data.reverse()).replace("M", "L") : undefined;
-                    const disabled = pinned.length && !pinned.includes(id) && !hovered.includes(id);
-                    const filled = (() => {
-                        if (fill)
-                            return fill;
-                        if (stroke.includes("linear-gradient"))
-                            return "transparent";
-                        return stroke;
-                    })();
-                    return (_jsxs(React.Fragment, { children: [_jsx(Line, { d: path, disabled: Boolean(disabled), stroke: stroke, fill: "transparent", className: "area__stroke" }), _jsx(Line, { d: path + (previous !== null && previous !== void 0 ? previous : ` L ${viewbox.x} ${viewbox.y} L 0 ${viewbox.y} L ${(_b = data[0]) === null || _b === void 0 ? void 0 : _b.x} ${viewbox.y} Z`), disabled: Boolean(disabled), stroke: "transparent", fill: filled, className: "area__fill" })] }, i + "|" + index));
+    return (React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, preserveAspectRatio: "none", className: cx("area h-full w-full [grid-area:graph]", className) },
+        grouped.flatMap(([, lines], index) => {
+            return lines === null || lines === void 0 ? void 0 : lines.map((line, i) => {
+                var _a, _b;
+                const data = line.data.map(({ x, y }, ii) => {
+                    return {
+                        x: x,
+                        y: y - lines.slice(0, i).reduce((acc, { data }) => acc + (viewbox.y - data[ii].y), 0),
+                    };
                 });
-            }), children] }));
+                return Object.assign(Object.assign({}, line), { data, stroke: (_b = (_a = line.stroke) !== null && _a !== void 0 ? _a : colors[i]) !== null && _b !== void 0 ? _b : colors.at(-1), path: CurveUtils[curve](data) });
+            }).map(({ id, stroke, data, path, fill }, i, segments) => {
+                var _a, _b;
+                const previous = segments[i - 1] ? CurveUtils[curve]((_a = segments[i - 1]) === null || _a === void 0 ? void 0 : _a.data.reverse()).replace("M", "L") : undefined;
+                const disabled = pinned.length && !pinned.includes(id) && !hovered.includes(id);
+                const filled = (() => {
+                    if (fill)
+                        return fill;
+                    if (stroke.includes("linear-gradient"))
+                        return "transparent";
+                    return stroke;
+                })();
+                return (React.createElement(React.Fragment, { key: i + "|" + index },
+                    React.createElement(Line, { d: path, disabled: Boolean(disabled), stroke: stroke, fill: "transparent", className: "area__stroke" }),
+                    React.createElement(Line, { d: path + (previous !== null && previous !== void 0 ? previous : ` L ${viewbox.x} ${viewbox.y} L 0 ${viewbox.y} L ${(_b = data[0]) === null || _b === void 0 ? void 0 : _b.x} ${viewbox.y} Z`), disabled: Boolean(disabled), stroke: "transparent", fill: filled, className: "area__fill" })));
+            });
+        }),
+        children));
 };
 Area.context = (ctx) => {
     return Object.assign(Object.assign({}, ctx), { colors: ColorUtils.scheme.sunset });

package/dist/src/components/Bars/Bars.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import React, { ComponentProps } from "react";
 import { HorizontalBars } from "./components/HorizontalBars";
 import { VerticalBars } from "./components/VerticalBars";
 import { GraphContext } from "../../hooks/use-graph/use-graph";
@@ -9,7 +9,7 @@ type HorizontalProps = {
     horizontal?: true;
 } & ComponentProps<typeof HorizontalBars>;
 export declare const Bars: {
-    ({ horizontal, ...props }: VerticalProps | HorizontalProps): import("react/jsx-runtime").JSX.Element;
+    ({ horizontal, ...props }: VerticalProps | HorizontalProps): React.JSX.Element;
     context(ctx: GraphContext): GraphContext;
 };
 export {};

package/dist/src/components/Bars/Bars.js

@@ -9,13 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { HorizontalBars } from "./components/HorizontalBars";
 import { VerticalBars } from "./components/VerticalBars";
 import { ColorUtils } from "../../utils/color/color";
 export const Bars = (_a) => {
     var { horizontal } = _a, props = __rest(_a, ["horizontal"]);
-    return horizontal ? _jsx(HorizontalBars, Object.assign({}, props)) : _jsx(VerticalBars, Object.assign({}, props));
+    return horizontal ? React.createElement(HorizontalBars, Object.assign({}, props)) : React.createElement(VerticalBars, Object.assign({}, props));
 };
 Bars.context = (ctx) => {
     return Object.assign(Object.assign({}, ctx), { colors: ColorUtils.scheme.contrast });

package/dist/src/components/Bars/components/BarsVerticalLoading.d.ts

@@ -1 +1 @@
-export declare const BarsVerticalLoading: () => import("react/jsx-runtime").JSX.Element;
+export declare const BarsVerticalLoading: () => import("react").JSX.Element;

package/dist/src/components/Bars/components/BarsVerticalLoading.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../../../utils/cx/cx";
 import { useGraph } from "../../../hooks/use-graph/use-graph";
@@ -9,8 +8,10 @@ export const BarsVerticalLoading = () => {
     const CY = viewbox.y / 2;
     const BAR_GAP = 20;
     const BAR_WIDTH = viewbox.x * 0.08;
-    return (_jsx("svg", { id: "loading", role: "status", "aria-busy": true, viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, className: cx("[grid-area:graph] h-full w-full"), preserveAspectRatio: "none", children: _jsx("path", { vectorEffect: "non-scaling-stroke", d: `
+    return (React.createElement("svg", { id: "loading", role: "status", "aria-busy": true, viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, className: cx("[grid-area:graph] h-full w-full"), preserveAspectRatio: "none" },
+        React.createElement("path", { vectorEffect: "non-scaling-stroke", d: `
 					M${CX - BAR_WIDTH - BAR_GAP - BAR_WIDTH / 2} ${viewbox.y} L${CX - BAR_WIDTH - BAR_GAP - BAR_WIDTH / 2} ${(viewbox.y / 30) * 20} L${CX - BAR_WIDTH - BAR_GAP + BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 20} L${CX - BAR_WIDTH - BAR_GAP + BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y}
 					M ${CX - BAR_WIDTH / 2} ${viewbox.y} L${CX - BAR_WIDTH / 2} ${(viewbox.y / 30) * 10} L${CX + BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 10} L${CX + BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y}
-						M${BAR_GAP + CX + BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y} L${BAR_GAP + CX + BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 16} L${BAR_GAP + CX + 2 * BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 16} L${BAR_GAP + CX + 2 * BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y}`, className: "[filter:brightness(300%)] dark:[filter:brightness(100%)]", mask: `url(#${maskId})`, children: _jsx("animate", { attributeName: "fill", values: "#2d2d2d; #3c3c3c; #2d2d2d; #2d2d2d; ", dur: "2s", repeatCount: "indefinite" }) }) }));
+						M${BAR_GAP + CX + BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y} L${BAR_GAP + CX + BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 16} L${BAR_GAP + CX + 2 * BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 16} L${BAR_GAP + CX + 2 * BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y}`, className: "[filter:brightness(300%)] dark:[filter:brightness(100%)]", mask: `url(#${maskId})` },
+            React.createElement("animate", { attributeName: "fill", values: "#2d2d2d; #3c3c3c; #2d2d2d; #2d2d2d; ", dur: "2s", repeatCount: "indefinite" }))));
 };

package/dist/src/components/Bars/components/HorizontalBars.d.ts

@@ -9,5 +9,5 @@ type Props = React.SVGAttributes<SVGSVGElement> & {
         display: (value: string | number | Date) => string;
     };
 };
-export declare const HorizontalBars: ({ children, labels, size, radius, className }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const HorizontalBars: ({ children, labels, size, radius, className }: Props) => React.JSX.Element | null;
 export {};

package/dist/src/components/Bars/components/HorizontalBars.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
 import { CoordinatesUtils } from "../../../utils/coordinates/coordinates";
 import { GraphUtils } from "../../../utils/graph/graph";
 import { useGraph } from "../../../hooks/use-graph/use-graph";
@@ -43,29 +43,35 @@ export const HorizontalBars = ({ children, labels, size = 50, radius = 0, classN
         });
     })
         .filter((x) => !!x);
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", { viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, className: cx("horizontal-bars [grid-area:graph] h-full w-full", className), preserveAspectRatio: "none", children: [dataset.map((_a, index) => {
-                        var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
-                        return (_jsx(Rect, { x1: x1, x2: x2, y2: y2, y1: y1, fill: String(bar.fill), stroke: bar.stroke, radius: bar.radius, glow: false, horizontal: true, className: "horizontal-bars__rect" }, index));
-                    }), children] }), labels &&
-                dataset.map((bar, i) => {
-                    const position = typeof labels === "object" && "position" in labels ? labels.position : "center";
-                    const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
-                    const width = Math.abs(MathUtils.scale(bar.x2 - bar.x1, context.viewbox.x, 100) - (position === "above" ? 100 : 0)) + "%";
-                    const height = MathUtils.scale(bar.y2 - bar.y1, context.viewbox.y, 100);
-                    const top = MathUtils.scale(bar.y1, context.viewbox.y, 100);
-                    const label = (() => {
-                        var _a;
-                        if (typeof labels === "object" && "position" in labels)
-                            return labels.display(bar.data.x);
-                        return (_a = (labels === true ? bar.data.y : labels(bar.data.y))) !== null && _a !== void 0 ? _a : "";
-                    })();
-                    const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
-                    return (_jsx(overlay.div, { className: "horizontal-bars__label @container-[size] absolute text-center", style: {
-                            width,
-                            height: height + "%",
-                            left: position === "above" ? "unset" : 0,
-                            right: position === "above" ? 0 : "unset",
-                            top: top + "%",
-                        }, children: _jsx("div", { className: "h-full w-full relative", children: _jsx("span", { className: cx("text-xs horizontal-bars__label-text absolute", position === "center" && "top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2", position === "above" && "top-[50%] left-2 transform -translate-y-1/2", collision && "invisible", breakpoint === 2 && collision && "@[width:2ch|height:1.25em]:!visible", breakpoint === 4 && collision && "@[width:4ch|height:1.25em]:!visible", breakpoint === 6 && collision && "@[width:6ch|height:1.25em]:!visible", breakpoint === 8 && collision && "@[width:8ch|height:1.25em]:!visible", breakpoint === 10 && collision && "@[width:10ch|height:1.25em]:!visible", breakpoint === 15 && collision && "@[width:15ch|height:1.25em]:!visible", breakpoint === 20 && collision && "@[width:20ch|height:1.25em]:!visible"), style: { color: position === "center" ? ColorUtils.textFor(String(bar.fill)) : undefined }, children: label.toString() }) }) }, i));
-                })] }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, className: cx("horizontal-bars [grid-area:graph] h-full w-full", className), preserveAspectRatio: "none" },
+            dataset.map((_a, index) => {
+                var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
+                return (React.createElement(Rect, { key: index, x1: x1, x2: x2, y2: y2, y1: y1, fill: String(bar.fill), stroke: bar.stroke, radius: bar.radius, glow: false, horizontal: true, className: "horizontal-bars__rect" }));
+            }),
+            children),
+        labels &&
+            dataset.map((bar, i) => {
+                const position = typeof labels === "object" && "position" in labels ? labels.position : "center";
+                const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
+                const width = Math.abs(MathUtils.scale(bar.x2 - bar.x1, context.viewbox.x, 100) - (position === "above" ? 100 : 0)) + "%";
+                const height = MathUtils.scale(bar.y2 - bar.y1, context.viewbox.y, 100);
+                const top = MathUtils.scale(bar.y1, context.viewbox.y, 100);
+                const label = (() => {
+                    var _a;
+                    if (typeof labels === "object" && "position" in labels)
+                        return labels.display(bar.data.x);
+                    return (_a = (labels === true ? bar.data.y : labels(bar.data.y))) !== null && _a !== void 0 ? _a : "";
+                })();
+                const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
+                return (React.createElement(overlay.div, { key: i, className: "horizontal-bars__label @container-[size] absolute text-center", style: {
+                        width,
+                        height: height + "%",
+                        left: position === "above" ? "unset" : 0,
+                        right: position === "above" ? 0 : "unset",
+                        top: top + "%",
+                    } },
+                    React.createElement("div", { className: "h-full w-full relative" },
+                        React.createElement("span", { className: cx("text-xs horizontal-bars__label-text absolute", position === "center" && "top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2", position === "above" && "top-[50%] left-2 transform -translate-y-1/2", collision && "invisible", breakpoint === 2 && collision && "@[width:2ch|height:1.25em]:!visible", breakpoint === 4 && collision && "@[width:4ch|height:1.25em]:!visible", breakpoint === 6 && collision && "@[width:6ch|height:1.25em]:!visible", breakpoint === 8 && collision && "@[width:8ch|height:1.25em]:!visible", breakpoint === 10 && collision && "@[width:10ch|height:1.25em]:!visible", breakpoint === 15 && collision && "@[width:15ch|height:1.25em]:!visible", breakpoint === 20 && collision && "@[width:20ch|height:1.25em]:!visible"), style: { color: position === "center" ? ColorUtils.textFor(String(bar.fill)) : undefined } }, label.toString()))));
+            })));
 };

package/dist/src/components/Bars/components/Rect.d.ts

@@ -8,5 +8,5 @@ type Props = JSX.IntrinsicElements["path"] & {
     horizontal?: boolean;
     glow?: boolean;
 };
-export declare const Rect: ({ x1, y1, x2, y2, radius, glow, horizontal, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Rect: ({ x1, y1, x2, y2, radius, glow, horizontal, ...rest }: Props) => JSX.Element;
 export {};

package/dist/src/components/Bars/components/Rect.js

@@ -9,8 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import React, { useId } from "react";
 import { LinearGradient } from "../../LinearGradient/LinearGradient";
 import { PathUtils } from "../../../utils/path/path";
 import { useGraph } from "../../../hooks/use-graph/use-graph";
@@ -29,5 +28,15 @@ export const Rect = (_a) => {
     const isGradientStroke = (_d = rest.stroke) === null || _d === void 0 ? void 0 : _d.includes("gradient");
     const path = PathUtils.borderRadius({ x: x1, y: y1 }, { x: x2, y: y2 }, radius !== null && radius !== void 0 ? radius : 0, horizontal);
     const height = MathUtils.scale(y2 - y1, viewbox.y, 100);
-    return (_jsxs(_Fragment, { children: [isFillGradient && rest.fill && _jsx(LinearGradient, { id: fillId, gradient: rest.fill }), isGradientStroke && rest.stroke && _jsx(LinearGradient, { id: strokeId, gradient: rest.stroke }), _jsx("path", { id: clipId, d: path }), _jsx("clipPath", { id: clip, children: _jsx("use", { xlinkHref: "#" + clipId }) }), glow && (_jsxs(_Fragment, { children: [_jsx("use", { xlinkHref: `#${glowId}`, filter: "blur(45px)", opacity: 0.5 }), _jsx("g", { id: glowId, children: _jsx("path", { fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: "transparent", d: path, vectorEffect: "non-scaling-stroke", className: rest.className, strokeWidth: 5 }) })] })), isFillMasked ? (_jsx("rect", { x: x1, y: 0, width: x2 - x1, height: "100%", fill: `url(#${fillId})`, clipPath: `url(#${clip})` })) : (_jsx("path", { fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: isGradientStroke ? `url(#${strokeId})` : rest.stroke, d: path, vectorEffect: "non-scaling-stroke", strokeWidth: 10, className: rest.className, clipPath: `url(#${clip})` }))] }));
+    return (React.createElement(React.Fragment, null,
+        isFillGradient && rest.fill && React.createElement(LinearGradient, { id: fillId, gradient: rest.fill }),
+        isGradientStroke && rest.stroke && React.createElement(LinearGradient, { id: strokeId, gradient: rest.stroke }),
+        React.createElement("path", { id: clipId, d: path }),
+        React.createElement("clipPath", { id: clip },
+            React.createElement("use", { xlinkHref: "#" + clipId })),
+        glow && (React.createElement(React.Fragment, null,
+            React.createElement("use", { xlinkHref: `#${glowId}`, filter: "blur(45px)", opacity: 0.5 }),
+            React.createElement("g", { id: glowId },
+                React.createElement("path", { fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: "transparent", d: path, vectorEffect: "non-scaling-stroke", className: rest.className, strokeWidth: 5 })))),
+        isFillMasked ? (React.createElement("rect", { x: x1, y: 0, width: x2 - x1, height: "100%", fill: `url(#${fillId})`, clipPath: `url(#${clip})` })) : (React.createElement("path", { fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: isGradientStroke ? `url(#${strokeId})` : rest.stroke, d: path, vectorEffect: "non-scaling-stroke", strokeWidth: 10, className: rest.className, clipPath: `url(#${clip})` }))));
 };

package/dist/src/components/Bars/components/VerticalBars.d.ts

@@ -11,5 +11,5 @@ type Props = React.SVGAttributes<SVGSVGElement> & {
         display: (value: string | number | Date) => string;
     };
 };
-export declare const VerticalBars: ({ children, size, labels, radius, glow, className, loading, ...rest }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const VerticalBars: ({ children, size, labels, radius, glow, className, loading, ...rest }: Props) => React.JSX.Element | null;
 export {};

package/dist/src/components/Bars/components/VerticalBars.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
 import { useGraph } from "../../../hooks/use-graph/use-graph";
 import { GraphUtils } from "../../../utils/graph/graph";
 import { BarsVerticalLoading } from "./BarsVerticalLoading";
@@ -26,7 +26,7 @@ export const VerticalBars = (_a) => {
     if (!GraphUtils.isXYData(context.data))
         return null;
     if (loading)
-        return _jsx(BarsVerticalLoading, {});
+        return React.createElement(BarsVerticalLoading, null);
     const yForValue = CoordinatesUtils.yCoordinateFor(context);
     const bars = context.data.flatMap((bar, i, bars) => bar.data.map((xy) => {
         var _a, _b, _c, _d, _e;
@@ -46,28 +46,34 @@ export const VerticalBars = (_a) => {
         });
     })
         .filter((x) => !!x);
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", Object.assign({}, rest, { viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, className: cx("horizontal-bars [grid-area:graph] h-full w-full bars", className), preserveAspectRatio: "none", children: [dataset.map((_a, index) => {
-                        var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
-                        return (_jsx(Rect, { x1: x1, x2: x2, y2: y2, y1: y1, fill: String(bar.fill), stroke: bar.stroke, radius: bar.radius, glow: glow, className: "horizontal-bars__rect" }, index));
-                    }), children] })), labels &&
-                dataset.map((bar, i) => {
-                    const position = typeof labels === "object" && "position" in labels ? labels.position : "center";
-                    const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
-                    const width = MathUtils.scale(bar.x2 - bar.x1, context.viewbox.x, 100) + "%";
-                    const height = MathUtils.scale(bar.y1 - bar.y2, context.viewbox.y, 100);
-                    const top = position === "above" ? -4 : MathUtils.scale(bar.y2, context.viewbox.y, 100) + "%";
-                    const label = (() => {
-                        var _a;
-                        if (typeof labels === "object" && "position" in labels)
-                            return labels.display(bar.data.y);
-                        return (_a = (labels === true ? bar.data.y : labels(bar.data.y))) !== null && _a !== void 0 ? _a : "";
-                    })();
-                    const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
-                    return (_jsx(overlay.div, { className: "horizontal-bars__label @container-[size] absolute text-center", style: {
-                            width,
-                            height: Math.abs(height - (position === "above" ? 100 : 0)) + "%",
-                            left: `${MathUtils.scale(bar.x1, context.viewbox.x, 100)}%`,
-                            top: top,
-                        }, children: _jsx("div", { className: "h-full w-full relative", children: _jsx("span", { className: cx("horizontal-bars__label-text text-xs absolute", position === "center" && "top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2", position === "above" && "text-black dark:text-white bottom-0 left-[50%] transform -translate-x-1/2", collision && "invisible", breakpoint === 2 && collision && "@[width:2ch|height:1.25em]:!visible", breakpoint === 4 && collision && "@[width:4ch|height:1.25em]:!visible", breakpoint === 6 && collision && "@[width:6ch|height:1.25em]:!visible", breakpoint === 8 && collision && "@[width:8ch|height:1.25em]:!visible", breakpoint === 10 && collision && "@[width:10ch|height:1.25em]:!visible", breakpoint === 15 && collision && "@[width:15ch|height:1.25em]:!visible", breakpoint === 20 && collision && "@[width:20ch|height:1.25em]:!visible"), style: { color: position === "center" ? ColorUtils.textFor(String(bar.fill)) : undefined }, children: label.toString() }) }) }, i));
-                })] }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", Object.assign({}, rest, { viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, className: cx("horizontal-bars [grid-area:graph] h-full w-full bars", className), preserveAspectRatio: "none" }),
+            dataset.map((_a, index) => {
+                var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
+                return (React.createElement(Rect, { key: index, x1: x1, x2: x2, y2: y2, y1: y1, fill: String(bar.fill), stroke: bar.stroke, radius: bar.radius, glow: glow, className: "horizontal-bars__rect" }));
+            }),
+            children),
+        labels &&
+            dataset.map((bar, i) => {
+                const position = typeof labels === "object" && "position" in labels ? labels.position : "center";
+                const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
+                const width = MathUtils.scale(bar.x2 - bar.x1, context.viewbox.x, 100) + "%";
+                const height = MathUtils.scale(bar.y1 - bar.y2, context.viewbox.y, 100);
+                const top = position === "above" ? -4 : MathUtils.scale(bar.y2, context.viewbox.y, 100) + "%";
+                const label = (() => {
+                    var _a;
+                    if (typeof labels === "object" && "position" in labels)
+                        return labels.display(bar.data.y);
+                    return (_a = (labels === true ? bar.data.y : labels(bar.data.y))) !== null && _a !== void 0 ? _a : "";
+                })();
+                const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
+                return (React.createElement(overlay.div, { key: i, className: "horizontal-bars__label @container-[size] absolute text-center", style: {
+                        width,
+                        height: Math.abs(height - (position === "above" ? 100 : 0)) + "%",
+                        left: `${MathUtils.scale(bar.x1, context.viewbox.x, 100)}%`,
+                        top: top,
+                    } },
+                    React.createElement("div", { className: "h-full w-full relative" },
+                        React.createElement("span", { className: cx("horizontal-bars__label-text text-xs absolute", position === "center" && "top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2", position === "above" && "text-black dark:text-white bottom-0 left-[50%] transform -translate-x-1/2", collision && "invisible", breakpoint === 2 && collision && "@[width:2ch|height:1.25em]:!visible", breakpoint === 4 && collision && "@[width:4ch|height:1.25em]:!visible", breakpoint === 6 && collision && "@[width:6ch|height:1.25em]:!visible", breakpoint === 8 && collision && "@[width:8ch|height:1.25em]:!visible", breakpoint === 10 && collision && "@[width:10ch|height:1.25em]:!visible", breakpoint === 15 && collision && "@[width:15ch|height:1.25em]:!visible", breakpoint === 20 && collision && "@[width:20ch|height:1.25em]:!visible"), style: { color: position === "center" ? ColorUtils.textFor(String(bar.fill)) : undefined } }, label.toString()))));
+            })));
 };

package/dist/src/components/Graph/Graph.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { GraphContext } from "../../hooks/use-graph/use-graph";
 type Props = {
     data?: GraphContext["data"];
@@ -17,8 +17,8 @@ type Props = {
     className?: string;
 };
 export declare const Graph: {
-    ({ data, gap, children, interactions, style, className }: Props): import("react/jsx-runtime").JSX.Element;
-    Row({ children, ...rest }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    Column({ children, ...rest }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ data, gap, children, interactions, style, className }: Props): React.JSX.Element;
+    Row({ children, ...rest }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    Column({ children, ...rest }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 };
 export {};

package/dist/src/components/Graph/Graph.js

@@ -9,8 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import React, { useId } from "react";
 import { GraphContextProvider } from "../../hooks/use-graph/use-graph";
 import { ChildrenUtils } from "../../utils/children/children";
 import { GraphUtils } from "../../utils/graph/graph";
@@ -49,13 +48,15 @@ export const Graph = ({ data = [], gap, children, interactions, style, className
                 var _a, _b, _c;
                 return Object.assign({ id: (_a = dp.id) !== null && _a !== void 0 ? _a : dp.name, stroke: typeof dp.fill === "string" && !dp.stroke ? dp.fill : ((_c = (_b = dp.stroke) !== null && _b !== void 0 ? _b : ctx.colors[i]) !== null && _c !== void 0 ? _c : ctx.colors.at(-1)) }, dp);
             }) });
-    return (_jsxs("div", Object.assign({ id: id, "data-ctx": "graph" }, ctx.attributes, { style: Object.assign(Object.assign(Object.assign({}, style), ctx.attributes.style), { gridTemplateColumns: ctx.layout.columns, gridTemplateRows: ctx.layout.rows, padding: `${ctx.gap.top}px ${ctx.gap.right}px ${ctx.gap.bottom}px ${ctx.gap.left}px` }), className: tw(ctx.attributes.className, className), children: [_jsx("script", { id: id + "-context", type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(colorized) } }), _jsx(GraphContextProvider, { value: colorized, children: children })] })));
+    return (React.createElement("div", Object.assign({ id: id, "data-ctx": "graph" }, ctx.attributes, { style: Object.assign(Object.assign(Object.assign({}, style), ctx.attributes.style), { gridTemplateColumns: ctx.layout.columns, gridTemplateRows: ctx.layout.rows, padding: `${ctx.gap.top}px ${ctx.gap.right}px ${ctx.gap.bottom}px ${ctx.gap.left}px` }), className: tw(ctx.attributes.className, className) }),
+        React.createElement("script", { id: id + "-context", type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(colorized) } }),
+        React.createElement(GraphContextProvider, { value: colorized }, children)));
 };
 Graph.Row = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
-    return (_jsx("div", Object.assign({}, rest, { className: cx("col-span-full", rest.className), children: children })));
+    return (React.createElement("div", Object.assign({}, rest, { className: cx("col-span-full", rest.className) }), children));
 };
 Graph.Column = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
-    return _jsx("div", Object.assign({}, rest, { children: children }));
+    return React.createElement("div", Object.assign({}, rest), children);
 };

package/dist/src/components/GridLines/GridLines.d.ts

@@ -5,5 +5,5 @@ interface Props extends React.SVGAttributes<SVGSVGElement> {
     horizontal?: boolean;
     vertical?: boolean;
 }
-export declare const GridLines: ({ border, horizontal, vertical, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const GridLines: ({ border, horizontal, vertical, className }: Props) => React.JSX.Element;
 export {};

package/dist/src/components/GridLines/GridLines.js

@@ -1,11 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { cx } from "../../utils/cx/cx";
 import { useGraph } from "../../hooks/use-graph/use-graph";
 export const GridLines = ({ border, horizontal, vertical, className }) => {
     const context = useGraph();
     const { x, y } = context.viewbox;
     const { domain } = context;
-    return (_jsxs("svg", { viewBox: `0 0 ${x} ${y}`, className: cx("[grid-area:graph] h-full w-full", className), preserveAspectRatio: "none", children: [border && (_jsxs(_Fragment, { children: [_jsx("line", { x1: 0, y1: 0, x2: x, y2: 0, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" }), _jsx("line", { x1: x, y1: 0, x2: x, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" }), _jsx("line", { x1: x, y1: y, x2: 0, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" }), _jsx("line", { x1: 0, y1: y, x2: 0, y2: 0, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" })] })), horizontal &&
-                domain.y.map(({ coordinate }) => (_jsx("line", { x1: 0, y1: coordinate, x2: x, y2: coordinate, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__horizontal" }, coordinate))), vertical &&
-                domain.x.map(({ coordinate }) => (_jsx("line", { x1: coordinate, y1: 0, x2: coordinate, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__vertical" }, coordinate)))] }));
+    return (React.createElement("svg", { viewBox: `0 0 ${x} ${y}`, className: cx("[grid-area:graph] h-full w-full", className), preserveAspectRatio: "none" },
+        border && (React.createElement(React.Fragment, null,
+            React.createElement("line", { x1: 0, y1: 0, x2: x, y2: 0, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" }),
+            React.createElement("line", { x1: x, y1: 0, x2: x, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" }),
+            React.createElement("line", { x1: x, y1: y, x2: 0, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" }),
+            React.createElement("line", { x1: 0, y1: y, x2: 0, y2: 0, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__border" }))),
+        horizontal &&
+            domain.y.map(({ coordinate }) => (React.createElement("line", { key: coordinate, x1: 0, y1: coordinate, x2: x, y2: coordinate, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__horizontal" }))),
+        vertical &&
+            domain.x.map(({ coordinate }) => (React.createElement("line", { key: coordinate, x1: coordinate, y1: 0, x2: coordinate, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-gray-200 dark:stroke-dark-priority-100 dark:stroke-dark-priority-100 grid-lines__vertical" })))));
 };

package/dist/src/components/Heatmap/Heatmap.d.ts

@@ -10,5 +10,5 @@ type Props = React.HTMLAttributes<SVGSVGElement> & {
         display: (value: string | number | Date) => string;
     };
 };
-export declare const Heatmap: ({ labels, scalars, gradient, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Heatmap: ({ labels, scalars, gradient, className, ...rest }: Props) => React.JSX.Element | null;
 export {};

package/dist/src/components/Heatmap/Heatmap.js

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useGraph } from "../../hooks/use-graph/use-graph";
 import { cx } from "../../utils/cx/cx";
 import { Rect } from "../Bars/components/Rect";
@@ -19,6 +18,7 @@ import { MathUtils } from "../../utils/math/math";
 import { GradientUtils } from "../../utils/gradient/gradient";
 import { overlay } from "../Overlay/Overlay";
 import { ColorUtils } from "../../utils/color/color";
+import React from "react";
 import { ScalarUtils } from "../../utils/scalars/scalars";
 export const Heatmap = (_a) => {
     var { labels = true, scalars, gradient, className } = _a, rest = __rest(_a, ["labels", "scalars", "gradient", "className"]);
@@ -50,26 +50,30 @@ export const Heatmap = (_a) => {
             };
         });
     });
-    return (_jsxs(_Fragment, { children: [_jsx("svg", Object.assign({}, rest, { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, className: cx("heatmap [grid-area:graph] h-full w-full bars", className), preserveAspectRatio: "none", children: dataset.flatMap(({ x1, x2, y1, y2, fill }, i) => {
-                    return _jsx(Rect, { x1: x1, x2: x2, y1: y1, y2: y2, fill: fill }, i);
-                }) })), labels &&
-                dataset.map((rect, i) => {
-                    const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
-                    const width = MathUtils.scale(rect.x2 - rect.x1, context.viewbox.x, 100) + "%";
-                    const height = MathUtils.scale(rect.y2 - rect.y1, context.viewbox.y, 100);
-                    const top = MathUtils.scale(rect.y1, context.viewbox.y, 100);
-                    const label = (() => {
-                        var _a;
-                        if (typeof labels === "object")
-                            return labels.display(rect.data.z);
-                        return (_a = (labels === true ? rect.data.z.toString() : labels(rect.data.z))) !== null && _a !== void 0 ? _a : "";
-                    })();
-                    const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
-                    return (_jsx(overlay.div, { className: "heatmap__labels @container-[size] absolute text-center", style: {
-                            width,
-                            height: height + "%",
-                            left: `${MathUtils.scale(rect.x1, context.viewbox.x, 100)}%`,
-                            top: top + "%",
-                        }, children: _jsx("div", { className: "h-full w-full relative", children: _jsx("span", { className: cx("text-xs horizontal-bars__label-text absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2", collision && "invisible", breakpoint === 2 && collision && "@[width:2ch|height:1.25em]:!visible", breakpoint === 4 && collision && "@[width:4ch|height:1.25em]:!visible", breakpoint === 6 && collision && "@[width:6ch|height:1.25em]:!visible", breakpoint === 8 && collision && "@[width:8ch|height:1.25em]:!visible", breakpoint === 10 && collision && "@[width:10ch|height:1.25em]:!visible", breakpoint === 15 && collision && "@[width:15ch|height:1.25em]:!visible", breakpoint === 20 && collision && "@[width:20ch|height:1.25em]:!visible"), style: { color: ColorUtils.textFor(String(rect.fill)) }, children: label }) }) }, i));
-                })] }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", Object.assign({}, rest, { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, className: cx("heatmap [grid-area:graph] h-full w-full bars", className), preserveAspectRatio: "none" }), dataset.flatMap(({ x1, x2, y1, y2, fill }, i) => {
+            return React.createElement(Rect, { key: i, x1: x1, x2: x2, y1: y1, y2: y2, fill: fill });
+        })),
+        labels &&
+            dataset.map((rect, i) => {
+                const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
+                const width = MathUtils.scale(rect.x2 - rect.x1, context.viewbox.x, 100) + "%";
+                const height = MathUtils.scale(rect.y2 - rect.y1, context.viewbox.y, 100);
+                const top = MathUtils.scale(rect.y1, context.viewbox.y, 100);
+                const label = (() => {
+                    var _a;
+                    if (typeof labels === "object")
+                        return labels.display(rect.data.z);
+                    return (_a = (labels === true ? rect.data.z.toString() : labels(rect.data.z))) !== null && _a !== void 0 ? _a : "";
+                })();
+                const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
+                return (React.createElement(overlay.div, { key: i, className: "heatmap__labels @container-[size] absolute text-center", style: {
+                        width,
+                        height: height + "%",
+                        left: `${MathUtils.scale(rect.x1, context.viewbox.x, 100)}%`,
+                        top: top + "%",
+                    } },
+                    React.createElement("div", { className: "h-full w-full relative" },
+                        React.createElement("span", { className: cx("text-xs horizontal-bars__label-text absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2", collision && "invisible", breakpoint === 2 && collision && "@[width:2ch|height:1.25em]:!visible", breakpoint === 4 && collision && "@[width:4ch|height:1.25em]:!visible", breakpoint === 6 && collision && "@[width:6ch|height:1.25em]:!visible", breakpoint === 8 && collision && "@[width:8ch|height:1.25em]:!visible", breakpoint === 10 && collision && "@[width:10ch|height:1.25em]:!visible", breakpoint === 15 && collision && "@[width:15ch|height:1.25em]:!visible", breakpoint === 20 && collision && "@[width:20ch|height:1.25em]:!visible"), style: { color: ColorUtils.textFor(String(rect.fill)) } }, label))));
+            })));
 };

package/dist/src/components/HydrateContext/HydrateContext.d.ts

@@ -1,2 +1,2 @@
 import * as React from "react";
-export declare const HydrateContext: <PROPS extends Record<any, unknown>>(Component: React.FC<PROPS>) => (props: PROPS) => import("react/jsx-runtime").JSX.Element;
+export declare const HydrateContext: <PROPS extends Record<string | number | symbol, any>>(Component: React.ComponentType<PROPS>) => React.ComponentType<PROPS>;

package/dist/src/components/HydrateContext/HydrateContext.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { useContext, useMemo } from "react";
 import { ClientContext, GraphContextClient } from "../../hooks/use-graph/use-client-graph";
 import { useStatefulRef } from "../../hooks/use-stateful-ref";
@@ -18,6 +18,9 @@ export const HydrateContext = (Component) => {
                 return null;
             return contextFromParse(context);
         }, [ref.current]);
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "[grid-area:graph]", ref: setRef }), ctx && (_jsx(GraphContextClient, { value: ctx, children: _jsx(Component, Object.assign({}, props)) }))] }));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "[grid-area:graph]", ref: setRef }),
+            ctx && (React.createElement(GraphContextClient, { value: ctx },
+                React.createElement(Component, Object.assign({}, props))))));
     };
 };

package/dist/src/components/Legend/Legend.d.ts

@@ -6,7 +6,7 @@ type Props = {
     children?: ReactNode;
 };
 export declare const Legend: {
-    ({ position, alignment }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ position, alignment }: Props): React.JSX.Element;
     context(ctx: GraphContext, props: Props): {
         layout: {
             rows: string;