@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/order-book/order-book.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 function withCumulativeTotal(levels) {
   let runningTotal = 0;
@@ -67,61 +66,67 @@ function BookSide({
     ] })
   ] });
 }
-const OrderBook = React.forwardRef(
-  ({ as: Heading = "h2", asks, bids, className, precision = 2, ...props }, reference) => {
-    if (asks.length === 0 && bids.length === 0) {
-      return null;
-    }
-    const askLevels = withCumulativeTotal(asks);
-    const bidLevels = withCumulativeTotal(bids);
-    const bestAsk = askLevels[0];
-    const bestBid = bidLevels[0];
-    const spread = bestAsk && bestBid ? Math.max(bestAsk.price - bestBid.price, 0) : 0;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start 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: "Level II" }),
-              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Order book" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums", children: [
-              "Spread ",
-              formatNumber(spread, precision)
-            ] })
+const OrderBook = ({
+  as: Heading = "h2",
+  asks,
+  bids,
+  className,
+  precision = 2,
+  ref: reference,
+  ...props
+}) => {
+  if (asks.length === 0 && bids.length === 0) {
+    return null;
+  }
+  const askLevels = withCumulativeTotal(asks);
+  const bidLevels = withCumulativeTotal(bids);
+  const bestAsk = askLevels[0];
+  const bestBid = bidLevels[0];
+  const spread = bestAsk && bestBid ? Math.max(bestAsk.price - bestBid.price, 0) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start 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: "Level II" }),
+            /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Order book" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
-            /* @__PURE__ */ jsx(
-              BookSide,
-              {
-                accent: "ask",
-                levels: askLevels,
-                precision,
-                title: "Asks"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              BookSide,
-              {
-                accent: "bid",
-                levels: bidLevels,
-                precision,
-                title: "Bids"
-              }
-            )
+          /* @__PURE__ */ jsxs("div", { className: "rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums", children: [
+            "Spread ",
+            formatNumber(spread, precision)
           ] })
-        ]
-      }
-    );
-  }
-);
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            BookSide,
+            {
+              accent: "ask",
+              levels: askLevels,
+              precision,
+              title: "Asks"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BookSide,
+            {
+              accent: "bid",
+              levels: bidLevels,
+              precision,
+              title: "Bids"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 OrderBook.displayName = "OrderBook";
 export {
   OrderBook

package/dist/components/overview-board/overview-board.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { AlertCircle, ArrowRight, Inbox, ListTodo, Siren } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
@@ -13,61 +12,60 @@ const toneAccentClassNames = {
   default: "text-primary",
   warning: "text-amber-600 dark:text-amber-300"
 };
-const OverviewCard = forwardRef(
-  ({
-    className,
-    ctaLabel,
-    description,
-    handleCtaClick,
-    heading,
-    icon,
-    metric,
-    tone = "default",
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: cn(
-        "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
-        toneClassNames[tone],
-        className
-      ),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: heading }),
-            /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight text-foreground", children: metric })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "flex size-10 items-center justify-center rounded-xl bg-background/80",
-                toneAccentClassNames[tone]
-              ),
-              children: icon
-            }
-          )
+const OverviewCard = ({
+  className,
+  ctaLabel,
+  description,
+  handleCtaClick,
+  heading,
+  icon,
+  metric,
+  ref,
+  tone = "default",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "section",
+  {
+    className: cn(
+      "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
+      toneClassNames[tone],
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: heading }),
+          /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight text-foreground", children: metric })
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: description }),
-        ctaLabel ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-          Button,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: handleCtaClick,
-            size: "sm",
-            type: "button",
-            variant: "ghost",
-            children: [
-              ctaLabel,
-              /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
-            ]
+            className: cn(
+              "flex size-10 items-center justify-center rounded-xl bg-background/80",
+              toneAccentClassNames[tone]
+            ),
+            children: icon
           }
-        ) }) : null
-      ]
-    }
-  )
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: description }),
+      ctaLabel ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: handleCtaClick,
+          size: "sm",
+          type: "button",
+          variant: "ghost",
+          children: [
+            ctaLabel,
+            /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+          ]
+        }
+      ) }) : null
+    ]
+  }
 );
 OverviewCard.displayName = "OverviewCard";
 function getDefaultIcon(heading) {
@@ -85,40 +83,46 @@ function getDefaultIcon(heading) {
   }
   return /* @__PURE__ */ jsx(Inbox, { className: "size-5" });
 }
-const OverviewBoard = forwardRef(
-  ({ className, eyebrow, heading, items, subtitle, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: cn("mx-auto flex w-full max-w-6xl flex-col gap-6", className),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.28em] text-muted-foreground", children: eyebrow }) : null,
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-foreground", children: heading }),
-            subtitle ? /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-6 text-muted-foreground", children: subtitle }) : null
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: items.map((item) => {
-          const handleCtaClick = item.handleCtaClick;
-          return /* @__PURE__ */ jsx(
-            OverviewCard,
-            {
-              ctaLabel: item.ctaLabel,
-              description: item.description,
-              handleCtaClick,
-              heading: item.heading,
-              icon: item.icon ?? getDefaultIcon(item.heading),
-              metric: item.metric,
-              tone: item.tone
-            },
-            item.id
-          );
-        }) })
-      ]
-    }
-  )
+const OverviewBoard = ({
+  className,
+  eyebrow,
+  heading,
+  items,
+  ref,
+  subtitle,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "section",
+  {
+    className: cn("mx-auto flex w-full max-w-6xl flex-col gap-6", className),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.28em] text-muted-foreground", children: eyebrow }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-foreground", children: heading }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-6 text-muted-foreground", children: subtitle }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: items.map((item) => {
+        const handleCtaClick = item.handleCtaClick;
+        return /* @__PURE__ */ jsx(
+          OverviewCard,
+          {
+            ctaLabel: item.ctaLabel,
+            description: item.description,
+            handleCtaClick,
+            heading: item.heading,
+            icon: item.icon ?? getDefaultIcon(item.heading),
+            metric: item.metric,
+            tone: item.tone
+          },
+          item.id
+        );
+      }) })
+    ]
+  }
 );
 OverviewBoard.displayName = "OverviewBoard";
 export {

package/dist/components/panel/index.js

@@ -0,0 +1,16 @@
+import {
+  Panel,
+  PanelBody,
+  PanelDescription,
+  PanelFooter,
+  PanelHeader,
+  PanelTitle
+} from "./panel";
+export {
+  Panel,
+  PanelBody,
+  PanelDescription,
+  PanelFooter,
+  PanelHeader,
+  PanelTitle
+};

package/dist/components/panel/panel.js

@@ -0,0 +1,95 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const Panel = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ref,
+    ...props
+  }
+);
+Panel.displayName = "Panel";
+const PanelHeader = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col gap-1.5 border-b border-border px-4 py-3",
+      className
+    ),
+    ref,
+    ...props
+  }
+);
+PanelHeader.displayName = "PanelHeader";
+const PanelTitle = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    className: cn(
+      "text-sm font-semibold leading-none tracking-tight",
+      className
+    ),
+    ref,
+    ...props,
+    children
+  }
+);
+PanelTitle.displayName = "PanelTitle";
+const PanelDescription = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+);
+PanelDescription.displayName = "PanelDescription";
+const PanelBody = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3", className), ref, ...props });
+PanelBody.displayName = "PanelBody";
+const PanelFooter = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center border-t border-border px-4 py-3",
+      className
+    ),
+    ref,
+    ...props
+  }
+);
+PanelFooter.displayName = "PanelFooter";
+export {
+  Panel,
+  PanelBody,
+  PanelDescription,
+  PanelFooter,
+  PanelHeader,
+  PanelTitle
+};

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

@@ -1,9 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useMemo
-} from "react";
+import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_TICK_COUNT = 8;
 const COLOR_CLASSES = {
@@ -193,58 +190,59 @@ function TrackRow({ endYear, startYear, track }) {
     )
   ] });
 }
-const ParallelTimeline = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      endYear,
-      eras = [],
-      labels,
-      startYear,
-      tickCount = DEFAULT_TICK_COUNT,
-      tracks,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const ticks = useMemo(
-      () => buildTicks(startYear, endYear, tickCount),
-      [endYear, startYear, tickCount]
-    );
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
-          className
-        ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-3 border-b border-border", children: [
-            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "w-32 shrink-0" }),
-            /* @__PURE__ */ jsx(Axis, { ticks })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
-            tracks.map((track) => /* @__PURE__ */ jsx(
-              TrackRow,
-              {
-                endYear,
-                startYear,
-                track
-              },
-              track.id
-            ))
-          ] })
-        ]
-      }
-    );
-  }
-);
+const ParallelTimeline = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    endYear,
+    eras = [],
+    labels,
+    startYear,
+    tickCount = DEFAULT_TICK_COUNT,
+    tracks,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const ticks = useMemo(
+    () => buildTicks(startYear, endYear, tickCount),
+    [endYear, startYear, tickCount]
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-3 border-b border-border", children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "w-32 shrink-0" }),
+          /* @__PURE__ */ jsx(Axis, { ticks })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
+          tracks.map((track) => /* @__PURE__ */ jsx(
+            TrackRow,
+            {
+              endYear,
+              startYear,
+              track
+            },
+            track.id
+          ))
+        ] })
+      ]
+    }
+  );
+};
 ParallelTimeline.displayName = "ParallelTimeline";
 export {
   ParallelTimeline

package/dist/components/particles/index.js

@@ -0,0 +1,4 @@
+import { Particles } from "./particles";
+export {
+  Particles
+};

package/dist/components/particles/particles.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function createParticles(count) {
+  return Array.from({ length: count }, () => ({
+    delay: Math.random() * 4,
+    duration: 4 + Math.random() * 6,
+    left: Math.random() * 100,
+    size: 2 + Math.random() * 3,
+    top: Math.random() * 100
+  }));
+}
+const Particles = ({
+  className,
+  count = 30,
+  ref,
+  ...props
+}) => {
+  const [particles] = React.useState(() => createParticles(count));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none absolute inset-0 overflow-hidden",
+        className
+      ),
+      ref,
+      ...props,
+      children: particles.map((particle, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute rounded-full bg-foreground/30 motion-reduce:animate-none",
+          style: {
+            animation: `vllnt-particle-float ${particle.duration}s linear infinite`,
+            animationDelay: `${particle.delay}s`,
+            height: `${particle.size}px`,
+            left: `${particle.left}%`,
+            top: `${particle.top}%`,
+            width: `${particle.size}px`
+          }
+        },
+        index
+      ))
+    }
+  );
+};
+Particles.displayName = "Particles";
+export {
+  Particles
+};