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

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,6 +1,6 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.3.0",
+  "version": "0.4.0-canary.56bbaf0",
   "description": "React component library — 309 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",