@vllnt/ui 0.3.0-canary.00b20d6 → 0.3.0-canary.29c44b3

package/CHANGELOG.md

@@ -6,7 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
-> Target version: **`0.3.0`** — shipping as `0.3.0-canary.<sha>` on the npm `canary` tag on every merge to main. The stable `latest` release is gated on the [ROADMAP.md](../../ROADMAP.md) shipping criteria and is not yet published.
+_Nothing yet._
+
+## [0.3.0] - 2026-06-26
 
 ### Added
 
@@ -28,7 +30,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - **Inspector + dock panels** — `PropertySection`, `ObjectInspector`, `RelationshipInspector`, `RuntimeOverviewPanel`, `RoutingAssignmentPanel`, `PolicyDeliveryPanel`.
 - **Runtime overlays** — `AlertPulse`, `ThresholdRing`, `StickyMetric`, `HeatOverlay`, `StateBadgeOverlay`, `MetricCluster`, `JarvisDock`, `ContextLens`.
 - **Time navigation** — `TimelineScrubber`, `PlaybackGhost`, `BottomActivityStrip`, `RunTimeline`.
-- Total component count: **225** (up from 140).
+- **Form primitives (18)** — `ButtonGroup`, `InputGroup`, `Field`, `Fieldset`, `Item`, `ColorPicker`, `CheckboxGroup`, `NativeSelect`, `ListBox`, `SearchField`, `TextField`, `PhoneInput`, `TimePicker`, `TimeField`, `DateField`, `DateRangePicker`, `RangeCalendar`, `TagGroup`.
+- **Charts / dataviz (5)** — `PieChart`, `RadarChart`, `GaugeChart`, `SankeyChart`, `ContributionGraph` (joining the existing `BarChart` / `LineChart` / `AreaChart`).
+- **AI primitives (3)** — `Reasoning`, `ChainOfThought`, `PromptInput`.
+- **Core primitives (7)** — `Typography`, `Link`, `Toolbar`, `Meter`, `QrCode`, `Grid`, `Panel`.
+- **Motion / effects (37)** — `BentoGrid`, `Sparkles`, `Typewriter`, `AnimatedList`, `Dock`, `MagneticButton`, `TextShimmer`, `AnimatedBeam`, `AnimatedTabs`, `ScrollProgress`, `ShimmerButton`, `ShimmerText`, `AnimatedGridPattern`, `AnimatedTestimonials`, `AnimatedTooltip`, `BlurReveal`, `CardFlip`, `Cursor`, `DotPattern`, `ExpandableCards`, `FloatingNavbar`, `GlassCard`, `GlassProgress`, `LiquidGlass`, `Magnetic`, `Meteors`, `Particles`, `ProgressiveBlur`, `RevealText`, `ScrambleText`, `ShineBorder`, `ShinyButton`, `SpinningText`, `SpotlightCard`, `TextAnimate`, `TextReveal`, `TiltCard`.
+- Total component count: **309** (up from 140).
 
 - **OKLCH theming system** — color tokens migrated to the OKLCH color space, with 13 runtime theme presets (`default`, `matrix`, `dracula`, `synthwave`, `tron`, `cyberpunk`, `nord`, `claude`, `chatgpt`, `gemini`, `dusk`, `cyberlime`, `aura`). New public theme exports from `@vllnt/ui`: `THEME_PRESETS`, `DEFAULT_THEME_PRESET`, `CUSTOM_THEME_NAME`, `isThemePresetName`, the `ThemePreset` and `ThemePresetName` types, plus the `useThemePreset` hook (with `UseThemePresetResult`), `setThemePreset`, and `setCustomTheme` for runtime preset switching and user-supplied custom themes.
 
@@ -36,12 +43,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Changed
 
+- **BREAKING — React 19 required.** The peer dependency moved to `react` / `react-dom` `>=19`; **React 18 is no longer supported**. Components migrated from `React.forwardRef` to the React 19 ref-as-prop pattern, and `useContext` → `use()`. React-18 consumers must upgrade to React 19.
+- **Internal quality sweep** — cleared the react-doctor backlog: `no-react19-deprecated-apis` 456 → 0, plus state/effect warnings (`useEffectEvent` for effect-captured handlers, derived-state, cascading `setState`) and structural warnings (giant-component splits, render-in-render, polymorphic children, passive listeners).
+- **Shared internals** — extracted reusable hooks/utilities (reference-counted body-scroll-lock that fixes a multi-overlay unlock bug, escape-key, live-date, cached `Intl` formatters, clipboard migration) and a Zod parse seam for the registry shape.
 - Registry installs use a **hybrid CLI strategy** — leaf component source is inlined, sibling registry items resolve via `@vllnt/ui` to keep installs minimal and dedupe shared primitives.
 
-### Notes
+### Fixed
 
-- `ROADMAP.md` added at repo root tracking 50 open issues across 8 phases gating the `0.3.0` cut.
-- `0.3.0` requires the codebase-health gate (`react-doctor` CI + 0 errors), the agent-first surface (`/llms.txt`, `/mcp`, sitemap, JSON-LD), and the rebuilt landing page before shipping.
+- **Docs sidebar dropped components** — the registry category union omitted four categories (`ai`, `billing`, `data-display`, `educational`), silently hiding ~32 components from the docs sidebar; all now render, with a structural fallback so a missing category can no longer regress.
+- **Theme-adaptive chart colors** — `CandlestickChart` and `SparklineGrid` series colors now follow the active theme and dark mode instead of hardcoded values.
 
 ## [0.2.1] - 2026-04-21
 
@@ -145,6 +155,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 - Initial public publish to the public npm registry.
 
+[0.3.0]: https://github.com/vllnt/ui/releases/tag/v0.3.0
 [0.2.1]: https://github.com/vllnt/ui/releases/tag/v0.2.1
 [0.2.0]: https://github.com/vllnt/ui/releases/tag/v0.2.0
 [0.1.11]: https://github.com/vllnt/ui/releases/tag/v0.1.11

package/README.md

@@ -1,6 +1,6 @@
 # @vllnt/ui
 
-React component library — 144 components built on Radix UI primitives, Tailwind CSS, and CVA.
+React component library — 309 components built on Radix UI primitives, Tailwind CSS, and CVA.
 
 See [CHANGELOG.md](./CHANGELOG.md) for release history.
 

package/dist/components/accordion/accordion.js

@@ -1,16 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState
-} from "react";
+import { createContext, use, useCallback, useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
 const AccordionContext = createContext(null);
 function useAccordionContext() {
-  const context = useContext(AccordionContext);
+  const context = use(AccordionContext);
   if (!context) {
     throw new Error("AccordionItem must be used within an Accordion");
   }

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { normalizeDate } from "../../lib/format";
 import { cn } from "../../lib/utils";
 const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
@@ -138,28 +137,27 @@ function HeatmapGrid({
     ] })
   ] });
 }
-const ActivityHeatmap = React.forwardRef(
-  ({
-    as: Heading = "h2",
-    className,
-    data,
-    description,
-    endDate = /* @__PURE__ */ new Date(),
-    title = "Activity heatmap",
-    weeks = 12,
-    ...props
-  }, ref) => {
-    const normalizedEndDate = normalizeDate(endDate);
-    const gridData = getGridData(data, normalizedEndDate, weeks);
-    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__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("div", { className: "overflow-x-auto rounded-lg border bg-card p-4 shadow-sm", children: /* @__PURE__ */ jsx(HeatmapGrid, { gridData, weeks }) })
-    ] });
-  }
-);
+const ActivityHeatmap = ({
+  as: Heading = "h2",
+  className,
+  data,
+  description,
+  endDate = /* @__PURE__ */ new Date(),
+  ref,
+  title = "Activity heatmap",
+  weeks = 12,
+  ...props
+}) => {
+  const normalizedEndDate = normalizeDate(endDate);
+  const gridData = getGridData(data, normalizedEndDate, weeks);
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__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("div", { className: "overflow-x-auto rounded-lg border bg-card p-4 shadow-sm", children: /* @__PURE__ */ jsx(HeatmapGrid, { gridData, weeks }) })
+  ] });
+};
 ActivityHeatmap.displayName = "ActivityHeatmap";
 export {
   ActivityHeatmap

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

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Avatar, AvatarFallback } from "../avatar/avatar";
@@ -197,60 +197,59 @@ function ActivityLogBody({
     ] })
   ] });
 }
-const ActivityLog = forwardRef(
-  ({
-    className,
-    defaultPage = 1,
-    description,
-    emptyMessage = "No activity recorded yet.",
-    items,
-    onPageChange,
-    page,
-    pageSize = 5,
-    title = "Activity log",
-    ...props
-  }, ref) => {
-    const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
-    const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
-    const currentPage = Math.min(
-      Math.max(page ?? uncontrolledPage, 1),
-      totalPages
-    );
-    const pageNumbers = useMemo(
-      () => buildPageNumbers(currentPage, totalPages),
-      [currentPage, totalPages]
-    );
-    function handlePageChange(nextPage) {
-      if (page === void 0) {
-        setUncontrolledPage(nextPage);
-      }
-      onPageChange?.(nextPage);
+const ActivityLog = ({
+  className,
+  defaultPage = 1,
+  description,
+  emptyMessage = "No activity recorded yet.",
+  items,
+  onPageChange,
+  page,
+  pageSize = 5,
+  ref,
+  title = "Activity log",
+  ...props
+}) => {
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+  const currentPage = Math.min(
+    Math.max(page ?? uncontrolledPage, 1),
+    totalPages
+  );
+  const pageNumbers = useMemo(
+    () => buildPageNumbers(currentPage, totalPages),
+    [currentPage, totalPages]
+  );
+  function handlePageChange(nextPage) {
+    if (page === void 0) {
+      setUncontrolledPage(nextPage);
     }
-    return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
-      /* @__PURE__ */ jsx(
-        ActivityLogHeader,
-        {
-          currentPage,
-          description,
-          title,
-          totalPages
-        }
-      ),
-      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsx(
-        ActivityLogBody,
-        {
-          currentPage,
-          emptyMessage,
-          items,
-          onPageChange: handlePageChange,
-          pageNumbers,
-          pageSize,
-          totalPages
-        }
-      ) })
-    ] });
+    onPageChange?.(nextPage);
   }
-);
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
+    /* @__PURE__ */ jsx(
+      ActivityLogHeader,
+      {
+        currentPage,
+        description,
+        title,
+        totalPages
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsx(
+      ActivityLogBody,
+      {
+        currentPage,
+        emptyMessage,
+        items,
+        onPageChange: handlePageChange,
+        pageNumbers,
+        pageSize,
+        totalPages
+      }
+    ) })
+  ] });
+};
 ActivityLog.displayName = "ActivityLog";
 export {
   ActivityLog

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

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState
@@ -66,50 +65,51 @@ const ACTIVITY_LIVE_REGION_ROLE = {
   idle: "status",
   running: "log"
 };
-const AgentActivity = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      elapsed,
-      labels,
-      status = "idle",
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    return /* @__PURE__ */ jsx(AgentActivityLabelsContext.Provider, { value: resolvedLabels, children: /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-live": status === "running" ? "polite" : "off",
-        className: cn(
-          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
-          className
-        ),
-        "data-status": status,
-        ref,
-        role: ACTIVITY_LIVE_REGION_ROLE[status],
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold tracking-tight text-foreground", children: resolvedLabels.activity }),
-            elapsed ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-label": resolvedLabels.elapsed,
-                className: "text-xs font-mono text-muted-foreground",
-                children: elapsed
-              }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children })
-        ]
-      }
-    ) });
-  }
-);
+const AgentActivity = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    elapsed,
+    labels,
+    status = "idle",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  return /* @__PURE__ */ jsx(AgentActivityLabelsContext.Provider, { value: resolvedLabels, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-live": status === "running" ? "polite" : "off",
+      className: cn(
+        "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+        className
+      ),
+      "data-status": status,
+      ref,
+      role: ACTIVITY_LIVE_REGION_ROLE[status],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold tracking-tight text-foreground", children: resolvedLabels.activity }),
+          elapsed ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-label": resolvedLabels.elapsed,
+              className: "text-xs font-mono text-muted-foreground",
+              children: elapsed
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children })
+      ]
+    }
+  ) });
+};
 AgentActivity.displayName = "AgentActivity";
 function getDisplayName(value) {
   if (value !== null && (typeof value === "object" || typeof value === "function") && "displayName" in value && typeof value.displayName === "string") {
@@ -182,72 +182,74 @@ function StepRow({
     ) : null
   ] });
 }
-const AgentStep = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultOpen = true,
-      icon,
-      status,
-      ...rest
-    } = props;
-    const split = useMemo(() => splitChildren(children), [children]);
-    const palette = STATUS_CLASSES[status];
-    const hasDetails = split.body.length > 0;
-    const [open, setOpen] = useState(defaultOpen);
-    const detailsId = useId();
-    const labels = useContext(AgentActivityLabelsContext);
-    const handleToggle = useCallback(() => {
-      setOpen((value) => !value);
-    }, []);
-    const contextValue = useMemo(
-      () => ({ status }),
-      [status]
-    );
-    const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
-    return /* @__PURE__ */ jsx(
-      "li",
-      {
-        className: cn(
-          "rounded-xl border ring-1",
-          palette.rowClass,
-          palette.ringClass,
-          className
+const AgentStep = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    defaultOpen = true,
+    icon,
+    status,
+    ...rest
+  } = props;
+  const split = useMemo(() => splitChildren(children), [children]);
+  const palette = STATUS_CLASSES[status];
+  const hasDetails = split.body.length > 0;
+  const [open, setOpen] = useState(defaultOpen);
+  const detailsId = useId();
+  const labels = use(AgentActivityLabelsContext);
+  const handleToggle = useCallback(() => {
+    setOpen((value) => !value);
+  }, []);
+  const contextValue = useMemo(() => ({ status }), [status]);
+  const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cn(
+        "rounded-xl border ring-1",
+        palette.rowClass,
+        palette.ringClass,
+        className
+      ),
+      "data-status": status,
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(StepContext.Provider, { value: contextValue, children: [
+        /* @__PURE__ */ jsx(
+          StepRow,
+          {
+            detailsId,
+            hasDetails,
+            header: split.header,
+            icon: resolvedIcon,
+            iconClass: palette.iconClass,
+            labels,
+            onToggle: handleToggle,
+            open
+          }
         ),
-        "data-status": status,
-        ref,
-        ...rest,
-        children: /* @__PURE__ */ jsxs(StepContext.Provider, { value: contextValue, children: [
-          /* @__PURE__ */ jsx(
-            StepRow,
-            {
-              detailsId,
-              hasDetails,
-              header: split.header,
-              icon: resolvedIcon,
-              iconClass: palette.iconClass,
-              labels,
-              onToggle: handleToggle,
-              open
-            }
-          ),
-          hasDetails ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "border-t border-border/60 px-3 py-2 text-xs",
-              hidden: !open,
-              id: detailsId,
-              children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pl-8", children: split.body })
-            }
-          ) : null
-        ] })
-      }
-    );
-  }
-);
+        hasDetails ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "border-t border-border/60 px-3 py-2 text-xs",
+            hidden: !open,
+            id: detailsId,
+            children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pl-8", children: split.body })
+          }
+        ) : null
+      ] })
+    }
+  );
+};
 AgentStep.displayName = "AgentStep";
-const AgentStepTitle = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const AgentStepTitle = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "p",
   {
     className: cn(
@@ -257,18 +259,28 @@ const AgentStepTitle = forwardRef(({ className, ...rest }, ref) => /* @__PURE__
     ref,
     ...rest
   }
-));
+);
 AgentStepTitle.displayName = "AgentStepTitle";
-const AgentStepDuration = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const AgentStepDuration = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "span",
   {
     className: cn("font-mono text-xs text-muted-foreground", className),
     ref,
     ...rest
   }
-));
+);
 AgentStepDuration.displayName = "AgentStepDuration";
-const AgentStepProgress = forwardRef(({ className, label = "Step progress", value, ...rest }, ref) => {
+const AgentStepProgress = ({
+  className,
+  label = "Step progress",
+  ref,
+  value,
+  ...rest
+}) => {
   const clamped = Math.max(0, Math.min(100, value));
   return /* @__PURE__ */ jsx(
     "div",
@@ -290,21 +302,23 @@ const AgentStepProgress = forwardRef(({ className, label = "Step progress", valu
       )
     }
   );
-});
+};
 AgentStepProgress.displayName = "AgentStepProgress";
-const AgentStepDetail = forwardRef(
-  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("text-xs text-muted-foreground", className),
-      ref,
-      ...rest
-    }
-  )
+const AgentStepDetail = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("text-xs text-muted-foreground", className),
+    ref,
+    ...rest
+  }
 );
 AgentStepDetail.displayName = "AgentStepDetail";
 function useAgentStepStatus() {
-  return useContext(StepContext).status;
+  return use(StepContext).status;
 }
 export {
   AgentActivity,