@vllnt/ui 0.3.0-canary.f713c3c → 0.4.0-canary.56bbaf0

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/sidebar/sidebar.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMounted } from "../../lib/use-mounted";
@@ -94,6 +94,116 @@ function CollapsibleSection({
     )
   ] });
 }
+function FamilyList({
+  onOpen,
+  sections
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Components" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: sections.map((section) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "flex w-full items-center justify-between px-3 py-1.5 rounded-md text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+        onClick: () => {
+          onOpen(section.title ?? "");
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: section.title }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs", children: [
+            section.items.length,
+            /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" })
+          ] })
+        ]
+      },
+      section.title
+    )) })
+  ] });
+}
+function FamilyItems({
+  isMobile,
+  onBack,
+  onNavigate,
+  pathname,
+  section
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "flex w-full items-center gap-1.5 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors",
+        onClick: onBack,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3" }),
+          /* @__PURE__ */ jsx("span", { children: "All families" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 pb-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: section.title }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: section.items.length })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: section.items.map((item) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        "aria-current": pathname === item.href ? "page" : void 0,
+        className: cn(
+          "block px-3 py-1.5 rounded-md text-sm transition-colors",
+          pathname === item.href ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+        ),
+        href: item.href,
+        onClick: () => {
+          if (isMobile) {
+            onNavigate();
+          }
+        },
+        children: item.title
+      },
+      item.href
+    )) })
+  ] });
+}
+function FamilyNav({
+  isMobile,
+  onNavigate,
+  pathname,
+  sections
+}) {
+  const activeTitle = sections.find(
+    (section) => section.items.some((item) => item.href === pathname)
+  )?.title ?? null;
+  const [routeKey, setRouteKey] = useState(pathname);
+  const [openTitle, setOpenTitle] = useState(activeTitle);
+  if (routeKey !== pathname) {
+    setRouteKey(pathname);
+    setOpenTitle(activeTitle);
+  }
+  const openSection = openTitle === null ? null : sections.find((section) => section.title === openTitle) ?? null;
+  if (openSection) {
+    return /* @__PURE__ */ jsx(
+      FamilyItems,
+      {
+        isMobile,
+        onBack: () => {
+          setOpenTitle(null);
+        },
+        onNavigate,
+        pathname,
+        section: openSection
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FamilyList,
+    {
+      onOpen: (title) => {
+        setOpenTitle(title);
+      },
+      sections
+    }
+  );
+}
 function Sidebar({ sections }) {
   const pathname = usePathname();
   const { open, setOpen } = useSidebar();
@@ -104,6 +214,8 @@ function Sidebar({ sections }) {
     scrollContainerReference
   );
   const collapsed = mounted && !isMobile && !open;
+  const familySections = sections.filter((section) => section.family);
+  const otherSections = sections.filter((section) => !section.family);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isMobile && open ? /* @__PURE__ */ jsx(
       "div",
@@ -145,42 +257,55 @@ function Sidebar({ sections }) {
             {
               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(
-                  Link,
-                  {
-                    className: cn(
-                      section.title ? "block px-3 py-1.5 rounded-md text-sm transition-colors" : "flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors",
-                      pathname === item.href || item.href === "/" && pathname === "/" ? "bg-accent text-accent-foreground" : section.title ? "text-muted-foreground hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
-                      section.title && pathname === item.href && "font-medium"
-                    ),
-                    href: item.href,
-                    onClick: () => {
-                      if (isMobile) {
-                        setOpen(false);
-                      }
+              children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                otherSections.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(
+                    Link,
+                    {
+                      className: cn(
+                        section.title ? "block px-3 py-1.5 rounded-md text-sm transition-colors" : "flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                        pathname === item.href || item.href === "/" && pathname === "/" ? "bg-accent text-accent-foreground" : section.title ? "text-muted-foreground hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                        section.title && pathname === item.href && "font-medium"
+                      ),
+                      href: item.href,
+                      onClick: () => {
+                        if (isMobile) {
+                          setOpen(false);
+                        }
+                      },
+                      children: item.title
                     },
-                    children: item.title
-                  },
-                  item.href
-                )) });
-                return /* @__PURE__ */ jsx(
-                  "div",
+                    item.href
+                  )) });
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "space-y-1",
+                      children: section.title ? /* @__PURE__ */ jsx(
+                        CollapsibleSection,
+                        {
+                          collapsible: section.collapsible,
+                          defaultOpen: section.defaultOpen ?? true,
+                          title: section.title,
+                          children: sectionItems
+                        }
+                      ) : sectionItems
+                    },
+                    section.title || sectionIndex
+                  );
+                }),
+                familySections.length > 0 ? /* @__PURE__ */ jsx(
+                  FamilyNav,
                   {
-                    className: "space-y-1",
-                    children: section.title ? /* @__PURE__ */ jsx(
-                      CollapsibleSection,
-                      {
-                        collapsible: section.collapsible,
-                        defaultOpen: section.defaultOpen ?? true,
-                        title: section.title,
-                        children: sectionItems
-                      }
-                    ) : sectionItems
-                  },
-                  section.title || sectionIndex
-                );
-              }) })
+                    isMobile,
+                    onNavigate: () => {
+                      setOpen(false);
+                    },
+                    pathname,
+                    sections: familySections
+                  }
+                ) : null
+              ] })
             }
           )
         ] })

package/dist/index.d.ts

@@ -5049,6 +5049,7 @@ type SidebarItem = {
 type SidebarSection = {
     collapsible?: boolean;
     defaultOpen?: boolean;
+    family?: boolean;
     items: SidebarItem[];
     title?: string;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.3.0-canary.f713c3c",
-  "description": "React component library — 225 components built on Radix UI, Tailwind CSS, and CVA",
+  "version": "0.4.0-canary.56bbaf0",
+  "description": "React component library — 309 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",
   "homepage": "https://ui.vllnt.ai",