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

package/dist/components/sidebar/sidebar.js

@@ -1,29 +1,29 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { ChevronDown } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
-import { useSidebar } from "../sidebar-provider";
+import { useSidebar } from "../sidebar-provider/sidebar-provider";
+const getMobileSnapshot = () => typeof window === "undefined" ? false : window.innerWidth < 1024;
+const getServerMobileSnapshot = () => false;
+const subscribeToViewportResize = (onStoreChange) => {
+  window.addEventListener("resize", onStoreChange);
+  return () => {
+    window.removeEventListener("resize", onStoreChange);
+  };
+};
 function useMobile(setOpen) {
-  const [isMobile, setIsMobile] = useState(false);
+  const isMobile = useSyncExternalStore(
+    subscribeToViewportResize,
+    getMobileSnapshot,
+    getServerMobileSnapshot
+  );
   useEffect(() => {
-    const checkMobile = () => {
-      const mobile = window.innerWidth < 1024;
-      setIsMobile(mobile);
-      if (mobile) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => {
-      window.removeEventListener("resize", checkMobile);
-    };
-  }, [setOpen]);
+    setOpen(!isMobile);
+  }, [isMobile, setOpen]);
   return isMobile;
 }
 function useScrollFade(containerReference) {
@@ -38,7 +38,7 @@ function useScrollFade(containerReference) {
       setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
     };
     checkScroll();
-    container.addEventListener("scroll", checkScroll);
+    container.addEventListener("scroll", checkScroll, { passive: true });
     return () => {
       container.removeEventListener("scroll", checkScroll);
     };
@@ -88,6 +88,7 @@ function CollapsibleSection({
           "grid transition-all duration-200 ease-in-out",
           isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
         ),
+        hidden: !isOpen,
         children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
       }
     )
@@ -97,15 +98,18 @@ function Sidebar({ sections }) {
   const pathname = usePathname();
   const { open, setOpen } = useSidebar();
   const isMobile = useMobile(setOpen);
+  const mounted = useMounted();
   const scrollContainerReference = useRef(null);
   const { showBottomFade, showTopFade } = useScrollFade(
     scrollContainerReference
   );
+  const collapsed = mounted && !isMobile && !open;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isMobile && open ? /* @__PURE__ */ jsx(
       "div",
       {
         className: "fixed inset-0 bg-black/50 z-40 lg:hidden",
+        "data-testid": "sidebar-overlay",
         onClick: () => {
           setOpen(false);
         },
@@ -122,15 +126,16 @@ function Sidebar({ sections }) {
       "aside",
       {
         className: cn(
-          "fixed lg:relative top-16 lg:top-0 bottom-0 lg:bottom-auto left-0 z-40 lg:h-full border-r bg-background transition-transform duration-300 ease-in-out",
+          "fixed lg:relative top-16 lg:top-0 bottom-0 lg:bottom-auto left-0 z-40 lg:h-full bg-background transition-[transform,width] duration-300 ease-in-out",
           "flex flex-col",
           "overflow-hidden",
           "shrink-0",
-          isMobile ? "w-full" : "w-64",
-          isMobile && !open && "-translate-x-full",
+          collapsed ? "border-r-0" : "border-r",
+          collapsed ? "w-0" : isMobile ? "w-full" : "w-64",
           isMobile && open && "translate-x-0",
-          !isMobile && !open && "-translate-x-full lg:translate-x-0",
-          !isMobile && "lg:translate-x-0"
+          isMobile && !open && "-translate-x-full",
+          !isMobile && !collapsed && "-translate-x-full lg:translate-x-0",
+          !isMobile && collapsed && "-translate-x-full"
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
           showTopFade ? /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-8 bg-gradient-to-b from-background to-transparent pointer-events-none z-20" }) : null,
@@ -138,7 +143,7 @@ function Sidebar({ sections }) {
           /* @__PURE__ */ jsx(
             "nav",
             {
-              className: "flex-1 p-4 overflow-y-auto h-full",
+              className: "flex-1 p-4 overflow-y-auto overscroll-contain h-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               ref: scrollContainerReference,
               children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: sections.map((section, sectionIndex) => {
                 const sectionItems = /* @__PURE__ */ jsx("div", { className: section.title ? "space-y-0.5" : "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx(

package/dist/components/sidebar-toggle/sidebar-toggle.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Menu, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function SidebarToggle({
   className,
   onToggle,

package/dist/components/slideshow/slideshow.js

@@ -4,7 +4,7 @@ import { memo, useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
-import { CompletionDialog } from "../completion-dialog";
+import { CompletionDialog } from "../completion-dialog/completion-dialog";
 const DEFAULT_LABELS = {
   closeLabel: "Close",
   closeTocLabel: "Close table of contents",
@@ -17,6 +17,7 @@ const DEFAULT_LABELS = {
 };
 const EMPTY_SLIDESHOW_LABELS = {};
 function SlideshowImpl({
+  as: SectionsHeading = "h3",
   completedSections,
   completionDialogTitle = "Mark section as complete?",
   currentIndex,
@@ -249,7 +250,7 @@ function SlideshowImpl({
                   role: "dialog",
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
-                      /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: mergedLabels.sectionsLabel }),
+                      /* @__PURE__ */ jsx(SectionsHeading, { className: "font-semibold", children: mergedLabels.sectionsLabel }),
                       /* @__PURE__ */ jsx(
                         "button",
                         {

package/dist/components/social-fab/social-fab.js

@@ -7,15 +7,15 @@ function ShareMenu({
   onPlatformSelect,
   platforms
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: platforms.map((p) => {
-    const handleClick = () => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: platforms.map((p) => {
+    const handleSelectSharePlatform = () => {
       onPlatformSelect(p.key);
     };
     return /* @__PURE__ */ jsx(
       "button",
       {
         className: "rounded px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        onClick: handleClick,
+        onClick: handleSelectSharePlatform,
         type: "button",
         children: p.label
       },
@@ -24,12 +24,12 @@ function ShareMenu({
   }) });
 }
 function ActionButton({ action }) {
-  const handleClick = action.onClick;
+  const handleRunAction = action.onClick;
   return /* @__PURE__ */ jsx(
     "button",
     {
       className: "rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent",
-      onClick: handleClick,
+      onClick: handleRunAction,
       type: "button",
       children: action.label
     }
@@ -47,7 +47,7 @@ function ActionPanel({
   const handleShareClick = shareAction?.onClick;
   const handleShareMouseEnter = isMobile ? void 0 : onShareHover;
   const handleShareMouseLeave = isMobile ? void 0 : onShareLeave;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: [
     shareAction ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -69,7 +69,7 @@ function MainFabButton({
   mainText,
   onToggle
 }) {
-  const handleClick = onToggle;
+  const handleToggleSharePanel = onToggle;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -77,11 +77,11 @@ function MainFabButton({
       "aria-label": isExpanded ? labels.close : labels.share,
       className: cn(
         "flex size-10 items-center justify-center rounded-md",
-        "border border-gray-300 bg-background dark:border-gray-600",
+        "border border-zinc-300 bg-background dark:border-zinc-600",
         "transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-500"
+        "hover:-translate-y-0.5 hover:border-zinc-400 hover:shadow-md dark:hover:border-zinc-500"
       ),
-      onClick: handleClick,
+      onClick: handleToggleSharePanel,
       type: "button",
       children: /* @__PURE__ */ jsx("span", { className: "text-sm font-mono", children: isMobile && isExpanded ? "\u2715" : mainText })
     }

package/dist/components/spinner/spinner.js

@@ -14,7 +14,7 @@ function Spinner({ className, size = "md", ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" })
     }
   );
 }

package/dist/components/spinner/unicode-spinner.js

@@ -658,9 +658,11 @@ const UnicodeSpinner = React.forwardRef(
     const preset = UNICODE_SPINNER_PRESETS[animation];
     const resolvedInterval = interval ?? preset.interval;
     const [frameIndex, setFrameIndex] = React.useState(0);
-    React.useEffect(() => {
+    const [previousAnimation, setPreviousAnimation] = React.useState(animation);
+    if (previousAnimation !== animation) {
+      setPreviousAnimation(animation);
       setFrameIndex(0);
-    }, [animation]);
+    }
     React.useEffect(() => {
       if (paused) {
         return;

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Card, CardContent, CardDescription, CardHeader } from "../card";
+import { Card, CardContent, CardDescription, CardHeader } from "../card/card";
 const statCardVariants = cva("overflow-hidden border shadow-sm", {
   defaultVariants: {
     tone: "neutral"
@@ -74,7 +74,7 @@ const StatCard = React.forwardRef(
       ...props,
       children: [
         /* @__PURE__ */ jsx("div", { className: accentVariants({ tone }) }),
-        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 space-y-0 pb-3", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 gap-y-0 pb-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsx(CardDescription, { className: "text-xs font-medium uppercase tracking-[0.14em]", children: label }),
             /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight", children: value })

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

@@ -1,7 +1,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";
 import {
   Card,
   CardContent,
@@ -71,10 +71,16 @@ function getSummary(items) {
       warning: 0
     }
   );
-  return STATUS_ORDER.map((status) => ({
-    count: counts[status],
-    status
-  })).filter((entry) => entry.count > 0);
+  return STATUS_ORDER.reduce(
+    (summary, status) => {
+      const count = counts[status];
+      if (count > 0) {
+        summary.push({ count, status });
+      }
+      return summary;
+    },
+    []
+  );
 }
 function StatusBoardSummary({ items }) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: getSummary(items).map(({ count, status }) => {
@@ -113,6 +119,7 @@ function StatusBoardCard({ item }) {
 }
 const StatusBoard = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     columns = 3,
     description,
@@ -123,7 +130,7 @@ const StatusBoard = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", 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 }),
           description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
         ] }),
         /* @__PURE__ */ jsx(StatusBoardSummary, { items })

package/dist/components/step-by-step/step-by-step.js

@@ -93,6 +93,7 @@ function InteractiveStep({
   ] });
 }
 function StepByStep({
+  as: Heading = "h3",
   children,
   className,
   interactive = false,
@@ -127,7 +128,7 @@ function StepByStep({
             )
           }
         ),
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: title })
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-lg", children: title })
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => {
         const stepElement = step;

package/dist/components/table-of-contents/table-of-contents.js

@@ -41,13 +41,16 @@ function useActiveSection(sections) {
   }, [sections]);
   return activeSection;
 }
-function TableOfContents({ sections }) {
+function TableOfContents({
+  as: Heading = "h3",
+  sections
+}) {
   const activeSection = useActiveSection(sections);
   if (sections.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx("aside", { className: "hidden xl:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-8", children: /* @__PURE__ */ jsxs("div", { className: "border-l-2 border-border pl-4", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mb-4 text-muted-foreground uppercase tracking-wider", children: "On This Page" }),
+    /* @__PURE__ */ jsx(Heading, { className: "text-sm font-semibold mb-4 text-muted-foreground uppercase tracking-wider", children: "On This Page" }),
     /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => /* @__PURE__ */ jsx(
       "button",
       {

package/dist/components/table-of-contents-panel/table-of-contents-panel.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
 function TableOfContentsPanelImpl({
+  as: Heading = "h2",
   className,
   closeIcon,
   completedSections,
@@ -55,6 +56,7 @@ function TableOfContentsPanelImpl({
           {
             "aria-hidden": "true",
             className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            "data-testid": "toc-backdrop",
             onClick: onClose
           }
         ),
@@ -68,7 +70,7 @@ function TableOfContentsPanelImpl({
             ref: panelRef,
             children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "toc-title", children: title }),
+                /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", id: "toc-title", children: title }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {

package/dist/components/tabs/tabs.js

@@ -13,18 +13,23 @@ function useTabsContext() {
 function Tabs({
   children,
   className,
-  defaultValue,
-  onValueChange
+  defaultValue = "",
+  onValueChange,
+  value
 }) {
-  const [activeTab, setActiveTab] = useState(defaultValue);
-  const handleSetActiveTab = (value) => {
-    setActiveTab(value);
-    onValueChange?.(value);
+  const [internalTab, setInternalTab] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const activeTab = isControlled ? value : internalTab;
+  const handleSetActiveTab = (next) => {
+    if (!isControlled) {
+      setInternalTab(next);
+    }
+    onValueChange?.(next);
   };
   const contextValue = useMemo(
     () => ({ activeTab, setActiveTab: handleSetActiveTab }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [activeTab]
+    [activeTab, isControlled]
   );
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("my-6", className), children }) });
 }
@@ -39,8 +44,10 @@ function TabsList({ children, className }) {
   );
 }
 function TabsTrigger({
+  "aria-hidden": ariaHidden,
   children,
   className,
+  tabIndex,
   value
 }) {
   const { activeTab, setActiveTab } = useTabsContext();
@@ -48,6 +55,7 @@ function TabsTrigger({
   return /* @__PURE__ */ jsx(
     "button",
     {
+      "aria-hidden": ariaHidden,
       "aria-selected": isActive,
       className: cn(
         "px-4 py-2 text-sm font-medium whitespace-nowrap transition-colors",
@@ -59,19 +67,29 @@ function TabsTrigger({
         setActiveTab(value);
       },
       role: "tab",
+      tabIndex,
       type: "button",
       children
     }
   );
 }
 function TabsContent({
+  "aria-hidden": ariaHidden,
   children,
   className,
   value
 }) {
   const { activeTab } = useTabsContext();
   if (activeTab !== value) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("pt-4", className), role: "tabpanel", children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": ariaHidden,
+      className: cn("pt-4", className),
+      role: "tabpanel",
+      children
+    }
+  );
 }
 Tabs.List = TabsList;
 Tabs.Trigger = TabsTrigger;

package/dist/components/tags-input/tags-input.js

@@ -7,9 +7,17 @@ function normalizeTag(tag) {
   return tag.trim();
 }
 function getNormalizedTags(tags) {
-  return tags.map(normalizeTag).filter(
-    (tag, index, values) => tag.length > 0 && values.indexOf(tag) === index
-  );
+  return tags.reduce(
+    (state, tag) => {
+      const normalizedTag = normalizeTag(tag);
+      if (normalizedTag.length > 0 && !state.seen.has(normalizedTag)) {
+        state.seen.add(normalizedTag);
+        state.tags.push(normalizedTag);
+      }
+      return state;
+    },
+    { seen: /* @__PURE__ */ new Set(), tags: [] }
+  ).tags;
 }
 function shouldAddTagFromKey(key) {
   return key === "Enter" || key === ",";

package/dist/components/terminal/terminal.js

@@ -2,14 +2,22 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Copy, Terminal as TerminalIcon } from "lucide-react";
-import { Button } from "../button";
+import { Button } from "../button/button";
+function getCommandContents(lines) {
+  return lines.reduce((commands, line) => {
+    if (line.type === "command") {
+      commands.push(line.content);
+    }
+    return commands;
+  }, []);
+}
 function Terminal({
   copyable = true,
   lines,
   title = "Terminal"
 }) {
   const [copied, setCopied] = useState(false);
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const commands = getCommandContents(lines);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(commands.join("\n"));
     setCopied(true);
@@ -75,7 +83,7 @@ function SimpleTerminal({
     }
     return { content: line, type: "output" };
   });
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const commands = getCommandContents(lines);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(commands.join("\n"));
     setCopied(true);

package/dist/components/theme-toggle/theme-toggle.js

@@ -20,7 +20,7 @@ function ThemeButton({
     Button,
     {
       "aria-label": ariaLabel,
-      className: "bg-background text-foreground border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors",
+      className: "bg-background text-foreground border border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors",
       size: "icon",
       variant: "outline",
       ...props,
@@ -120,7 +120,7 @@ function ThemeToggle({ dict }) {
       DropdownMenuContent,
       {
         align: "end",
-        className: "bg-background border border-gray-300 dark:border-gray-600",
+        className: "bg-background border border-zinc-300 dark:border-zinc-600",
         onMouseEnter: () => {
           isHoveringOverMenuAreaReference.current = true;
           clearCloseTimer();

package/dist/components/thinking-block/thinking-block.js

@@ -33,7 +33,7 @@ function ThinkingBlock({
           isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "Thinking",
-            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "..." }) : null
+            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "\u2026" }) : null
           ] })
         ]
       }
@@ -41,7 +41,7 @@ function ThinkingBlock({
     isExpanded ? /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto",
+        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l border-muted-foreground/30 max-h-48 overflow-y-auto",
         id: contentId,
         children: [
           thinking,

package/dist/components/ticker-tape/ticker-tape.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowDownRight, ArrowUpRight, Dot } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 const tickerTapeKeyframes = `
 @keyframes ticker-tape-scroll {
   from {

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

@@ -125,7 +125,7 @@ const TimelineScrubber = forwardRef((props, ref) => {
   const span = safeEnd - start;
   const clamped = clamp(value, start, safeEnd);
   const ratio = clamp((clamped - start) / span, 0, 1);
-  const handleChange = (event) => {
+  const handleScrubberValueChange = (event) => {
     onValueChange(clamp(Number(event.target.value), start, safeEnd));
   };
   return /* @__PURE__ */ jsxs(
@@ -158,7 +158,7 @@ const TimelineScrubber = forwardRef((props, ref) => {
             inputId,
             max: safeEnd,
             min: start,
-            onChange: handleChange,
+            onChange: handleScrubberValueChange,
             ratio,
             scrubberId: inputId,
             span,

package/dist/components/tldr-section/tldr-section.js

@@ -3,20 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 function TLDRSection({ children, label }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const [showSkeleton, setShowSkeleton] = useState(false);
+  const hasBeenOpenedRef = useRef(false);
   const timerReference = useRef(null);
   useEffect(() => {
-    if (isExpanded && !hasBeenOpened) {
+    if (isExpanded && !hasBeenOpenedRef.current) {
       if (timerReference.current) {
         clearTimeout(timerReference.current);
       }
       const rafId = requestAnimationFrame(() => {
-        setIsLoading(true);
-        setHasBeenOpened(true);
+        setShowSkeleton(true);
+        hasBeenOpenedRef.current = true;
       });
       timerReference.current = setTimeout(() => {
-        setIsLoading(false);
+        setShowSkeleton(false);
         timerReference.current = null;
       }, 800);
       return () => {
@@ -25,6 +25,7 @@ function TLDRSection({ children, label }) {
           clearTimeout(timerReference.current);
           timerReference.current = null;
         }
+        setShowSkeleton(false);
       };
     }
     return () => {
@@ -32,6 +33,7 @@ function TLDRSection({ children, label }) {
         clearTimeout(timerReference.current);
         timerReference.current = null;
       }
+      setShowSkeleton(false);
     };
   }, [isExpanded]);
   return /* @__PURE__ */ jsxs("div", { className: "my-8 rounded-lg border border-border bg-muted/30 overflow-hidden", children: [
@@ -88,7 +90,7 @@ function TLDRSection({ children, label }) {
         ]
       }
     ),
-    isExpanded ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-2 border-t border-border", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    isExpanded ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-2 border-t border-border", children: showSkeleton ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-5/6", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-4/5", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),

package/dist/components/tour/tour.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import { Button } from "../button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card";
 function TourHeader({

package/dist/components/transaction-list/transaction-list.js

@@ -12,7 +12,7 @@ function getCurrencyFormatter(locale, currency) {
   const key = `${locale}|${currency}`;
   let formatter = CURRENCY_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.NumberFormat(locale, {
+    formatter = Intl.NumberFormat(locale, {
       currency,
       style: "currency"
     });
@@ -24,7 +24,7 @@ const DATE_FORMATTER_CACHE = /* @__PURE__ */ new Map();
 function getTransactionDateFormatter(locale) {
   let formatter = DATE_FORMATTER_CACHE.get(locale);
   if (!formatter) {
-    formatter = new Intl.DateTimeFormat(locale, {
+    formatter = Intl.DateTimeFormat(locale, {
       day: "numeric",
       month: "short",
       year: "numeric"