@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/x/nav-x.tsx

@@ -0,0 +1,3213 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, useCopyToClipboard, FileTree, FileTreeItem, FileTreeItemLabel, FileTreeDragLine, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, Popover, PopoverContent, PopoverTrigger, TreeView, TreeViewLabel, TreeViewNode, TreeViewTree, DSGroup, DSGroupLabel, DSMenu, DSMenuAction, DSMenuButton, DSMenuItem, DSMenuSub, DSMenuSubButton, DSMenuSubItem, DSMenuLink, useDS, DSGroupContent, DSMenuAnchor, DSContent, DSLeft } from "~/components/catalyst-ui";
+import { Folder, Minus, Plus, ChevronRight, Link, Share, Trash2, SquareTerminal, Bot, StarOff, Star, BookOpen, Settings, } from "@catalystsoftware/icons";
+import { Archive, ArrowUpRight, BarChart, Bell, Building, Building2, ChevronDown, Copy, FileText, Frame, HelpCircle, Home, Inbox, LifeBuoy, MessageSquare, MoreHorizontal, PieChart, Send, Trash, User, Map, File } from "lucide-react";
+import React, { useState, useEffect } from "react";
+
+/**
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ NavX ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* type NavXVariant = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ USAGE ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=1 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // An inset DS with secondary navigation
+* ```jsx
+* <NavX 
+*   variant={1} 
+*   data={{
+*     label: "Navigation",
+*       navMain: [
+*        {
+*          title: "Playground",
+*          url: "#",
+*          icon: SquareTerminal,
+*          isActive: true,
+*          items: [
+*            {
+*              title: "History",
+*              url: "#",
+*            },
+*            {
+*              title: "Starred",
+*              url: "#",
+*            },
+*            {
+*              title: "Settings",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Models",
+*          url: "#",
+*          icon: Bot,
+*          items: [
+*            {
+*              title: "Genesis",
+*              url: "#",
+*            },
+*            {
+*              title: "Explorer",
+*              url: "#",
+*            },
+*            {
+*              title: "Quantum",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Documentation",
+*          url: "#",
+*          icon: BookOpen,
+*          items: [
+*            {
+*              title: "Introduction",
+*              url: "#",
+*            },
+*            {
+*              title: "Get Started",
+*              url: "#",
+*            },
+*            {
+*              title: "Tutorials",
+*              url: "#",
+*            },
+*            {
+*              title: "Changelog",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Settings",
+*          url: "#",
+*          icon: Settings,
+*          items: [
+*            {
+*              title: "General",
+*              url: "#",
+*            },
+*            {
+*              title: "Team",
+*              url: "#",
+*            },
+*            {
+*              title: "Billing",
+*              url: "#",
+*            },
+*            {
+*              title: "Limits",
+*              url: "#",
+*            },
+*          ],
+*        },
+*      ],
+*      navSecondary: [
+*        {
+*          title: "Support",
+*          url: "#",
+*          icon: LifeBuoy,
+*        },
+*        {
+*          title: "Feedback",
+*          url: "#",
+*          icon: Send,
+*        },
+*      ],
+*      projects: [
+*        {
+*          name: "Design Engineering",
+*          url: "#",
+*          icon: Frame,
+*        },
+*        {
+*          name: "Sales & Marketing",
+*          url: "#",
+*          icon: PieChart,
+*        },
+*        {
+*          name: "Travel",
+*          url: "#",
+*          icon: Map,
+*        },
+*      ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=2 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS with submenus as dropdowns
+* ```jsx
+* <NavX 
+*   variant={2} 
+*   data={{
+*     items: [
+*       {
+*         title: "File",
+*         items: [
+*           { title: "New File", url: "#" },
+*           { title: "Open", url: "#" },
+*           // More items...
+*         ],
+*       },
+*       // More menu items...
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=3 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS that collapses to icons
+* ```jsx
+* <NavX 
+*   variant={3} 
+*   data={{
+*        navMain: [
+*        {
+*          title: "Playground",
+*          url: "#",
+*          icon: SquareTerminal,
+*          isActive: true,
+*          items: [
+*            {
+*              title: "History",
+*              url: "#",
+*            },
+*            {
+*              title: "Starred",
+*              url: "#",
+*            },
+*            {
+*              title: "Settings",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Models",
+*          url: "#",
+*          icon: Bot,
+*          items: [
+*            {
+*              title: "Genesis",
+*              url: "#",
+*            },
+*            {
+*              title: "Explorer",
+*              url: "#",
+*            },
+*            {
+*              title: "Quantum",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Documentation",
+*          url: "#",
+*          icon: BookOpen,
+*          items: [
+*            {
+*              title: "Introduction",
+*              url: "#",
+*            },
+*            {
+*              title: "Get Started",
+*              url: "#",
+*            },
+*            {
+*              title: "Tutorials",
+*              url: "#",
+*            },
+*            {
+*              title: "Changelog",
+*              url: "#",
+*            },
+*          ],
+*        },
+      *],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=4 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS in a popover
+* ```jsx
+* <NavX 
+*   variant={4} 
+*   data={{
+*     items: [
+*       { title: "Dashboard", url: "#", icon: Home, isActive: true },
+*       { title: "Analytics", url: "#", icon: BarChart },
+*       // More items...
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=5 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS with collapsible submenus
+* ```jsx
+* <NavX 
+*   variant={5} 
+*   deafultOpen={true}
+*   data={{
+*         navMain: [
+*        {
+*          title: "Playground",
+*          url: "#",
+*          icon: SquareTerminal,
+*          isActive: true,
+*          items: [
+*            {
+*              title: "History",
+*              url: "#",
+*            },
+*            {
+*              title: "Starred",
+*              url: "#",
+*            },
+*            {
+*              title: "Settings",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Models",
+*          url: "#",
+*          icon: Bot,
+*          items: [
+*            {
+*              title: "Genesis",
+*              url: "#",
+*            },
+*            {
+*              title: "Explorer",
+*              url: "#",
+*            },
+*            {
+*              title: "Quantum",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Documentation",
+*          url: "#",
+*          icon: BookOpen,
+*          items: [
+*            {
+*              title: "Introduction",
+*              url: "#",
+*            },
+*            {
+*              title: "Get Started",
+*              url: "#",
+*            },
+*            {
+*              title: "Tutorials",
+*              url: "#",
+*            },
+*            {
+*              title: "Changelog",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Settings",
+*          url: "#",
+*          icon: Settings,
+*          items: [
+*            {
+*              title: "General",
+*              url: "#",
+*            },
+*            {
+*              title: "Team",
+*              url: "#",
+*            },
+*            {
+*              title: "Billing",
+*              url: "#",
+*            },
+*            {
+*              title: "Limits",
+*              url: "#",
+*            },
+*          ],
+*        },
+*      ],
+*      navSecondary: [
+*        {
+*          title: "Support",
+*          url: "#",
+*          icon: LifeBuoy,
+*        },
+*        {
+*          title: "Feedback",
+*          url: "#",
+*          icon: Send,
+*        },
+*      ],
+*      projects: [
+*        {
+*          name: "Design Engineering",
+*          url: "#",
+*          icon: Frame,
+*        },
+*        {
+*          name: "Sales & Marketing",
+*          url: "#",
+*          icon: PieChart,
+*        },
+*        {
+*          name: "Travel",
+*          url: "#",
+*          icon: Map,
+*        },
+*      ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=6 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A simple DS with navigation grouped by section 
+* ```jsx
+* <NavX 
+*   variant={6} 
+*   data={{
+*     items: [
+*       {
+*         title: "Getting Started",
+*         items: [
+*           { title: "Introduction", url: "#", isActive: false },
+*           { title: "Installation", url: "#", isActive: true },
+*         ],
+*       },
+*       // More sections...
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=7 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS with collapsible sections
+* ```jsx
+* <NavX 
+*   variant={7} 
+*   data={{
+*      navMain: [
+*        {
+*          title: "Getting Started",
+*          url: "#",
+*          items: [
+*            {
+*              title: "Installation",
+*              url: "#",
+*            },
+*            {
+*              title: "Project Structure",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Building Your Application",
+*          url: "#",
+*          items: [
+*            {
+*              title: "Routing",
+*              url: "#",
+*            },
+*            {
+*              title: "Data Fetching",
+*              url: "#",
+*              isActive: true,
+*            },
+*            {
+*              title: "Rendering",
+*              url: "#",
+*            },
+*            {
+*              title: "Caching",
+*              url: "#",
+*            },
+*            {
+*              title: "Styling",
+*              url: "#",
+*            },
+*            {
+*              title: "Optimizing",
+*              url: "#",
+*            },
+*            {
+*              title: "Configuring",
+*              url: "#",
+*            },
+*            {
+*              title: "Testing",
+*              url: "#",
+*            },
+*            {
+*              title: "Authentication",
+*              url: "#",
+*            },
+*            {
+*              title: "Deploying",
+*              url: "#",
+*            },
+*            {
+*              title: "Upgrading",
+*              url: "#",
+*            },
+*            {
+*              title: "Examples",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "API Reference",
+*          url: "#",
+*          items: [
+*            {
+*              title: "Components",
+*              url: "#",
+*            },
+*            {
+*              title: "File Conventions",
+*              url: "#",
+*            },
+*            {
+*              title: "Functions",
+*              url: "#",
+*            },
+*            {
+*              title: "next.config.js Options",
+*              url: "#",
+*            },
+*            {
+*              title: "CLI",
+*              url: "#",
+*            },
+*            {
+*              title: "Edge Runtime",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Architecture",
+*          url: "#",
+*          items: [
+*            {
+*              title: "Accessibility",
+*              url: "#",
+*            },
+*            {
+*              title: "Fast Refresh",
+*              url: "#",
+*            },
+*            {
+*              title: "Next.js Compiler",
+*              url: "#",
+*            },
+*            {
+*              title: "Supported Browsers",
+*              url: "#",
+*            },
+*            {
+*              title: "Turbopack",
+*              url: "#",
+*            },
+*          ],
+*        },
+*        {
+*          title: "Community",
+*          url: "#",
+*          items: [
+*            {
+*              title: "Contribution Guide",
+*              url: "#",
+*            },
+*          ],
+*        },
+*      ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=8 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS with submenus
+* ```jsx
+* <NavX 
+*   variant={8} 
+*   data={{
+*     items: [
+*       {
+*         title: "Products",
+*         url: "#",
+*         items: [
+*           { title: "Electronics", url: "#", isActive: false },
+*           { title: "Clothing", url: "#", isActive: true },
+*           // More items...
+*         ],
+*       },
+*        {
+*          title: "Services",
+*          url: "#",
+*          items: [
+*            { title: "Consulting", url: "#", isActive: false },
+*            { title: "Support", url: "#", isActive: false },
+*          ],
+*        },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=9 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A floating DS with submenus
+* ```jsx
+* <NavX 
+*   variant={9} 
+*   data={{
+*     items: [
+*       {
+*         title: "Dashboard",
+*         url: "#",
+*         items: [
+*           { title: "Overview", url: "#", isActive: true },
+*           { title: "Reports", url: "#", isActive: false },
+*         ],
+*       },
+*       {
+*           title: "Users",
+*           url: "#",
+*           items: [
+*             { title: "All Users", url: "#", isActive: false },
+*             { title: "Add User", url: "#", isActive: false },
+*           ],
+*         },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=10 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // icopns only
+* ```jsx
+* <NavX 
+*   variant={10} 
+*   data={{
+*     items: [
+*       {
+*         title: "Inbox",
+*         icon: Inbox,
+*         onClick: () => handleItemClick("Inbox"),
+*         isActive: activeItem === "Inbox"
+*       },
+*       // More icon-only items...
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=11 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // emails
+* ```jsx
+* <NavX 
+*   variant={11} 
+*   data={{
+*     mails: [
+*       {
+*         name: "John Doe",
+*         email: "john@example.com",
+*         subject: "Meeting Tomorrow",
+*         teaser: "Hi, just confirming our meeting...",
+*         date: "10:30 AM",
+*       },
+*       {
+*          name: "Jane Smith",
+*          email: "jane@example.com",
+*          subject: "Project Update",
+*          teaser: "The latest updates on the project are ready for review...",
+*          date: "Yesterday",
+*        },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=12 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS with a collapsible file tree
+*     const variant12Example = {
+*      tree: [
+*        ["src", ["components", ["Button.tsx", "Card.tsx"]], "index.ts"],
+*        ["public", ["images", ["logo.png"]], "favicon.ico"],
+*        "package.json",
+*      ],
+*    };
+* ```jsx
+* <NavX 
+*   variant={12} 
+*   data={{
+*     label: "Project Files",
+*     treeData: [
+*       {
+*         id: "1",
+*         name: "src",
+*         isFolder: true,
+*         children: [
+*           { id: "2", name: "components", isFolder: true },
+*           // More children...
+*         ],
+*       },
+*       // More tree items...
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=13 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // A DS in a dialog - simple buttons foras  anav
+* ```jsx
+* <NavX 
+*   variant={13} 
+*   data={{
+*     nav: [
+*       { name: "Profile", icon: User },
+*       { name: "Messages & media", icon: MessageSquare },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=14 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+*  // table of contents
+* ```jsx
+* <NavX 
+*   variant={14} 
+*   data={{
+*     label: "Table of Contents",
+*     items: [
+*       {
+*         title: "Introduction",
+*         url: "#introduction",
+*         items: [
+*           { title: "Overview", url: "#overview", isActive: false },
+*           { title: "Features", url: "#features", isActive: true },
+*         ],
+*       },
+*       {
+*          title: "Getting Started",
+*          url: "#getting-started",
+*          items: [
+*            { title: "Installation", url: "#installation", isActive: false },
+*            { title: "Configuration", url: "#configuration", isActive: false },
+*          ],
+*        },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=15 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+*  // nav-fav
+* ```jsx
+* <NavX 
+*   variant={15} 
+*   data={{
+*     label: "Favorites",
+*     items: [
+*       { name: "Design System", emoji: "🎨", url: "#" },
+*       { name: "Components", emoji: "🧩", url: "#" },
+*     ],
+*   }}
+*   onRemove={(item) => console.log("Remove:", item)}
+*   onDelete={(item) => console.log("Delete:", item)}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=16 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // nav-projects
+* ```jsx
+* <NavX 
+*   variant={16} 
+*   data={{
+*     label: "Projects",
+*     items: [
+*       { name: "Design Engineering", url: "#", icon: Frame },
+*       { name: "Sales & Marketing", url: "#", icon: PieChart },
+*     ],
+*   }}
+*   onDelete={(item) => console.log("Delete:", item)}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=17 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // nav-actions
+* ```jsx
+* <NavX 
+*   variant={17} 
+*   items={[
+*     [
+*       { label: "Copy Link", icon: Link, onClick: () => {} },
+*       { label: "Duplicate", icon: Copy, onClick: () => {} },
+*     ],
+*     [
+*       { label: "Archive", icon: Archive, onClick: () => {} },
+*       { label: "Delete", icon: Trash, onClick: () => {} },
+*     ],
+*   ]}
+*   data={{ label: "Edit Contact" }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=18 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // nav-seconday
+* ```jsx
+* <NavX 
+*   variant={18} 
+*   data={{
+*     items: [
+*       { title: "Support", url: "#", icon: LifeBuoy },
+*       { title: "Feedback", url: "#", icon: Send },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=19 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // nav-tree-view
+* ```jsx
+* <NavX 
+*   variant={19} 
+*   data={{
+*     label: "Project Files",
+*     items: [
+*       {
+*         id: "1",
+*         name: "src",
+*         children: [
+*           { id: "2", name: "components" },
+*           { id: "3", name: "utils" },
+*         ],
+*       },
+*       {
+*          id: "4",
+*          name: "public",
+*          children: [{ id: "5", name: "images" }],
+*        },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=20 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // nav-workspaces
+* ```jsx
+* <NavX 
+*   variant={20} 
+*   data={{
+*     label: "Workspaces",
+*     items: [
+*       {
+*         name: "Personal",
+*         emoji: "👤",
+*         pages: [
+*           { name: "Notes", emoji: "📝" },
+*           { name: "Tasks", emoji: "✅" },
+*         ],
+*       },
+*       {
+*          name: "Work",
+*          emoji: "💼",
+*          pages: [
+*            { name: "Projects", emoji: "📁" },
+*            { name: "Meetings", emoji: "📅" },
+*          ],
+*        },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=21 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // navtreeview
+* ```jsx
+* <NavX 
+*   variant={21} 
+*   data={{
+*     label: "File Explorer",
+*     items: [
+*       {
+*         id: "1",
+*         name: "Documents",
+*         children: [
+*           { id: "2", name: "Resume.pdf" },
+*           { id: "3", name: "Cover Letter.docx" },
+*         ],
+*       },
+*     ],
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant-22 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // nav-fav
+* ```jsx
+* <NavX 
+*   variant={22} 
+*   value={{ name: "Acme Inc", logo: Building }}
+*   setValue={(team) => console.log("Selected:", team)}
+*   data={{
+*     teamsLabel: 'Teams',
+*     teams: [
+*       { name: "Acme Inc", logo: Building },
+*       { name: "Monsters Inc", logo: Building2 },
+*     ],
+*     onSelect: {
+*       onSelect: () => console.log('add team'),
+*       name: 'Add Team'
+*     }
+*   }}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ variant=23 ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* // tree
+* ```jsx
+* <NavX 
+*   variant={23} 
+*   data={{
+*     item: [
+*       "src",
+*       ["components", ["ui", "button.tsx", "card.tsx"], "layout.tsx"],
+*       "index.ts",
+*     ],
+*   }}
+* />
+* ```
+* 
+*/
+
+export function NavX({ items, data, onRemove, onDelete, value, setValue, variant = 5, deafultOpen = true, ...props }) {
+  const { isMobile } = useDS()
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    setIsOpen(true)
+  }, [])
+  // An inset DS with secondary navigation
+  if (variant === 1) {
+    const example = {
+      navMain: [
+        {
+          title: "Playground",
+          url: "#",
+          icon: SquareTerminal,
+          isActive: true,
+          items: [
+            {
+              title: "History",
+              url: "#",
+            },
+            {
+              title: "Starred",
+              url: "#",
+            },
+            {
+              title: "Settings",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Models",
+          url: "#",
+          icon: Bot,
+          items: [
+            {
+              title: "Genesis",
+              url: "#",
+            },
+            {
+              title: "Explorer",
+              url: "#",
+            },
+            {
+              title: "Quantum",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Documentation",
+          url: "#",
+          icon: BookOpen,
+          items: [
+            {
+              title: "Introduction",
+              url: "#",
+            },
+            {
+              title: "Get Started",
+              url: "#",
+            },
+            {
+              title: "Tutorials",
+              url: "#",
+            },
+            {
+              title: "Changelog",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Settings",
+          url: "#",
+          icon: Settings,
+          items: [
+            {
+              title: "General",
+              url: "#",
+            },
+            {
+              title: "Team",
+              url: "#",
+            },
+            {
+              title: "Billing",
+              url: "#",
+            },
+            {
+              title: "Limits",
+              url: "#",
+            },
+          ],
+        },
+      ],
+      navSecondary: [
+        {
+          title: "Support",
+          url: "#",
+          icon: LifeBuoy,
+        },
+        {
+          title: "Feedback",
+          url: "#",
+          icon: Send,
+        },
+      ],
+      projects: [
+        {
+          name: "Design Engineering",
+          url: "#",
+          icon: Frame,
+        },
+        {
+          name: "Sales & Marketing",
+          url: "#",
+          icon: PieChart,
+        },
+        {
+          name: "Travel",
+          url: "#",
+          icon: Map,
+        },
+      ],
+    }
+    return (
+      <DSGroup  {...props}>
+         {data?.label && (<DSGroupLabel>{data?.label}</DSGroupLabel>)}
+        <DSMenu>
+          {data?.items.map((item) => (
+            <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+              <DSMenuItem>
+                <DSMenuButton asChild tooltip={item.title}>
+                  <DSMenuLink to={item.url}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </DSMenuLink>
+                </DSMenuButton>
+                {item.items?.length ? (
+                  <>
+                    <CollapsibleTrigger asChild>
+                      <DSMenuAction className="data-[state=open]:rotate-90">
+                        <ChevronRight />
+                        <span className="sr-only">Toggle</span>
+                      </DSMenuAction>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <DSMenuSub>
+                        {item.items?.map((subItem) => (
+                          <DSMenuSubItem key={subItem.title}>
+                            <DSMenuSubButton asChild>
+                              <DSMenuLink to={subItem.url}>
+                                <span>{subItem.title}</span>
+                              </DSMenuLink>
+                            </DSMenuSubButton>
+                          </DSMenuSubItem>
+                        ))}
+                      </DSMenuSub>
+                    </CollapsibleContent>
+                  </>
+                ) : null}
+              </DSMenuItem>
+            </Collapsible>
+          ))}
+        </DSMenu>
+      </DSGroup>
+    )
+  }
+  // A DS with submenus as dropdowns
+  if (variant === 2) {
+    const variant2Example = {
+      items: [
+        {
+          title: "File",
+          items: [
+            { title: "New File", url: "#" },
+            { title: "Open", url: "#" },
+            { title: "Save", url: "#" },
+            { title: "Save As", url: "#" },
+          ],
+        },
+        {
+          title: "Edit",
+          items: [
+            { title: "Undo", url: "#" },
+            { title: "Redo", url: "#" },
+            { title: "Cut", url: "#" },
+            { title: "Copy", url: "#" },
+          ],
+        },
+      ],
+    };
+
+    return (
+      <DSGroup  {...props}>
+        <DSMenu>
+          {data?.items.map((item) => (
+            <DropdownMenu key={item.title}>
+              <DSMenuItem>
+                <DropdownMenuTrigger asChild>
+                  <DSMenuButton className="data-[state=open]:bg-DS-accent data-[state=open]:text-DS-accent-foreground">
+                    {item.title} <MoreHorizontal className="ml-auto" />
+                  </DSMenuButton>
+                </DropdownMenuTrigger>
+                {item.items?.length ? (
+                  <DropdownMenuContent
+                    side={isMobile ? "bottom" : "right"}
+                    align={isMobile ? "end" : "start"}
+                    className="min-w-56 rounded-lg"
+                  >
+                    {item.items.map((item) => (
+                      <DropdownMenuItem asChild key={item.title}>
+                        <DSMenuLink to={item.url}>{item.title}</DSMenuLink>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                ) : null}
+              </DSMenuItem>
+            </DropdownMenu>
+          ))}
+        </DSMenu>
+      </DSGroup>
+    )
+  }
+  // A DS that collapses to icons
+  if (variant === 3) {
+    const example = {
+      navMain: [
+        {
+          title: "Playground",
+          url: "#",
+          icon: SquareTerminal,
+          isActive: true,
+          items: [
+            {
+              title: "History",
+              url: "#",
+            },
+            {
+              title: "Starred",
+              url: "#",
+            },
+            {
+              title: "Settings",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Models",
+          url: "#",
+          icon: Bot,
+          items: [
+            {
+              title: "Genesis",
+              url: "#",
+            },
+            {
+              title: "Explorer",
+              url: "#",
+            },
+            {
+              title: "Quantum",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Documentation",
+          url: "#",
+          icon: BookOpen,
+          items: [
+            {
+              title: "Introduction",
+              url: "#",
+            },
+            {
+              title: "Get Started",
+              url: "#",
+            },
+            {
+              title: "Tutorials",
+              url: "#",
+            },
+            {
+              title: "Changelog",
+              url: "#",
+            },
+          ],
+        },
+      ],
+    }
+    return (
+      <DSGroup  {...props}>
+        {data?.label && (<DSGroupLabel>{data?.label}</DSGroupLabel>)}
+        <DSMenu>
+          {data?.items.map((item) => (
+            <Collapsible
+              key={item.title}
+              asChild
+              defaultOpen={item.isActive}
+              className="group/collapsible"
+            >
+              <DSMenuItem>
+                <CollapsibleTrigger asChild>
+                  <DSMenuButton tooltip={item.title}>
+                    {item.icon && <item.icon />}
+                    <span>{item.title}</span>
+                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </DSMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <DSMenuSub>
+                    {item.items?.map((subItem) => (
+                      <DSMenuSubItem key={subItem.title}>
+                        <DSMenuSubButton asChild>
+                          <DSMenuLink to={subItem.url}>
+                            <span>{subItem.title}</span>
+                          </DSMenuLink>
+                        </DSMenuSubButton>
+                      </DSMenuSubItem>
+                    ))}
+                  </DSMenuSub>
+                </CollapsibleContent>
+              </DSMenuItem>
+            </Collapsible>
+          ))}
+        </DSMenu>
+      </DSGroup>
+    )
+  }
+  // A DS in a popover
+  if (variant === 4) {
+    const variant4Example = {
+      items: [
+        { title: "Dashboard", url: "#", icon: Home, isActive: true },
+        { title: "Analytics", url: "#", icon: BarChart },
+        { title: "Settings", url: "#", icon: Settings },
+        { title: "Profile", url: "#", icon: User },
+      ],
+    };
+    return (
+      <DSMenu>
+        {data?.items.map((item) => (
+          <DSMenuItem key={item.title}>
+            <DSMenuButton asChild isActive={item.isActive}>
+              <DSMenuLink to={item.url}>
+                <item.icon />
+                <span>{item.title}</span>
+              </DSMenuLink>
+            </DSMenuButton>
+          </DSMenuItem>
+        ))}
+      </DSMenu>
+    )
+  }
+  // A DS with collapsible submenus
+  if (variant === 5) {
+    const example = {
+      navMain: [
+        {
+          title: "Playground",
+          url: "#",
+          icon: SquareTerminal,
+          isActive: true,
+          items: [
+            {
+              title: "History",
+              url: "#",
+            },
+            {
+              title: "Starred",
+              url: "#",
+            },
+            {
+              title: "Settings",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Models",
+          url: "#",
+          icon: Bot,
+          items: [
+            {
+              title: "Genesis",
+              url: "#",
+            },
+            {
+              title: "Explorer",
+              url: "#",
+            },
+            {
+              title: "Quantum",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Documentation",
+          url: "#",
+          icon: BookOpen,
+          items: [
+            {
+              title: "Introduction",
+              url: "#",
+            },
+            {
+              title: "Get Started",
+              url: "#",
+            },
+            {
+              title: "Tutorials",
+              url: "#",
+            },
+            {
+              title: "Changelog",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Settings",
+          url: "#",
+          icon: Settings,
+          items: [
+            {
+              title: "General",
+              url: "#",
+            },
+            {
+              title: "Team",
+              url: "#",
+            },
+            {
+              title: "Billing",
+              url: "#",
+            },
+            {
+              title: "Limits",
+              url: "#",
+            },
+          ],
+        },
+      ],
+      navSecondary: [
+        {
+          title: "Support",
+          url: "#",
+          icon: LifeBuoy,
+        },
+        {
+          title: "Feedback",
+          url: "#",
+          icon: Send,
+        },
+      ],
+      projects: [
+        {
+          name: "Design Engineering",
+          url: "#",
+          icon: Frame,
+        },
+        {
+          name: "Sales & Marketing",
+          url: "#",
+          icon: PieChart,
+        },
+        {
+          name: "Travel",
+          url: "#",
+          icon: Map,
+        },
+      ],
+    }
+    return (
+      <DSGroup  {...props}>
+        <DSMenu>
+          {data?.items.map((item, index) => (
+            <Collapsible
+              key={item.title}
+              defaultOpen={deafultOpen}
+              className="group/collapsible"
+            >
+              <DSMenuItem>
+                <CollapsibleTrigger asChild>
+                  <DSMenuButton>
+                    {item.title}{" "}
+                    <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                    <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                  </DSMenuButton>
+                </CollapsibleTrigger>
+                {item.items?.length ? (
+                  <CollapsibleContent>
+                    <DSMenuSub>
+                      {item.items.map((item) => (
+                        <DSMenuSubItem key={item.title}>
+                          <DSMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <DSMenuLink to={item.url}>{item.title}</DSMenuLink>
+                          </DSMenuSubButton>
+                        </DSMenuSubItem>
+                      ))}
+                    </DSMenuSub>
+                  </CollapsibleContent>
+                ) : null}
+              </DSMenuItem>
+            </Collapsible>
+          ))}
+        </DSMenu>
+      </DSGroup>
+    )
+  }
+  // A simple DS with navigation grouped by section 
+  if (variant === 6) {
+    const variant6Example = {
+      items: [
+        {
+          title: "Getting Started",
+          items: [
+            { title: "Introduction", url: "#", isActive: false },
+            { title: "Installation", url: "#", isActive: true },
+            { title: "Quick Start", url: "#", isActive: false },
+          ],
+        },
+        {
+          title: "Components",
+          items: [
+            { title: "Buttons", url: "#", isActive: false },
+            { title: "Forms", url: "#", isActive: false },
+            { title: "Tables", url: "#", isActive: false },
+          ],
+        },
+      ],
+    };
+    return (
+      <>
+        {data?.items.map((item) => (
+          <DSGroup key={item.title}>
+            <DSGroupLabel>{item.title}</DSGroupLabel>
+            <DSGroupContent>
+              <DSMenu>
+                {item.items.map((item) => (
+                  <DSMenuItem key={item.title}>
+                    <DSMenuButton asChild isActive={item.isActive}>
+                      <DSMenuLink to={item.url}>{item.title}</DSMenuLink>
+                    </DSMenuButton>
+                  </DSMenuItem>
+                ))}
+              </DSMenu>
+            </DSGroupContent>
+          </DSGroup>
+        ))}
+      </>
+    )
+  }
+  // A DS with collapsible sections
+  if (variant === 7) {
+    const example = {
+      navMain: [
+        {
+          title: "Getting Started",
+          url: "#",
+          items: [
+            {
+              title: "Installation",
+              url: "#",
+            },
+            {
+              title: "Project Structure",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Building Your Application",
+          url: "#",
+          items: [
+            {
+              title: "Routing",
+              url: "#",
+            },
+            {
+              title: "Data Fetching",
+              url: "#",
+              isActive: true,
+            },
+            {
+              title: "Rendering",
+              url: "#",
+            },
+            {
+              title: "Caching",
+              url: "#",
+            },
+            {
+              title: "Styling",
+              url: "#",
+            },
+            {
+              title: "Optimizing",
+              url: "#",
+            },
+            {
+              title: "Configuring",
+              url: "#",
+            },
+            {
+              title: "Testing",
+              url: "#",
+            },
+            {
+              title: "Authentication",
+              url: "#",
+            },
+            {
+              title: "Deploying",
+              url: "#",
+            },
+            {
+              title: "Upgrading",
+              url: "#",
+            },
+            {
+              title: "Examples",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "API Reference",
+          url: "#",
+          items: [
+            {
+              title: "Components",
+              url: "#",
+            },
+            {
+              title: "File Conventions",
+              url: "#",
+            },
+            {
+              title: "Functions",
+              url: "#",
+            },
+            {
+              title: "next.config.js Options",
+              url: "#",
+            },
+            {
+              title: "CLI",
+              url: "#",
+            },
+            {
+              title: "Edge Runtime",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Architecture",
+          url: "#",
+          items: [
+            {
+              title: "Accessibility",
+              url: "#",
+            },
+            {
+              title: "Fast Refresh",
+              url: "#",
+            },
+            {
+              title: "Next.js Compiler",
+              url: "#",
+            },
+            {
+              title: "Supported Browsers",
+              url: "#",
+            },
+            {
+              title: "Turbopack",
+              url: "#",
+            },
+          ],
+        },
+        {
+          title: "Community",
+          url: "#",
+          items: [
+            {
+              title: "Contribution Guide",
+              url: "#",
+            },
+          ],
+        },
+      ],
+    }
+    return (
+      <>
+        {data?.items.map((item) => (
+          <Collapsible
+            key={item.title}
+            title={item.title}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <DSGroup  {...props}>
+              <DSGroupLabel
+                asChild
+                className="group/label text-DS-foreground hover:bg-DS-accent hover:text-DS-accent-foreground text-sm"
+              >
+                <CollapsibleTrigger>
+                  {item.title}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </DSGroupLabel>
+              <CollapsibleContent>
+                <DSGroupContent>
+                  <DSMenu>
+                    {item.items.map((item) => (
+                      <DSMenuItem key={item.title}>
+                        <DSMenuButton asChild isActive={item.isActive}>
+                          <DSMenuLink to={item.url}>{item.title}</DSMenuLink>
+                        </DSMenuButton>
+                      </DSMenuItem>
+                    ))}
+                  </DSMenu>
+                </DSGroupContent>
+              </CollapsibleContent>
+            </DSGroup>
+          </Collapsible>
+        ))}
+      </>
+    )
+  }
+  // A DS with submenus
+  if (variant === 8) {
+    const variant8Example = {
+      items: [
+        {
+          title: "Products",
+          url: "#",
+          items: [
+            { title: "Electronics", url: "#", isActive: false },
+            { title: "Clothing", url: "#", isActive: true },
+            { title: "Books", url: "#", isActive: false },
+          ],
+        },
+        {
+          title: "Services",
+          url: "#",
+          items: [
+            { title: "Consulting", url: "#", isActive: false },
+            { title: "Support", url: "#", isActive: false },
+          ],
+        },
+      ],
+    };
+    return (
+      <>
+        <DSGroup  {...props}>
+          <DSMenu>
+            {data?.items.map((item) => (
+              <DSMenuItem key={item.title}>
+                <DSMenuButton asChild>
+                  <DSMenuLink to={item.url} className="font-medium">
+                    {item.title}
+                  </DSMenuLink>
+                </DSMenuButton>
+                {item.items?.length ? (
+                  <DSMenuSub>
+                    {item.items.map((item) => (
+                      <DSMenuSubItem key={item.title}>
+                        <DSMenuSubButton asChild isActive={item.isActive}>
+                          <DSMenuLink to={item.url}>{item.title}</DSMenuLink>
+                        </DSMenuSubButton>
+                      </DSMenuSubItem>
+                    ))}
+                  </DSMenuSub>
+                ) : null}
+              </DSMenuItem>
+            ))}
+          </DSMenu>
+        </DSGroup>
+      </>
+    )
+  }
+  // A floating DS with submenus
+  if (variant === 9) {
+    const variant9Example = {
+      items: [
+        {
+          title: "Dashboard",
+          url: "#",
+          items: [
+            { title: "Overview", url: "#", isActive: true },
+            { title: "Reports", url: "#", isActive: false },
+          ],
+        },
+        {
+          title: "Users",
+          url: "#",
+          items: [
+            { title: "All Users", url: "#", isActive: false },
+            { title: "Add User", url: "#", isActive: false },
+          ],
+        },
+      ],
+    };
+    return (
+      <>
+        <DSGroup  {...props}>
+          <DSMenu className="gap-2">
+            {data?.items.map((item) => (
+              <DSMenuItem key={item.title}>
+                <DSMenuButton asChild>
+                  <DSMenuLink to={item.url} className="font-medium">
+                    {item.title}
+                  </DSMenuLink>
+                </DSMenuButton>
+                {item.items?.length ? (
+                  <DSMenuSub className="ml-0 border-l-0 px-1.5">
+                    {item.items.map((item) => (
+                      <DSMenuSubItem key={item.title}>
+                        <DSMenuSubButton asChild isActive={item.isActive}>
+                          <DSMenuLink to={item.url}>{item.title}</DSMenuLink>
+                        </DSMenuSubButton>
+                      </DSMenuSubItem>
+                    ))}
+                  </DSMenuSub>
+                ) : null}
+              </DSMenuItem>
+            ))}
+          </DSMenu>
+        </DSGroup>
+      </>
+    )
+  }
+  // icopns only
+  if (variant === 10) {
+    const variant10Example = {
+      items: [
+        { title: "Inbox", icon: Inbox },
+        { title: "Drafts", icon: FileText },
+        { title: "Sent", icon: Send },
+        { title: "Trash", icon: Trash },
+      ],
+    };
+    return (
+      <>
+        <DSGroup  {...props}>
+          <DSGroupContent className="px-1.5 md:px-0">
+            <DSMenu>
+              {data.items.map((item) => (
+                <DSMenuItem key={item.title}>
+                  <DSMenuButton
+                    tooltip={{
+                      children: item.title,
+                      hidden: false,
+                    }}
+                    onClick={() => {
+                      setActiveItem(item)
+                      const mail = data.mails.sort(() => Math.random() - 0.5)
+                      setMails(
+                        mail.slice(
+                          0,
+                          Math.max(5, Math.floor(Math.random() * 10) + 1)
+                        )
+                      )
+                      setOpen(true)
+                    }}
+                    isActive={activeItem?.title === item.title}
+                    className="px-2.5 md:px-2"
+                  >
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </DSMenuButton>
+                </DSMenuItem>
+              ))}
+            </DSMenu>
+          </DSGroupContent>
+        </DSGroup>
+      </>
+    )
+  }
+  // emails
+  if (variant === 11) {
+    const variant11Example = {
+      mails: [
+        {
+          name: "John Doe",
+          email: "john@example.com",
+          subject: "Meeting Tomorrow",
+          teaser: "Hi, just confirming our meeting tomorrow at 10am...",
+          date: "10:30 AM",
+        },
+        {
+          name: "Jane Smith",
+          email: "jane@example.com",
+          subject: "Project Update",
+          teaser: "The latest updates on the project are ready for review...",
+          date: "Yesterday",
+        },
+      ],
+    };
+    return (
+      <>
+        <DSGroup className="px-0">
+          <DSGroupContent>
+            {data.mails.map((mail) => (
+              <DSMenuLink
+                to="#"
+                key={mail.email}
+                className="hover:bg-DS-accent hover:text-DS-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
+              >
+                <div className="flex w-full items-center gap-2">
+                  <span>{mail.name}</span>{" "}
+                  <span className="ml-auto text-xs">{mail.date}</span>
+                </div>
+                <span className="font-medium">{mail.subject}</span>
+                <span className="line-clamp-2 w-[260px] text-xs whitespace-break-spaces">
+                  {mail.teaser}
+                </span>
+              </DSMenuLink>
+            ))}
+          </DSGroupContent>
+        </DSGroup>
+      </>
+    )
+  }
+  // A DS with a collapsible file tree
+  if (variant === 12) {
+    const variant12Example = {
+      tree: [
+        ["src", ["components", ["Button.tsx", "Card.tsx"]], "index.ts"],
+        ["public", ["images", ["logo.png"]], "favicon.ico"],
+        "package.json",
+      ],
+    };
+
+    // Convert the nested array structure to a tree that FileTree can use
+    // You'll need to adapt this based on how your tree data is structured
+    const buildTreeData = (items) => {
+      // This is a simplified conversion - you'll need to adjust based on your actual tree structure
+      return items.map((item, index) => ({
+        id: `item-${index}`,
+        name: Array.isArray(item) ? item[0] : item,
+        children: Array.isArray(item) && item.length > 1
+          ? buildTreeData(item.slice(1))
+          : undefined,
+        isFolder: Array.isArray(item),
+      }));
+    };
+
+    const treeData = data ? buildTreeData(data.tree || []) : [];
+
+    return (
+      <DSGroup {...props}>
+        {data?.label && (<DSGroupLabel>{data?.label}</DSGroupLabel>)}
+        <DSGroupContent>
+          <FileTree>
+            {treeData.map((item) => (
+              <FileTreeItem key={item.id} item={item}>
+                <FileTreeItemLabel item={item}>
+                  {item.isFolder ? <Folder className="size-4" /> : <FileText className="size-4" />}
+                </FileTreeItemLabel>
+                {item.children && (
+                  <FileTree>
+                    {item.children.map((child) => (
+                      <FileTreeItem key={child.id} item={child}>
+                        <FileTreeItemLabel item={child}>
+                          {child.isFolder ? <Folder className="size-4" /> : <FileText className="size-4" />}
+                        </FileTreeItemLabel>
+                      </FileTreeItem>
+                    ))}
+                  </FileTree>
+                )}
+              </FileTreeItem>
+            ))}
+          </FileTree>
+        </DSGroupContent>
+      </DSGroup>
+    );
+  }
+  // A DS in a dialog - simple buttons foras  anav
+  if (variant === 13) {
+    const variant13Example = {
+      data: {
+        nav: [
+          { name: "Profile", icon: User },
+          { name: "Messages & media", icon: MessageSquare },
+          { name: "Notifications", icon: Bell },
+          { name: "Security", icon: Lock },
+        ],
+      },
+    };
+    return (
+      <>
+        <DSGroup  {...props}>
+          <DSGroupContent>
+            <DSMenu>
+              {data.nav.map((item) => (
+                <DSMenuItem key={item.name}>
+                  <DSMenuButton
+                    asChild
+                    isActive={item.name === "Messages & media"}
+                  >
+                    <DSMenuLink to="#">
+                      <item.icon />
+                      <span>{item.name}</span>
+                    </DSMenuLink>
+                  </DSMenuButton>
+                </DSMenuItem>
+              ))}
+            </DSMenu>
+          </DSGroupContent>
+        </DSGroup>
+      </>
+    )
+  }
+  // table of contents
+  if (variant === 14) {
+    const variant14Example = {
+      items: [
+        {
+          title: "Introduction",
+          url: "#introduction",
+          items: [
+            { title: "Overview", url: "#overview", isActive: false },
+            { title: "Features", url: "#features", isActive: true },
+          ],
+        },
+        {
+          title: "Getting Started",
+          url: "#getting-started",
+          items: [
+            { title: "Installation", url: "#installation", isActive: false },
+            { title: "Configuration", url: "#configuration", isActive: false },
+          ],
+        },
+      ],
+    };
+
+    return (
+      <>
+        <DSGroup  {...props}>
+          {data?.label && (<DSGroupLabel>{data?.label}</DSGroupLabel>)}
+          <DSGroupContent>
+            <DSMenu>
+              {data?.items.map((item) => (
+                <DSMenuItem key={item.title}>
+                  <DSMenuButton asChild>
+                    <DSMenuLink to={item.url} className="font-medium">
+                      {item.title}
+                    </DSMenuLink>
+                  </DSMenuButton>
+                  {item.items?.length ? (
+                    <DSMenuSub>
+                      {item.items.map((item) => (
+                        <DSMenuSubItem key={item.title}>
+                          <DSMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <DSMenuLink to={item.url}>{item.title}</DSMenuLink>
+                          </DSMenuSubButton>
+                        </DSMenuSubItem>
+                      ))}
+                    </DSMenuSub>
+                  ) : null}
+                </DSMenuItem>
+              ))}
+            </DSMenu>
+          </DSGroupContent>
+        </DSGroup>
+      </>
+    )
+  }
+  // nav-fav
+  if (variant === 15) {
+    const variant15Example = {
+      label: "Favorites",
+      items: [
+        { name: "Design System", emoji: "🎨", url: "#" },
+        { name: "Components", emoji: "🧩", url: "#" },
+        { name: "Documentation", emoji: "📚", url: "#" },
+      ],
+      onRemove: (item) => console.log("Remove:", item),
+      onDelete: (item) => console.log("Delete:", item),
+    };
+
+    return (
+      <>
+        <DSGroup className="group-data-[collapsible=icon]:hidden" {...props}>
+          {data?.label && (<DSGroupLabel>{data?.label}</DSGroupLabel>)}
+          <DSMenu>
+            {data?.items.map((item) => (
+              <DSMenuItem key={item.name}>
+                <DSMenuButton asChild>
+                  <DSMenuLink to={item.url} title={item.name}>
+                    <span>{item.emoji}</span>
+                    <span>{item.name}</span>
+                  </DSMenuLink>
+                </DSMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <DSMenuAction showOnHover>
+                      <MoreHorizontal />
+                      <span className="sr-only">More</span>
+                    </DSMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-56 rounded-lg"
+                    side={isMobile ? "bottom" : "right"}
+                    align={isMobile ? "end" : "start"}
+                  >
+                    <DropdownMenuItem onSelect={() => onRemove(item)}>
+                      <StarOff className="text-muted-foreground" />
+                      <span>Remove</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onSelect={() => copyToClipboard(item.url)}>
+                      <Link className="text-muted-foreground" />
+                      <span>Copy Link</span>
+                    </DropdownMenuItem>
+                    <DSMenuAnchor to={item.url}>
+                      <DropdownMenuItem>
+                        <DSMenuLinkrrowUpRight className="text-muted-foreground" />
+                        <span>Open in New Tab</span>
+                      </DropdownMenuItem>
+                    </DSMenuAnchor>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onSelect={() => onDelete(item)}>
+                      <Trash2 className="text-muted-foreground" />
+                      <span>Delete</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </DSMenuItem>
+            ))}
+          </DSMenu>
+        </DSGroup>
+      </>
+    )
+  }
+  // nav-projects
+  if (variant === 16) {
+    const variant16Example = {
+      label: "Projects",
+      items: [
+        { name: "Design Engineering", url: "#", icon: Frame },
+        { name: "Sales & Marketing", url: "#", icon: PieChart },
+        { name: "Travel", url: "#", icon: Map },
+      ],
+      onDelete: (item) => console.log("Delete:", item),
+    };
+    return (
+      <>
+        <DSGroup className="group-data-[collapsible=icon]:hidden" {...props} >
+          {data?.label && (<DSGroupLabel>{data?.label}</DSGroupLabel>)}
+          <DSMenu>
+            {data?.items.map((item) => (
+              <DSMenuItem key={item.name}>
+                <DSMenuButton asChild>
+                  <DSMenuLink to={item.url}>
+                    <item.icon />
+                    <span>{item.name}</span>
+                  </DSMenuLink>
+                </DSMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <DSMenuAction showOnHover>
+                      <MoreHorizontal />
+                      <span className="sr-only">More</span>
+                    </DSMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-48"
+                    side={isMobile ? "bottom" : "right"}
+                    align={isMobile ? "end" : "start"}
+                  >
+                    <DSMenuLink to={item.url}>
+                      <DropdownMenuItem>
+                        <Folder className="text-muted-foreground" />
+                        <span>View</span>
+                      </DropdownMenuItem>
+                    </DSMenuLink>
+                    <DropdownMenuItem onSelect={() => copyToClipboard(item.url)}>
+                      <Share className="text-muted-foreground" />
+                      <span>Share</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onSelect={() => onDelete(item)}>
+                      <Trash2 className="text-muted-foreground" />
+                      <span>Delete</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </DSMenuItem>
+            ))}
+          </DSMenu>
+        </DSGroup>
+      </>
+    )
+  }
+  // nav-actions
+  if (variant === 17) {
+    const variant17Example = {
+      label: "Edit Contact",
+      items: [
+        [
+          { label: "Copy Link", icon: Link, onClick: (item) => console.log(item) },
+          { label: "Duplicate", icon: Copy, onClick: (item) => console.log(item) },
+        ],
+        [
+          { label: "Archive", icon: Archive, onClick: (item) => console.log(item) },
+          { label: "Delete", icon: Trash, onClick: (item) => console.log(item) },
+        ],
+      ],
+    };
+    return (
+      <>
+        <div className="flex items-center gap-2 text-sm">
+
+          <div className="text-muted-foreground hidden font-medium md:inline-block">
+            {data?.label}
+          </div>
+          <Button variant="ghost" size="icon" className="h-7 w-7">
+            <Star />
+          </Button>
+          <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="data-[state=open]:bg-accent h-7 w-7"
+              >
+                <MoreHorizontal />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-56 overflow-hidden rounded-lg p-0"
+              align="end"
+            >
+              <DSLeft collapsible="none" className="bg-transparent">
+                <DSContent>
+                  {items.map((group, index) => (
+                    <DSGroup key={index} className="border-b last:border-none">
+                      <DSGroupContent className="gap-0">
+                        <DSMenu>
+                          {group.map((item, index) => (
+                            <DSMenuItem key={index}>
+                              <DSMenuButton onClick={() => item.onClick(item)}>
+                                <item.icon /> <span>{item.label}</span>
+                              </DSMenuButton>
+                            </DSMenuItem>
+                          ))}
+                        </DSMenu>
+                      </DSGroupContent>
+                    </DSGroup>
+                  ))}
+                </DSContent>
+              </DSLeft>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </>
+    )
+  }
+  // nav-seconday
+  if (variant === 18) {
+    const variant18Example = {
+      items: [
+        { title: "Support", url: "#", icon: LifeBuoy },
+        { title: "Feedback", url: "#", icon: Send },
+        { title: "Help", url: "#", icon: HelpCircle },
+      ],
+    };
+    return (
+      <>
+        <DSGroup {...props}>
+          <DSGroupContent>
+            <DSMenu>
+              {data?.items.map((item) => (
+                <DSMenuItem key={item.title}>
+                  <DSMenuButton asChild size="sm">
+                    <DSMenuAnchor to={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </DSMenuAnchor>
+                  </DSMenuButton>
+                </DSMenuItem>
+              ))}
+            </DSMenu>
+          </DSGroupContent>
+        </DSGroup>
+      </>
+    )
+  }
+  // nav-tree-view
+  if (variant === 19) {
+    const variant19Example = {
+      label: "Project Files",
+      items: [
+        {
+          id: "1",
+          name: "src",
+          children: [
+            { id: "2", name: "components" },
+            { id: "3", name: "utils" },
+          ],
+        },
+        {
+          id: "4",
+          name: "public",
+          children: [{ id: "5", name: "images" }],
+        },
+      ],
+    };
+    return (
+      <>
+        <DSGroup>
+          <DSMenu>
+            <TreeView>
+              <TreeViewLabel>{label}</TreeViewLabel>
+              <TreeViewTree>
+                {data?.items?.map((item) => (
+                  <TreeViewNode key={item.id} node={item} />
+                ))}
+              </TreeViewTree>
+            </TreeView>
+          </DSMenu>
+        </DSGroup>
+      </>
+    )
+  }
+  // nav-workspaces
+  if (variant === 20) {
+    const variant20Example = {
+      label: "Workspaces",
+      items: [
+        {
+          name: "Personal",
+          emoji: "👤",
+          pages: [
+            { name: "Notes", emoji: "📝" },
+            { name: "Tasks", emoji: "✅" },
+          ],
+        },
+        {
+          name: "Work",
+          emoji: "💼",
+          pages: [
+            { name: "Projects", emoji: "📁" },
+            { name: "Meetings", emoji: "📅" },
+          ],
+        },
+      ],
+    };
+    return (
+      <>
+        <DSGroup>
+          {data?.label && (<DSGroupLabel>{data?.label}</DSGroupLabel>)}
+          <DSGroupContent>
+            <DSMenu>
+              {data?.items.map((workspace) => (
+                <Collapsible key={workspace.name}>
+                  <DSMenuItem>
+                    <DSMenuButton asChild>
+                      <DSMenuAnchor to="#">
+                        <span>{workspace.emoji}</span>
+                        <span>{workspace.name}</span>
+                      </DSMenuAnchor>
+                    </DSMenuButton>
+                    <CollapsibleTrigger asChild>
+                      <DSMenuAction
+                        className="bg-DS-accent text-DS-accent-foreground left-2 data-[state=open]:rotate-90"
+                        showOnHover
+                      >
+                        <ChevronRight />
+                      </DSMenuAction>
+                    </CollapsibleTrigger>
+                    <DSMenuAction showOnHover>
+                      <Plus />
+                    </DSMenuAction>
+                    <CollapsibleContent>
+                      <DSMenuSub>
+                        {workspace.pages.map((page) => (
+                          <DSMenuSubItem key={page.name}>
+                            <DSMenuSubButton >
+                              <DSMenuAnchor to="#">
+                                <span>{page.emoji}</span>
+                                <span>{page.name}</span>
+                              </DSMenuAnchor>
+                            </DSMenuSubButton>
+                          </DSMenuSubItem>
+                        ))}
+                      </DSMenuSub>
+                    </CollapsibleContent>
+                  </DSMenuItem>
+                </Collapsible>
+              ))}
+            </DSMenu>
+          </DSGroupContent>
+        </DSGroup>
+      </>
+    )
+  }
+  // navtreeview
+  if (variant === 21) {
+    const variant21Example = {
+      label: "File Explorer",
+      items: [
+        {
+          id: "1",
+          name: "Documents",
+          children: [
+            { id: "2", name: "Resume.pdf" },
+            { id: "3", name: "Cover Letter.docx" },
+          ],
+        },
+      ],
+    };
+    return (
+      <>
+        <DSGroup>
+          <DSMenu>
+            <TreeView>
+              <TreeViewLabel>{data.label}</TreeViewLabel>
+              <TreeViewTree>
+                {data?.items.map((item) => (
+                  <TreeViewNode key={item.id} node={item} />
+                ))}
+              </TreeViewTree>
+            </TreeView>
+          </DSMenu>
+        </DSGroup>
+      </>
+    )
+  }
+  // nav-fav
+  if (variant === 22) {
+    if (!value) { return null }
+    const variant22Example = {
+      value: {
+        name: "Acme Inc",
+        logo: Building,
+      },
+      setValue: (team) => console.log("Selected:", team),
+      teamsLabel: 'Teams',
+      teams: [
+        { name: "Acme Inc", logo: Building },
+        { name: "Monsters Inc", logo: Building2 },
+        { name: "Evil Corp", logo: Building },
+      ],
+      onSelect: {
+        onSelect: () => console.log('add team'),
+        name: 'Add Team'
+      }
+    };
+    return (
+      <>
+        <DSMenu>
+          <DSMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <DSMenuButton className="w-fit px-1.5">
+                  <div className="bg-DS-primary text-DS-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+                    <value.logo className="size-3" />
+                  </div>
+                  <span className="truncate font-medium">{value.name}</span>
+                  <ChevronDown className="opacity-50" />
+                </DSMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-64 rounded-lg"
+                align="start"
+                side="bottom"
+                sideOffset={4}
+              >
+                {data?.teamsLabel && (
+                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                    {items.teamsLabel}
+                  </DropdownMenuLabel>
+                )}
+                {data?.teams.map((team, index) => (
+                  <DropdownMenuItem
+                    key={team.name}
+                    onClick={() => setValue(team)}
+                    className="gap-2 p-2"
+                  >
+                    <div className="flex size-6 items-center justify-center rounded-xs border">
+                      <team.logo className="size-4 shrink-0" />
+                    </div>
+                    {team.name}
+                    <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="gap-2 p-2" onClick={data.onSelect.onSelect}>
+                  <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+                    <Plus className="size-4" />
+                  </div>
+                  <div className="text-muted-foreground font-medium">{data.onSelect.name}</div>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </DSMenuItem>
+        </DSMenu>
+      </>
+    )
+  }
+  // tree
+  if (variant === 23) {
+    const [name, ...items] = Array.isArray(item) ? item : [item];
+
+    if (!items.length) {
+      return (
+        <DSMenuButton
+          isActive={name === "button.tsx"}
+          className="data-[active=true]:bg-transparent"
+        >
+          <File />
+          {name}
+        </DSMenuButton>
+      );
+    }
+    const variant23Example = {
+      name: 'File Tree',
+      item: [
+        "src",
+        ["components", ["ui", "button.tsx", "card.tsx"], "layout.tsx"],
+        "index.ts",
+      ],
+    };
+    return (
+      <>
+        <DSMenuItem>
+          <Collapsible
+            className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+            defaultOpen={name === "components" || name === "ui"}
+          >
+            <CollapsibleTrigger asChild>
+              <DSMenuButton>
+                <ChevronRight className="transition-transform" />
+                <Folder />
+                {name}
+              </DSMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <DSMenuSub>
+                {items.map((subItem, index) => (
+                  <Tree key={index} item={subItem} />
+                ))}
+              </DSMenuSub>
+            </CollapsibleContent>
+          </Collapsible>
+        </DSMenuItem>
+      </>
+    )
+  }
+  return null
+}
+
+
+
+type TreeItem = string | TreeItem[]
+
+function Tree({ item }: { item: TreeItem }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item]
+  if (!items.length) {
+    return (
+      <DSMenuButton
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </DSMenuButton>
+    )
+  }
+  return (
+    <DSMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <CollapsibleTrigger asChild>
+          <DSMenuButton>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </DSMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <DSMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </DSMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </DSMenuItem>
+  )
+}
+
+
+
+export function NavXDemo() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(null);
+  const [mails, setMails] = React.useState([]);
+  const [open, setOpen] = React.useState(false);
+  const [activeTeam, setActiveTeam] = React.useState({
+    name: "Acme Inc",
+    logo: Building,
+  });
+
+  const mailData = {
+    mails: [
+      {
+        name: "John Doe",
+        email: "john@example.com",
+        subject: "Meeting Tomorrow",
+        teaser: "Hi, just confirming our meeting tomorrow at 10am...",
+        date: "10:30 AM",
+      },
+      {
+        name: "Jane Smith",
+        email: "jane@example.com",
+        subject: "Project Update",
+        teaser: "The latest updates on the project are ready for review...",
+        date: "Yesterday",
+      },
+    ],
+  };
+
+  // Variant 1: Inset DS with secondary navigation
+  const variant1Example = {
+    items: [
+      {
+        title: "Playground",
+        url: "#",
+        icon: SquareTerminal,
+        isActive: true,
+        items: [
+          { title: "History", url: "#" },
+          { title: "Starred", url: "#" },
+          { title: "Settings", url: "#" },
+        ],
+      },
+      {
+        title: "Models",
+        url: "#",
+        icon: Bot,
+        items: [
+          { title: "Genesis", url: "#" },
+          { title: "Explorer", url: "#" },
+          { title: "Quantum", url: "#" },
+        ],
+      },
+      {
+        title: "Documentation",
+        url: "#",
+        icon: BookOpen,
+        items: [
+          { title: "Introduction", url: "#" },
+          { title: "Get Started", url: "#" },
+          { title: "Tutorials", url: "#" },
+          { title: "Changelog", url: "#" },
+        ],
+      },
+      {
+        title: "Settings",
+        url: "#",
+        icon: Settings,
+        items: [
+          { title: "General", url: "#" },
+          { title: "Team", url: "#" },
+          { title: "Billing", url: "#" },
+          { title: "Limits", url: "#" },
+        ],
+      },
+    ],
+  };
+
+  // Variant 2: DS with submenus as dropdowns
+  const variant2Example = {
+    items: [
+      {
+        title: "File",
+        items: [
+          { title: "New File", url: "#" },
+          { title: "Open", url: "#" },
+          { title: "Save", url: "#" },
+          { title: "Save As", url: "#" },
+        ],
+      },
+      {
+        title: "Edit",
+        items: [
+          { title: "Undo", url: "#" },
+          { title: "Redo", url: "#" },
+          { title: "Cut", url: "#" },
+          { title: "Copy", url: "#" },
+        ],
+      },
+    ],
+  };
+
+  // Variant 3: DS that collapses to icons
+  const variant3Example = {
+    items: [
+      {
+        title: "Playground",
+        url: "#",
+        icon: SquareTerminal,
+        isActive: true,
+        items: [
+          { title: "History", url: "#" },
+          { title: "Starred", url: "#" },
+          { title: "Settings", url: "#" },
+        ],
+      },
+      {
+        title: "Models",
+        url: "#",
+        icon: Bot,
+        items: [
+          { title: "Genesis", url: "#" },
+          { title: "Explorer", url: "#" },
+          { title: "Quantum", url: "#" },
+        ],
+      },
+      {
+        title: "Documentation",
+        url: "#",
+        icon: BookOpen,
+        items: [
+          { title: "Introduction", url: "#" },
+          { title: "Get Started", url: "#" },
+          { title: "Tutorials", url: "#" },
+          { title: "Changelog", url: "#" },
+        ],
+      },
+    ],
+  };
+
+  // Variant 4: DS in a popover
+  const variant4Example = {
+    items: [
+      { title: "Dashboard", url: "#", icon: Home, isActive: true },
+      { title: "Analytics", url: "#", icon: BarChart },
+      { title: "Settings", url: "#", icon: Settings },
+      { title: "Profile", url: "#", icon: User },
+    ],
+  };
+
+  // Variant 5: DS with collapsible submenus
+  const variant5Example = {
+    items: [
+      {
+        title: "Playground",
+        url: "#",
+        icon: SquareTerminal,
+        isActive: true,
+        items: [
+          { title: "History", url: "#" },
+          { title: "Starred", url: "#" },
+          { title: "Settings", url: "#" },
+        ],
+      },
+      {
+        title: "Models",
+        url: "#",
+        icon: Bot,
+        items: [
+          { title: "Genesis", url: "#" },
+          { title: "Explorer", url: "#" },
+          { title: "Quantum", url: "#" },
+        ],
+      },
+      {
+        title: "Documentation",
+        url: "#",
+        icon: BookOpen,
+        items: [
+          { title: "Introduction", url: "#" },
+          { title: "Get Started", url: "#" },
+          { title: "Tutorials", url: "#" },
+          { title: "Changelog", url: "#" },
+        ],
+      },
+      {
+        title: "Settings",
+        url: "#",
+        icon: Settings,
+        items: [
+          { title: "General", url: "#" },
+          { title: "Team", url: "#" },
+          { title: "Billing", url: "#" },
+          { title: "Limits", url: "#" },
+        ],
+      },
+    ],
+  };
+
+  // Variant 6: Simple DS with navigation grouped by section
+  const variant6Example = {
+    items: [
+      {
+        title: "Getting Started",
+        items: [
+          { title: "Introduction", url: "#", isActive: false },
+          { title: "Installation", url: "#", isActive: true },
+          { title: "Quick Start", url: "#", isActive: false },
+        ],
+      },
+      {
+        title: "Components",
+        items: [
+          { title: "Buttons", url: "#", isActive: false },
+          { title: "Forms", url: "#", isActive: false },
+          { title: "Tables", url: "#", isActive: false },
+        ],
+      },
+    ],
+  };
+
+  // Variant 7: DS with collapsible sections
+  const variant7Example = {
+    items: [
+      {
+        title: "Getting Started",
+        url: "#",
+        items: [
+          { title: "Installation", url: "#" },
+          { title: "Project Structure", url: "#" },
+        ],
+      },
+      {
+        title: "Building Your Application",
+        url: "#",
+        items: [
+          { title: "Routing", url: "#" },
+          { title: "Data Fetching", url: "#", isActive: true },
+          { title: "Rendering", url: "#" },
+          { title: "Caching", url: "#" },
+          { title: "Styling", url: "#" },
+          { title: "Optimizing", url: "#" },
+          { title: "Configuring", url: "#" },
+          { title: "Testing", url: "#" },
+          { title: "Authentication", url: "#" },
+          { title: "Deploying", url: "#" },
+          { title: "Upgrading", url: "#" },
+          { title: "Examples", url: "#" },
+        ],
+      },
+      {
+        title: "API Reference",
+        url: "#",
+        items: [
+          { title: "Components", url: "#" },
+          { title: "File Conventions", url: "#" },
+          { title: "Functions", url: "#" },
+          { title: "next.config.js Options", url: "#" },
+          { title: "CLI", url: "#" },
+          { title: "Edge Runtime", url: "#" },
+        ],
+      },
+    ],
+  };
+
+  // Variant 8: DS with submenus
+  const variant8Example = {
+    items: [
+      {
+        title: "Products",
+        url: "#",
+        items: [
+          { title: "Electronics", url: "#", isActive: false },
+          { title: "Clothing", url: "#", isActive: true },
+          { title: "Books", url: "#", isActive: false },
+        ],
+      },
+      {
+        title: "Services",
+        url: "#",
+        items: [
+          { title: "Consulting", url: "#", isActive: false },
+          { title: "Support", url: "#", isActive: false },
+        ],
+      },
+    ],
+  };
+
+  // Variant 9: Floating DS with submenus
+  const variant9Example = {
+    items: [
+      {
+        title: "Dashboard",
+        url: "#",
+        items: [
+          { title: "Overview", url: "#", isActive: true },
+          { title: "Reports", url: "#", isActive: false },
+        ],
+      },
+      {
+        title: "Users",
+        url: "#",
+        items: [
+          { title: "All Users", url: "#", isActive: false },
+          { title: "Add User", url: "#", isActive: false },
+        ],
+      },
+    ],
+  };
+
+  // Variant 10: Icons only
+  const variant10Example = {
+    items: [
+      {
+        title: "Inbox",
+        icon: Inbox,
+        onClick: () => {
+          setActiveItem({ title: "Inbox" });
+          setMails(mailData.mails);
+          setOpen(true);
+        },
+        isActive: activeItem?.title === "Inbox"
+      },
+      {
+        title: "Drafts",
+        icon: FileText,
+        onClick: () => {
+          setActiveItem({ title: "Drafts" });
+          setMails(mailData.mails);
+          setOpen(true);
+        },
+        isActive: activeItem?.title === "Drafts"
+      },
+      {
+        title: "Sent",
+        icon: Send,
+        onClick: () => {
+          setActiveItem({ title: "Sent" });
+          setMails(mailData.mails);
+          setOpen(true);
+        },
+        isActive: activeItem?.title === "Sent"
+      },
+      {
+        title: "Trash",
+        icon: Trash,
+        onClick: () => {
+          setActiveItem({ title: "Trash" });
+          setMails(mailData.mails);
+          setOpen(true);
+        },
+        isActive: activeItem?.title === "Trash"
+      },
+    ],
+  };
+
+  // Variant 11: Emails
+  const variant11Example = {
+    mails: [
+      {
+        name: "John Doe",
+        email: "john@example.com",
+        subject: "Meeting Tomorrow",
+        teaser: "Hi, just confirming our meeting tomorrow at 10am...",
+        date: "10:30 AM",
+      },
+      {
+        name: "Jane Smith",
+        email: "jane@example.com",
+        subject: "Project Update",
+        teaser: "The latest updates on the project are ready for review...",
+        date: "Yesterday",
+      },
+    ],
+  };
+
+  // Variant 12: DS with collapsible file tree
+  const variant12Example = {
+    label: "Project Files",
+    treeData: [
+      {
+        id: "1",
+        name: "src",
+        isFolder: true,
+        children: [
+          { id: "2", name: "components", isFolder: true },
+          { id: "3", name: "utils", isFolder: true },
+        ],
+      },
+      {
+        id: "4",
+        name: "public",
+        isFolder: true,
+        children: [{ id: "5", name: "images", isFolder: true }],
+      },
+    ],
+  };
+
+  // Variant 13: DS in a dialog - simple buttons for nav
+  const variant13Example = {
+    nav: [
+      { name: "Profile", icon: User },
+      { name: "Messages & media", icon: MessageSquare },
+      { name: "Notifications", icon: Bell },
+      { name: "Security", icon: Lock },
+    ],
+  };
+
+  // Variant 14: Table of contents
+  const variant14Example = {
+    label: "Table of Contents",
+    items: [
+      {
+        title: "Introduction",
+        url: "#introduction",
+        items: [
+          { title: "Overview", url: "#overview", isActive: false },
+          { title: "Features", url: "#features", isActive: true },
+        ],
+      },
+      {
+        title: "Getting Started",
+        url: "#getting-started",
+        items: [
+          { title: "Installation", url: "#installation", isActive: false },
+          { title: "Configuration", url: "#configuration", isActive: false },
+        ],
+      },
+    ],
+  };
+
+  // Variant 15: Favorites
+  const variant15Example = {
+    label: "Favorites",
+    items: [
+      { name: "Design System", emoji: "🎨", url: "#" },
+      { name: "Components", emoji: "🧩", url: "#" },
+      { name: "Documentation", emoji: "📚", url: "#" },
+    ],
+    onRemove: (item) => console.log("Remove:", item),
+    onDelete: (item) => console.log("Delete:", item),
+  };
+
+  // Variant 16: Projects
+  const variant16Example = {
+    label: "Projects",
+    items: [
+      { name: "Design Engineering", url: "#", icon: Frame },
+      { name: "Sales & Marketing", url: "#", icon: PieChart },
+      { name: "Travel", url: "#", icon: Map },
+    ],
+    onDelete: (item) => console.log("Delete:", item),
+  };
+
+  // Variant 17: Actions
+  const variant17Example = {
+    label: "Edit Contact",
+    items: [
+      [
+        { label: "Copy Link", icon: Link, onClick: (item) => console.log(item) },
+        { label: "Duplicate", icon: Copy, onClick: (item) => console.log(item) },
+      ],
+      [
+        { label: "Archive", icon: Archive, onClick: (item) => console.log(item) },
+        { label: "Delete", icon: Trash, onClick: (item) => console.log(item) },
+      ],
+    ],
+  };
+
+  // Variant 18: Secondary nav
+  const variant18Example = {
+    items: [
+      { title: "Support", url: "#", icon: LifeBuoy },
+      { title: "Feedback", url: "#", icon: Send },
+      { title: "Help", url: "#", icon: HelpCircle },
+    ],
+  };
+
+  // Variant 19: Tree view
+  const variant19Example = {
+    label: "Project Files",
+    items: [
+      {
+        id: "1",
+        name: "src",
+        children: [
+          { id: "2", name: "components" },
+          { id: "3", name: "utils" },
+        ],
+      },
+      {
+        id: "4",
+        name: "public",
+        children: [{ id: "5", name: "images" }],
+      },
+    ],
+  };
+
+  // Variant 20: Workspaces
+  const variant20Example = {
+    label: "Workspaces",
+    items: [
+      {
+        name: "Personal",
+        emoji: "👤",
+        pages: [
+          { name: "Notes", emoji: "📝" },
+          { name: "Tasks", emoji: "✅" },
+        ],
+      },
+      {
+        name: "Work",
+        emoji: "💼",
+        pages: [
+          { name: "Projects", emoji: "📁" },
+          { name: "Meetings", emoji: "📅" },
+        ],
+      },
+    ],
+  };
+
+  // Variant 21: Tree view (simple)
+  const variant21Example = {
+    label: "File Explorer",
+    items: [
+      {
+        id: "1",
+        name: "Documents",
+        children: [
+          { id: "2", name: "Resume.pdf" },
+          { id: "3", name: "Cover Letter.docx" },
+        ],
+      },
+    ],
+  };
+
+  // Variant 22: Team switcher
+  const variant22Example = {
+    value: activeTeam,
+    setValue: setActiveTeam,
+    teams: [
+      { name: "Acme Inc", logo: Building },
+      { name: "Monsters Inc", logo: Building2 },
+      { name: "Evil Corp", logo: Building },
+    ],
+  };
+
+  // Variant 23: Tree
+  const variant23Example = {
+    item: [
+      "src",
+      ["components", ["ui", "button.tsx", "card.tsx"], "layout.tsx"],
+      "index.ts",
+    ],
+  };
+
+  return (
+    <div className="space-y-12 p-6 max-w-3xl mx-auto">
+      {/* Variant 1 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 1 - Inset DS with secondary navigation</h3>
+        <NavX variant={1} items={variant1Example} />
+      </div>
+
+      {/* Variant 2 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 2 - DS with submenus as dropdowns</h3>
+        <NavX variant={2} items={variant2Example} />
+      </div>
+
+      {/* Variant 3 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 3 - DS that collapses to icons</h3>
+        <NavX variant={3} items={variant3Example} />
+      </div>
+
+      {/* Variant 4 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 4 - DS in a popover</h3>
+        <NavX variant={4} items={variant4Example} />
+      </div>
+
+      {/* Variant 5 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 5 - DS with collapsible submenus</h3>
+        <NavX variant={5} defaultOpen={true} items={variant5Example} />
+      </div>
+
+      {/* Variant 6 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 6 - Simple DS with navigation grouped by section</h3>
+        <NavX variant={6} items={variant6Example} />
+      </div>
+
+      {/* Variant 7 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 7 - DS with collapsible sections</h3>
+        <NavX variant={7} items={variant7Example} />
+      </div>
+
+      {/* Variant 8 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 8 - DS with submenus</h3>
+        <NavX variant={8} items={variant8Example} />
+      </div>
+
+      {/* Variant 9 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 9 - Floating DS with submenus</h3>
+        <NavX variant={9} items={variant9Example} />
+      </div>
+
+      {/* Variant 10 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 10 - Icons only</h3>
+        <NavX variant={10} items={variant10Example} />
+      </div>
+
+      {/* Variant 11 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 11 - Emails</h3>
+        <NavX variant={11} items={variant11Example} />
+      </div>
+
+      {/* Variant 12 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 12 - DS with collapsible file tree</h3>
+        <NavX variant={12} items={variant12Example} />
+      </div>
+
+      {/* Variant 13 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 13 - DS in a dialog</h3>
+        <NavX variant={13} items={variant13Example} />
+      </div>
+
+      {/* Variant 14 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 14 - Table of contents</h3>
+        <NavX variant={14} items={variant14Example} />
+      </div>
+
+      {/* Variant 15 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 15 - Favorites</h3>
+        <NavX variant={15} onRemove={variant15Example.onRemove} onDelete={variant15Example.onDelete} items={variant15Example} />
+      </div>
+
+      {/* Variant 16 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 16 - Projects</h3>
+        <NavX variant={16} onDelete={variant16Example.onDelete} items={variant16Example} />
+      </div>
+
+      {/* Variant 17 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 17 - Actions</h3>
+        <NavX variant={17} items={variant17Example} />
+      </div>
+
+      {/* Variant 18 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 18 - Secondary nav</h3>
+        <NavX variant={18} items={variant18Example} />
+      </div>
+
+      {/* Variant 19 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 19 - Tree view</h3>
+        <NavX variant={19} items={variant19Example} />
+      </div>
+
+      {/* Variant 20 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 20 - Workspaces</h3>
+        <NavX variant={20} items={variant20Example} />
+      </div>
+
+      {/* Variant 21 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 21 - Tree view (simple)</h3>
+        <NavX variant={21} items={variant21Example} />
+      </div>
+
+      {/* Variant 22 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 22 - Team switcher</h3>
+        <NavX
+          variant={22}
+          value={variant22Example.value}
+          setValue={variant22Example.setValue}
+          teams={variant22Example.teams}
+          items={variant22Example} />
+      </div>
+
+      {/* Variant 23 */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Variant 23 - Tree</h3>
+        <NavX variant={23} items={variant23Example} />
+      </div>
+    </div>
+  )
+}