@vllnt/ui 0.2.1-canary.0aaaad2 → 0.2.1-canary.0cc4e50

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
 import { useMounted } from "../../lib/use-mounted";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { Check, ChevronRight, RotateCcw } from "lucide-react";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { ProfileSection } from "../profile-section";
 import { ShareSection } from "../share-section";
 function DefaultLink({
@@ -22,9 +22,11 @@ function TutorialCompleteImpl({
   onRestart,
   profile,
   relatedContent,
+  sectionLabelAs: SectionHeading = "h3",
   sections,
   shareUrl,
-  title
+  title,
+  titleAs: TitleHeading = "h2"
 }) {
   const isFullyComplete = completionPercent === 100;
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -41,7 +43,7 @@ function TutorialCompleteImpl({
           )
         }
       ),
-      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold mb-2", children: isFullyComplete ? labels.tutorialComplete : labels.tutorialFinished }),
+      /* @__PURE__ */ jsx(TitleHeading, { className: "text-3xl font-semibold mb-2", children: isFullyComplete ? labels.tutorialComplete : labels.tutorialFinished }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: isFullyComplete ? `${labels.youveCompletedAll} "${title}"` : `${labels.youveFinishedWith} "${title}" (${completionPercent}%)` }),
       /* @__PURE__ */ jsxs(Button, { className: "gap-2", onClick: onRestart, variant: "outline", children: [
         /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }),
@@ -49,7 +51,7 @@ function TutorialCompleteImpl({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mt-8", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: labels.reviewSections }),
+      /* @__PURE__ */ jsx(SectionHeading, { className: "text-lg font-semibold mb-4", children: labels.reviewSections }),
       /* @__PURE__ */ jsx("div", { className: "space-y-2", children: sections.map((section, index) => {
         const isCompleted = completedSections.has(section.id);
         return /* @__PURE__ */ jsxs(
@@ -77,7 +79,7 @@ function TutorialCompleteImpl({
       }) })
     ] }),
     relatedContent.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mt-12", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: labels.relatedContent }),
+      /* @__PURE__ */ jsx(SectionHeading, { className: "text-lg font-semibold mb-4", children: labels.relatedContent }),
       /* @__PURE__ */ jsx("div", { className: "space-y-2", children: relatedContent.map((item) => /* @__PURE__ */ jsxs(
         LinkComponent,
         {
@@ -117,7 +119,7 @@ function TutorialCompleteImpl({
     /* @__PURE__ */ jsx("div", { className: "text-center pt-8", children: /* @__PURE__ */ jsx(
       LinkComponent,
       {
-        className: "inline-flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors",
+        className: "inline-flex items-center gap-x-2 text-muted-foreground hover:text-foreground transition-colors",
         href: backHref,
         children: /* @__PURE__ */ jsxs("span", { children: [
           "\u2190 ",

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function SearchInput({
   isPending,
   labels,
@@ -74,7 +74,7 @@ function TagFilter({
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => {
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", "data-testid": "tag-filter-list", children: tags.map((tag) => {
       const isActive = currentTags.includes(tag);
       return /* @__PURE__ */ jsx(
         Badge,

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,7 +10,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger
-} from "../accordion";
+} from "../accordion/accordion";
 import { Callout } from "../callout";
 import { Checklist } from "../checklist";
 import { CodePlayground, FileTree } from "../code-playground";
@@ -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/usage-breakdown/usage-breakdown.js

@@ -3,7 +3,7 @@ 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,

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

@@ -10,7 +10,7 @@ const DEFAULT_LABELS = {
 };
 const Row = (props) => {
   const { active, bookmark, onSelect } = props;
-  const handleClick = () => {
+  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";
@@ -27,7 +27,7 @@ const Row = (props) => {
         ),
         "data-viewport-bookmark": bookmark.id,
         "data-viewport-bookmark-active": active,
-        onClick: handleClick,
+        onClick: handleSelectBookmark,
         type: "button",
         children: /* @__PURE__ */ jsx(RowBody, { bookmark })
       }

package/dist/components/watchlist/watchlist.js

@@ -58,6 +58,7 @@ function WatchlistRow({ item }) {
 }
 const Watchlist = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     eyebrow = "Tracked symbols",
     items,
@@ -83,7 +84,7 @@ 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: [

package/dist/components/world-breadcrumbs/world-breadcrumbs.js

@@ -19,7 +19,7 @@ const DEFAULT_LABELS = {
 const Crumb = (props) => {
   const { crumb, isLast, onSelect } = props;
   const glyph = crumb.kind ? KIND_GLYPH[crumb.kind] : null;
-  const handleClick = () => {
+  const handleSelectCrumb = () => {
     onSelect?.(crumb.id);
   };
   const text = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
@@ -47,7 +47,7 @@ const Crumb = (props) => {
       className: "inline-flex items-center rounded-sm text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
       "data-world-breadcrumb": crumb.id,
       "data-world-breadcrumb-active": "false",
-      onClick: handleClick,
+      onClick: handleSelectCrumb,
       type: "button",
       children: text
     }

package/dist/components/world-clock-bar/world-clock-bar.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function normalizeDate(input) {
   if (input instanceof Date) {
     return new Date(input.getTime());
@@ -34,7 +34,7 @@ function getTimeFormatter(locale, timeZone) {
   const key = `${locale}|${timeZone}`;
   let formatter = TIME_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.DateTimeFormat(locale, {
+    formatter = Intl.DateTimeFormat(locale, {
       hour: "numeric",
       minute: "2-digit",
       timeZone,
@@ -49,7 +49,7 @@ function getDateFormatter(locale, timeZone) {
   const key = `${locale}|${timeZone}`;
   let formatter = DATE_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.DateTimeFormat(locale, {
+    formatter = Intl.DateTimeFormat(locale, {
       day: "numeric",
       month: "short",
       timeZone,
@@ -83,6 +83,7 @@ function WorldClockCard({
 }
 const WorldClockBar = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     now,
     showDate = true,
@@ -95,7 +96,7 @@ const WorldClockBar = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), ref, ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Synchronized time across distributed teams and regions." })
         ] }),
         /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [

package/dist/components/zoom-hud/zoom-hud.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Minus, Plus, RotateCcw } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const ZoomHUD = forwardRef(
   ({ className, onReset, onZoomIn, onZoomOut, zoom, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",