@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/tutorial-intro-content/tutorial-intro-content.js

@@ -21,7 +21,7 @@ const serverMarkdownComponents = {
   }) => /* @__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
     }
@@ -47,15 +47,15 @@ const serverMarkdownComponents = {
   h1: ({
     children,
     ...props
-  }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
+  }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold mt-8 mb-4", ...props, children }),
   h2: ({
     children,
     ...props
-  }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
+  }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mt-6 mb-3", ...props, children }),
   h3: ({
     children,
     ...props
-  }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mt-4 mb-2", ...props, children }),
+  }) => /* @__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,
@@ -132,7 +132,7 @@ function TutorialIntroContent({
 }) {
   const markdownContent = stripMDXComponents(content);
   return /* @__PURE__ */ jsxs("section", { className: cn("py-6", className), children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-6", children: title }),
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-semibold mb-6", children: title }),
     /* @__PURE__ */ jsx("div", { className: "max-w-none [&_h2:first-of-type]:hidden", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: serverMarkdownComponents, children: markdownContent }) })
   ] });
 }

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

@@ -10,25 +10,25 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger
-} from "../accordion";
-import { Callout } from "../callout";
-import { Checklist } from "../checklist";
-import { CodePlayground, FileTree } from "../code-playground";
-import { BeforeAfter, Comparison } from "../comparison";
-import { Exercise } from "../exercise";
-import { FAQ, FAQItem } from "../faq";
-import { Glossary, KeyConcept } from "../key-concept";
+} from "../accordion/accordion";
+import { Callout } from "../callout/callout";
+import { Checklist } from "../checklist/checklist";
+import { CodePlayground, FileTree } from "../code-playground/code-playground";
+import { BeforeAfter, Comparison } from "../comparison/comparison";
+import { Exercise } from "../exercise/exercise";
+import { FAQ, FAQItem } from "../faq/faq";
+import { Glossary, KeyConcept } from "../key-concept/key-concept";
 import {
   LearningObjectives,
   Prerequisites,
   Summary
-} from "../learning-objectives";
-import { CommonMistake, ProTip } from "../pro-tip";
-import { Quiz } from "../quiz";
-import { Step, StepByStep } from "../step-by-step";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
-import { SimpleTerminal, Terminal } from "../terminal";
-import { VideoEmbed } from "../video-embed";
+} from "../learning-objectives/learning-objectives";
+import { CommonMistake, ProTip } from "../pro-tip/pro-tip";
+import { Quiz } from "../quiz/quiz";
+import { Step, StepByStep } from "../step-by-step/step-by-step";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs/tabs";
+import { SimpleTerminal, Terminal } from "../terminal/terminal";
+import { VideoEmbed } from "../video-embed/video-embed";
 const LazyFlowDiagram = lazy(
   () => import("../flow-diagram").then((module_) => ({
     default: module_.FlowDiagram
@@ -95,7 +95,7 @@ const markdownComponents = {
   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
     }
@@ -114,10 +114,10 @@ const markdownComponents = {
       }
     );
   },
-  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 }),
-  h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", { className: "text-base font-bold mt-3 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 }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold mt-3 mb-2", ...props, children }),
   hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
   li: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "li",

package/dist/components/typewriter/index.js

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

package/dist/components/typewriter/typewriter.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+const Typewriter = React.forwardRef(
+  ({ className, cursor = true, speed = 60, text, ...props }, ref) => {
+    const reduced = usePrefersReducedMotion();
+    const [count, setCount] = React.useState(() => reduced ? text.length : 0);
+    const [animationKey, setAnimationKey] = React.useState({ reduced, text });
+    if (animationKey.reduced !== reduced || animationKey.text !== text) {
+      setAnimationKey({ reduced, text });
+      setCount(reduced ? text.length : 0);
+    }
+    React.useEffect(() => {
+      if (reduced) {
+        return;
+      }
+      const timer = setInterval(() => {
+        setCount((current) => {
+          if (current >= text.length) {
+            clearInterval(timer);
+            return current;
+          }
+          return current + 1;
+        });
+      }, speed);
+      return () => {
+        clearInterval(timer);
+      };
+    }, [reduced, speed, text]);
+    const typing = count < text.length;
+    return /* @__PURE__ */ jsxs("span", { "aria-label": text, className: cn(className), ref, ...props, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: text.slice(0, count) }),
+      cursor && typing ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "ml-0.5 inline-block w-[1ch] [animation:vllnt-terminal-cursor-blink_1s_steps(1,end)_infinite] motion-reduce:animate-none",
+          children: "|"
+        }
+      ) : void 0
+    ] });
+  }
+);
+Typewriter.displayName = "Typewriter";
+export {
+  Typewriter
+};

package/dist/components/typography/index.js

@@ -0,0 +1,26 @@
+import {
+  Blockquote,
+  H1,
+  H2,
+  H3,
+  H4,
+  InlineCode,
+  Lead,
+  List,
+  Muted,
+  P,
+  typographyVariants
+} from "./typography";
+export {
+  Blockquote,
+  H1,
+  H2,
+  H3,
+  H4,
+  InlineCode,
+  Lead,
+  List,
+  Muted,
+  P,
+  typographyVariants
+};

package/dist/components/typography/typography.js

@@ -0,0 +1,150 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+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 = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h1",
+    {
+      className: cn(typographyVariants({ variant: "h1" }), className),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+H1.displayName = "H1";
+const H2 = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h2",
+    {
+      className: cn(typographyVariants({ variant: "h2" }), className),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+H2.displayName = "H2";
+const H3 = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(typographyVariants({ variant: "h3" }), className),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+H3.displayName = "H3";
+const H4 = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h4",
+    {
+      className: cn(typographyVariants({ variant: "h4" }), className),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+H4.displayName = "H4";
+const P = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(typographyVariants({ variant: "p" }), className),
+      ref,
+      ...props
+    }
+  )
+);
+P.displayName = "P";
+const Lead = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(typographyVariants({ variant: "lead" }), className),
+      ref,
+      ...props
+    }
+  )
+);
+Lead.displayName = "Lead";
+const Muted = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(typographyVariants({ variant: "muted" }), className),
+      ref,
+      ...props
+    }
+  )
+);
+Muted.displayName = "Muted";
+const Blockquote = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: cn(typographyVariants({ variant: "blockquote" }), className),
+      ref,
+      ...props
+    }
+  )
+);
+Blockquote.displayName = "Blockquote";
+const InlineCode = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: cn(typographyVariants({ variant: "inlineCode" }), className),
+      ref,
+      ...props
+    }
+  )
+);
+InlineCode.displayName = "InlineCode";
+const List = forwardRef(
+  ({ className, ...props }, ref) => /* @__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,15 +1,16 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
+} from "../card/card";
 const toneClasses = {
   danger: "bg-destructive/10 text-destructive border-destructive/20 dark:text-destructive",
   default: "bg-muted text-muted-foreground border-border",
@@ -20,10 +21,14 @@ function formatPercent(value) {
   if (!Number.isFinite(value)) return "0%";
   return `${Math.round(value)}%`;
 }
+const LARGE_VALUE_FORMATTER = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 0
+});
+const SMALL_VALUE_FORMATTER = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 1
+});
 function formatValue(value) {
-  return new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: value >= 100 ? 0 : 1
-  }).format(value);
+  return value >= 100 ? LARGE_VALUE_FORMATTER.format(value) : SMALL_VALUE_FORMATTER.format(value);
 }
 function getRelativeWidth(value, maxValue) {
   if (maxValue <= 0) return 0;
@@ -38,7 +43,7 @@ function UsageBreakdownTrend({ item }) {
   const trendTone = item.tone ?? "default";
   const TrendIcon = item.trend.direction === "down" ? ArrowDownRight : ArrowUpRight;
   return /* @__PURE__ */ jsxs(Badge, { className: cn("gap-1 border", toneClasses[trendTone]), children: [
-    /* @__PURE__ */ jsx(TrendIcon, { className: "h-3.5 w-3.5" }),
+    /* @__PURE__ */ jsx(TrendIcon, { className: "size-3.5" }),
     item.trend.label
   ] });
 }
@@ -68,7 +73,7 @@ function UsageBreakdownRow({
   totalValue
 }) {
   return /* @__PURE__ */ jsx("li", { className: "rounded-lg border bg-background/70 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-muted text-sm font-semibold text-muted-foreground", children: item.icon ?? rank }),
+    /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border bg-muted text-sm font-semibold text-muted-foreground", children: item.icon ?? rank }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [

package/dist/components/video-embed/video-embed.js

@@ -60,14 +60,14 @@ function VideoEmbed({
                   src: thumbnail
                 }
               ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-muted to-muted-foreground/20" }),
-              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform group-hover:scale-110", children: /* @__PURE__ */ jsx(Play, { className: "h-6 w-6 ml-1" }) })
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-16 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform group-hover:scale-110", children: /* @__PURE__ */ jsx(Play, { className: "size-6 ml-1" }) })
             ]
           }
         )
       }
     ),
     /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-center text-muted-foreground flex items-center justify-center gap-1", children: [
-      /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(Video, { className: "size-4" }),
       title
     ] })
   ] });

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

@@ -0,0 +1,6 @@
+import {
+  ViewportBookmarks
+} from "./viewport-bookmarks";
+export {
+  ViewportBookmarks
+};

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

@@ -0,0 +1,118 @@
+"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",
+  region: "Viewport bookmarks"
+};
+const Row = (props) => {
+  const { active, bookmark, onSelect } = props;
+  const handleSelectBookmark = () => {
+    onSelect?.(bookmark.id);
+  };
+  const rowClass = "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors";
+  const activeClass = active ? "bg-muted/60 text-foreground" : "text-muted-foreground hover:bg-muted/30 hover:text-foreground";
+  if (onSelect) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-pressed": active,
+        className: cn(
+          rowClass,
+          activeClass,
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-viewport-bookmark": bookmark.id,
+        "data-viewport-bookmark-active": active,
+        onClick: handleSelectBookmark,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(rowClass, activeClass),
+      "data-viewport-bookmark": bookmark.id,
+      "data-viewport-bookmark-active": active,
+      children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+    }
+  );
+};
+const RowBody = (props) => {
+  const { bookmark } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "size-1.5 rounded-full",
+        style: {
+          backgroundColor: bookmark.color ?? "oklch(var(--foreground))"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col text-left", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: bookmark.label }),
+      bookmark.detail ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "truncate text-[10px] text-muted-foreground",
+          "data-viewport-bookmark-detail": true,
+          children: bookmark.detail
+        }
+      ) : null
+    ] })
+  ] });
+};
+const ViewportBookmarks = forwardRef((props, ref) => {
+  const {
+    activeId,
+    bookmarks,
+    className,
+    labels,
+    onSelect,
+    title = "Saved views",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-1 rounded-lg border border-border bg-background p-2 text-foreground",
+        className
+      ),
+      "data-viewport-bookmarks": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { className: "px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+        bookmarks.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-[11px] text-muted-foreground",
+            "data-viewport-bookmarks-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: bookmarks.map((bookmark) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          Row,
+          {
+            active: activeId === bookmark.id,
+            bookmark,
+            onSelect
+          }
+        ) }, bookmark.id)) })
+      ]
+    }
+  );
+});
+ViewportBookmarks.displayName = "ViewportBookmarks";
+export {
+  ViewportBookmarks
+};

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

@@ -31,7 +31,7 @@ function WalletDetails({
       /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: "Current balance" }),
       /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: balanceLabel })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 p-4", children: [
       availableLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Available now", value: availableLabel }) : null,
       pendingLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Pending", value: pendingLabel }) : null,
       renewsLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Refresh", value: renewsLabel }) : null

package/dist/components/watchlist/watchlist.js

@@ -1,6 +1,7 @@
 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 +9,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;
@@ -21,13 +18,13 @@ function WatchlistRow({ item }) {
       {
         "aria-hidden": "true",
         className: cn(
-          "flex h-7 w-7 items-center justify-center rounded-full border",
+          "flex size-7 items-center justify-center rounded-full border",
           item.starred ? "border-amber-400/40 bg-amber-400/10 text-amber-500" : "border-border bg-background text-muted-foreground"
         ),
         children: /* @__PURE__ */ jsx(
           Star,
           {
-            className: cn("h-3.5 w-3.5", item.starred && "fill-current"),
+            className: cn("size-3.5", item.starred && "fill-current"),
             strokeWidth: 1.75
           }
         )
@@ -49,7 +46,7 @@ function WatchlistRow({ item }) {
           isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
         ),
         children: [
-          /* @__PURE__ */ jsx(TrendIcon, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx(TrendIcon, { className: "size-3" }),
           formatChange(item.change)
         ]
       }
@@ -58,6 +55,7 @@ function WatchlistRow({ item }) {
 }
 const Watchlist = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     eyebrow = "Tracked symbols",
     items,
@@ -83,16 +81,16 @@ const Watchlist = React.forwardRef(
           /* @__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("h2", { className: "text-lg font-semibold text-foreground", children: title })
+              /* @__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: "h-3 w-3" }),
+                /* @__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: "h-3 w-3" }),
+                /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }),
                 declining,
                 " down"
               ] })

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

@@ -0,0 +1,6 @@
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
+export {
+  WorkspaceSwitcher
+};