@nous-research/ui 0.13.2 → 0.14.0

package/dist/ui/components/cursor.js

@@ -1,57 +1,96 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 const INTERACTIVE = 'a, button, [role="button"], input, textarea, select, [data-cursor]';
-const HAND = 'M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z';
+const HAND = "M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z";
 export function Cursor({ scale = 0.8 }) {
-    const $root = useRef(null);
-    const $arrow = useRef(null);
-    const $ptr = useRef(null);
-    useEffect(() => {
-        const [root, arrow, ptr] = [$root.current, $arrow.current, $ptr.current];
-        if (!root || !arrow || !ptr) {
-            return;
-        }
-        const on = (el, ev, fn, opts) => {
-            el.addEventListener(ev, fn, opts);
-            return () => el.removeEventListener(ev, fn);
-        };
-        return [
-            on(document, 'mousemove', (e) => {
-                const { clientX: x, clientY: y } = e;
-                root.style.translate = `${x}px ${y}px`;
-                root.style.opacity = '1';
-            }, { passive: true }),
-            on(document, 'mouseover', (e) => {
-                const isPtr = !!e.target.closest?.(INTERACTIVE);
-                arrow.style.opacity = isPtr ? '0' : '1';
-                ptr.style.opacity = isPtr ? '1' : '0';
-            }, { passive: true }),
-            on(document, 'mousedown', () => {
-                root.style.transform = 'translate(1px, 1px)';
-            }),
-            on(document, 'mouseup', () => {
-                root.style.transform = '';
-            }),
-            on(document.documentElement, 'mouseleave', () => {
-                root.style.opacity = '0';
-            }),
-            on(document.documentElement, 'mouseenter', () => {
-                root.style.opacity = '1';
-            })
-        ].reduce((_, fn) => fn, undefined);
-    }, []);
-    return (_jsxs("div", { "aria-hidden": true, ref: $root, style: {
-            filter: 'drop-shadow(1px 2px 0 #000)',
-            height: 32 * scale,
-            left: 0,
-            opacity: 0,
-            pointerEvents: 'none',
-            position: 'fixed',
-            top: 0,
-            width: 32 * scale,
-            willChange: 'translate',
-            zIndex: 9999
-        }, children: [_jsx("div", { ref: $arrow, style: { inset: 0, position: 'absolute' }, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M1 1L1 14L5 10L8 15L10 14L7 9L12 9L1 1Z", fill: "#fff", stroke: "#000", strokeLinejoin: "round", strokeWidth: 1 }) }) }), _jsx("div", { ref: $ptr, style: { inset: 0, opacity: 0, position: 'absolute' }, children: _jsx("svg", { viewBox: "0 0 28 29", children: _jsx("path", { d: HAND, fill: "#fff", stroke: "#000", strokeLinejoin: "round", strokeWidth: 2, style: { paintOrder: 'stroke fill' } }) }) })] }));
+  const $root = useRef(null);
+  const $arrow = useRef(null);
+  const $ptr = useRef(null);
+  useEffect(() => {
+    const [root, arrow, ptr] = [$root.current, $arrow.current, $ptr.current];
+    if (!root || !arrow || !ptr) {
+      return;
+    }
+    const on = (el, ev, fn, opts) => {
+      el.addEventListener(ev, fn, opts);
+      return () => el.removeEventListener(ev, fn);
+    };
+    return [
+      on(
+        document,
+        "mousemove",
+        (e) => {
+          const { clientX: x, clientY: y } = e;
+          root.style.translate = `${x}px ${y}px`;
+          root.style.opacity = "1";
+        },
+        { passive: true }
+      ),
+      on(
+        document,
+        "mouseover",
+        (e) => {
+          const isPtr = !!e.target.closest?.(INTERACTIVE);
+          arrow.style.opacity = isPtr ? "0" : "1";
+          ptr.style.opacity = isPtr ? "1" : "0";
+        },
+        { passive: true }
+      ),
+      on(document, "mousedown", () => {
+        root.style.transform = "translate(1px, 1px)";
+      }),
+      on(document, "mouseup", () => {
+        root.style.transform = "";
+      }),
+      on(document.documentElement, "mouseleave", () => {
+        root.style.opacity = "0";
+      }),
+      on(document.documentElement, "mouseenter", () => {
+        root.style.opacity = "1";
+      })
+    ].reduce((_, fn) => fn, void 0);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      ref: $root,
+      style: {
+        filter: "drop-shadow(1px 2px 0 #000)",
+        height: 32 * scale,
+        left: 0,
+        opacity: 0,
+        pointerEvents: "none",
+        position: "fixed",
+        top: 0,
+        width: 32 * scale,
+        willChange: "translate",
+        zIndex: 9999
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: $arrow, style: { inset: 0, position: "absolute" }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M1 1L1 14L5 10L8 15L10 14L7 9L12 9L1 1Z",
+            fill: "#fff",
+            stroke: "#000",
+            strokeLinejoin: "round",
+            strokeWidth: 1
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { ref: $ptr, style: { inset: 0, opacity: 0, position: "absolute" }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 28 29", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: HAND,
+            fill: "#fff",
+            stroke: "#000",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            style: { paintOrder: "stroke fill" }
+          }
+        ) }) })
+      ]
+    }
+  );
 }
-//# sourceMappingURL=cursor.js.map

package/dist/ui/components/dropdown-menu.d.ts

@@ -8,6 +8,5 @@ export declare function DropdownMenu<T extends string>({ className, direction, o
         value: T;
     }[];
     value: T;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/ui/components/dropdown-menu.js

@@ -1,53 +1,101 @@
-'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from 'react';
-import { cn } from '../../utils';
-const font = 'font-mondwest text-[.9375rem] leading-[1.4] tracking-[0.1875rem]';
-export function DropdownMenu({ className, direction = 'down', onChange, options, value }) {
-    const id = useId();
-    const [open, setOpen] = useState(false);
-    const ref = useRef(null);
-    const anchor = `--dropdown-${id.replace(/:/g, '')}`;
-    const panelStyle = {
-        position: 'fixed',
-        positionAnchor: anchor,
-        positionTryFallbacks: direction === 'left' || direction === 'right'
-            ? 'flip-inline, flip-block'
-            : 'flip-block, flip-inline',
-        ...(direction === 'up' && {
-            left: 'calc(anchor(left) - 0.5rem)',
-            top: 'calc(anchor(top) + 1rem)',
-            transform: 'translateY(-100%)'
-        }),
-        ...(direction === 'right' && {
-            left: 'calc(anchor(right))',
-            top: 'calc(anchor(top) - 0.5rem)'
-        }),
-        ...(direction === 'left' && {
-            left: 'calc(anchor(left) - 1px)',
-            top: 'calc(anchor(top) - 0.5rem)',
-            transform: 'translateX(-100%)'
-        }),
-        ...(direction === 'down' && {
-            left: 'calc(anchor(left) - 0.5rem)',
-            top: 'calc(anchor(top) - 0.5rem)'
-        })
-    };
-    useEffect(() => {
-        if (!open) {
-            return;
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../utils/index.js";
+const font = "font-mondwest text-[.9375rem] leading-[1.4] tracking-[0.1875rem]";
+export function DropdownMenu({
+  className,
+  direction = "down",
+  onChange,
+  options,
+  value
+}) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const anchor = `--dropdown-${id.replace(/:/g, "")}`;
+  const panelStyle = {
+    position: "fixed",
+    positionAnchor: anchor,
+    positionTryFallbacks: direction === "left" || direction === "right" ? "flip-inline, flip-block" : "flip-block, flip-inline",
+    ...direction === "up" && {
+      left: "calc(anchor(left) - 0.5rem)",
+      top: "calc(anchor(top) + 1rem)",
+      transform: "translateY(-100%)"
+    },
+    ...direction === "right" && {
+      left: "calc(anchor(right))",
+      top: "calc(anchor(top) - 0.5rem)"
+    },
+    ...direction === "left" && {
+      left: "calc(anchor(left) - 1px)",
+      top: "calc(anchor(top) - 0.5rem)",
+      transform: "translateX(-100%)"
+    },
+    ...direction === "down" && {
+      left: "calc(anchor(left) - 0.5rem)",
+      top: "calc(anchor(top) - 0.5rem)"
+    }
+  };
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const ac = new AbortController();
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        if (!ref.current?.contains(e.target)) {
+          setOpen(false);
         }
-        const ac = new AbortController();
-        document.addEventListener('mousedown', e => {
-            if (!ref.current?.contains(e.target)) {
-                setOpen(false);
-            }
-        }, { signal: ac.signal });
-        return () => ac.abort();
-    }, [open]);
-    return (_jsxs("span", { className: cn('relative inline-block align-top', className), ref: ref, children: [_jsxs("span", { className: cn(font, 'inline-block cursor-pointer hover:underline'), onClick: () => setOpen(!open), style: { anchorName: anchor }, children: [options.find(o => o.value === value)?.label ?? value, ' ', open ? '↑' : '↓'] }), open && (_jsx("div", { className: "bg-background-base z-50 flex flex-col", style: panelStyle, children: options.map(o => (_jsx("span", { className: cn(font, 'block cursor-pointer p-2 whitespace-nowrap', o.value === value ? 'underline' : 'hover:bg-midground/10'), onClick: () => {
-                        onChange(o.value);
-                        setOpen(false);
-                    }, children: o.label }, o.value))) }))] }));
+      },
+      { signal: ac.signal }
+    );
+    return () => ac.abort();
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("relative inline-block align-top", className),
+      ref,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(font, "inline-block cursor-pointer hover:underline"),
+            onClick: () => setOpen(!open),
+            style: { anchorName: anchor },
+            children: [
+              options.find((o) => o.value === value)?.label ?? value,
+              " ",
+              open ? "\u2191" : "\u2193"
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-background-base z-50 flex flex-col",
+            style: panelStyle,
+            children: options.map((o) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  font,
+                  "block cursor-pointer p-2 whitespace-nowrap",
+                  o.value === value ? "underline" : "hover:bg-midground/10"
+                ),
+                onClick: () => {
+                  onChange(o.value);
+                  setOpen(false);
+                },
+                children: o.label
+              },
+              o.value
+            ))
+          }
+        )
+      ]
+    }
+  );
 }
-//# sourceMappingURL=dropdown-menu.js.map

package/dist/ui/components/fit-text/index.d.ts

@@ -7,4 +7,3 @@ interface OwnProps {
 }
 export type FitTextProps<T extends React.ElementType = 'span'> = PolyProps<T, OwnProps>;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/ui/components/fit-text/index.js

@@ -1,16 +1,24 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement } from 'react';
-import { cn, polyRef } from '../../../utils';
-export const FitText = polyRef(({ as, children, className, max, min = '1em', style: baseStyle, ...rest }, ref) => {
-    if (typeof children !== 'string') {
-        return null;
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { cn, polyRef } from "../../../utils/index.js";
+export const FitText = polyRef(
+  ({ as, children, className, max, min = "1em", style: baseStyle, ...rest }, ref) => {
+    if (typeof children !== "string") {
+      return null;
     }
     const style = {
-        '--fit-max': max ?? 'infinity * 1px',
-        '--fit-min': min,
-        ...baseStyle
+      "--fit-max": max ?? "infinity * 1px",
+      "--fit-min": min,
+      ...baseStyle
     };
-    return createElement((as ?? 'span'), { ...rest, className: cn('fit-text', className), ref, style }, _jsxs(_Fragment, { children: [_jsx("span", { children: _jsx("span", { children: children }) }), _jsx("span", { "aria-hidden": "true", children: children })] }));
-});
-//# sourceMappingURL=index.js.map
+    return createElement(
+      as ?? "span",
+      { ...rest, className: cn("fit-text", className), ref, style },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { children }) }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children })
+      ] })
+    );
+  }
+);

package/dist/ui/components/graphs/bar-chart.d.ts

@@ -3,11 +3,10 @@ export declare const BarChart: {
     (props: Omit<BarChartProps<DataPoint> & {
         backgroundColor?: string;
         color?: string;
-    }, keyof import("../blend-mode").BlendColors>): import("react/jsx-runtime").JSX.Element;
+    }, keyof import("../blend-mode").BlendColors>): import("react").JSX.Element;
     displayName: string;
 };
 interface BarChartProps<T extends DataPoint> extends ChartProps<T> {
     xDomain?: [number, number];
 }
 export {};
-//# sourceMappingURL=bar-chart.d.ts.map

package/dist/ui/components/graphs/bar-chart.js

@@ -1,75 +1,128 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as Plot from '@observablehq/plot';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '../../../utils';
-import { accessor, CHART_MARGINS, CHART_STYLE, Crosshair, setupCrosshair, stylePlot, useDims, withChartBlend } from './utils';
-export const BarChart = withChartBlend(({ backgroundColor: _, className, color: fillColor, data = [], formatTooltip, formatX: formatXProp, formatY: formatYProp, x = 'label', xDomain, xTicks = [0, 50000, 100000], y = 'value', yDomain = [0, 10], yTicks = [10, 8, 4, 2], ...props }) => {
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Plot from "@observablehq/plot";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../../../utils/index.js";
+import {
+  accessor,
+  CHART_MARGINS,
+  CHART_STYLE,
+  Crosshair,
+  setupCrosshair,
+  stylePlot,
+  useDims,
+  withChartBlend
+} from "./utils.js";
+export const BarChart = withChartBlend(
+  ({
+    backgroundColor: _,
+    className,
+    color: fillColor,
+    data = [],
+    formatTooltip,
+    formatX: formatXProp,
+    formatY: formatYProp,
+    x = "label",
+    xDomain,
+    xTicks = [0, 5e4, 1e5],
+    y = "value",
+    yDomain = [0, 10],
+    yTicks = [10, 8, 4, 2],
+    ...props
+  }) => {
     const ref = useRef(null);
     const plotRef = useRef(null);
     const [crosshair, setCrosshair] = useState({ x: null });
     const dims = useDims(ref);
-    const formatX = useCallback((v) => formatXProp?.(v) ??
-        (typeof v === 'number' ? v.toLocaleString('en-US') : String(v)), [formatXProp]);
-    const formatY = useCallback((v) => formatYProp?.(v) ?? String(v), [formatYProp]);
+    const formatX = useCallback(
+      (v) => formatXProp?.(v) ?? (typeof v === "number" ? v.toLocaleString("en-US") : String(v)),
+      [formatXProp]
+    );
+    const formatY = useCallback(
+      (v) => formatYProp?.(v) ?? String(v),
+      [formatYProp]
+    );
     const getX = useMemo(() => accessor(x), [x]);
     const getY = useMemo(() => accessor(y), [y]);
     useEffect(() => {
-        if (!ref.current ||
-            !plotRef.current ||
-            !data.length ||
-            !dims.h ||
-            !dims.w) {
-            return;
+      if (!ref.current || !plotRef.current || !data.length || !dims.h || !dims.w) {
+        return;
+      }
+      plotRef.current.innerHTML = "";
+      const [xMin, xMax] = [
+        xDomain?.[0] ?? 0,
+        xDomain?.[1] ?? Math.max(...data.map((d) => getX(d)))
+      ];
+      const plot = Plot.plot({
+        ...CHART_MARGINS,
+        height: dims.h,
+        marks: [
+          Plot.rectY(data, {
+            fill: fillColor ?? "currentColor",
+            fillOpacity: 0.3,
+            interval: (xMax - xMin) / data.length,
+            x: getX,
+            y: getY
+          }),
+          Plot.axisX({ tickFormat: formatX, ticks: xTicks })
+        ],
+        style: CHART_STYLE,
+        width: dims.w,
+        x: { domain: [xMin, xMax], label: null, type: "linear" },
+        y: {
+          domain: yDomain,
+          grid: true,
+          label: null,
+          tickFormat: formatY,
+          ticks: yTicks
         }
-        plotRef.current.innerHTML = '';
-        const [xMin, xMax] = [
-            xDomain?.[0] ?? 0,
-            xDomain?.[1] ?? Math.max(...data.map(d => getX(d)))
-        ];
-        const plot = Plot.plot({
-            ...CHART_MARGINS,
-            height: dims.h,
-            marks: [
-                Plot.rectY(data, {
-                    fill: fillColor ?? 'currentColor',
-                    fillOpacity: 0.3,
-                    interval: (xMax - xMin) / data.length,
-                    x: getX,
-                    y: getY
-                }),
-                Plot.axisX({ tickFormat: formatX, ticks: xTicks })
-            ],
-            style: CHART_STYLE,
-            width: dims.w,
-            x: { domain: [xMin, xMax], label: null, type: 'linear' },
-            y: {
-                domain: yDomain,
-                grid: true,
-                label: null,
-                tickFormat: formatY,
-                ticks: yTicks
-            }
-        });
-        stylePlot(plot);
-        plotRef.current.appendChild(plot);
-        const cleanup = setupCrosshair(ref.current, data, d => getX(d), getY, yDomain, d => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`, setCrosshair);
-        return cleanup;
-    }, [
+      });
+      stylePlot(plot);
+      plotRef.current.appendChild(plot);
+      const cleanup = setupCrosshair(
+        ref.current,
         data,
-        dims.h,
-        dims.w,
-        fillColor,
-        formatTooltip,
-        formatX,
-        formatY,
-        getX,
+        (d) => getX(d),
         getY,
-        xDomain,
-        xTicks,
         yDomain,
-        yTicks
+        (d) => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`,
+        setCrosshair
+      );
+      return cleanup;
+    }, [
+      data,
+      dims.h,
+      dims.w,
+      fillColor,
+      formatTooltip,
+      formatX,
+      formatY,
+      getX,
+      getY,
+      xDomain,
+      xTicks,
+      yDomain,
+      yTicks
     ]);
-    return (_jsxs("div", { className: cn('relative aspect-4/1 w-full overflow-clip', className), ref: ref, ...props, children: [_jsx("div", { className: "absolute inset-0", ref: plotRef }), _jsx(Crosshair, { color: fillColor, containerWidth: dims.w, height: dims.h, ...crosshair })] }));
-});
-//# sourceMappingURL=bar-chart.js.map
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative aspect-4/1 w-full overflow-clip", className),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", ref: plotRef }),
+          /* @__PURE__ */ jsx(
+            Crosshair,
+            {
+              color: fillColor,
+              containerWidth: dims.w,
+              height: dims.h,
+              ...crosshair
+            }
+          )
+        ]
+      }
+    );
+  }
+);

package/dist/ui/components/graphs/index.d.ts

@@ -1,4 +1,3 @@
 export { BarChart } from './bar-chart';
 export { LineChart } from './line-chart';
 export * from './utils';
-//# sourceMappingURL=index.d.ts.map

package/dist/ui/components/graphs/index.js

@@ -1,4 +1,3 @@
-export { BarChart } from './bar-chart';
-export { LineChart } from './line-chart';
-export * from './utils';
-//# sourceMappingURL=index.js.map
+export { BarChart } from "./bar-chart.js";
+export { LineChart } from "./line-chart.js";
+export * from "./utils.js";

package/dist/ui/components/graphs/line-chart.d.ts

@@ -3,7 +3,7 @@ export declare const LineChart: {
     (props: Omit<LineChartProps<DataPoint> & {
         backgroundColor?: string;
         color?: string;
-    }, keyof import("../blend-mode").BlendColors>): import("react/jsx-runtime").JSX.Element;
+    }, keyof import("../blend-mode").BlendColors>): import("react").JSX.Element;
     displayName: string;
 };
 interface LineChartProps<T extends DataPoint> extends ChartProps<T> {
@@ -12,4 +12,3 @@ interface LineChartProps<T extends DataPoint> extends ChartProps<T> {
     showArea?: boolean;
 }
 export {};
-//# sourceMappingURL=line-chart.d.ts.map