@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -54,7 +53,7 @@ const DEFAULT_LABELS = {
 };
 const TimelineContext = createContext(null);
 function useTimelineContext() {
-  const ctx = useContext(TimelineContext);
+  const ctx = use(TimelineContext);
   if (!ctx) {
     throw new Error("MapTimeline subcomponent used outside its root.");
   }
@@ -95,110 +94,117 @@ function ringCentroid(ring) {
   );
   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",
+const MapTimelineLayer = ({
+  ref,
+  ...props
+}) => {
+  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",
       {
-        "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
-        ]
+        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 = ({
+  ref,
+  ...props
+}) => {
+  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(
+const MapTimelineControls = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -209,9 +215,13 @@ const MapTimelineControls = forwardRef(({ children, className, ...rest }, ref) =
     ...rest,
     children
   }
-));
+);
 MapTimelineControls.displayName = "MapTimelineControls";
-const MapTimelineSlider = forwardRef(({ className, ...rest }, ref) => {
+const MapTimelineSlider = ({
+  className,
+  ref,
+  ...rest
+}) => {
   const { endYear, labels, setYear, startYear, year } = useTimelineContext();
   const sliderId = useId();
   const handleYearChange = (event) => {
@@ -247,9 +257,13 @@ const MapTimelineSlider = forwardRef(({ className, ...rest }, ref) => {
       }
     )
   ] });
-});
+};
 MapTimelineSlider.displayName = "MapTimelineSlider";
-const MapTimelinePlayButton = forwardRef(({ className, ...rest }, ref) => {
+const MapTimelinePlayButton = ({
+  className,
+  ref,
+  ...rest
+}) => {
   const { isPlaying, labels, setIsPlaying } = useTimelineContext();
   const handleTogglePlayback = () => {
     setIsPlaying(!isPlaying);
@@ -271,7 +285,7 @@ const MapTimelinePlayButton = forwardRef(({ className, ...rest }, ref) => {
       children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: isPlaying ? "\u275A\u275A" : "\u25B6" })
     }
   );
-});
+};
 MapTimelinePlayButton.displayName = "MapTimelinePlayButton";
 function useTimelineCtx(arguments_) {
   const {
@@ -406,7 +420,10 @@ function displayName(child) {
   const name = type.displayName;
   return typeof name === "string" ? name : void 0;
 }
-const Shell = forwardRef(function Shell2(props, ref) {
+const Shell = function Shell2({
+  ref,
+  ...props
+}) {
   const { backdrop, backdropAlt, buckets, className, region, titleId, year } = props;
   return /* @__PURE__ */ jsxs(
     "section",
@@ -431,70 +448,71 @@ const Shell = forwardRef(function Shell2(props, ref) {
       ]
     }
   );
-});
-const MapTimeline = forwardRef(
-  (props, ref) => {
-    const {
+};
+const MapTimeline = ({
+  ref,
+  ...props
+}) => {
+  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,
-      children,
+      buckets,
       className,
-      endYear,
-      initialYear,
-      labels,
-      onYearChange,
-      speed = 25,
-      startYear,
+      ref,
+      region: resolvedLabels.region,
+      titleId,
+      year,
       ...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,

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { formatChange } from "../../lib/format";
 import { cn } from "../../lib/utils";
 function getSpan(value, maxValue) {
   const normalized = value / Math.max(maxValue, 1);
@@ -49,9 +49,7 @@ function MarketTreemapTile({
               ),
               children: [
                 /* @__PURE__ */ jsx(TrendIcon, { className: "size-4" }),
-                item.change > 0 ? "+" : "",
-                item.change.toFixed(2),
-                "%"
+                formatChange(item.change)
               ]
             }
           )
@@ -67,7 +65,13 @@ function MarketTreemapTile({
     }
   );
 }
-const MarketTreemap = React.forwardRef(({ as: Heading = "h2", className, items, ...props }, reference) => {
+const MarketTreemap = ({
+  as: Heading = "h2",
+  className,
+  items,
+  ref: reference,
+  ...props
+}) => {
   if (items.length === 0) {
     return null;
   }
@@ -93,7 +97,7 @@ const MarketTreemap = React.forwardRef(({ as: Heading = "h2", className, items,
       ]
     }
   );
-});
+};
 MarketTreemap.displayName = "MarketTreemap";
 export {
   MarketTreemap

package/dist/components/marquee/marquee.js

@@ -27,71 +27,70 @@ function getDuration(duration, speed) {
       return 32;
   }
 }
-const Marquee = React.forwardRef(
-  ({
-    children,
-    className,
-    duration,
-    fade = true,
-    gap = "1rem",
-    pauseOnHover = false,
-    repeat = 1,
-    reverse = false,
-    speed = "normal",
-    style,
-    vertical = false,
-    ...props
-  }, ref) => {
-    const resolvedGap = getGapValue(gap);
-    const resolvedDuration = getDuration(duration, speed);
-    const trackItems = getTrackItems(children, repeat);
-    const animationStyle = {
-      animationDirection: reverse ? "reverse" : "normal",
-      animationDuration: `${resolvedDuration}s`,
-      animationIterationCount: "infinite",
-      animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
-      animationTimingFunction: "linear"
-    };
-    const maskImage = getMaskImage(vertical);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "group relative overflow-hidden",
-          vertical ? "flex h-full flex-col" : "flex w-full flex-row",
-          className
-        ),
-        ref,
-        style: fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style,
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
-              pauseOnHover && "group-hover:[animation-play-state:paused]",
-              vertical ? "min-h-full flex-col" : "min-w-full flex-row"
-            ),
-            style: animationStyle,
-            children: [0, 1].map((groupIndex) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                "aria-hidden": groupIndex === 1,
-                className: cn(
-                  "flex shrink-0",
-                  vertical ? "flex-col items-stretch" : "flex-row items-center"
-                ),
-                style: { gap: resolvedGap },
-                children: trackItems
-              },
-              groupIndex
-            ))
-          }
-        )
-      }
-    );
-  }
-);
+const Marquee = ({
+  children,
+  className,
+  duration,
+  fade = true,
+  gap = "1rem",
+  pauseOnHover = false,
+  ref,
+  repeat = 1,
+  reverse = false,
+  speed = "normal",
+  style,
+  vertical = false,
+  ...props
+}) => {
+  const resolvedGap = getGapValue(gap);
+  const resolvedDuration = getDuration(duration, speed);
+  const trackItems = getTrackItems(children, repeat);
+  const animationStyle = {
+    animationDirection: reverse ? "reverse" : "normal",
+    animationDuration: `${resolvedDuration}s`,
+    animationIterationCount: "infinite",
+    animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
+    animationTimingFunction: "linear"
+  };
+  const maskImage = getMaskImage(vertical);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-hidden",
+        vertical ? "flex h-full flex-col" : "flex w-full flex-row",
+        className
+      ),
+      ref,
+      style: fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
+            pauseOnHover && "group-hover:[animation-play-state:paused]",
+            vertical ? "min-h-full flex-col" : "min-w-full flex-row"
+          ),
+          style: animationStyle,
+          children: [0, 1].map((groupIndex) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": groupIndex === 1,
+              className: cn(
+                "flex shrink-0",
+                vertical ? "flex-col items-stretch" : "flex-row items-center"
+              ),
+              style: { gap: resolvedGap },
+              children: trackItems
+            },
+            groupIndex
+          ))
+        }
+      )
+    }
+  );
+};
 Marquee.displayName = "Marquee";
 export {
   Marquee

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

@@ -5,6 +5,9 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { CodeBlock } from "../code-block/code-block";
 import { StaticCode } from "../static-code/static-code";
+function extractCodeText(node) {
+  return typeof node === "string" ? node.replace(/\n$/, "") : String(node ?? "");
+}
 const MDXComponents = {
   a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(
     "a",
@@ -26,7 +29,7 @@ const MDXComponents = {
   code: ({ children, className, ...props }) => {
     if (typeof className === "string" && className.startsWith("language-")) {
       const language = className.replace(/^language-/, "");
-      const text = typeof children === "string" ? children.replace(/\n$/, "") : String(children ?? "");
+      const text = extractCodeText(children);
       return /* @__PURE__ */ jsx(StaticCode, { code: text, language });
     }
     return /* @__PURE__ */ jsx(