@nastechai-research/ui 0.18.2

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

@@ -0,0 +1,102 @@
+"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);
+        }
+      },
+      { 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=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlSWQsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgY24gfSBmcm9tICcuLi8uLi91dGlscydcblxuY29uc3QgZm9udCA9ICdmb250LW1vbmR3ZXN0IHRleHQtWy45Mzc1cmVtXSBsZWFkaW5nLVsxLjRdIHRyYWNraW5nLVswLjE4NzVyZW1dJ1xuXG50eXBlIERpcmVjdGlvbiA9ICdkb3duJyB8ICd1cCcgfCAnbGVmdCcgfCAncmlnaHQnXG5cbnR5cGUgQW5jaG9yU3R5bGUgPSBSZWFjdC5DU1NQcm9wZXJ0aWVzICYgUmVjb3JkPHN0cmluZywgc3RyaW5nIHwgbnVtYmVyPlxuXG5leHBvcnQgZnVuY3Rpb24gRHJvcGRvd25NZW51PFQgZXh0ZW5kcyBzdHJpbmc+KHtcbiAgY2xhc3NOYW1lLFxuICBkaXJlY3Rpb24gPSAnZG93bicsXG4gIG9uQ2hhbmdlLFxuICBvcHRpb25zLFxuICB2YWx1ZVxufToge1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgZGlyZWN0aW9uPzogRGlyZWN0aW9uXG4gIG9uQ2hhbmdlOiAodmFsdWU6IFQpID0+IHZvaWRcbiAgb3B0aW9uczogeyBsYWJlbDogc3RyaW5nOyB2YWx1ZTogVCB9W11cbiAgdmFsdWU6IFRcbn0pIHtcbiAgY29uc3QgaWQgPSB1c2VJZCgpXG4gIGNvbnN0IFtvcGVuLCBzZXRPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKVxuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTFNwYW5FbGVtZW50PihudWxsKVxuXG4gIGNvbnN0IGFuY2hvciA9IGAtLWRyb3Bkb3duLSR7aWQucmVwbGFjZSgvOi9nLCAnJyl9YFxuXG4gIGNvbnN0IHBhbmVsU3R5bGU6IEFuY2hvclN0eWxlID0ge1xuICAgIHBvc2l0aW9uOiAnZml4ZWQnLFxuICAgIHBvc2l0aW9uQW5jaG9yOiBhbmNob3IsXG4gICAgcG9zaXRpb25UcnlGYWxsYmFja3M6XG4gICAgICBkaXJlY3Rpb24gPT09ICdsZWZ0JyB8fCBkaXJlY3Rpb24gPT09ICdyaWdodCdcbiAgICAgICAgPyAnZmxpcC1pbmxpbmUsIGZsaXAtYmxvY2snXG4gICAgICAgIDogJ2ZsaXAtYmxvY2ssIGZsaXAtaW5saW5lJyxcbiAgICAuLi4oZGlyZWN0aW9uID09PSAndXAnICYmIHtcbiAgICAgIGxlZnQ6ICdjYWxjKGFuY2hvcihsZWZ0KSAtIDAuNXJlbSknLFxuICAgICAgdG9wOiAnY2FsYyhhbmNob3IodG9wKSArIDFyZW0pJyxcbiAgICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoLTEwMCUpJ1xuICAgIH0pLFxuICAgIC4uLihkaXJlY3Rpb24gPT09ICdyaWdodCcgJiYge1xuICAgICAgbGVmdDogJ2NhbGMoYW5jaG9yKHJpZ2h0KSknLFxuICAgICAgdG9wOiAnY2FsYyhhbmNob3IodG9wKSAtIDAuNXJlbSknXG4gICAgfSksXG4gICAgLi4uKGRpcmVjdGlvbiA9PT0gJ2xlZnQnICYmIHtcbiAgICAgIGxlZnQ6ICdjYWxjKGFuY2hvcihsZWZ0KSAtIDFweCknLFxuICAgICAgdG9wOiAnY2FsYyhhbmNob3IodG9wKSAtIDAuNXJlbSknLFxuICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtMTAwJSknXG4gICAgfSksXG4gICAgLi4uKGRpcmVjdGlvbiA9PT0gJ2Rvd24nICYmIHtcbiAgICAgIGxlZnQ6ICdjYWxjKGFuY2hvcihsZWZ0KSAtIDAuNXJlbSknLFxuICAgICAgdG9wOiAnY2FsYyhhbmNob3IodG9wKSAtIDAuNXJlbSknXG4gICAgfSlcbiAgfVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKCFvcGVuKSB7XG4gICAgICByZXR1cm5cbiAgICB9XG5cbiAgICBjb25zdCBhYyA9IG5ldyBBYm9ydENvbnRyb2xsZXIoKVxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXG4gICAgICAnbW91c2Vkb3duJyxcbiAgICAgIGUgPT4ge1xuICAgICAgICBpZiAoIXJlZi5jdXJyZW50Py5jb250YWlucyhlLnRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgICAgIHNldE9wZW4oZmFsc2UpXG4gICAgICAgIH1cbiAgICAgIH0sXG4gICAgICB7IHNpZ25hbDogYWMuc2lnbmFsIH1cbiAgICApXG5cbiAgICByZXR1cm4gKCkgPT4gYWMuYWJvcnQoKVxuICB9LCBbb3Blbl0pXG5cbiAgcmV0dXJuIChcbiAgICA8c3BhblxuICAgICAgY2xhc3NOYW1lPXtjbigncmVsYXRpdmUgaW5saW5lLWJsb2NrIGFsaWduLXRvcCcsIGNsYXNzTmFtZSl9XG4gICAgICByZWY9e3JlZn1cbiAgICA+XG4gICAgICA8c3BhblxuICAgICAgICBjbGFzc05hbWU9e2NuKGZvbnQsICdpbmxpbmUtYmxvY2sgY3Vyc29yLXBvaW50ZXIgaG92ZXI6dW5kZXJsaW5lJyl9XG4gICAgICAgIG9uQ2xpY2s9eygpID0+IHNldE9wZW4oIW9wZW4pfVxuICAgICAgICBzdHlsZT17eyBhbmNob3JOYW1lOiBhbmNob3IgfSBhcyBBbmNob3JTdHlsZX1cbiAgICAgID5cbiAgICAgICAge29wdGlvbnMuZmluZChvID0+IG8udmFsdWUgPT09IHZhbHVlKT8ubGFiZWwgPz8gdmFsdWV9eycgJ31cbiAgICAgICAge29wZW4gPyAnXHUyMTkxJyA6ICdcdTIxOTMnfVxuICAgICAgPC9zcGFuPlxuXG4gICAgICB7b3BlbiAmJiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9XCJiZy1iYWNrZ3JvdW5kLWJhc2Ugei01MCBmbGV4IGZsZXgtY29sXCJcbiAgICAgICAgICBzdHlsZT17cGFuZWxTdHlsZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtvcHRpb25zLm1hcChvID0+IChcbiAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgZm9udCxcbiAgICAgICAgICAgICAgICAnYmxvY2sgY3Vyc29yLXBvaW50ZXIgcC0yIHdoaXRlc3BhY2Utbm93cmFwJyxcbiAgICAgICAgICAgICAgICBvLnZhbHVlID09PSB2YWx1ZSA/ICd1bmRlcmxpbmUnIDogJ2hvdmVyOmJnLW1pZGdyb3VuZC8xMCdcbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAga2V5PXtvLnZhbHVlfVxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgb25DaGFuZ2Uoby52YWx1ZSlcbiAgICAgICAgICAgICAgICBzZXRPcGVuKGZhbHNlKVxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7by5sYWJlbH1cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICApKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApfVxuICAgIDwvc3Bhbj5cbiAgKVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQWtGTSxTQWVNLEtBZk47QUFoRk4sU0FBUyxXQUFXLE9BQU8sUUFBUSxnQkFBZ0I7QUFFbkQsU0FBUyxVQUFVO0FBRW5CLE1BQU0sT0FBTztBQU1OLGdCQUFTLGFBQStCO0FBQUEsRUFDN0M7QUFBQSxFQUNBLFlBQVk7QUFBQSxFQUNaO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFDRixHQU1HO0FBQ0QsUUFBTSxLQUFLLE1BQU07QUFDakIsUUFBTSxDQUFDLE1BQU0sT0FBTyxJQUFJLFNBQVMsS0FBSztBQUN0QyxRQUFNLE1BQU0sT0FBd0IsSUFBSTtBQUV4QyxRQUFNLFNBQVMsY0FBYyxHQUFHLFFBQVEsTUFBTSxFQUFFLENBQUM7QUFFakQsUUFBTSxhQUEwQjtBQUFBLElBQzlCLFVBQVU7QUFBQSxJQUNWLGdCQUFnQjtBQUFBLElBQ2hCLHNCQUNFLGNBQWMsVUFBVSxjQUFjLFVBQ2xDLDRCQUNBO0FBQUEsSUFDTixHQUFJLGNBQWMsUUFBUTtBQUFBLE1BQ3hCLE1BQU07QUFBQSxNQUNOLEtBQUs7QUFBQSxNQUNMLFdBQVc7QUFBQSxJQUNiO0FBQUEsSUFDQSxHQUFJLGNBQWMsV0FBVztBQUFBLE1BQzNCLE1BQU07QUFBQSxNQUNOLEtBQUs7QUFBQSxJQUNQO0FBQUEsSUFDQSxHQUFJLGNBQWMsVUFBVTtBQUFBLE1BQzFCLE1BQU07QUFBQSxNQUNOLEtBQUs7QUFBQSxNQUNMLFdBQVc7QUFBQSxJQUNiO0FBQUEsSUFDQSxHQUFJLGNBQWMsVUFBVTtBQUFBLE1BQzFCLE1BQU07QUFBQSxNQUNOLEtBQUs7QUFBQSxJQUNQO0FBQUEsRUFDRjtBQUVBLFlBQVUsTUFBTTtBQUNkLFFBQUksQ0FBQyxNQUFNO0FBQ1Q7QUFBQSxJQUNGO0FBRUEsVUFBTSxLQUFLLElBQUksZ0JBQWdCO0FBQy9CLGFBQVM7QUFBQSxNQUNQO0FBQUEsTUFDQSxPQUFLO0FBQ0gsWUFBSSxDQUFDLElBQUksU0FBUyxTQUFTLEVBQUUsTUFBYyxHQUFHO0FBQzVDLGtCQUFRLEtBQUs7QUFBQSxRQUNmO0FBQUEsTUFDRjtBQUFBLE1BQ0EsRUFBRSxRQUFRLEdBQUcsT0FBTztBQUFBLElBQ3RCO0FBRUEsV0FBTyxNQUFNLEdBQUcsTUFBTTtBQUFBLEVBQ3hCLEdBQUcsQ0FBQyxJQUFJLENBQUM7QUFFVCxTQUNFO0FBQUEsSUFBQztBQUFBO0FBQUEsTUFDQyxXQUFXLEdBQUcsbUNBQW1DLFNBQVM7QUFBQSxNQUMxRDtBQUFBLE1BRUE7QUFBQTtBQUFBLFVBQUM7QUFBQTtBQUFBLFlBQ0MsV0FBVyxHQUFHLE1BQU0sNkNBQTZDO0FBQUEsWUFDakUsU0FBUyxNQUFNLFFBQVEsQ0FBQyxJQUFJO0FBQUEsWUFDNUIsT0FBTyxFQUFFLFlBQVksT0FBTztBQUFBLFlBRTNCO0FBQUEsc0JBQVEsS0FBSyxPQUFLLEVBQUUsVUFBVSxLQUFLLEdBQUcsU0FBUztBQUFBLGNBQU87QUFBQSxjQUN0RCxPQUFPLFdBQU07QUFBQTtBQUFBO0FBQUEsUUFDaEI7QUFBQSxRQUVDLFFBQ0M7QUFBQSxVQUFDO0FBQUE7QUFBQSxZQUNDLFdBQVU7QUFBQSxZQUNWLE9BQU87QUFBQSxZQUVOLGtCQUFRLElBQUksT0FDWDtBQUFBLGNBQUM7QUFBQTtBQUFBLGdCQUNDLFdBQVc7QUFBQSxrQkFDVDtBQUFBLGtCQUNBO0FBQUEsa0JBQ0EsRUFBRSxVQUFVLFFBQVEsY0FBYztBQUFBLGdCQUNwQztBQUFBLGdCQUVBLFNBQVMsTUFBTTtBQUNiLDJCQUFTLEVBQUUsS0FBSztBQUNoQiwwQkFBUSxLQUFLO0FBQUEsZ0JBQ2Y7QUFBQSxnQkFFQyxZQUFFO0FBQUE7QUFBQSxjQU5FLEVBQUU7QUFBQSxZQU9ULENBQ0Q7QUFBQTtBQUFBLFFBQ0g7QUFBQTtBQUFBO0FBQUEsRUFFSjtBQUVKOyIsCiAgIm5hbWVzIjogW10KfQo=

package/dist/ui/components/fit-text/fit-text.css

@@ -0,0 +1,42 @@
+.fit-text {
+  --fit-captured-length: initial;
+  --fit-support-sentinel: var(--fit-captured-length, 9999px);
+
+  display: flex;
+  container-type: inline-size;
+
+  > [aria-hidden] {
+    visibility: hidden;
+  }
+
+  > :not([aria-hidden]) {
+    flex-grow: 1;
+    container-type: inline-size;
+
+    --fit-captured-length: 100cqi;
+    --fit-available-space: var(--fit-captured-length);
+
+    > * {
+      --fit-support-sentinel: inherit;
+      --fit-captured-length: 100cqi;
+      --fit-ratio: tan(
+        atan2(
+          var(--fit-available-space),
+          var(--fit-available-space) - var(--fit-captured-length)
+        )
+      );
+
+      display: block;
+      inline-size: var(--fit-available-space);
+      font-size: clamp(
+        var(--fit-min, 1em),
+        1em * var(--fit-ratio),
+        var(--fit-max, infinity * 1px) - var(--fit-support-sentinel)
+      );
+
+      @container (inline-size > 0) {
+        white-space: nowrap;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { type PolyProps } from '../../../utils';
+export declare const FitText: import("../../..").PolyComponent<"span", OwnProps>;
+interface OwnProps {
+    children: string;
+    max?: string;
+    min?: string;
+}
+export type FitTextProps<T extends React.ElementType = 'span'> = PolyProps<T, OwnProps>;
+export {};

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

@@ -0,0 +1,25 @@
+"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
+    };
+    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 })
+      ] })
+    );
+  }
+);
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IGNyZWF0ZUVsZW1lbnQgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgY24sIHR5cGUgUG9seVByb3BzLCBwb2x5UmVmIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnXG5cbmV4cG9ydCBjb25zdCBGaXRUZXh0ID0gcG9seVJlZjwnc3BhbicsIE93blByb3BzPihcbiAgKFxuICAgIHsgYXMsIGNoaWxkcmVuLCBjbGFzc05hbWUsIG1heCwgbWluID0gJzFlbScsIHN0eWxlOiBiYXNlU3R5bGUsIC4uLnJlc3QgfSxcbiAgICByZWZcbiAgKSA9PiB7XG4gICAgaWYgKHR5cGVvZiBjaGlsZHJlbiAhPT0gJ3N0cmluZycpIHtcbiAgICAgIHJldHVybiBudWxsXG4gICAgfVxuXG4gICAgY29uc3Qgc3R5bGUgPSB7XG4gICAgICAnLS1maXQtbWF4JzogbWF4ID8/ICdpbmZpbml0eSAqIDFweCcsXG4gICAgICAnLS1maXQtbWluJzogbWluLFxuICAgICAgLi4uYmFzZVN0eWxlXG4gICAgfSBhcyBSZWFjdC5DU1NQcm9wZXJ0aWVzXG5cbiAgICByZXR1cm4gY3JlYXRlRWxlbWVudChcbiAgICAgIChhcyA/PyAnc3BhbicpIGFzIFJlYWN0LkVsZW1lbnRUeXBlLFxuICAgICAgeyAuLi5yZXN0LCBjbGFzc05hbWU6IGNuKCdmaXQtdGV4dCcsIGNsYXNzTmFtZSksIHJlZiwgc3R5bGUgfSxcbiAgICAgIDw+XG4gICAgICAgIDxzcGFuPlxuICAgICAgICAgIDxzcGFuPntjaGlsZHJlbn08L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICA8c3BhbiBhcmlhLWhpZGRlbj1cInRydWVcIj57Y2hpbGRyZW59PC9zcGFuPlxuICAgICAgPC8+XG4gICAgKVxuICB9XG4pXG5cbmludGVyZmFjZSBPd25Qcm9wcyB7XG4gIGNoaWxkcmVuOiBzdHJpbmdcbiAgbWF4Pzogc3RyaW5nXG4gIG1pbj86IHN0cmluZ1xufVxuXG5leHBvcnQgdHlwZSBGaXRUZXh0UHJvcHM8VCBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlID0gJ3NwYW4nPiA9IFBvbHlQcm9wczxcbiAgVCxcbiAgT3duUHJvcHNcbj5cbiJdLAogICJtYXBwaW5ncyI6ICI7QUF3Qk0sbUJBRUksS0FGSjtBQXRCTixTQUFTLHFCQUFxQjtBQUU5QixTQUFTLElBQW9CLGVBQWU7QUFFckMsYUFBTSxVQUFVO0FBQUEsRUFDckIsQ0FDRSxFQUFFLElBQUksVUFBVSxXQUFXLEtBQUssTUFBTSxPQUFPLE9BQU8sV0FBVyxHQUFHLEtBQUssR0FDdkUsUUFDRztBQUNILFFBQUksT0FBTyxhQUFhLFVBQVU7QUFDaEMsYUFBTztBQUFBLElBQ1Q7QUFFQSxVQUFNLFFBQVE7QUFBQSxNQUNaLGFBQWEsT0FBTztBQUFBLE1BQ3BCLGFBQWE7QUFBQSxNQUNiLEdBQUc7QUFBQSxJQUNMO0FBRUEsV0FBTztBQUFBLE1BQ0osTUFBTTtBQUFBLE1BQ1AsRUFBRSxHQUFHLE1BQU0sV0FBVyxHQUFHLFlBQVksU0FBUyxHQUFHLEtBQUssTUFBTTtBQUFBLE1BQzVELGlDQUNFO0FBQUEsNEJBQUMsVUFDQyw4QkFBQyxVQUFNLFVBQVMsR0FDbEI7QUFBQSxRQUVBLG9CQUFDLFVBQUssZUFBWSxRQUFRLFVBQVM7QUFBQSxTQUNyQztBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQ0Y7IiwKICAibmFtZXMiOiBbXQp9Cg==

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

@@ -0,0 +1,12 @@
+import { type ChartProps, type DataPoint } from './utils';
+export declare const BarChart: {
+    (props: Omit<BarChartProps<DataPoint> & {
+        backgroundColor?: string;
+        color?: string;
+    }, keyof import("../blend-mode").BlendColors>): import("react").JSX.Element;
+    displayName: string;
+};
+interface BarChartProps<T extends DataPoint> extends ChartProps<T> {
+    xDomain?: [number, number];
+}
+export {};

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

@@ -0,0 +1,129 @@
+"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 getX = useMemo(() => accessor(x), [x]);
+    const getY = useMemo(() => accessor(y), [y]);
+    useEffect(() => {
+      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
+        }
+      });
+      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;
+    }, [
+      data,
+      dims.h,
+      dims.w,
+      fillColor,
+      formatTooltip,
+      formatX,
+      formatY,
+      getX,
+      getY,
+      xDomain,
+      xTicks,
+      yDomain,
+      yTicks
+    ]);
+    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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCAqIGFzIFBsb3QgZnJvbSAnQG9ic2VydmFibGVocS9wbG90J1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyBjbiB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJ1xuXG5pbXBvcnQge1xuICBhY2Nlc3NvcixcbiAgQ0hBUlRfTUFSR0lOUyxcbiAgQ0hBUlRfU1RZTEUsXG4gIHR5cGUgQ2hhcnRQcm9wcyxcbiAgQ3Jvc3NoYWlyLFxuICB0eXBlIENyb3NzaGFpclN0YXRlLFxuICB0eXBlIERhdGFQb2ludCxcbiAgc2V0dXBDcm9zc2hhaXIsXG4gIHN0eWxlUGxvdCxcbiAgdXNlRGltcyxcbiAgd2l0aENoYXJ0QmxlbmRcbn0gZnJvbSAnLi91dGlscydcblxuZXhwb3J0IGNvbnN0IEJhckNoYXJ0ID0gd2l0aENoYXJ0QmxlbmQoXG4gIDxUIGV4dGVuZHMgRGF0YVBvaW50Pih7XG4gICAgYmFja2dyb3VuZENvbG9yOiBfLFxuICAgIGNsYXNzTmFtZSxcbiAgICBjb2xvcjogZmlsbENvbG9yLFxuICAgIGRhdGEgPSBbXSxcbiAgICBmb3JtYXRUb29sdGlwLFxuICAgIGZvcm1hdFg6IGZvcm1hdFhQcm9wLFxuICAgIGZvcm1hdFk6IGZvcm1hdFlQcm9wLFxuICAgIHggPSAnbGFiZWwnIGFzIGtleW9mIFQsXG4gICAgeERvbWFpbixcbiAgICB4VGlja3MgPSBbMCwgNTAwMDAsIDEwMDAwMF0sXG4gICAgeSA9ICd2YWx1ZScgYXMga2V5b2YgVCxcbiAgICB5RG9tYWluID0gWzAsIDEwXSxcbiAgICB5VGlja3MgPSBbMTAsIDgsIDQsIDJdLFxuICAgIC4uLnByb3BzXG4gIH06IEJhckNoYXJ0UHJvcHM8VD4gJiB7IGJhY2tncm91bmRDb2xvcj86IHN0cmluZzsgY29sb3I/OiBzdHJpbmcgfSkgPT4ge1xuICAgIGNvbnN0IHJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbClcbiAgICBjb25zdCBwbG90UmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKVxuICAgIGNvbnN0IFtjcm9zc2hhaXIsIHNldENyb3NzaGFpcl0gPSB1c2VTdGF0ZTxDcm9zc2hhaXJTdGF0ZT4oeyB4OiBudWxsIH0pXG4gICAgY29uc3QgZGltcyA9IHVzZURpbXMocmVmKVxuXG4gICAgY29uc3QgZm9ybWF0WCA9IHVzZUNhbGxiYWNrKFxuICAgICAgKHY6IHVua25vd24pID0+XG4gICAgICAgIGZvcm1hdFhQcm9wPy4odikgPz9cbiAgICAgICAgKHR5cGVvZiB2ID09PSAnbnVtYmVyJyA/IHYudG9Mb2NhbGVTdHJpbmcoJ2VuLVVTJykgOiBTdHJpbmcodikpLFxuICAgICAgW2Zvcm1hdFhQcm9wXVxuICAgIClcblxuICAgIGNvbnN0IGZvcm1hdFkgPSB1c2VDYWxsYmFjayhcbiAgICAgICh2OiBudW1iZXIpID0+IGZvcm1hdFlQcm9wPy4odikgPz8gU3RyaW5nKHYpLFxuICAgICAgW2Zvcm1hdFlQcm9wXVxuICAgIClcblxuICAgIGNvbnN0IGdldFggPSB1c2VNZW1vKCgpID0+IGFjY2Vzc29yPFQsIHVua25vd24+KHgpLCBbeF0pXG4gICAgY29uc3QgZ2V0WSA9IHVzZU1lbW8oKCkgPT4gYWNjZXNzb3I8VCwgbnVtYmVyPih5KSwgW3ldKVxuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmIChcbiAgICAgICAgIXJlZi5jdXJyZW50IHx8XG4gICAgICAgICFwbG90UmVmLmN1cnJlbnQgfHxcbiAgICAgICAgIWRhdGEubGVuZ3RoIHx8XG4gICAgICAgICFkaW1zLmggfHxcbiAgICAgICAgIWRpbXMud1xuICAgICAgKSB7XG4gICAgICAgIHJldHVyblxuICAgICAgfVxuXG4gICAgICBwbG90UmVmLmN1cnJlbnQuaW5uZXJIVE1MID0gJydcblxuICAgICAgY29uc3QgW3hNaW4sIHhNYXhdID0gW1xuICAgICAgICB4RG9tYWluPy5bMF0gPz8gMCxcbiAgICAgICAgeERvbWFpbj8uWzFdID8/IE1hdGgubWF4KC4uLmRhdGEubWFwKGQgPT4gZ2V0WChkKSBhcyBudW1iZXIpKVxuICAgICAgXVxuXG4gICAgICBjb25zdCBwbG90ID0gUGxvdC5wbG90KHtcbiAgICAgICAgLi4uQ0hBUlRfTUFSR0lOUyxcbiAgICAgICAgaGVpZ2h0OiBkaW1zLmgsXG4gICAgICAgIG1hcmtzOiBbXG4gICAgICAgICAgUGxvdC5yZWN0WShkYXRhLCB7XG4gICAgICAgICAgICBmaWxsOiBmaWxsQ29sb3IgPz8gJ2N1cnJlbnRDb2xvcicsXG4gICAgICAgICAgICBmaWxsT3BhY2l0eTogMC4zLFxuICAgICAgICAgICAgaW50ZXJ2YWw6ICh4TWF4IC0geE1pbikgLyBkYXRhLmxlbmd0aCxcbiAgICAgICAgICAgIHg6IGdldFggYXMgKGQ6IFQpID0+IHVua25vd24sXG4gICAgICAgICAgICB5OiBnZXRZXG4gICAgICAgICAgfSksXG4gICAgICAgICAgUGxvdC5heGlzWCh7IHRpY2tGb3JtYXQ6IGZvcm1hdFgsIHRpY2tzOiB4VGlja3MgfSlcbiAgICAgICAgXSxcbiAgICAgICAgc3R5bGU6IENIQVJUX1NUWUxFLFxuICAgICAgICB3aWR0aDogZGltcy53LFxuICAgICAgICB4OiB7IGRvbWFpbjogW3hNaW4sIHhNYXhdLCBsYWJlbDogbnVsbCwgdHlwZTogJ2xpbmVhcicgfSxcbiAgICAgICAgeToge1xuICAgICAgICAgIGRvbWFpbjogeURvbWFpbixcbiAgICAgICAgICBncmlkOiB0cnVlLFxuICAgICAgICAgIGxhYmVsOiBudWxsLFxuICAgICAgICAgIHRpY2tGb3JtYXQ6IGZvcm1hdFksXG4gICAgICAgICAgdGlja3M6IHlUaWNrc1xuICAgICAgICB9XG4gICAgICB9KVxuXG4gICAgICBzdHlsZVBsb3QocGxvdCBhcyBIVE1MRWxlbWVudClcbiAgICAgIHBsb3RSZWYuY3VycmVudC5hcHBlbmRDaGlsZChwbG90KVxuXG4gICAgICBjb25zdCBjbGVhbnVwID0gc2V0dXBDcm9zc2hhaXIoXG4gICAgICAgIHJlZi5jdXJyZW50LFxuICAgICAgICBkYXRhLFxuICAgICAgICBkID0+IGdldFgoZCkgYXMgbnVtYmVyLFxuICAgICAgICBnZXRZLFxuICAgICAgICB5RG9tYWluLFxuICAgICAgICBkID0+IGZvcm1hdFRvb2x0aXA/LihkKSA/PyBgJHtmb3JtYXRYKGdldFgoZCkpfTogJHtmb3JtYXRZKGdldFkoZCkpfWAsXG4gICAgICAgIHNldENyb3NzaGFpclxuICAgICAgKVxuXG4gICAgICByZXR1cm4gY2xlYW51cFxuICAgIH0sIFtcbiAgICAgIGRhdGEsXG4gICAgICBkaW1zLmgsXG4gICAgICBkaW1zLncsXG4gICAgICBmaWxsQ29sb3IsXG4gICAgICBmb3JtYXRUb29sdGlwLFxuICAgICAgZm9ybWF0WCxcbiAgICAgIGZvcm1hdFksXG4gICAgICBnZXRYLFxuICAgICAgZ2V0WSxcbiAgICAgIHhEb21haW4sXG4gICAgICB4VGlja3MsXG4gICAgICB5RG9tYWluLFxuICAgICAgeVRpY2tzXG4gICAgXSlcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y24oJ3JlbGF0aXZlIGFzcGVjdC00LzEgdy1mdWxsIG92ZXJmbG93LWNsaXAnLCBjbGFzc05hbWUpfVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImFic29sdXRlIGluc2V0LTBcIiByZWY9e3Bsb3RSZWZ9IC8+XG5cbiAgICAgICAgPENyb3NzaGFpclxuICAgICAgICAgIGNvbG9yPXtmaWxsQ29sb3J9XG4gICAgICAgICAgY29udGFpbmVyV2lkdGg9e2RpbXMud31cbiAgICAgICAgICBoZWlnaHQ9e2RpbXMuaH1cbiAgICAgICAgICB7Li4uY3Jvc3NoYWlyfVxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9XG4pXG5cbmludGVyZmFjZSBCYXJDaGFydFByb3BzPFQgZXh0ZW5kcyBEYXRhUG9pbnQ+IGV4dGVuZHMgQ2hhcnRQcm9wczxUPiB7XG4gIHhEb21haW4/OiBbbnVtYmVyLCBudW1iZXJdXG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBb0lNLFNBS0UsS0FMRjtBQWxJTixZQUFZLFVBQVU7QUFDdEIsU0FBUyxhQUFhLFdBQVcsU0FBUyxRQUFRLGdCQUFnQjtBQUVsRSxTQUFTLFVBQVU7QUFFbkI7QUFBQSxFQUNFO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUVBO0FBQUEsRUFHQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLE9BQ0s7QUFFQSxhQUFNLFdBQVc7QUFBQSxFQUN0QixDQUFzQjtBQUFBLElBQ3BCLGlCQUFpQjtBQUFBLElBQ2pCO0FBQUEsSUFDQSxPQUFPO0FBQUEsSUFDUCxPQUFPLENBQUM7QUFBQSxJQUNSO0FBQUEsSUFDQSxTQUFTO0FBQUEsSUFDVCxTQUFTO0FBQUEsSUFDVCxJQUFJO0FBQUEsSUFDSjtBQUFBLElBQ0EsU0FBUyxDQUFDLEdBQUcsS0FBTyxHQUFNO0FBQUEsSUFDMUIsSUFBSTtBQUFBLElBQ0osVUFBVSxDQUFDLEdBQUcsRUFBRTtBQUFBLElBQ2hCLFNBQVMsQ0FBQyxJQUFJLEdBQUcsR0FBRyxDQUFDO0FBQUEsSUFDckIsR0FBRztBQUFBLEVBQ0wsTUFBdUU7QUFDckUsVUFBTSxNQUFNLE9BQXVCLElBQUk7QUFDdkMsVUFBTSxVQUFVLE9BQXVCLElBQUk7QUFDM0MsVUFBTSxDQUFDLFdBQVcsWUFBWSxJQUFJLFNBQXlCLEVBQUUsR0FBRyxLQUFLLENBQUM7QUFDdEUsVUFBTSxPQUFPLFFBQVEsR0FBRztBQUV4QixVQUFNLFVBQVU7QUFBQSxNQUNkLENBQUMsTUFDQyxjQUFjLENBQUMsTUFDZCxPQUFPLE1BQU0sV0FBVyxFQUFFLGVBQWUsT0FBTyxJQUFJLE9BQU8sQ0FBQztBQUFBLE1BQy9ELENBQUMsV0FBVztBQUFBLElB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

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

@@ -0,0 +1,3 @@
+export { BarChart } from './bar-chart';
+export { LineChart } from './line-chart';
+export * from './utils';

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

@@ -0,0 +1,4 @@
+export { BarChart } from "./bar-chart.js";
+export { LineChart } from "./line-chart.js";
+export * from "./utils.js";
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiZXhwb3J0IHsgQmFyQ2hhcnQgfSBmcm9tICcuL2Jhci1jaGFydCdcbmV4cG9ydCB7IExpbmVDaGFydCB9IGZyb20gJy4vbGluZS1jaGFydCdcblxuZXhwb3J0ICogZnJvbSAnLi91dGlscydcbiJdLAogICJtYXBwaW5ncyI6ICJBQUFBLFNBQVMsZ0JBQWdCO0FBQ3pCLFNBQVMsaUJBQWlCO0FBRTFCLGNBQWM7IiwKICAibmFtZXMiOiBbXQp9Cg==

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

@@ -0,0 +1,14 @@
+import { type ChartProps, type DataPoint } from './utils';
+export declare const LineChart: {
+    (props: Omit<LineChartProps<DataPoint> & {
+        backgroundColor?: string;
+        color?: string;
+    }, keyof import("../blend-mode").BlendColors>): import("react").JSX.Element;
+    displayName: string;
+};
+interface LineChartProps<T extends DataPoint> extends ChartProps<T> {
+    curve?: 'basis' | 'catmull-rom' | 'linear' | 'natural' | 'step';
+    series?: keyof T;
+    showArea?: boolean;
+}
+export {};

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

@@ -0,0 +1,175 @@
+"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 LineChart = withChartBlend(
+  ({
+    backgroundColor: _,
+    className,
+    color: strokeColor,
+    curve = "natural",
+    data = [],
+    formatTooltip,
+    formatX: formatXProp,
+    formatY: formatYProp,
+    series = "series",
+    showArea = false,
+    x = "label",
+    xTicks,
+    y = "value",
+    yDomain = [0, 0.5],
+    yTicks = 4,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    const plotRef = useRef(null);
+    const [hovered, setHovered] = useState(null);
+    const [crosshair, setCrosshair] = useState({ x: null });
+    const dims = useDims(ref);
+    const formatX = useCallback(
+      (v) => formatXProp?.(v) ?? (v >= 1e3 ? `${v / 1e3}k` : `${v}`),
+      [formatXProp]
+    );
+    const formatY = useCallback(
+      (v) => formatYProp?.(v) ?? `${Math.round(v * 100)}%`,
+      [formatYProp]
+    );
+    const getX = useMemo(() => accessor(x), [x]);
+    const getY = useMemo(() => accessor(y), [y]);
+    const getZ = useCallback((d) => d[series], [series]);
+    useEffect(() => {
+      if (!ref.current || !plotRef.current || !data.length || !dims.h || !dims.w) {
+        return;
+      }
+      plotRef.current.innerHTML = "";
+      const hasSeries = data.some((d) => d[series] !== void 0);
+      const seriesIdx = hasSeries ? data.reduce(
+        (acc, d, i) => (acc[d[series]] ??= i, acc),
+        {}
+      ) : {};
+      const n = Object.keys(seriesIdx).length;
+      const opacity = (d) => {
+        if (!hasSeries) {
+          return 1;
+        }
+        if (hovered) {
+          return d[series] === hovered[series] ? 1 : 0.2;
+        }
+        return 1 - seriesIdx[d[series]] / Math.max(n - 1, 1) * 0.2;
+      };
+      const lineOpts = {
+        curve,
+        x: getX,
+        y: getY,
+        ...hasSeries && { z: getZ }
+      };
+      const plot = Plot.plot({
+        ...CHART_MARGINS,
+        height: dims.h,
+        marks: [
+          ...showArea ? [
+            Plot.areaY(data, {
+              ...lineOpts,
+              fill: strokeColor,
+              fillOpacity: 0.15,
+              y1: yDomain[0]
+            })
+          ] : [],
+          Plot.lineY(data, {
+            ...lineOpts,
+            stroke: "transparent",
+            strokeWidth: 16
+          }),
+          Plot.lineY(data, {
+            ...lineOpts,
+            stroke: strokeColor,
+            strokeOpacity: opacity,
+            strokeWidth: 1.5
+          })
+        ],
+        style: { ...CHART_STYLE, fontStretch: "expanded" },
+        width: dims.w,
+        x: { label: null, tickFormat: formatX, ticks: xTicks },
+        y: {
+          domain: yDomain,
+          grid: true,
+          label: null,
+          tickFormat: formatY,
+          ticks: yTicks
+        }
+      });
+      plot.addEventListener("input", () => setHovered(plot.value));
+      stylePlot(plot);
+      plot.querySelectorAll('g[aria-label="line"] path').forEach(
+        (el) => Object.assign(el.style, {
+          transition: "stroke-opacity 0.2s"
+        })
+      );
+      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,
+        hasSeries ? (d) => getZ(d) : void 0
+      );
+      return () => {
+        cleanup();
+        plot.parentNode && plot.remove();
+      };
+    }, [
+      curve,
+      data,
+      dims.h,
+      dims.w,
+      formatTooltip,
+      formatX,
+      formatY,
+      getX,
+      getY,
+      getZ,
+      hovered,
+      series,
+      showArea,
+      strokeColor,
+      xTicks,
+      yDomain,
+      yTicks
+    ]);
+    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: strokeColor,
+              containerWidth: dims.w,
+              height: dims.h,
+              ...crosshair
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCAqIGFzIFBsb3QgZnJvbSAnQG9ic2VydmFibGVocS9wbG90J1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyBjbiB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJ1xuXG5pbXBvcnQge1xuICBhY2Nlc3NvcixcbiAgQ0hBUlRfTUFSR0lOUyxcbiAgQ0hBUlRfU1RZTEUsXG4gIHR5cGUgQ2hhcnRQcm9wcyxcbiAgQ3Jvc3NoYWlyLFxuICB0eXBlIENyb3NzaGFpclN0YXRlLFxuICB0eXBlIERhdGFQb2ludCxcbiAgc2V0dXBDcm9zc2hhaXIsXG4gIHN0eWxlUGxvdCxcbiAgdXNlRGltcyxcbiAgd2l0aENoYXJ0QmxlbmRcbn0gZnJvbSAnLi91dGlscydcblxuZXhwb3J0IGNvbnN0IExpbmVDaGFydCA9IHdpdGhDaGFydEJsZW5kKFxuICA8VCBleHRlbmRzIERhdGFQb2ludD4oe1xuICAgIGJhY2tncm91bmRDb2xvcjogXyxcbiAgICBjbGFzc05hbWUsXG4gICAgY29sb3I6IHN0cm9rZUNvbG9yLFxuICAgIGN1cnZlID0gJ25hdHVyYWwnLFxuICAgIGRhdGEgPSBbXSxcbiAgICBmb3JtYXRUb29sdGlwLFxuICAgIGZvcm1hdFg6IGZvcm1hdFhQcm9wLFxuICAgIGZvcm1hdFk6IGZvcm1hdFlQcm9wLFxuICAgIHNlcmllcyA9ICdzZXJpZXMnIGFzIGtleW9mIFQsXG4gICAgc2hvd0FyZWEgPSBmYWxzZSxcbiAgICB4ID0gJ2xhYmVsJyBhcyBrZXlvZiBULFxuICAgIHhUaWNrcyxcbiAgICB5ID0gJ3ZhbHVlJyBhcyBrZXlvZiBULFxuICAgIHlEb21haW4gPSBbMCwgMC41XSxcbiAgICB5VGlja3MgPSA0LFxuICAgIC4uLnByb3BzXG4gIH06IExpbmVDaGFydFByb3BzPFQ+ICYgeyBiYWNrZ3JvdW5kQ29sb3I/OiBzdHJpbmc7IGNvbG9yPzogc3RyaW5nIH0pID0+IHtcbiAgICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpXG4gICAgY29uc3QgcGxvdFJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbClcbiAgICBjb25zdCBbaG92ZXJlZCwgc2V0SG92ZXJlZF0gPSB1c2VTdGF0ZTxudWxsIHwgVD4obnVsbClcbiAgICBjb25zdCBbY3Jvc3NoYWlyLCBzZXRDcm9zc2hhaXJdID0gdXNlU3RhdGU8Q3Jvc3NoYWlyU3RhdGU+KHsgeDogbnVsbCB9KVxuICAgIGNvbnN0IGRpbXMgPSB1c2VEaW1zKHJlZilcblxuICAgIGNvbnN0IGZvcm1hdFggPSB1c2VDYWxsYmFjayhcbiAgICAgICh2OiB1bmtub3duKSA9PlxuICAgICAgICBmb3JtYXRYUHJvcD8uKHYpID8/XG4gICAgICAgICgodiBhcyBudW1iZXIpID49IDFlMyA/IGAkeyh2IGFzIG51bWJlcikgLyAxZTN9a2AgOiBgJHt2fWApLFxuICAgICAgW2Zvcm1hdFhQcm9wXVxuICAgIClcblxuICAgIGNvbnN0IGZvcm1hdFkgPSB1c2VDYWxsYmFjayhcbiAgICAgICh2OiBudW1iZXIpID0+IGZvcm1hdFlQcm9wPy4odikgPz8gYCR7TWF0aC5yb3VuZCh2ICogMTAwKX0lYCxcbiAgICAgIFtmb3JtYXRZUHJvcF1cbiAgICApXG5cbiAgICBjb25zdCBnZXRYID0gdXNlTWVtbygoKSA9PiBhY2Nlc3NvcjxULCB1bmtub3duPih4KSwgW3hdKVxuICAgIGNvbnN0IGdldFkgPSB1c2VNZW1vKCgpID0+IGFjY2Vzc29yPFQsIG51bWJlcj4oeSksIFt5XSlcbiAgICBjb25zdCBnZXRaID0gdXNlQ2FsbGJhY2soKGQ6IFQpID0+IGRbc2VyaWVzXSwgW3Nlcmllc10pXG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKFxuICAgICAgICAhcmVmLmN1cnJlbnQgfHxcbiAgICAgICAgIXBsb3RSZWYuY3VycmVudCB8fFxuICAgICAgICAhZGF0YS5sZW5ndGggfHxcbiAgICAgICAgIWRpbXMuaCB8fFxuICAgICAgICAhZGltcy53XG4gICAgICApIHtcbiAgICAgICAgcmV0dXJuXG4gICAgICB9XG5cbiAgICAgIHBsb3RSZWYuY3VycmVudC5pbm5lckhUTUwgPSAnJ1xuXG4gICAgICBjb25zdCBoYXNTZXJpZXMgPSBkYXRhLnNvbWUoZCA9PiBkW3Nlcmllc10gIT09IHVuZGVmaW5lZClcblxuICAgICAgY29uc3Qgc2VyaWVzSWR4ID0gaGFzU2VyaWVzXG4gICAgICAgID8gZGF0YS5yZWR1Y2UoXG4gICAgICAgICAgICAoYWNjLCBkLCBpKSA9PiAoKGFjY1tkW3Nlcmllc10gYXMgc3RyaW5nXSA/Pz0gaSksIGFjYyksXG4gICAgICAgICAgICB7fSBhcyBSZWNvcmQ8c3RyaW5nLCBudW1iZXI+XG4gICAgICAgICAgKVxuICAgICAgICA6IHt9XG5cbiAgICAgIGNvbnN0IG4gPSBPYmplY3Qua2V5cyhzZXJpZXNJZHgpLmxlbmd0aFxuXG4gICAgICBjb25zdCBvcGFjaXR5ID0gKGQ6IFQpID0+IHtcbiAgICAgICAgaWYgKCFoYXNTZXJpZXMpIHtcbiAgICAgICAgICByZXR1cm4gMVxuICAgICAgICB9XG5cbiAgICAgICAgaWYgKGhvdmVyZWQpIHtcbiAgICAgICAgICByZXR1cm4gZFtzZXJpZXNdID09PSBob3ZlcmVkW3Nlcmllc10gPyAxIDogMC4yXG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gMSAtIChzZXJpZXNJZHhbZFtzZXJpZXNdIGFzIHN0cmluZ10gLyBNYXRoLm1heChuIC0gMSwgMSkpICogMC4yXG4gICAgICB9XG5cbiAgICAgIGNvbnN0IGxpbmVPcHRzID0ge1xuICAgICAgICBjdXJ2ZSxcbiAgICAgICAgeDogZ2V0WCBhcyAoZDogVCkgPT4gdW5rbm93bixcbiAgICAgICAgeTogZ2V0WSxcbiAgICAgICAgLi4uKGhhc1NlcmllcyAmJiB7IHo6IGdldFogYXMgKGQ6IFQpID0+IHVua25vd24gfSlcbiAgICAgIH1cblxuICAgICAgY29uc3QgcGxvdCA9IFBsb3QucGxvdCh7XG4gICAgICAgIC4uLkNIQVJUX01BUkdJTlMsXG4gICAgICAgIGhlaWdodDogZGltcy5oLFxuICAgICAgICBtYXJrczogW1xuICAgICAgICAgIC4uLihzaG93QXJlYVxuICAgICAgICAgICAgPyBbXG4gICAgICAgICAgICAgICAgUGxvdC5hcmVhWShkYXRhLCB7XG4gICAgICAgICAgICAgICAgICAuLi5saW5lT3B0cyxcbiAgICAgICAgICAgICAgICAgIGZpbGw6IHN0cm9rZUNvbG9yLFxuICAgICAgICAgICAgICAgICAgZmlsbE9wYWNpdHk6IDAuMTUsXG4gICAgICAgICAgICAgICAgICB5MTogeURvbWFpblswXVxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgIF1cbiAgICAgICAgICAgIDogW10pLFxuICAgICAgICAgIFBsb3QubGluZVkoZGF0YSwge1xuICAgICAgICAgICAgLi4ubGluZU9wdHMsXG4gICAgICAgICAgICBzdHJva2U6ICd0cmFuc3BhcmVudCcsXG4gICAgICAgICAgICBzdHJva2VXaWR0aDogMTZcbiAgICAgICAgICB9KSxcbiAgICAgICAgICBQbG90LmxpbmVZKGRhdGEsIHtcbiAgICAgICAgICAgIC4uLmxpbmVPcHRzLFxuICAgICAgICAgICAgc3Ryb2tlOiBzdHJva2VDb2xvcixcbiAgICAgICAgICAgIHN0cm9rZU9wYWNpdHk6IG9wYWNpdHksXG4gICAgICAgICAgICBzdHJva2VXaWR0aDogMS41XG4gICAgICAgICAgfSlcbiAgICAgICAgXSxcbiAgICAgICAgc3R5bGU6IHsgLi4uQ0hBUlRfU1RZTEUsIGZvbnRTdHJldGNoOiAnZXhwYW5kZWQnIH0sXG4gICAgICAgIHdpZHRoOiBkaW1zLncsXG4gICAgICAgIHg6IHsgbGFiZWw6IG51bGwsIHRpY2tGb3JtYXQ6IGZvcm1hdFgsIHRpY2tzOiB4VGlja3MgfSxcbiAgICAgICAgeToge1xuICAgICAgICAgIGRvbWFpbjogeURvbWFpbixcbiAgICAgICAgICBncmlkOiB0cnVlLFxuICAgICAgICAgIGxhYmVsOiBudWxsLFxuICAgICAgICAgIHRpY2tGb3JtYXQ6IGZvcm1hdFksXG4gICAgICAgICAgdGlja3M6IHlUaWNrc1xuICAgICAgICB9XG4gICAgICB9KVxuXG4gICAgICBwbG90LmFkZEV2ZW50TGlzdGVuZXIoJ2lucHV0JywgKCkgPT4gc2V0SG92ZXJlZChwbG90LnZhbHVlIGFzIG51bGwgfCBUKSlcbiAgICAgIHN0eWxlUGxvdChwbG90IGFzIEhUTUxFbGVtZW50KVxuXG4gICAgICBwbG90LnF1ZXJ5U2VsZWN0b3JBbGwoJ2dbYXJpYS1sYWJlbD1cImxpbmVcIl0gcGF0aCcpLmZvckVhY2goZWwgPT5cbiAgICAgICAgT2JqZWN0LmFzc2lnbigoZWwgYXMgU1ZHUGF0aEVsZW1lbnQpLnN0eWxlLCB7XG4gICAgICAgICAgdHJhbnNpdGlvbjogJ3N0cm9rZS1vcGFjaXR5IDAuMnMnXG4gICAgICAgIH0pXG4gICAgICApXG5cbiAgICAgIHBsb3RSZWYuY3VycmVudC5hcHBlbmRDaGlsZChwbG90KVxuXG4gICAgICBjb25zdCBjbGVhbnVwID0gc2V0dXBDcm9zc2hhaXIoXG4gICAgICAgIHJlZi5jdXJyZW50LFxuICAgICAgICBkYXRhLFxuICAgICAgICBkID0+IGdldFgoZCkgYXMgbnVtYmVyLFxuICAgICAgICBnZXRZLFxuICAgICAgICB5RG9tYWluLFxuICAgICAgICBkID0+IGZvcm1hdFRvb2x0aXA/LihkKSA/PyBgJHtmb3JtYXRYKGdldFgoZCkpfTogJHtmb3JtYXRZKGdldFkoZCkpfWAsXG4gICAgICAgIHNldENyb3NzaGFpcixcbiAgICAgICAgaGFzU2VyaWVzID8gZCA9PiBnZXRaKGQpIDogdW5kZWZpbmVkXG4gICAgICApXG5cbiAgICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAgIGNsZWFudXAoKVxuICAgICAgICBwbG90LnBhcmVudE5vZGUgJiYgcGxvdC5yZW1vdmUoKVxuICAgICAgfVxuICAgIH0sIFtcbiAgICAgIGN1cnZlLFxuICAgICAgZGF0YSxcbiAgICAgIGRpbXMuaCxcbiAgICAgIGRpbXMudyxcbiAgICAgIGZvcm1hdFRvb2x0aXAsXG4gICAgICBmb3JtYXRYLFxuICAgICAgZm9ybWF0WSxcbiAgICAgIGdldFgsXG4gICAgICBnZXRZLFxuICAgICAgZ2V0WixcbiAgICAgIGhvdmVyZWQsXG4gICAgICBzZXJpZXMsXG4gICAgICBzaG93QXJlYSxcbiAgICAgIHN0cm9rZUNvbG9yLFxuICAgICAgeFRpY2tzLFxuICAgICAgeURvbWFpbixcbiAgICAgIHlUaWNrc1xuICAgIF0pXG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e2NuKCdyZWxhdGl2ZSBhc3BlY3QtNC8xIHctZnVsbCBvdmVyZmxvdy1jbGlwJywgY2xhc3NOYW1lKX1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhYnNvbHV0ZSBpbnNldC0wXCIgcmVmPXtwbG90UmVmfSAvPlxuXG4gICAgICAgIDxDcm9zc2hhaXJcbiAgICAgICAgICBjb2xvcj17c3Ryb2tlQ29sb3J9XG4gICAgICAgICAgY29udGFpbmVyV2lkdGg9e2RpbXMud31cbiAgICAgICAgICBoZWlnaHQ9e2RpbXMuaH1cbiAgICAgICAgICB7Li4uY3Jvc3NoYWlyfVxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9XG4pXG5cbmludGVyZmFjZSBMaW5lQ2hhcnRQcm9wczxUIGV4dGVuZHMgRGF0YVBvaW50PiBleHRlbmRzIENoYXJ0UHJvcHM8VD4ge1xuICBjdXJ2ZT86ICdiYXNpcycgfCAnY2F0bXVsbC1yb20nIHwgJ2xpbmVhcicgfCAnbmF0dXJhbCcgfCAnc3RlcCdcbiAgc2VyaWVzPzoga2V5b2YgVFxuICBzaG93QXJlYT86IGJvb2xlYW5cbn1cbiJdLAogICJtYXBwaW5ncyI6ICI7QUE4TE0sU0FL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

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

@@ -0,0 +1,52 @@
+import { type ComponentType, type HTMLAttributes, type RefObject } from 'react';
+import { type BlendColors, type BlendModeProps } from '../blend-mode';
+export declare const accessor: <T, R>(key: ((d: T) => R) | keyof T) => (d: T) => R;
+export declare const CHART_MARGINS: {
+    readonly marginBottom: 24;
+    readonly marginLeft: 36;
+    readonly marginRight: 12;
+    readonly marginTop: 8;
+};
+export declare const CHART_STYLE: {
+    readonly background: "transparent";
+    readonly color: "var(--midground)";
+    readonly fontFamily: "var(--font-mono), monospace";
+    readonly fontSize: "11px";
+    readonly overflow: "hidden";
+};
+export declare const stylePlot: (plot: HTMLElement) => void;
+export declare const useDims: (ref: RefObject<HTMLElement | null>) => {
+    h: number;
+    w: number;
+};
+export declare const Crosshair: ({ color, containerWidth, height, points, x }: CrosshairState & {
+    color?: string;
+    containerWidth: number;
+    height: number;
+}) => import("react").JSX.Element | null;
+export declare const setupCrosshair: <T extends DataPoint>(container: HTMLElement, data: T[], getX: (d: T) => number, getY: (d: T) => number, yDomain: [number, number], formatTooltip: (d: T) => string, onUpdate: (state: CrosshairState) => void, getZ?: (d: T) => unknown) => () => void;
+export declare const withChartBlend: <P extends BlendModeProps>(Component: ComponentType<P>) => {
+    (props: Omit<P, keyof BlendColors>): import("react").JSX.Element;
+    displayName: string;
+};
+export type DataPoint = Record<string, unknown>;
+export interface CrosshairPoint {
+    dotY: number;
+    tooltip: string;
+}
+export interface CrosshairState {
+    points?: CrosshairPoint[];
+    x: null | number;
+}
+export interface ChartProps<T = DataPoint> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    data?: T[];
+    formatTooltip?: (d: T) => string;
+    formatX?: (v: unknown) => string;
+    formatY?: (v: number) => string;
+    height?: number;
+    x?: ((d: T) => unknown) | keyof T;
+    xTicks?: number | number[];
+    y?: ((d: T) => number) | keyof T;
+    yDomain?: [number, number];
+    yTicks?: number | number[];
+}