@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/map-timeline/map-timeline.js

@@ -0,0 +1,506 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const PALETTE = {
+  amber: {
+    dot: "fill-amber-500",
+    fill: "rgba(245, 158, 11, 0.25)",
+    stroke: "#b45309"
+  },
+  blue: {
+    dot: "fill-blue-500",
+    fill: "rgba(59, 130, 246, 0.25)",
+    stroke: "#1d4ed8"
+  },
+  emerald: {
+    dot: "fill-emerald-500",
+    fill: "rgba(16, 185, 129, 0.25)",
+    stroke: "#047857"
+  },
+  purple: {
+    dot: "fill-purple-500",
+    fill: "rgba(168, 85, 247, 0.25)",
+    stroke: "#7c3aed"
+  },
+  red: {
+    dot: "fill-red-500",
+    fill: "rgba(239, 68, 68, 0.25)",
+    stroke: "#b91c1c"
+  },
+  rose: {
+    dot: "fill-rose-500",
+    fill: "rgba(244, 63, 94, 0.25)",
+    stroke: "#be123c"
+  }
+};
+const DEFAULT_LABELS = {
+  pause: "Pause",
+  play: "Play",
+  region: "Map timeline",
+  slider: "Year"
+};
+const TimelineContext = createContext(null);
+function useTimelineContext() {
+  const ctx = useContext(TimelineContext);
+  if (!ctx) {
+    throw new Error("MapTimeline subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function projectEquirectangular(position) {
+  const [lng, lat] = position;
+  return {
+    x: (lng + 180) / 360 * VIEWBOX_WIDTH,
+    y: (90 - lat) / 180 * VIEWBOX_HEIGHT
+  };
+}
+function formatYear(year) {
+  if (year < 0) return `${Math.abs(year).toString()} BCE`;
+  return `${year.toString()} CE`;
+}
+function ringToPath(ring) {
+  return ring.map((position, index) => {
+    const projected = projectEquirectangular(position);
+    return `${index === 0 ? "M" : "L"}${projected.x.toString()},${projected.y.toString()}`;
+  }).join(" ");
+}
+function geometryRings(geometry) {
+  if (geometry.type === "polygon") return [geometry.polygon];
+  return geometry.polygons;
+}
+function ringCentroid(ring) {
+  if (ring.length === 0) return { x: 0, y: 0 };
+  const total = ring.reduce(
+    (accumulator, position) => {
+      const projected = projectEquirectangular(position);
+      return { x: accumulator.x + projected.x, y: accumulator.y + projected.y };
+    },
+    { x: 0, y: 0 }
+  );
+  return { x: total.x / ring.length, y: total.y / ring.length };
+}
+const MapTimelineLayer = forwardRef(
+  (props, ref) => {
+    const {
+      color = "blue",
+      endYear,
+      geometry,
+      id,
+      label,
+      startYear,
+      ...rest
+    } = props;
+    const { year } = useTimelineContext();
+    if (year < startYear || year > endYear) return null;
+    const palette = PALETTE[color];
+    const rings = geometryRings(geometry);
+    const centroid = rings[0] ? ringCentroid(rings[0]) : { x: 0, y: 0 };
+    return /* @__PURE__ */ jsxs("g", { "data-layer-id": id, "data-state": "visible", ref, ...rest, children: [
+      rings.map((ring, index) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `${ringToPath(ring)} Z`,
+          fill: palette.fill,
+          stroke: palette.stroke,
+          strokeWidth: 1.5
+        },
+        `${id ?? "layer"}-ring-${index.toString()}`
+      )),
+      label ? /* @__PURE__ */ jsx(
+        "text",
+        {
+          className: "select-none fill-foreground text-[11px] font-semibold",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          x: centroid.x,
+          y: centroid.y,
+          children: label
+        }
+      ) : null
+    ] });
+  }
+);
+MapTimelineLayer.displayName = "MapTimelineLayer";
+const MapTimelineEvent = forwardRef(
+  (props, ref) => {
+    const {
+      color = "red",
+      description,
+      id,
+      position,
+      title,
+      toleranceYears = 0,
+      year: eventYear,
+      ...rest
+    } = props;
+    const { year } = useTimelineContext();
+    const visible = Math.abs(year - eventYear) <= toleranceYears;
+    if (!visible) return null;
+    const palette = PALETTE[color];
+    const projected = projectEquirectangular(position);
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        "data-event-id": id,
+        "data-event-year": eventYear,
+        ref,
+        transform: `translate(${projected.x.toString()}, ${projected.y.toString()})`,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("stroke-background", palette.dot),
+              r: "6",
+              strokeWidth: "2",
+              children: title ? /* @__PURE__ */ jsx("title", { children: title }) : null
+            }
+          ),
+          title ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "select-none fill-foreground text-[10px] font-semibold",
+              dominantBaseline: "middle",
+              textAnchor: "middle",
+              y: "-12",
+              children: title
+            }
+          ) : null,
+          description ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "select-none fill-muted-foreground text-[9px]",
+              dominantBaseline: "middle",
+              textAnchor: "middle",
+              y: "20",
+              children: description
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+MapTimelineEvent.displayName = "MapTimelineEvent";
+const MapTimelineControls = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-3 border-t border-border bg-muted/40 px-4 py-2",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
+));
+MapTimelineControls.displayName = "MapTimelineControls";
+const MapTimelineSlider = forwardRef(({ className, ...rest }, ref) => {
+  const { endYear, labels, setYear, startYear, year } = useTimelineContext();
+  const sliderId = useId();
+  const handleYearChange = (event) => {
+    setYear(Number.parseInt(event.target.value, 10));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 text-xs font-medium text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: formatYear(startYear) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-label": labels.slider,
+        "aria-valuemax": endYear,
+        "aria-valuemin": startYear,
+        "aria-valuenow": year,
+        className: cn("flex-1 accent-primary", className),
+        id: sliderId,
+        max: endYear,
+        min: startYear,
+        onChange: handleYearChange,
+        ref,
+        type: "range",
+        value: year,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: formatYear(endYear) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ml-2 inline-flex min-w-20 justify-center rounded-md border border-border bg-background px-2 py-0.5 text-foreground",
+        "data-current-year": year,
+        children: formatYear(year)
+      }
+    )
+  ] });
+});
+MapTimelineSlider.displayName = "MapTimelineSlider";
+const MapTimelinePlayButton = forwardRef(({ className, ...rest }, ref) => {
+  const { isPlaying, labels, setIsPlaying } = useTimelineContext();
+  const handleTogglePlayback = () => {
+    setIsPlaying(!isPlaying);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": isPlaying ? labels.pause : labels.play,
+      "aria-pressed": isPlaying,
+      className: cn(
+        "inline-flex h-8 items-center rounded-md border border-border bg-background px-3 text-xs font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      "data-playing": isPlaying ? "true" : void 0,
+      onClick: handleTogglePlayback,
+      ref,
+      type: "button",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: isPlaying ? "\u275A\u275A" : "\u25B6" })
+    }
+  );
+});
+MapTimelinePlayButton.displayName = "MapTimelinePlayButton";
+function useTimelineCtx(arguments_) {
+  const {
+    endYear,
+    isPlaying,
+    labels,
+    setIsPlaying,
+    setYear,
+    speed,
+    startYear,
+    year
+  } = arguments_;
+  return useMemo(
+    () => ({
+      endYear,
+      isPlaying,
+      labels,
+      setIsPlaying,
+      setYear,
+      speed,
+      startYear,
+      year
+    }),
+    [endYear, isPlaying, labels, setIsPlaying, setYear, speed, startYear, year]
+  );
+}
+function useTimelineState(arguments_) {
+  const { endYear, initialYear, onYearChange, startYear } = arguments_;
+  const [year, setYear] = useState(
+    () => clamp(initialYear ?? startYear, startYear, endYear)
+  );
+  const [isPlaying, setIsPlaying] = useState(false);
+  const updateYear = useCallback(
+    (next) => {
+      const clamped = clamp(next, startYear, endYear);
+      setYear((current) => {
+        if (clamped >= endYear) setIsPlaying(false);
+        if (current === clamped) return current;
+        onYearChange?.(clamped);
+        return clamped;
+      });
+    },
+    [endYear, onYearChange, startYear]
+  );
+  return { isPlaying, setIsPlaying, setYear: updateYear, year };
+}
+function usePlayback(arguments_) {
+  const { endYear, isPlaying, setIsPlaying, setYear, speed, year } = arguments_;
+  const yearRef = useRef(year);
+  useEffect(() => {
+    yearRef.current = year;
+  }, [year]);
+  useEffect(() => {
+    if (!isPlaying) return;
+    if (typeof window === "undefined") return;
+    let frame = 0;
+    let last = null;
+    const step = (timestamp) => {
+      if (last !== null) {
+        const delta = (timestamp - last) / 1e3;
+        const next = yearRef.current + delta * speed;
+        if (next >= endYear) {
+          setYear(endYear);
+          setIsPlaying(false);
+          return;
+        }
+        setYear(next);
+      }
+      last = timestamp;
+      frame = window.requestAnimationFrame(step);
+    };
+    frame = window.requestAnimationFrame(step);
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [endYear, isPlaying, setIsPlaying, setYear, speed]);
+}
+function Stage({ backdrop, backdropAlt, children }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "block h-full w-full",
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: `0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: "fill-muted",
+            height: VIEWBOX_HEIGHT,
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ),
+        backdrop ? /* @__PURE__ */ jsx(
+          "image",
+          {
+            "aria-label": backdropAlt,
+            height: VIEWBOX_HEIGHT,
+            href: backdrop,
+            preserveAspectRatio: "xMidYMid slice",
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+function bucketChildren(children) {
+  const list = Array.isArray(children) ? children : [children];
+  return list.reduce(
+    (accumulator, child) => {
+      const name = displayName(child);
+      if (name === MapTimelineControls.displayName)
+        accumulator.footer.push(child);
+      else accumulator.stage.push(child);
+      return accumulator;
+    },
+    { footer: [], stage: [] }
+  );
+}
+function displayName(child) {
+  if (typeof child !== "object" || child === null) return void 0;
+  if (!("type" in child)) return void 0;
+  const type = child.type;
+  if (typeof type !== "object" && typeof type !== "function") return void 0;
+  const name = type.displayName;
+  return typeof name === "string" ? name : void 0;
+}
+const Shell = forwardRef(function Shell2(props, ref) {
+  const { backdrop, backdropAlt, buckets, className, region, titleId, year } = props;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: titleId, children: region }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative aspect-[2/1] w-full overflow-hidden",
+            "data-current-year": year,
+            children: /* @__PURE__ */ jsx(Stage, { backdrop, backdropAlt, children: buckets.stage })
+          }
+        ),
+        buckets.footer
+      ]
+    }
+  );
+});
+const MapTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      backdrop,
+      backdropAlt,
+      children,
+      className,
+      endYear,
+      initialYear,
+      labels,
+      onYearChange,
+      speed = 25,
+      startYear,
+      ...rest
+    } = props;
+    const titleId = useId();
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const { isPlaying, setIsPlaying, setYear, year } = useTimelineState({
+      endYear,
+      initialYear,
+      onYearChange,
+      speed,
+      startYear
+    });
+    usePlayback({
+      endYear,
+      isPlaying,
+      setIsPlaying,
+      setYear,
+      speed,
+      startYear,
+      year
+    });
+    const ctx = useTimelineCtx({
+      endYear,
+      isPlaying,
+      labels: resolvedLabels,
+      setIsPlaying,
+      setYear,
+      speed,
+      startYear,
+      year
+    });
+    const buckets = bucketChildren(children);
+    return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      Shell,
+      {
+        backdrop,
+        backdropAlt,
+        buckets,
+        className,
+        ref,
+        region: resolvedLabels.region,
+        titleId,
+        year,
+        ...rest
+      }
+    ) });
+  }
+);
+MapTimeline.displayName = "MapTimeline";
+export {
+  MapTimeline,
+  MapTimelineControls,
+  MapTimelineEvent,
+  MapTimelineLayer,
+  MapTimelinePlayButton,
+  MapTimelineSlider
+};

package/dist/components/market-treemap/market-treemap.js

@@ -48,7 +48,7 @@ function MarketTreemapTile({
                 tone.trendClassName
               ),
               children: [
-                /* @__PURE__ */ jsx(TrendIcon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx(TrendIcon, { className: "size-4" }),
                 item.change > 0 ? "+" : "",
                 item.change.toFixed(2),
                 "%"
@@ -67,7 +67,7 @@ function MarketTreemapTile({
     }
   );
 }
-const MarketTreemap = React.forwardRef(({ className, items, ...props }, reference) => {
+const MarketTreemap = React.forwardRef(({ as: Heading = "h2", className, items, ...props }, reference) => {
   if (items.length === 0) {
     return null;
   }
@@ -85,7 +85,7 @@ const MarketTreemap = React.forwardRef(({ className, items, ...props }, referenc
         /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: "Sector heatmap" }),
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Market treemap" })
+            /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Market treemap" })
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Tile size maps market cap proxy; color reflects session change." })
         ] }),

package/dist/components/mdx-content/mdx-content.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { evaluate } from "@mdx-js/mdx";
 import * as runtime from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { CodeBlock } from "../code-block/code-block";
+import { StaticCode } from "../static-code/static-code";
 const MDXComponents = {
   a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(
     "a",
@@ -16,7 +18,7 @@ const MDXComponents = {
   blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "blockquote",
     {
-      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      className: "border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
       ...props,
       children
     }
@@ -25,7 +27,7 @@ const MDXComponents = {
     if (typeof className === "string" && className.startsWith("language-")) {
       const language = className.replace(/^language-/, "");
       const text = typeof children === "string" ? children.replace(/\n$/, "") : String(children ?? "");
-      return /* @__PURE__ */ jsx(CodeBlock, { language, children: text });
+      return /* @__PURE__ */ jsx(StaticCode, { code: text, language });
     }
     return /* @__PURE__ */ jsx(
       "code",
@@ -37,9 +39,9 @@ const MDXComponents = {
     );
   },
   em: ({ children, ...props }) => /* @__PURE__ */ jsx("em", { className: "italic", ...props, children }),
-  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
-  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
-  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mt-4 mb-2", ...props, children }),
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold mt-8 mb-4", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mt-6 mb-3", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mt-4 mb-2", ...props, children }),
   hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
   li: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "li",
@@ -89,14 +91,15 @@ const proseClasses = [
   "prose-strong:font-semibold prose-em:italic",
   "prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80",
   "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono",
-  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
-  "prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
+  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
+  "prose-blockquote:border-l prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
   "prose-hr:my-8 prose-hr:border-border",
   "prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border",
   "prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium",
   "prose-td:border prose-td:border-border prose-td:p-2",
   "prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg"
 ].join(" ");
+const markdownPlugins = [remarkGfm];
 function removeImportStatements(content, componentNames) {
   let processed = content.replaceAll(/^import\s+.*CodeBlock.*from.*$/gm, "");
   componentNames.forEach((name) => {
@@ -114,8 +117,9 @@ function buildCustomComponents(injectedComponents) {
     ...injectedComponents
   };
 }
+const EMPTY_MDX_COMPONENTS = {};
 async function MDXContent({
-  components = {},
+  components = EMPTY_MDX_COMPONENTS,
   content,
   enableMDX = true
 }) {
@@ -142,9 +146,16 @@ async function MDXContent({
     if (Component) {
       return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(Component, { components: allComponents }) });
     }
-    return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, children: content }) });
+    return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        components: allComponents,
+        remarkPlugins: markdownPlugins,
+        children: content
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, children: content }) });
+  return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, remarkPlugins: markdownPlugins, children: content }) });
 }
 export {
   MDXContent

package/dist/components/menubar/menubar.js

@@ -45,7 +45,7 @@ const MenubarSubTrigger = forwardRef(({ children, className, inset, ...props },
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
     ]
   }
 ));
@@ -103,7 +103,7 @@ const MenubarCheckboxItem = forwardRef(({ checked, children, className, ...props
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
       children
     ]
   }
@@ -119,7 +119,7 @@ const MenubarRadioItem = forwardRef(({ children, className, ...props }, ref) =>
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" }) }) }),
       children
     ]
   }
@@ -141,7 +141,7 @@ MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 const MenubarSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-m-1 h-px bg-muted", className),
     ref,
     ...props
   }

package/dist/components/metric-cluster/index.js

@@ -0,0 +1,6 @@
+import {
+  MetricCluster
+} from "./metric-cluster";
+export {
+  MetricCluster
+};