@vllnt/ui 0.2.1-canary.06f0e84 → 0.2.1-canary.55e0e0a

package/dist/components/activity-heatmap/activity-heatmap.js

@@ -72,19 +72,21 @@ function getGridData(data, endDate, weeks) {
     });
   });
 }
+const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  timeZone: "UTC"
+});
+const TOOLTIP_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "short",
+  timeZone: "UTC",
+  year: "numeric"
+});
 function formatMonthLabel(date) {
-  return new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    timeZone: "UTC"
-  }).format(date);
+  return MONTH_LABEL_FORMATTER.format(date);
 }
 function formatTooltip(date, count) {
-  const formattedDate = new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    month: "short",
-    timeZone: "UTC",
-    year: "numeric"
-  }).format(date);
+  const formattedDate = TOOLTIP_DATE_FORMATTER.format(date);
   return `${count} activity ${count === 1 ? "event" : "events"} on ${formattedDate}`;
 }
 function HeatmapGrid({
@@ -127,7 +129,7 @@ function HeatmapGrid({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: "Less" }),
-      LEVEL_CLASS_NAMES.map((className, index) => /* @__PURE__ */ jsx(
+      LEVEL_CLASS_NAMES.map((className) => /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
@@ -135,7 +137,7 @@ function HeatmapGrid({
             className
           )
         },
-        `legend-${index}`
+        `legend-${className}`
       )),
       /* @__PURE__ */ jsx("span", { children: "More" })
     ] })

package/dist/components/animated-text/animated-text.js

@@ -24,10 +24,7 @@ const ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS = {
 const DEFAULT_RANDOM_CHARACTERS = ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS.matrix;
 function getSegments(text, splitBy) {
   if (splitBy === "character") {
-    const segmenter = new Intl.Segmenter(void 0, {
-      granularity: "grapheme"
-    });
-    return Array.from(segmenter.segment(text), ({ segment }) => segment);
+    return Array.from(GLYPH_SEGMENTER.segment(text), ({ segment }) => segment);
   }
   return text.match(/\S+\s*/g) ?? [];
 }

package/dist/components/auto-reload/auto-reload.js

@@ -34,11 +34,21 @@ function valueToCents(value) {
   if (Number.isNaN(parsed)) return 0;
   return Math.round(parsed * CENTS_PER_UNIT);
 }
+const CURRENCY_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getCurrencyFormatter(locale, currency) {
+  const key = `${locale}|${currency}`;
+  let formatter = CURRENCY_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(locale, {
+      currency,
+      style: "currency"
+    });
+    CURRENCY_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
 function getCurrencySymbol(locale, currency) {
-  const formatted = new Intl.NumberFormat(locale, {
-    currency,
-    style: "currency"
-  }).format(0);
+  const formatted = getCurrencyFormatter(locale, currency).format(0);
   const symbol = formatted.replaceAll(/[\d\s,.]/g, "");
   return symbol.length > 0 ? symbol : currency;
 }

package/dist/components/avatar-group/avatar-group.js

@@ -66,7 +66,7 @@ const AvatarGroup = React.forwardRef(
                 /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
               ]
             },
-            `${item.alt}-${index}`
+            item.src ?? item.alt
           )),
           hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: overflowBadgeVariants({ size }), children: overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}` }) : null
         ]

package/dist/components/breadcrumb/breadcrumb.js

@@ -20,39 +20,46 @@ function Breadcrumb({
     {
       "aria-label": "Breadcrumb",
       className: cn("flex items-center space-x-1 text-sm", className),
-      children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
-        item.href ? /* @__PURE__ */ jsxs(
-          Link,
-          {
-            className: "flex items-center gap-1 hover:text-foreground transition-colors",
-            href: item.href,
-            children: [
+      children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center",
+          children: [
+            index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
+            item.href ? /* @__PURE__ */ jsxs(
+              Link,
+              {
+                className: "flex items-center gap-1 hover:text-foreground transition-colors",
+                href: item.href,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        // Truncate plain string labels; custom React elements handle their own overflow
+                        typeof item.label === "string" && "truncate",
+                        variant === "minimal" ? "text-muted-foreground" : "text-foreground"
+                      ),
+                      children: item.label
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
               item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: cn(
-                    // Truncate plain string labels; custom React elements handle their own overflow
-                    typeof item.label === "string" && "truncate",
-                    variant === "minimal" ? "text-muted-foreground" : "text-foreground"
-                  ),
+                  className: cn(typeof item.label === "string" && "truncate"),
                   children: item.label
                 }
               )
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-          item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(typeof item.label === "string" && "truncate"),
-              children: item.label
-            }
-          )
-        ] })
-      ] }, index))
+            ] })
+          ]
+        },
+        typeof item.label === "string" ? item.label : `breadcrumb-${index}`
+      ))
     }
   );
 }

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

@@ -38,6 +38,7 @@ function ImageMedia({ media }) {
   ] });
 }
 function VideoMedia({ media }) {
+  const iframeTitle = media.title || "Embedded timeline video";
   return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted", children: [
     /* @__PURE__ */ jsx("div", { className: "aspect-video w-full", children: /* @__PURE__ */ jsx(
       "iframe",
@@ -46,7 +47,7 @@ function VideoMedia({ media }) {
         allowFullScreen: true,
         className: "h-full w-full",
         src: media.src,
-        title: media.title ?? "Embedded video"
+        title: iframeTitle
       }
     ) }),
     media.caption || media.credit ? /* @__PURE__ */ jsxs("figcaption", { className: "border-t bg-background px-3 py-2 text-xs text-muted-foreground", children: [

package/dist/components/code-playground/code-playground.js

@@ -11,11 +11,12 @@ function CodeLine({ highlightLines, line, lineNumber }) {
     /* @__PURE__ */ jsx("span", { children: line })
   ] });
 }
+const EMPTY_HIGHLIGHT_LINES = [];
 function CodePlayground({
   children,
   description,
   filename,
-  highlightLines = [],
+  highlightLines = EMPTY_HIGHLIGHT_LINES,
   language = "typescript",
   showLineNumbers = false,
   title
@@ -63,7 +64,7 @@ function CodePlayground({
         line,
         lineNumber: index + 1
       },
-      index
+      `${line}-${index + 1}`
     )) }) : /* @__PURE__ */ jsx("code", { children: code }) }) }),
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t bg-muted/30", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) })
   ] });

package/dist/components/comparison/comparison.js

@@ -53,7 +53,7 @@ function Comparison({
             children: before.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             BeforeIcon,
             {
@@ -64,7 +64,7 @@ function Comparison({
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", afterConfig.className), children: [
         /* @__PURE__ */ jsx(
@@ -77,7 +77,7 @@ function Comparison({
             children: after.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             AfterIcon,
             {
@@ -88,7 +88,7 @@ function Comparison({
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] })
     ] })
   ] });

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

@@ -8,12 +8,13 @@ const DEFAULT_LABELS = {
   startLabel: "Start Tutorial",
   tableOfContentsLabel: "Table of Contents"
 };
+const EMPTY_CONTENT_INTRO_LABELS = {};
 function ContentIntroImpl({
   additionalContent,
   completedSections,
   estimatedTime,
   isLoading = false,
-  labels = {},
+  labels = EMPTY_CONTENT_INTRO_LABELS,
   onGoToSection,
   onStart,
   renderIntroContent,
@@ -97,7 +98,7 @@ function ContentIntroImpl({
                 )
               ]
             }
-          ) }, `${section.id}-${index}`);
+          ) }, section.id);
         }) })
       ] }),
       additionalContent

package/dist/components/countdown-timer/countdown-timer.js

@@ -73,14 +73,15 @@ function formatSegments(milliseconds) {
     { label: "Seconds", value: String(seconds).padStart(2, "0") }
   ];
 }
+const DEADLINE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+  month: "short",
+  timeZoneName: "short"
+});
 function formatDeadline(date) {
-  return new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short"
-  }).format(date);
+  return DEADLINE_FORMATTER.format(date);
 }
 function getProgress(deadline, now, startedAt) {
   if (!startedAt) {

package/dist/components/data-table/data-table.js

@@ -38,6 +38,7 @@ function SortIcon({ direction }) {
   }
   return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" });
 }
+const EMPTY_FILTERABLE_COLUMNS = [];
 function DataTableComponent({
   caption,
   className,
@@ -47,7 +48,7 @@ function DataTableComponent({
   enableFiltering = true,
   enablePagination = true,
   enableSelection = false,
-  filterableColumns = [],
+  filterableColumns = EMPTY_FILTERABLE_COLUMNS,
   getRowId,
   pageSize = 10,
   searchPlaceholder = "Search rows...",

package/dist/components/filter-bar/filter-bar.js

@@ -149,12 +149,13 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search...",
   tagsLabel: "Tags:"
 };
+const EMPTY_FILTER_BAR_LABELS = {};
 function FilterBarImpl({
   className,
   currentDifficulty,
   currentTags,
   difficultyOptions,
-  labels = {},
+  labels = EMPTY_FILTER_BAR_LABELS,
   onFiltersChange,
   searchQuery,
   tags

package/dist/components/gantt-chart/gantt-chart.js

@@ -50,23 +50,25 @@ function clamp(value, min, max) {
 function diffInDays(later, earlier) {
   return (later.getTime() - earlier.getTime()) / MS_PER_DAY;
 }
+const TICK_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getTickDateTimeFormatter(locale, scale) {
+  const key = `${locale}|${scale}`;
+  let formatter = TICK_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    const options = scale === "month" ? { month: "short", year: "numeric" } : { day: "2-digit", month: "short" };
+    formatter = new Intl.DateTimeFormat(locale, options);
+    TICK_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
 function buildTickFormatter(scale, locale) {
   switch (scale) {
     case "day":
-      return new Intl.DateTimeFormat(locale, {
-        day: "2-digit",
-        month: "short"
-      }).format;
+      return getTickDateTimeFormatter(locale, "day").format;
     case "week":
-      return new Intl.DateTimeFormat(locale, {
-        day: "2-digit",
-        month: "short"
-      }).format;
+      return getTickDateTimeFormatter(locale, "week").format;
     case "month":
-      return new Intl.DateTimeFormat(locale, {
-        month: "short",
-        year: "numeric"
-      }).format;
+      return getTickDateTimeFormatter(locale, "month").format;
     case "quarter":
       return (date) => {
         const quarter = Math.floor(date.getMonth() / 3) + 1;

package/dist/components/learning-objectives/learning-objectives.js

@@ -17,10 +17,10 @@ function LearningObjectives({
         /* @__PURE__ */ jsx("span", { children: estimatedTime })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: objectives.map((objective, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: objectives.map((objective) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
       /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-primary flex-shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: objective })
-    ] }, index)) })
+    ] }, objective)) })
   ] });
 }
 function Prerequisites({
@@ -36,7 +36,7 @@ function Prerequisites({
       ] }),
       level ? /* @__PURE__ */ jsx("span", { className: "text-xs font-medium px-2 py-1 rounded-full bg-primary/10 text-primary capitalize", children: level }) : null
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: items.map((item) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: "flex items-start gap-2 text-sm text-muted-foreground",
@@ -45,7 +45,7 @@ function Prerequisites({
           item
         ]
       },
-      index
+      item
     )) })
   ] });
 }
@@ -62,10 +62,10 @@ function Summary({
     /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-2", children }),
     keyTakeaways && keyTakeaways.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 border-t border-border", children: [
       /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2", children: "Key Takeaways" }),
-      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: keyTakeaways.map((takeaway, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: keyTakeaways.map((takeaway) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
         /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" }),
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: takeaway })
-      ] }, index)) })
+      ] }, takeaway)) })
     ] }) : null
   ] });
 }

package/dist/components/live-feed/live-feed.js

@@ -60,18 +60,20 @@ function formatRelative(eventDate, now) {
   if (deltaMs < 7 * DAY_MS) {
     return `${Math.floor(deltaMs / DAY_MS)}d ago`;
   }
-  return new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    month: "short"
-  }).format(eventDate);
+  return SHORT_DATE_FORMATTER.format(eventDate);
 }
+const SHORT_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "short"
+});
+const ABSOLUTE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  hour: "numeric",
+  minute: "2-digit",
+  month: "short",
+  second: "2-digit"
+});
 function formatAbsolute(eventDate) {
-  return new Intl.DateTimeFormat("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    second: "2-digit"
-  }).format(eventDate);
+  return ABSOLUTE_FORMATTER.format(eventDate);
 }
 function sortEventsDesc(events) {
   return [...events].sort(

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

@@ -114,8 +114,9 @@ function buildCustomComponents(injectedComponents) {
     ...injectedComponents
   };
 }
+const EMPTY_MDX_COMPONENTS = {};
 async function MDXContent({
-  components = {},
+  components = EMPTY_MDX_COMPONENTS,
   content,
   enableMDX = true
 }) {

package/dist/components/navbar-saas/navbar-saas.js

@@ -8,9 +8,10 @@ import { Button } from "../button";
 import { useSidebar } from "../sidebar-provider";
 import { ThemeToggle } from "../theme-toggle";
 import { useMobile } from "./use-mobile";
+const EMPTY_NAV_ITEMS = [];
 function NavbarSaas({
   brand,
-  navItems = [],
+  navItems = EMPTY_NAV_ITEMS,
   rightSlot,
   showMobileMenu = true
 }) {

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

@@ -2,6 +2,16 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
+const NUMBER_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getNumberTickerFormatter(locale, formatOptions) {
+  const key = `${locale ?? ""}|${formatOptions ? JSON.stringify(formatOptions) : ""}`;
+  let formatter = NUMBER_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(locale, formatOptions);
+    NUMBER_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
 const NumberTicker = React.forwardRef(
   ({
     className,
@@ -42,10 +52,7 @@ const NumberTicker = React.forwardRef(
         window.cancelAnimationFrame(animationFrame);
       };
     }, [delay, duration, from, value]);
-    const formatter = React.useMemo(
-      () => new Intl.NumberFormat(locale, formatOptions),
-      [formatOptions, locale]
-    );
+    const formatter = getNumberTickerFormatter(locale, formatOptions);
     return /* @__PURE__ */ jsx(
       "span",
       {

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

@@ -17,6 +17,7 @@ function DefaultLink({
 }) {
   return /* @__PURE__ */ jsx("a", { className, href, children });
 }
+const EMPTY_PROGRESS_CARD_LIST = [];
 function ContentCardImpl({
   badgeLabel,
   badgeVariant = "default",
@@ -24,9 +25,9 @@ function ContentCardImpl({
   getProgress,
   href,
   linkComponent: LinkComponent = DefaultLink,
-  metadata = [],
+  metadata = EMPTY_PROGRESS_CARD_LIST,
   progressLabel = "completed",
-  tags = [],
+  tags = EMPTY_PROGRESS_CARD_LIST,
   title
 }) {
   const [progress, setProgress] = useState(null);
@@ -59,7 +60,7 @@ function ContentCardImpl({
       metadata.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-xs text-muted-foreground", children: metadata.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
         index > 0 ? /* @__PURE__ */ jsx("span", { className: "mr-2", children: "\u2022" }) : null,
         item
-      ] }, index)) }) : null,
+      ] }, item)) }) : null,
       tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: tag }, tag)) }) : null
     ] })
   ] }) });

package/dist/components/progress-tracker/progress-tracker.js

@@ -124,10 +124,12 @@ function useProgressTrackerContext() {
   }
   return context;
 }
+const EMPTY_PROGRESS_TRACKER_MODULES = [];
+const EMPTY_PROGRESS_TRACKER_SKILLS = [];
 function ProgressTrackerRoot({
   children,
   className,
-  modules = [],
+  modules = EMPTY_PROGRESS_TRACKER_MODULES,
   overallProgress,
   streak = 0,
   title = "Learning progress",
@@ -352,7 +354,7 @@ function ProgressTrackerModule({
   lessons,
   persistKey,
   progress,
-  skills = [],
+  skills = EMPTY_PROGRESS_TRACKER_SKILLS,
   status,
   timeSpent,
   title,

package/dist/components/quiz/quiz.js

@@ -172,7 +172,7 @@ function Quiz({
         selectedIndex,
         submitted
       },
-      index
+      typeof opt === "string" ? opt : `quiz-option-${String(opt)}`
     )) }),
     hint && !submitted ? /* @__PURE__ */ jsx(
       QuizHint,

package/dist/components/search-bar/search-bar.js

@@ -1,11 +1,33 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useDebounce } from "../../lib/use-debounce";
 import { Button } from "../button/button";
 import { Input } from "../input/input";
-function SearchBar({
+function SearchBar(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SearchBarFallback, { ...props }), children: /* @__PURE__ */ jsx(SearchBarInner, { ...props }) });
+}
+function SearchBarFallback({
+  className,
+  placeholder = "Search posts..."
+}) {
+  return /* @__PURE__ */ jsxs("form", { className: `flex gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": placeholder,
+        className: "flex-1",
+        disabled: true,
+        placeholder,
+        type: "text",
+        value: ""
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { disabled: true, type: "submit", variant: "outline", children: "Search" })
+  ] });
+}
+function SearchBarInner({
   className,
   onSearch,
   placeholder = "Search posts..."

package/dist/components/slideshow/slideshow.js

@@ -15,11 +15,12 @@ const DEFAULT_LABELS = {
   prevLabel: "Prev",
   sectionsLabel: "Sections"
 };
+const EMPTY_SLIDESHOW_LABELS = {};
 function SlideshowImpl({
   completedSections,
   completionDialogTitle = "Mark section as complete?",
   currentIndex,
-  labels = {},
+  labels = EMPTY_SLIDESHOW_LABELS,
   onComplete,
   onExit,
   onNavigate,
@@ -333,7 +334,7 @@ function SlideshowImpl({
                             )
                           ]
                         },
-                        `${section.id}-${index}`
+                        section.id
                       );
                     }) })
                   ]

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

@@ -140,6 +140,7 @@ function ExpandedPanel({
     }
   );
 }
+const EMPTY_SHARE_PLATFORMS = [];
 function SocialFAB({
   actions,
   bottomOffset = 24,
@@ -150,7 +151,7 @@ function SocialFAB({
   onClose,
   onOpen,
   rightOffset = 24,
-  sharePlatforms = []
+  sharePlatforms = EMPTY_SHARE_PLATFORMS
 }) {
   const options = { onAction, onClose, onOpen };
   const fab = useSocialFab(options);

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

@@ -131,6 +131,7 @@ function StepByStep({
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => {
         const stepElement = step;
+        const stepKey = `${stepElement.props.title}-${index + 1}`;
         return /* @__PURE__ */ jsx(
           Step,
           {
@@ -138,7 +139,7 @@ function StepByStep({
             title: stepElement.props.title,
             children: stepElement.props.children
           },
-          index
+          stepKey
         );
       }) })
     ] });
@@ -183,7 +184,7 @@ function StepByStep({
         title: step.props.title,
         children: step.props.children
       },
-      index
+      `${step.props.title}-${index + 1}`
     )) })
   ] });
 }

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

@@ -175,7 +175,7 @@ function TableOfContentsPanelImpl({
                           )
                         ]
                       }
-                    ) }, `${section.id}-${index}`);
+                    ) }, section.id);
                   }) })
                 }
               ),

package/dist/components/terminal/terminal.js

@@ -30,17 +30,24 @@ function Terminal({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       copyable && commands.length > 0 ? /* @__PURE__ */ jsx(
         Button,
         {
@@ -89,17 +96,24 @@ function SimpleTerminal({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       commands.length > 0 && /* @__PURE__ */ jsx(
         Button,
         {

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

@@ -7,6 +7,32 @@ import { Badge } from "../badge/badge";
 const CENTS_PER_UNIT = 100;
 const DEFAULT_LOCALE = "en-US";
 const DEFAULT_CURRENCY = "USD";
+const CURRENCY_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getCurrencyFormatter(locale, currency) {
+  const key = `${locale}|${currency}`;
+  let formatter = CURRENCY_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(locale, {
+      currency,
+      style: "currency"
+    });
+    CURRENCY_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
+const DATE_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getTransactionDateFormatter(locale) {
+  let formatter = DATE_FORMATTER_CACHE.get(locale);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "short",
+      year: "numeric"
+    });
+    DATE_FORMATTER_CACHE.set(locale, formatter);
+  }
+  return formatter;
+}
 const DEFAULT_LABELS = {
   active: "Active",
   canceled: "Canceled",
@@ -44,17 +70,12 @@ const INTERVAL_LABEL = {
 };
 function formatTransactionAmount(amountCents, options = {}) {
   const { currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE } = options;
-  return new Intl.NumberFormat(locale, {
-    currency,
-    style: "currency"
-  }).format(amountCents / CENTS_PER_UNIT);
+  return getCurrencyFormatter(locale, currency).format(
+    amountCents / CENTS_PER_UNIT
+  );
 }
 function formatTransactionDate(timestamp, locale = DEFAULT_LOCALE) {
-  return new Intl.DateTimeFormat(locale, {
-    day: "numeric",
-    month: "short",
-    year: "numeric"
-  }).format(new Date(timestamp));
+  return getTransactionDateFormatter(locale).format(new Date(timestamp));
 }
 const TransactionListBase = forwardRef(
   (props, ref) => {

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

@@ -72,7 +72,7 @@ function TutorialCompleteImpl({
               /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
             ]
           },
-          `${section.id}-${index}`
+          section.id
         );
       }) })
     ] }),

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

@@ -21,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;

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

@@ -29,20 +29,40 @@ function useLiveDate(now, updateIntervalMs) {
   }, [fixedNow, updateIntervalMs]);
   return liveNow;
 }
+const TIME_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getTimeFormatter(locale, timeZone) {
+  const key = `${locale}|${timeZone}`;
+  let formatter = TIME_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+      timeZone,
+      timeZoneName: "short"
+    });
+    TIME_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
+const DATE_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getDateFormatter(locale, timeZone) {
+  const key = `${locale}|${timeZone}`;
+  let formatter = DATE_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "short",
+      timeZone,
+      weekday: "short"
+    });
+    DATE_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
 function formatZoneDateTime(zone, date, showDate) {
   const locale = zone.locale ?? "en-US";
-  const timeFormatter = new Intl.DateTimeFormat(locale, {
-    hour: "numeric",
-    minute: "2-digit",
-    timeZone: zone.timeZone,
-    timeZoneName: "short"
-  });
-  const dateFormatter = new Intl.DateTimeFormat(locale, {
-    day: "numeric",
-    month: "short",
-    timeZone: zone.timeZone,
-    weekday: "short"
-  });
+  const timeFormatter = getTimeFormatter(locale, zone.timeZone);
+  const dateFormatter = getDateFormatter(locale, zone.timeZone);
   return {
     date: showDate ? dateFormatter.format(date) : "",
     time: timeFormatter.format(date)

package/dist/index.d.ts

@@ -4692,7 +4692,7 @@ type SearchBarProps = {
     onSearch?: (query: string) => void;
     placeholder?: string;
 };
-declare function SearchBar({ className, onSearch, placeholder, }: SearchBarProps): react_jsx_runtime.JSX.Element;
+declare function SearchBar(props: SearchBarProps): react_jsx_runtime.JSX.Element;
 
 type ScopeSelectorNode = {
     badge?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.2.1-canary.06f0e84",
+  "version": "0.2.1-canary.55e0e0a",
   "description": "React component library — 225 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",