@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/typography/typography.js

@@ -0,0 +1,173 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const typographyVariants = cva("", {
+  defaultVariants: {
+    variant: "p"
+  },
+  variants: {
+    variant: {
+      blockquote: "mt-6 border-l-2 border-border pl-6 italic text-foreground",
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight text-balance lg:text-5xl",
+      h2: "scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      inlineCode: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground",
+      lead: "text-xl text-muted-foreground",
+      list: "my-6 ml-6 list-disc [&>li]:mt-2",
+      muted: "text-sm text-muted-foreground",
+      p: "leading-7 [&:not(:first-child)]:mt-6"
+    }
+  }
+});
+const H1 = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h1",
+  {
+    className: cn(typographyVariants({ variant: "h1" }), className),
+    ref,
+    ...props,
+    children
+  }
+);
+H1.displayName = "H1";
+const H2 = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    className: cn(typographyVariants({ variant: "h2" }), className),
+    ref,
+    ...props,
+    children
+  }
+);
+H2.displayName = "H2";
+const H3 = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    className: cn(typographyVariants({ variant: "h3" }), className),
+    ref,
+    ...props,
+    children
+  }
+);
+H3.displayName = "H3";
+const H4 = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h4",
+  {
+    className: cn(typographyVariants({ variant: "h4" }), className),
+    ref,
+    ...props,
+    children
+  }
+);
+H4.displayName = "H4";
+const P = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn(typographyVariants({ variant: "p" }), className),
+    ref,
+    ...props
+  }
+);
+P.displayName = "P";
+const Lead = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn(typographyVariants({ variant: "lead" }), className),
+    ref,
+    ...props
+  }
+);
+Lead.displayName = "Lead";
+const Muted = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn(typographyVariants({ variant: "muted" }), className),
+    ref,
+    ...props
+  }
+);
+Muted.displayName = "Muted";
+const Blockquote = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "blockquote",
+  {
+    className: cn(typographyVariants({ variant: "blockquote" }), className),
+    ref,
+    ...props
+  }
+);
+Blockquote.displayName = "Blockquote";
+const InlineCode = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "code",
+  {
+    className: cn(typographyVariants({ variant: "inlineCode" }), className),
+    ref,
+    ...props
+  }
+);
+InlineCode.displayName = "InlineCode";
+const List = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    className: cn(typographyVariants({ variant: "list" }), className),
+    ref,
+    ...props
+  }
+);
+List.displayName = "List";
+export {
+  Blockquote,
+  H1,
+  H2,
+  H3,
+  H4,
+  InlineCode,
+  Lead,
+  List,
+  Muted,
+  P,
+  typographyVariants
+};

package/dist/components/usage-breakdown/usage-breakdown.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
@@ -102,43 +102,42 @@ function getSortedItems(items, maxItems) {
   );
   return typeof maxItems === "number" ? rankedItems.slice(0, maxItems) : rankedItems;
 }
-const UsageBreakdown = forwardRef(
-  ({
-    className,
-    description,
-    emptyMessage = "No usage data available.",
-    items,
-    maxItems,
-    title = "Usage breakdown",
-    ...props
-  }, ref) => {
-    const sortedItems = useMemo(
-      () => getSortedItems(items, maxItems),
-      [items, maxItems]
-    );
-    const totalValue = useMemo(
-      () => sortedItems.reduce((sum, item) => sum + item.value, 0),
-      [sortedItems]
-    );
-    const maxValue = sortedItems[0]?.value ?? 0;
-    return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
-      /* @__PURE__ */ jsxs(CardHeader, { children: [
-        /* @__PURE__ */ jsx(CardTitle, { children: title }),
-        description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
-      ] }),
-      /* @__PURE__ */ jsx(CardContent, { children: sortedItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx("ol", { className: "space-y-3", children: sortedItems.map((item, index) => /* @__PURE__ */ jsx(
-        UsageBreakdownRow,
-        {
-          item,
-          maxValue,
-          rank: index + 1,
-          totalValue
-        },
-        item.id
-      )) }) })
-    ] });
-  }
-);
+const UsageBreakdown = ({
+  className,
+  description,
+  emptyMessage = "No usage data available.",
+  items,
+  maxItems,
+  ref,
+  title = "Usage breakdown",
+  ...props
+}) => {
+  const sortedItems = useMemo(
+    () => getSortedItems(items, maxItems),
+    [items, maxItems]
+  );
+  const totalValue = useMemo(
+    () => sortedItems.reduce((sum, item) => sum + item.value, 0),
+    [sortedItems]
+  );
+  const maxValue = sortedItems[0]?.value ?? 0;
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: sortedItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx("ol", { className: "space-y-3", children: sortedItems.map((item, index) => /* @__PURE__ */ jsx(
+      UsageBreakdownRow,
+      {
+        item,
+        maxValue,
+        rank: index + 1,
+        totalValue
+      },
+      item.id
+    )) }) })
+  ] });
+};
 UsageBreakdown.displayName = "UsageBreakdown";
 export {
   UsageBreakdown

package/dist/components/viewport-bookmarks/viewport-bookmarks.js

@@ -1,8 +1,5 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   empty: "No saved views",
@@ -69,7 +66,10 @@ const RowBody = (props) => {
     ] })
   ] });
 };
-const ViewportBookmarks = forwardRef((props, ref) => {
+const ViewportBookmarks = ({
+  ref,
+  ...props
+}) => {
   const {
     activeId,
     bookmarks,
@@ -111,7 +111,7 @@ const ViewportBookmarks = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 ViewportBookmarks.displayName = "ViewportBookmarks";
 export {
   ViewportBookmarks

package/dist/components/wallet-card/wallet-card.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 import {
@@ -51,64 +50,63 @@ function WalletActions({
     primaryActionLabel ? /* @__PURE__ */ jsx(Button, { className: "w-full sm:w-auto", children: primaryActionLabel }) : null
   ] });
 }
-const WalletCard = React.forwardRef(
-  ({
-    availableLabel,
-    balanceLabel,
-    className,
-    note,
-    pendingLabel,
-    primaryActionLabel,
-    renewsLabel,
-    secondaryActionLabel,
-    status,
-    ...props
-  }, reference) => {
-    return /* @__PURE__ */ jsxs(
-      Card,
-      {
-        className: cn(
-          "w-full max-w-md border-border/70 bg-card shadow-sm",
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-4 pb-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Wallet" }),
-              /* @__PURE__ */ jsx(CardDescription, { children: "Track credits, pending top-ups, and replenishment timing." })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Available balance" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: renewsLabel ?? "Credits refresh automatically when enabled." })
-              ] }),
-              /* @__PURE__ */ jsx(CreditBadge, { amount: balanceLabel, status })
-            ] })
+const WalletCard = ({
+  availableLabel,
+  balanceLabel,
+  className,
+  note,
+  pendingLabel,
+  primaryActionLabel,
+  ref: reference,
+  renewsLabel,
+  secondaryActionLabel,
+  status,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "w-full max-w-md border-border/70 bg-card shadow-sm",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-4 pb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Wallet" }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "Track credits, pending top-ups, and replenishment timing." })
           ] }),
-          /* @__PURE__ */ jsx(
-            WalletDetails,
-            {
-              availableLabel,
-              balanceLabel,
-              note,
-              pendingLabel,
-              renewsLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            WalletActions,
-            {
-              primaryActionLabel,
-              secondaryActionLabel
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Available balance" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: renewsLabel ?? "Credits refresh automatically when enabled." })
+            ] }),
+            /* @__PURE__ */ jsx(CreditBadge, { amount: balanceLabel, status })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          WalletDetails,
+          {
+            availableLabel,
+            balanceLabel,
+            note,
+            pendingLabel,
+            renewsLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          WalletActions,
+          {
+            primaryActionLabel,
+            secondaryActionLabel
+          }
+        )
+      ]
+    }
+  );
+};
 WalletCard.displayName = "WalletCard";
 export {
   WalletCard

package/dist/components/watchlist/watchlist.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { ArrowDownRight, ArrowUpRight, Star } from "lucide-react";
+import { formatChange } from "../../lib/format";
 import { cn } from "../../lib/utils";
 function formatPrice(price) {
   return typeof price === "number" ? price.toLocaleString(void 0, {
@@ -8,10 +8,6 @@ function formatPrice(price) {
     minimumFractionDigits: 2
   }) : price;
 }
-function formatChange(change) {
-  const sign = change > 0 ? "+" : "";
-  return `${sign}${change.toFixed(2)}%`;
-}
 function WatchlistRow({ item }) {
   const isPositive = item.change >= 0;
   const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
@@ -56,55 +52,54 @@ function WatchlistRow({ item }) {
     )
   ] });
 }
-const Watchlist = React.forwardRef(
-  ({
-    as: Heading = "h2",
-    className,
-    eyebrow = "Tracked symbols",
-    items,
-    title = "Watchlist",
-    ...props
-  }, reference) => {
-    if (items.length === 0) {
-      return null;
-    }
-    const advancing = items.filter((item) => item.change >= 0).length;
-    const declining = items.length - advancing;
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-label": title,
-        className: cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("header", { className: "mb-3 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: eyebrow }),
-              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: title })
+const Watchlist = ({
+  as: Heading = "h2",
+  className,
+  eyebrow = "Tracked symbols",
+  items,
+  ref: reference,
+  title = "Watchlist",
+  ...props
+}) => {
+  if (items.length === 0) {
+    return null;
+  }
+  const advancing = items.filter((item) => item.change >= 0).length;
+  const declining = items.length - advancing;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title,
+      className: cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "mb-3 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: eyebrow }),
+            /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: title })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400", children: [
+              /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" }),
+              advancing,
+              " up"
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400", children: [
-                /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" }),
-                advancing,
-                " up"
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400", children: [
-                /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }),
-                declining,
-                " down"
-              ] })
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400", children: [
+              /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }),
+              declining,
+              " down"
             ] })
-          ] }),
-          /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/60", children: items.map((item) => /* @__PURE__ */ jsx(WatchlistRow, { item }, item.symbol)) })
-        ]
-      }
-    );
-  }
-);
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/60", children: items.map((item) => /* @__PURE__ */ jsx(WatchlistRow, { item }, item.symbol)) })
+      ]
+    }
+  );
+};
 Watchlist.displayName = "Watchlist";
 export {
   Watchlist

package/dist/components/workspace-switcher/workspace-switcher.js

@@ -1,60 +1,66 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
-const WorkspaceSwitcher = forwardRef(
-  ({ className, defaultValue, onValueChange, value, workspaces, ...props }, ref) => {
-    const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
-    const [internalValue, setInternalValue] = useState(fallbackValue);
-    const currentValue = value ?? internalValue;
-    const currentWorkspace = useMemo(
-      () => workspaces.find((workspace) => workspace.id === currentValue),
-      [currentValue, workspaces]
-    );
-    function handleSelect(nextValue) {
-      if (value === void 0) {
-        setInternalValue(nextValue);
-      }
-      onValueChange?.(nextValue);
+const WorkspaceSwitcher = ({
+  className,
+  defaultValue,
+  onValueChange,
+  ref,
+  value,
+  workspaces,
+  ...props
+}) => {
+  const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
+  const [internalValue, setInternalValue] = useState(fallbackValue);
+  const currentValue = value ?? internalValue;
+  const currentWorkspace = useMemo(
+    () => workspaces.find((workspace) => workspace.id === currentValue),
+    [currentValue, workspaces]
+  );
+  function handleSelect(nextValue) {
+    if (value === void 0) {
+      setInternalValue(nextValue);
     }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
-          className
-        ),
-        ref,
-        role: "radiogroup",
-        ...props,
-        children: [
-          workspaces.map((workspace) => {
-            const isActive = workspace.id === currentValue;
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-checked": isActive,
-                className: cn(
-                  "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
-                  isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-                ),
-                onClick: () => {
-                  handleSelect(workspace.id);
-                },
-                role: "radio",
-                title: workspace.description,
-                type: "button",
-                children: workspace.label
-              },
-              workspace.id
-            );
-          }),
-          currentWorkspace?.description ? /* @__PURE__ */ jsx("span", { className: "hidden pl-2 pr-1 text-xs text-muted-foreground md:inline", children: currentWorkspace.description }) : null
-        ]
-      }
-    );
+    onValueChange?.(nextValue);
   }
-);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
+        className
+      ),
+      ref,
+      role: "radiogroup",
+      ...props,
+      children: [
+        workspaces.map((workspace) => {
+          const isActive = workspace.id === currentValue;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-checked": isActive,
+              className: cn(
+                "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+                isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+              ),
+              onClick: () => {
+                handleSelect(workspace.id);
+              },
+              role: "radio",
+              title: workspace.description,
+              type: "button",
+              children: workspace.label
+            },
+            workspace.id
+          );
+        }),
+        currentWorkspace?.description ? /* @__PURE__ */ jsx("span", { className: "hidden pl-2 pr-1 text-xs text-muted-foreground md:inline", children: currentWorkspace.description }) : null
+      ]
+    }
+  );
+};
 WorkspaceSwitcher.displayName = "WorkspaceSwitcher";
 export {
   WorkspaceSwitcher