love-ui 1.2.12 → 1.2.14

package/public/r/comp-589.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-589",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/breadcrumb.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/select.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-589.tsx",
+      "content": "import { ChevronsUpDown } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport SettingsMenu from \"@/registry/building-blocks/default/components/navbar-components/settings-menu\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Dashboard\" },\n  { href: \"#\", label: \"Docs\" },\n  { href: \"#\", label: \"API reference\" },\n]\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem key={index} className=\"w-full\">\n                      <NavigationMenuLink href={link.href} className=\"py-1.5\">\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Breadcrumb */}\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <Select defaultValue=\"personal\">\n                  <SelectPrimitive.SelectTrigger\n                    aria-label=\"Select account type\"\n                    asChild\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"h-8 p-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\"\n                    >\n                      <SelectValue placeholder=\"Select account type\" />\n                      <ChevronsUpDown\n                        size={14}\n                        className=\"text-muted-foreground/80\"\n                      />\n                    </Button>\n                  </SelectPrimitive.SelectTrigger>\n                  <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n                    <SelectItem value=\"personal\">Personal</SelectItem>\n                    <SelectItem value=\"team\">Team</SelectItem>\n                    <SelectItem value=\"business\">Business</SelectItem>\n                  </SelectContent>\n                </Select>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\n              <BreadcrumbItem>\n                <Select defaultValue=\"1\">\n                  <SelectPrimitive.SelectTrigger\n                    aria-label=\"Select project\"\n                    asChild\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"h-8 p-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\"\n                    >\n                      <SelectValue placeholder=\"Select project\" />\n                      <ChevronsUpDown\n                        size={14}\n                        className=\"text-muted-foreground/80\"\n                      />\n                    </Button>\n                  </SelectPrimitive.SelectTrigger>\n                  <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n                    <SelectItem value=\"1\">Main project</SelectItem>\n                    <SelectItem value=\"2\">Origin project</SelectItem>\n                  </SelectContent>\n                </Select>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            {/* Nav menu */}\n            <NavigationMenu className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link, index) => (\n                  <NavigationMenuItem key={index}>\n                    <NavigationMenuLink\n                      href={link.href}\n                      className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n            {/* Settings */}\n            <SettingsMenu />\n          </div>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/settings-menu.tsx",
+      "content": "import { SettingsIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function SettingsMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"rounded-full shadow-none\"\n          aria-label=\"Open edit menu\"\n        >\n          <SettingsIcon\n            className=\"text-muted-foreground\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\">\n        <DropdownMenuItem>Appearance</DropdownMenuItem>\n        <DropdownMenuItem>Preferences</DropdownMenuItem>\n        <DropdownMenuItem>API Settings</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-59.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-59",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-59.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Simple textarea</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "textarea"
+    ]
+  }
+}

package/public/r/comp-590.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-590",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-590.tsx",
+      "content": "import {\n  CompassIcon,\n  FeatherIcon,\n  HouseIcon,\n  PlusIcon,\n  SearchIcon,\n} from \"lucide-react\"\n\nimport NotificationMenu from \"@/registry/building-blocks/default/components/navbar-components/notification-menu\"\nimport TeamSwitcher from \"@/registry/building-blocks/default/components/navbar-components/team-switcher\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst teams = [\"Acme Inc.\", \"loveui\", \"Junon\"]\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Dashboard\", icon: HouseIcon },\n  { href: \"#\", label: \"Explore\", icon: CompassIcon },\n  { href: \"#\", label: \"Write\", icon: FeatherIcon },\n  { href: \"#\", label: \"Search\", icon: SearchIcon },\n]\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-48 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => {\n                    const Icon = link.icon\n                    return (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink\n                          href={link.href}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                        >\n                          <Icon\n                            size={16}\n                            className=\"text-muted-foreground\"\n                            aria-hidden=\"true\"\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    )\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          <TeamSwitcher teams={teams} defaultTeam={teams[0]} />\n        </div>\n        {/* Middle area */}\n        <NavigationMenu className=\"max-md:hidden\">\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, index) => {\n              const Icon = link.icon\n              return (\n                <NavigationMenuItem key={index}>\n                  <NavigationMenuLink\n                    href={link.href}\n                    className=\"flex size-8 items-center justify-center p-1.5\"\n                    title={link.label}\n                  >\n                    <Icon aria-hidden=\"true\" />\n                    <span className=\"sr-only\">{link.label}</span>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              )\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-4\">\n          <Button size=\"sm\" className=\"text-sm max-sm:aspect-square max-sm:p-0\">\n            <PlusIcon\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n            <span className=\"max-sm:sr-only\">Post</span>\n          </Button>\n          <NotificationMenu />\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/notification-menu.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst initialNotifications = [\n  {\n    id: 1,\n    user: \"Connor Love\",\n    action: \"requested review on\",\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 2,\n    user: \"Nathan Wickersham\",\n    action: \"shared\",\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 3,\n    user: \"Ian Shroeter\",\n    action: \"assigned you to\",\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n  },\n  {\n    id: 4,\n    user: \"Thomas Raklovits\",\n    action: \"replied to your comment in\",\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n  },\n  {\n    id: 5,\n    user: \"Sampson Addae\",\n    action: \"commented on\",\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n  },\n  {\n    id: 6,\n    user: \"Sam Altman\",\n    action: \"mentioned you in\",\n    target: \"loveui open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n  },\n]\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"6\"\n      height=\"6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 6 6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport default function NotificationMenu() {\n  const [notifications, setNotifications] = useState(initialNotifications)\n  const unreadCount = notifications.filter((n) => n.unread).length\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      }))\n    )\n  }\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification\n      )\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n          aria-label=\"Open notifications\"\n        >\n          <BellIcon size={16} aria-hidden=\"true\" />\n          {unreadCount > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n            />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"text-sm font-semibold\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"text-xs font-medium hover:underline\"\n              onClick={handleMarkAllAsRead}\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n        ></div>\n        {notifications.map((notification) => (\n          <div\n            key={notification.id}\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-xs text-muted-foreground\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function TeamSwitcher({\n  teams,\n  defaultTeam,\n}: {\n  teams: string[]\n  defaultTeam: string\n}) {\n  const [selectedProject, setSelectedProject] = React.useState(defaultTeam)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"p-0 hover:bg-transparent\">\n          <span className=\"flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n            {selectedProject.charAt(0).toUpperCase()}\n          </span>\n          <div className=\"flex flex-col gap-0.5 leading-none\">\n            <span className=\"\">{selectedProject}</span>\n          </div>\n          <ChevronsUpDown size={14} className=\"text-muted-foreground/80\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\">\n        {teams.map((project) => (\n          <DropdownMenuItem\n            key={project}\n            onSelect={() => setSelectedProject(project)}\n          >\n            {project}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-591.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-591",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/select.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-591.tsx",
+      "content": "import { BotMessageSquareIcon, MessageCircleDashedIcon } from \"lucide-react\"\n\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div>\n          <Select defaultValue=\"orion-alpha-45\" aria-label=\"Select AI model\">\n            <SelectTrigger className=\"**:data-desc:hidden [&>svg]:shrink-0 [&>svg]:text-muted-foreground/80\">\n              <BotMessageSquareIcon size={16} aria-hidden=\"true\" />\n              <SelectValue placeholder=\"Choose an AI model\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n              <SelectGroup>\n                <SelectLabel className=\"ps-2\">Models</SelectLabel>\n                <SelectItem value=\"orion-alpha-45\">\n                  Orion-Alpha 4.5\n                  <span\n                    className=\"mt-1 block text-xs text-muted-foreground\"\n                    data-desc\n                  >\n                    Balanced performance and creativity\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"orion-code-4\">\n                  Orion-Code 4\n                  <span\n                    className=\"mt-1 block text-xs text-muted-foreground\"\n                    data-desc\n                  >\n                    Optimized for code generation and understanding\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"nova-chat-4\">\n                  Nova-Chat 4\n                  <span\n                    className=\"mt-1 block text-xs text-muted-foreground\"\n                    data-desc\n                  >\n                    Excels at natural, engaging conversations\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"galaxy-max-4\">\n                  Galaxy-Max 4\n                  <span\n                    className=\"mt-1 block text-xs text-muted-foreground\"\n                    data-desc\n                  >\n                    Most powerful model for complex tasks\n                  </span>\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </div>\n\n        {/* Right side: Actions */}\n        <div className=\"flex items-center justify-end gap-2\">\n          {/* Layout button */}\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            aria-label=\"Temporary chat\"\n          >\n            <MessageCircleDashedIcon size={16} aria-hidden=\"true\" />\n          </Button>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-592.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-592",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/switch.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-592.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { LayoutGridIcon, PlusIcon, SearchIcon } from \"lucide-react\"\n\nimport InfoMenu from \"@/registry/building-blocks/default/components/navbar-components/info-menu\"\nimport NotificationMenu from \"@/registry/building-blocks/default/components/navbar-components/notification-menu\"\nimport SettingsMenu from \"@/registry/building-blocks/default/components/navbar-components/settings-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Switch } from \"@/registry/building-blocks/default/ui/switch\"\n\nexport default function Component() {\n  const id = useId()\n  const [checked, setChecked] = useState<boolean>(true)\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"relative flex-1\">\n          <Input\n            id={`input-${id}`}\n            className=\"peer h-8 w-full max-w-xs ps-8 pe-2\"\n            placeholder=\"Search...\"\n            type=\"search\"\n          />\n          <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n            <SearchIcon size={16} />\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          {/* Test mode */}\n          <div className=\"inline-flex items-center gap-2 max-md:hidden\">\n            <Label htmlFor={`switch-${id}`} className=\"text-sm font-medium\">\n              Test mode\n            </Label>\n            <Switch\n              id={`switch-${id}`}\n              checked={checked}\n              onCheckedChange={setChecked}\n              className=\"h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3 data-[state=checked]:[&_span]:rtl:-translate-x-3\"\n              aria-label=\"Toggle switch\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {/* Layout button */}\n            <Button\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n              aria-label=\"Open layout menu\"\n            >\n              <LayoutGridIcon size={16} aria-hidden=\"true\" />\n            </Button>\n            {/* Info menu */}\n            <InfoMenu />\n            {/* Notification */}\n            <NotificationMenu />\n            {/* Settings */}\n            <SettingsMenu />\n          </div>\n          {/* Add button */}\n          <Button\n            className=\"size-8 rounded-full\"\n            size=\"icon\"\n            aria-label=\"Add new item\"\n          >\n            <PlusIcon size={16} aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/info-menu.tsx",
+      "content": "import {\n  BookIcon,\n  InfoIcon,\n  LifeBuoyIcon,\n  MessageCircleMoreIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function InfoMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 rounded-full shadow-none\"\n          aria-label=\"Open edit menu\"\n        >\n          <InfoIcon\n            className=\"text-muted-foreground\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"pb-2\">\n        <DropdownMenuLabel>Need help?</DropdownMenuLabel>\n        <DropdownMenuItem\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n          asChild\n        >\n          <a href=\"#\">\n            <BookIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            Documentation\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n          asChild\n        >\n          <a href=\"#\">\n            <LifeBuoyIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            Support\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n          asChild\n        >\n          <a href=\"#\">\n            <MessageCircleMoreIcon\n              size={16}\n              className=\"opacity-60\"\n              aria-hidden=\"true\"\n            />\n            Contact us\n          </a>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/notification-menu.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst initialNotifications = [\n  {\n    id: 1,\n    user: \"Connor Love\",\n    action: \"requested review on\",\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 2,\n    user: \"Nathan Wickersham\",\n    action: \"shared\",\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 3,\n    user: \"Ian Shroeter\",\n    action: \"assigned you to\",\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n  },\n  {\n    id: 4,\n    user: \"Thomas Raklovits\",\n    action: \"replied to your comment in\",\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n  },\n  {\n    id: 5,\n    user: \"Sampson Addae\",\n    action: \"commented on\",\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n  },\n  {\n    id: 6,\n    user: \"Sam Altman\",\n    action: \"mentioned you in\",\n    target: \"loveui open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n  },\n]\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"6\"\n      height=\"6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 6 6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport default function NotificationMenu() {\n  const [notifications, setNotifications] = useState(initialNotifications)\n  const unreadCount = notifications.filter((n) => n.unread).length\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      }))\n    )\n  }\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification\n      )\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n          aria-label=\"Open notifications\"\n        >\n          <BellIcon size={16} aria-hidden=\"true\" />\n          {unreadCount > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n            />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"text-sm font-semibold\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"text-xs font-medium hover:underline\"\n              onClick={handleMarkAllAsRead}\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n        ></div>\n        {notifications.map((notification) => (\n          <div\n            key={notification.id}\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-xs text-muted-foreground\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/settings-menu.tsx",
+      "content": "import { SettingsIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function SettingsMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"rounded-full shadow-none\"\n          aria-label=\"Open edit menu\"\n        >\n          <SettingsIcon\n            className=\"text-muted-foreground\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\">\n        <DropdownMenuItem>Appearance</DropdownMenuItem>\n        <DropdownMenuItem>Preferences</DropdownMenuItem>\n        <DropdownMenuItem>API Settings</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-593.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-593",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-593.tsx",
+      "content": "import { BookmarkIcon, HomeIcon } from \"lucide-react\"\n\nimport DatePicker from \"@/registry/building-blocks/default/components/navbar-components/date-picker\"\nimport Filters from \"@/registry/building-blocks/default/components/navbar-components/filters\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                <HomeIcon size={16} aria-hidden=\"true\" />\n                <span className=\"sr-only\">Home</span>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Reports</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Date picker */}\n          <DatePicker />\n          {/* Filters */}\n          <Filters />\n          {/* Saved button */}\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            className=\"text-sm max-sm:aspect-square max-sm:p-0\"\n          >\n            <BookmarkIcon\n              className=\"text-muted-foreground/80 sm:-ms-1\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n            <span className=\"max-sm:sr-only\">Saved</span>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/date-picker.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nexport default function DatePicker() {\n  const [date, setDate] = useState<DateRange | undefined>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"group w-full justify-between border-input bg-background px-3 text-sm font-normal outline-offset-0 outline-none focus-visible:outline-[3px]\"\n        >\n          <CalendarIcon\n            size={16}\n            className=\"-ms-1 shrink-0 text-muted-foreground/80 transition-colors\"\n            aria-hidden=\"true\"\n          />\n          <span className={cn(\"truncate\", !date && \"font-medium\")}>\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Date\"\n            )}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-2\" align=\"start\">\n        <Calendar mode=\"range\" selected={date} onSelect={setDate} />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/filters.tsx",
+      "content": "import { useId } from \"react\"\nimport { ListFilterIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"text-sm\">\n            <ListFilterIcon\n              size={16}\n              className=\"-ms-1 text-muted-foreground/80\"\n              aria-hidden=\"true\"\n            />\n            Filters\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-36 p-3\">\n          <div className=\"space-y-3\">\n            <div className=\"text-xs font-medium\">Filters</div>\n            <form>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-1`} />\n                  <Label htmlFor={`${id}-1`} className=\"font-normal\">\n                    Real Time\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-2`} />\n                  <Label htmlFor={`${id}-2`} className=\"font-normal\">\n                    Top Channels\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-3`} />\n                  <Label htmlFor={`${id}-3`} className=\"font-normal\">\n                    Last Orders\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-4`} />\n                  <Label htmlFor={`${id}-4`} className=\"font-normal\">\n                    Total Spent\n                  </Label>\n                </div>\n              </div>\n              <div\n                role=\"separator\"\n                aria-orientation=\"horizontal\"\n                className=\"-mx-3 my-3 h-px bg-border\"\n              ></div>\n              <div className=\"flex justify-between gap-2\">\n                <Button size=\"sm\" variant=\"outline\" className=\"h-7 px-2\">\n                  Clear\n                </Button>\n                <Button size=\"sm\" className=\"h-7 px-2\">\n                  Apply\n                </Button>\n              </div>\n            </form>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-594.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-594",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/radio-group.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-594.tsx",
+      "content": "import { SparklesIcon, UploadIcon } from \"lucide-react\"\n\nimport AppToggle from \"@/registry/building-blocks/default/components/navbar-components/app-toggle\"\nimport TeamSwitcher from \"@/registry/building-blocks/default/components/navbar-components/team-switcher\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nconst teams = [\"Acme Inc.\", \"loveui\", \"Junon\"]\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          <TeamSwitcher teams={teams} defaultTeam={teams[0]} />\n        </div>\n        {/* Middle area */}\n        <AppToggle />\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            className=\"text-sm max-sm:aspect-square max-sm:p-0\"\n          >\n            <UploadIcon\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n            <span className=\"max-sm:sr-only\">Export</span>\n          </Button>\n          <Button size=\"sm\" className=\"text-sm max-sm:aspect-square max-sm:p-0\">\n            <SparklesIcon\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n            <span className=\"max-sm:sr-only\">Upgrade</span>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/app-toggle.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\n\nimport { RadioGroup, RadioGroupItem } from \"@/registry/building-blocks/default/ui/radio-group\"\n\nexport default function AppToggle() {\n  const id = useId()\n  const [selectedValue, setSelectedValue] = useState(\"on\")\n\n  return (\n    <div className=\"inline-flex h-8 rounded-md bg-input/50 p-0.5\">\n      <RadioGroup\n        value={selectedValue}\n        onValueChange={setSelectedValue}\n        className=\"group relative inline-grid grid-cols-[1fr_1fr] items-center gap-0 text-sm font-medium after:absolute after:inset-y-0 after:w-1/2 after:rounded-sm after:bg-background after:shadow-xs after:transition-[translate,box-shadow] after:duration-300 after:ease-[cubic-bezier(0.16,1,0.3,1)] has-focus-visible:after:border-ring has-focus-visible:after:ring-[3px] has-focus-visible:after:ring-ring/50 data-[state=off]:after:translate-x-0 data-[state=on]:after:translate-x-full\"\n        data-state={selectedValue}\n      >\n        <label className=\"relative z-10 inline-flex h-full min-w-8 cursor-pointer items-center justify-center px-3 whitespace-nowrap transition-colors select-none group-data-[state=on]:text-muted-foreground/70\">\n          Sitemap\n          <RadioGroupItem id={`${id}-1`} value=\"off\" className=\"sr-only\" />\n        </label>\n        <label className=\"relative z-10 inline-flex h-full min-w-8 cursor-pointer items-center justify-center px-3 whitespace-nowrap transition-colors select-none group-data-[state=off]:text-muted-foreground/70\">\n          Wireframe\n          <RadioGroupItem id={`${id}-2`} value=\"on\" className=\"sr-only\" />\n        </label>\n      </RadioGroup>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function TeamSwitcher({\n  teams,\n  defaultTeam,\n}: {\n  teams: string[]\n  defaultTeam: string\n}) {\n  const [selectedProject, setSelectedProject] = React.useState(defaultTeam)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"p-0 hover:bg-transparent\">\n          <span className=\"flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n            {selectedProject.charAt(0).toUpperCase()}\n          </span>\n          <div className=\"flex flex-col gap-0.5 leading-none\">\n            <span className=\"\">{selectedProject}</span>\n          </div>\n          <ChevronsUpDown size={14} className=\"text-muted-foreground/80\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\">\n        {teams.map((project) => (\n          <DropdownMenuItem\n            key={project}\n            onSelect={() => setSelectedProject(project)}\n          >\n            {project}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-595.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-595",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-595.tsx",
+      "content": "import { assetPath } from \"@/lib/building-blocks/utils\"\nimport {\n  ChevronLeftIcon,\n  HistoryIcon,\n  MessageSquareText,\n  UserRoundPlus,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          <Button\n            className=\"size-8\"\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"Go back\"\n            asChild\n          >\n            <a href=\"#\">\n              <ChevronLeftIcon />\n            </a>\n          </Button>\n          <h1 className=\"text-sm font-medium\">Love UI</h1>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* History button */}\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            aria-label=\"History\"\n          >\n            <HistoryIcon size={16} aria-hidden=\"true\" />\n          </Button>\n          {/* Comments button */}\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            aria-label=\"Save\"\n          >\n            <MessageSquareText size={16} aria-hidden=\"true\" />\n          </Button>\n          {/* Add user */}\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            aria-label=\"Add user\"\n          >\n            <UserRoundPlus size={16} aria-hidden=\"true\" />\n          </Button>\n          {/* Online users */}\n          <div className=\"ml-2 flex items-center gap-2\">\n            <div className=\"relative\">\n              <Avatar>\n                <AvatarImage src={\"https://i.pravatar.cc/160?img=20\"} alt=\"Kelly King\" />\n                <AvatarFallback>CL</AvatarFallback>\n              </Avatar>\n              <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-emerald-500\">\n                <span className=\"sr-only\">Online</span>\n              </span>\n            </div>\n            <div className=\"relative\">\n              <Avatar>\n                <AvatarImage\n                  src={\"https://i.pravatar.cc/160?img=19\"}\n                  alt=\"Martha Johnson\"\n                />\n                <AvatarFallback>CL</AvatarFallback>\n              </Avatar>\n              <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-muted-foreground\">\n                <span className=\"sr-only\">Online</span>\n              </span>\n            </div>\n            <div className=\"relative\">\n              <Avatar>\n                <AvatarImage src={\"https://i.pravatar.cc/160?img=18\"} alt=\"Linda Green\" />\n                <AvatarFallback>CL</AvatarFallback>\n              </Avatar>\n              <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-muted-foreground\">\n                <span className=\"sr-only\">Online</span>\n              </span>\n            </div>\n            <Button\n              variant=\"secondary\"\n              className=\"flex size-8 items-center justify-center rounded-full bg-secondary text-xs text-muted-foreground ring-background hover:bg-secondary hover:text-foreground\"\n              size=\"icon\"\n            >\n              +3\n            </Button>\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-596.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-596",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/switch.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-596.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { ClockIcon, PowerIcon, PowerOffIcon, ZapIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\nimport { Switch } from \"@/registry/building-blocks/default/ui/switch\"\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Overview\", active: true },\n  { href: \"#\", label: \"Graphs\" },\n  { href: \"#\", label: \"Backups\" },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [checked, setChecked] = useState<boolean>(true)\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex gap-2\">\n          <div className=\"flex items-center md:hidden\">\n            {/* Mobile menu trigger */}\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button className=\"group size-8\" variant=\"ghost\" size=\"icon\">\n                  <svg\n                    className=\"pointer-events-none\"\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4 12L20 12\"\n                      className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                    />\n                    <path\n                      d=\"M4 12H20\"\n                      className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    />\n                    <path\n                      d=\"M4 12H20\"\n                      className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                    />\n                  </svg>\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n                <NavigationMenu className=\"max-w-none *:w-full\">\n                  <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                    {navigationLinks.map((link, index) => (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink href={link.href} className=\"py-1.5\">\n                          {link.label}\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    ))}\n                  </NavigationMenuList>\n                </NavigationMenu>\n              </PopoverContent>\n            </Popover>\n          </div>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            {/* Navigation menu */}\n            <NavigationMenu className=\"h-full *:h-full max-md:hidden\">\n              <NavigationMenuList className=\"h-full gap-2\">\n                {navigationLinks.map((link, index) => (\n                  <NavigationMenuItem key={index} className=\"h-full\">\n                    <NavigationMenuLink\n                      active={link.active}\n                      href={link.href}\n                      className=\"h-full justify-center rounded-none border-y-2 border-transparent border-b-primary py-1.5 font-medium text-muted-foreground hover:border-b-primary hover:bg-transparent hover:text-primary data-[active]:border-b-primary data-[active]:bg-transparent!\"\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <Badge variant=\"outline\" className=\"gap-1.5 text-emerald-600\">\n              <span\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n                aria-hidden=\"true\"\n              ></span>\n              Online\n            </Badge>\n            <Badge variant=\"outline\" className=\"gap-1.5\">\n              <ZapIcon\n                className=\"-ms-0.5 opacity-60\"\n                size={12}\n                aria-hidden=\"true\"\n              />\n              99.9%\n            </Badge>\n            <Badge variant=\"outline\" className=\"gap-1.5\">\n              <ClockIcon\n                className=\"-ms-0.5 opacity-60\"\n                size={12}\n                aria-hidden=\"true\"\n              />\n              45ms\n            </Badge>\n          </div>\n          {/* Switch */}\n          <div>\n            <div className=\"relative inline-grid h-7 grid-cols-[1fr_1fr] items-center text-sm font-medium\">\n              <Switch\n                id={id}\n                checked={checked}\n                onCheckedChange={setChecked}\n                className=\"peer absolute inset-0 h-[inherit] w-auto data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full\"\n              />\n              <span className=\"pointer-events-none relative ms-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full\">\n                <PowerOffIcon size={12} aria-hidden=\"true\" />\n              </span>\n              <span className=\"pointer-events-none relative me-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:-translate-x-full peer-data-[state=checked]:text-background peer-data-[state=unchecked]:invisible peer-data-[state=checked]:rtl:translate-x-full\">\n                <PowerIcon size={12} aria-hidden=\"true\" />\n              </span>\n            </div>\n            <Label htmlFor={id} className=\"sr-only\">\n              Power\n            </Label>\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-597.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-597",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-597.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  checkboxesFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  company: {\n    name: \"Company\",\n    children: [\"engineering\", \"marketing\", \"operations\"],\n  },\n  engineering: {\n    name: \"Engineering\",\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n  },\n  frontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\n  \"design-system\": {\n    name: \"Design System\",\n    children: [\"components\", \"tokens\", \"guidelines\"],\n  },\n  components: { name: \"Components\" },\n  tokens: { name: \"Tokens\" },\n  guidelines: { name: \"Guidelines\" },\n  \"web-platform\": { name: \"Web Platform\" },\n  backend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\n  apis: { name: \"APIs\" },\n  infrastructure: { name: \"Infrastructure\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  marketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\n  content: { name: \"Content\" },\n  seo: { name: \"SEO\" },\n  operations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\n  hr: { name: \"HR\" },\n  finance: { name: \"Finance\" },\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      checkedItems: [\"components\", \"tokens\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      checkboxesFeature,\n      hotkeysCoreFeature,\n    ],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-1.5 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <div\n              key={item.getId()}\n              className=\"flex items-center gap-2 not-last:pb-0.5\"\n            >\n              <TreeItem item={item} className=\"flex-1 not-last:pb-0\">\n                <TreeItemLabel />\n              </TreeItem>\n              <Checkbox\n                checked={\n                  {\n                    checked: true,\n                    unchecked: false,\n                    indeterminate: \"indeterminate\" as const,\n                  }[item.getCheckedState()]\n                }\n                onCheckedChange={(checked) => {\n                  const checkboxProps = item.getCheckboxProps()\n                  checkboxProps.onChange?.({ target: { checked } })\n                }}\n              />\n            </div>\n          )\n        })}\n      </Tree>\n\n      <div className=\"space-y-2\">\n        <p\n          aria-live=\"polite\"\n          role=\"region\"\n          className=\"mt-2 text-xs text-muted-foreground\"\n        >\n          Tree with checkboxes on the right ∙{\" \"}\n          <a\n            href=\"https://headless-tree.lukasbach.com\"\n            className=\"underline hover:text-foreground\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            API\n          </a>\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree",
+      "checkbox"
+    ]
+  }
+}

package/public/r/comp-598.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-598",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-598.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  checkboxesFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  company: {\n    name: \"Company\",\n    children: [\"engineering\", \"marketing\", \"operations\"],\n  },\n  engineering: {\n    name: \"Engineering\",\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n  },\n  frontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\n  \"design-system\": {\n    name: \"Design System\",\n    children: [\"components\", \"tokens\", \"guidelines\"],\n  },\n  components: { name: \"Components\" },\n  tokens: { name: \"Tokens\" },\n  guidelines: { name: \"Guidelines\" },\n  \"web-platform\": { name: \"Web Platform\" },\n  backend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\n  apis: { name: \"APIs\" },\n  infrastructure: { name: \"Infrastructure\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  marketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\n  content: { name: \"Content\" },\n  seo: { name: \"SEO\" },\n  operations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\n  hr: { name: \"HR\" },\n  finance: { name: \"Finance\" },\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      checkedItems: [\"components\", \"tokens\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      checkboxesFeature,\n      hotkeysCoreFeature,\n    ],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <div\n              key={item.getId()}\n              className=\"flex items-center gap-1.5 not-last:pb-0.5\"\n            >\n              <Checkbox\n                checked={\n                  {\n                    checked: true,\n                    unchecked: false,\n                    indeterminate: \"indeterminate\" as const,\n                  }[item.getCheckedState()]\n                }\n                onCheckedChange={(checked) => {\n                  const checkboxProps = item.getCheckboxProps()\n                  checkboxProps.onChange?.({ target: { checked } })\n                }}\n              />\n              <TreeItem item={item} className=\"flex-1 not-last:pb-0\">\n                <TreeItemLabel />\n              </TreeItem>\n            </div>\n          )\n        })}\n      </Tree>\n\n      <div className=\"space-y-2\">\n        <p\n          aria-live=\"polite\"\n          role=\"region\"\n          className=\"mt-2 text-xs text-muted-foreground\"\n        >\n          Tree with checkboxes on the left ∙{\" \"}\n          <a\n            href=\"https://headless-tree.lukasbach.com\"\n            className=\"underline hover:text-foreground\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            API\n          </a>\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree",
+      "checkbox"
+    ]
+  }
+}

package/public/r/comp-599.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-599",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-599.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  checkboxesFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  company: {\n    name: \"Company\",\n    children: [\"engineering\", \"marketing\", \"operations\"],\n  },\n  engineering: {\n    name: \"Engineering\",\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n  },\n  frontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\n  \"design-system\": {\n    name: \"Design System\",\n    children: [\"components\", \"tokens\", \"guidelines\"],\n  },\n  components: { name: \"Components\" },\n  tokens: { name: \"Tokens\" },\n  guidelines: { name: \"Guidelines\" },\n  \"web-platform\": { name: \"Web Platform\" },\n  backend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\n  apis: { name: \"APIs\" },\n  infrastructure: { name: \"Infrastructure\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  marketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\n  content: { name: \"Content\" },\n  seo: { name: \"SEO\" },\n  operations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\n  hr: { name: \"HR\" },\n  finance: { name: \"Finance\" },\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      checkedItems: [\"components\", \"tokens\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    canCheckFolders: true,\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      checkboxesFeature,\n      hotkeysCoreFeature,\n    ],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:ms-4.5 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <div\n                key={item.getId()}\n                className=\"flex items-center gap-1.5 not-last:pb-0.5\"\n              >\n                <Checkbox\n                  checked={\n                    {\n                      checked: true,\n                      unchecked: false,\n                      indeterminate: \"indeterminate\" as const,\n                    }[item.getCheckedState()]\n                  }\n                  onCheckedChange={(checked) => {\n                    const checkboxProps = item.getCheckboxProps()\n                    checkboxProps.onChange?.({ target: { checked } })\n                  }}\n                />\n                <TreeItem item={item} className=\"flex-1 not-last:pb-0\">\n                  <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\">\n                    <span className=\"flex items-center gap-2\">\n                      {item.isFolder() ? (\n                        item.isExpanded() ? (\n                          <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                        ) : (\n                          <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                        )\n                      ) : (\n                        <FileIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      )}\n                      {item.getItemName()}\n                    </span>\n                  </TreeItemLabel>\n                </TreeItem>\n              </div>\n            )\n          })}\n        </Tree>\n      </div>\n\n      <div className=\"space-y-2\">\n        <p\n          aria-live=\"polite\"\n          role=\"region\"\n          className=\"mt-2 text-xs text-muted-foreground\"\n        >\n          Tree with canCheckFolders option ∙{\" \"}\n          <a\n            href=\"https://headless-tree.lukasbach.com\"\n            className=\"underline hover:text-foreground\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            API\n          </a>\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree",
+      "checkbox"
+    ]
+  }
+}

package/public/r/comp-60.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-60",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-60.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>\n        Required textarea <span className=\"text-destructive\">*</span>\n      </Label>\n      <Textarea id={id} placeholder=\"Leave a message\" required />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "textarea",
+      "required"
+    ]
+  }
+}

package/public/r/comp-600.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-600",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-600.tsx",
+      "content": "import { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\nconst data = [\n  {\n    name: \"Profit\",\n    value: \"$287,654.00\",\n    change: \"+8.32%\",\n    changeType: \"positive\",\n  },\n  {\n    name: \"Late payments\",\n    value: \"$9,435.00\",\n    change: \"-12.64%\",\n    changeType: \"negative\",\n  },\n  {\n    name: \"Pending orders\",\n    value: \"$173,229.00\",\n    change: \"+2.87%\",\n    changeType: \"positive\",\n  },\n  {\n    name: \"Operating costs\",\n    value: \"$52,891.00\",\n    change: \"-5.73%\",\n    changeType: \"negative\",\n  },\n];\n\nexport default function Stats01() {\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <div className=\"mx-auto grid grid-cols-1 gap-px rounded-xl bg-border sm:grid-cols-2 lg:grid-cols-4\">\n        {data.map((stat, index) => (\n          <Card\n            key={stat.name}\n            className={cn(\n              \"rounded-none border-0 shadow-none py-0\",\n              index === 0 && \"rounded-l-xl\",\n              index === data.length - 1 && \"rounded-r-xl\"\n            )}\n          >\n            <CardContent className=\"flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 p-4 sm:p-6\">\n              <div className=\"text-sm font-medium text-muted-foreground\">\n                {stat.name}\n              </div>\n              <div\n                className={cn(\n                  \"tabular-nums text-xs font-medium\",\n                  stat.changeType === \"positive\"\n                    ? \"text-green-800 dark:text-green-400\"\n                    : \"text-red-800 dark:text-red-400\"\n                )}\n              >\n                {stat.change}\n              </div>\n              <div className=\"tabular-nums w-full flex-none text-3xl font-medium tracking-tight text-foreground\">\n                {stat.value}\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}