love-ui 1.2.12 → 1.2.14

package/public/r/comp-569.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-569",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-569.tsx",
+      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport {\n  createOnDropHandler,\n  dragAndDropFeature,\n  hotkeysCoreFeature,\n  keyboardDragAndDropFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { AssistiveTreeDescription, useTree } from \"@headless-tree/react\"\nimport { FolderIcon, FolderOpenIcon } from \"lucide-react\"\n\nimport {\n  Tree,\n  TreeDragLine,\n  TreeItem,\n  TreeItemLabel,\n} from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst initialItems: 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 [items, setItems] = useState(initialItems)\n\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      selectedItems: [\"components\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    canReorder: true,\n    onDrop: createOnDropHandler((parentItem, newChildrenIds) => {\n      setItems((prevItems) => ({\n        ...prevItems,\n        [parentItem.getId()]: {\n          ...prevItems[parentItem.getId()],\n          children: newChildrenIds,\n        },\n      }))\n    }),\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      hotkeysCoreFeature,\n      dragAndDropFeature,\n      keyboardDragAndDropFeature,\n    ],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        <AssistiveTreeDescription tree={tree} />\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel>\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                  {item.getItemName()}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          )\n        })}\n        <TreeDragLine />\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Tree with multi-select and drag and drop ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}

package/public/r/comp-57.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-57",
+  "type": "registry:component",
+  "dependencies": [
+    "emblor"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-57.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { Tag, TagInput } from \"emblor\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nconst tags = [\n  {\n    id: \"1\",\n    text: \"Red\",\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [exampleTags, setExampleTags] = useState<Tag[]>(tags)\n  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null)\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with inner tags</Label>\n      <TagInput\n        id={id}\n        tags={exampleTags}\n        setTags={(newTags) => {\n          setExampleTags(newTags)\n        }}\n        placeholder=\"Add a tag\"\n        styleClasses={{\n          inlineTagsContainer:\n            \"border-input rounded-md bg-background shadow-xs transition-[color,box-shadow] focus-within:border-ring outline-none focus-within:ring-[3px] focus-within:ring-ring/50 p-1 gap-1\",\n          input: \"w-full min-w-[80px] shadow-none px-2 h-7\",\n          tag: {\n            body: \"h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7\",\n            closeButton:\n              \"absolute -inset-y-px -end-px p-0 rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground\",\n          },\n        }}\n        activeTagIndex={activeTagIndex}\n        setActiveTagIndex={setActiveTagIndex}\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/JaleelB/emblor\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          emblor\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "tag",
+      "emblor"
+    ]
+  }
+}

package/public/r/comp-570.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-570",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-570.tsx",
+      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport {\n  hotkeysCoreFeature,\n  renamingFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\n// Initial data\nconst initialItems: 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 [items, setItems] = useState(initialItems)\n\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\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    onRename: (item, newName) => {\n      // Update the item name in our state\n      const itemId = item.getId()\n      setItems((prevItems) => ({\n        ...prevItems,\n        [itemId]: {\n          ...prevItems[itemId],\n          name: newName,\n        },\n      }))\n    },\n    features: [\n      syncDataLoaderFeature,\n      hotkeysCoreFeature,\n      renamingFeature,\n      selectionFeature,\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            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel>\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.isRenaming() ? (\n                    <Input\n                      {...item.getRenameInputProps()}\n                      autoFocus\n                      className=\"-my-0.5 h-6 px-1\"\n                    />\n                  ) : (\n                    item.getItemName()\n                  )}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          )\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Tree with renaming (press F2 to rename) ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}

package/public/r/comp-571.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-571",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json",
+    "https://loveui.dev/building-blocks/r/input.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-571.tsx",
+      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport {\n  expandAllFeature,\n  hotkeysCoreFeature,\n  searchFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n  TreeState,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport { FolderIcon, FolderOpenIcon, SearchIcon } from \"lucide-react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\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  // Store the initial expanded items to reset when search is cleared\n  const initialExpandedItems = [\"engineering\", \"frontend\", \"design-system\"]\n  const [state, setState] = useState<Partial<TreeState<Item>>>({})\n\n  const tree = useTree<Item>({\n    state,\n    setState,\n    initialState: {\n      expandedItems: initialExpandedItems,\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      hotkeysCoreFeature,\n      selectionFeature,\n      searchFeature,\n      expandAllFeature,\n    ],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:nth-2:grow\">\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          {...{\n            ...tree.getSearchInputElementProps(),\n            onChange: (e) => {\n              // First call the original onChange handler from getSearchInputElementProps\n              const originalProps = tree.getSearchInputElementProps()\n              if (originalProps.onChange) {\n                originalProps.onChange(e)\n              }\n\n              // Then handle our custom logic\n              const value = e.target.value\n\n              if (value.length > 0) {\n                // If input has at least one character, expand all items\n                tree.expandAll()\n              } else {\n                // If input is cleared, reset to initial expanded state\n                setState((prevState) => {\n                  return {\n                    ...prevState,\n                    expandedItems: initialExpandedItems,\n                  }\n                })\n              }\n            },\n          }}\n          type=\"search\"\n          placeholder=\"Quick search...\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon className=\"size-4\" aria-hidden=\"true\" />\n        </div>\n      </div>\n\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel>\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                  {item.getItemName()}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          )\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Tree with search highlight ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree",
+      "filter",
+      "search"
+    ]
+  }
+}

package/public/r/comp-572.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-572",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json",
+    "https://loveui.dev/building-blocks/r/input.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-572.tsx",
+      "content": "\"use client\"\n\nimport React, { useEffect, useRef, useState } from \"react\"\nimport {\n  expandAllFeature,\n  hotkeysCoreFeature,\n  searchFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n  TreeState,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport {\n  CircleXIcon,\n  FilterIcon,\n  FolderIcon,\n  FolderOpenIcon,\n} from \"lucide-react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\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  // Store the initial expanded items to reset when search is cleared\n  const initialExpandedItems = [\"engineering\", \"frontend\", \"design-system\"]\n  const [state, setState] = useState<Partial<TreeState<Item>>>({})\n  const [searchValue, setSearchValue] = useState(\"\")\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const tree = useTree<Item>({\n    state,\n    setState,\n    initialState: {\n      expandedItems: initialExpandedItems,\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      hotkeysCoreFeature,\n      selectionFeature,\n      searchFeature,\n      expandAllFeature,\n    ],\n  })\n\n  // Handle clearing the search\n  const handleClearSearch = () => {\n    setSearchValue(\"\")\n\n    // Manually trigger the tree's search onChange with an empty value\n    // to ensure item.isMatchingSearch() is correctly updated.\n    const searchProps = tree.getSearchInputElementProps()\n    if (searchProps.onChange) {\n      const syntheticEvent = {\n        target: { value: \"\" },\n      } as React.ChangeEvent<HTMLInputElement> // Cast to the expected event type\n      searchProps.onChange(syntheticEvent)\n    }\n\n    // Reset tree state to initial expanded items\n    setState((prevState) => ({\n      ...prevState,\n      expandedItems: initialExpandedItems,\n    }))\n\n    // Clear custom filtered items\n    setFilteredItems([])\n\n    if (inputRef.current) {\n      inputRef.current.focus()\n      // Also clear the internal search input\n      inputRef.current.value = \"\"\n    }\n  }\n\n  // Keep track of filtered items separately from the tree's internal search state\n  const [filteredItems, setFilteredItems] = useState<string[]>([])\n\n  // This function determines if an item should be visible based on our custom filtering\n  const shouldShowItem = (itemId: string) => {\n    if (!searchValue || searchValue.length === 0) return true\n    return filteredItems.includes(itemId)\n  }\n\n  // Update filtered items when search value changes\n  useEffect(() => {\n    if (!searchValue || searchValue.length === 0) {\n      setFilteredItems([])\n      return\n    }\n\n    // Get all items\n    const allItems = tree.getItems()\n\n    // First, find direct matches\n    const directMatches = allItems\n      .filter((item) => {\n        const name = item.getItemName().toLowerCase()\n        return name.includes(searchValue.toLowerCase())\n      })\n      .map((item) => item.getId())\n\n    // Then, find all parent IDs of matching items\n    const parentIds = new Set<string>()\n    directMatches.forEach((matchId) => {\n      let item = tree.getItems().find((i) => i.getId() === matchId)\n      while (item?.getParent && item.getParent()) {\n        const parent = item.getParent()\n        if (parent) {\n          parentIds.add(parent.getId())\n          item = parent\n        } else {\n          break\n        }\n      }\n    })\n\n    // Find all children of matching items\n    const childrenIds = new Set<string>()\n    directMatches.forEach((matchId) => {\n      const item = tree.getItems().find((i) => i.getId() === matchId)\n      if (item && item.isFolder()) {\n        // Get all descendants recursively\n        const getDescendants = (itemId: string) => {\n          const children = items[itemId]?.children || []\n          children.forEach((childId) => {\n            childrenIds.add(childId)\n            if (items[childId]?.children?.length) {\n              getDescendants(childId)\n            }\n          })\n        }\n\n        getDescendants(item.getId())\n      }\n    })\n\n    // Combine direct matches, parents, and children\n    setFilteredItems([\n      ...directMatches,\n      ...Array.from(parentIds),\n      ...Array.from(childrenIds),\n    ])\n\n    // Keep all folders expanded during search to ensure all matches are visible\n    // Store current expanded state first\n    const currentExpandedItems = tree.getState().expandedItems || []\n\n    // Get all folder IDs that need to be expanded to show matches\n    const folderIdsToExpand = allItems\n      .filter((item) => item.isFolder())\n      .map((item) => item.getId())\n\n    // Update expanded items in the tree state\n    setState((prevState) => ({\n      ...prevState,\n      expandedItems: [\n        ...new Set([...currentExpandedItems, ...folderIdsToExpand]),\n      ],\n    }))\n  }, [searchValue, tree])\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:nth-2:grow\">\n      <div className=\"relative\">\n        <Input\n          ref={inputRef}\n          className=\"peer ps-9\"\n          value={searchValue}\n          onChange={(e) => {\n            const value = e.target.value\n            setSearchValue(value)\n\n            // Apply the search to the tree's internal state as well\n            const searchProps = tree.getSearchInputElementProps()\n            if (searchProps.onChange) {\n              searchProps.onChange(e)\n            }\n\n            if (value.length > 0) {\n              // If input has at least one character, expand all items\n              tree.expandAll()\n            } else {\n              // If input is cleared, reset to initial expanded state\n              setState((prevState) => ({\n                ...prevState,\n                expandedItems: initialExpandedItems,\n              }))\n              setFilteredItems([])\n            }\n          }}\n          // Prevent the internal search from being cleared on blur\n          onBlur={(e) => {\n            // Prevent default blur behavior\n            e.preventDefault()\n\n            // Re-apply the search to ensure it stays active\n            if (searchValue && searchValue.length > 0) {\n              const searchProps = tree.getSearchInputElementProps()\n              if (searchProps.onChange) {\n                const syntheticEvent = {\n                  target: { value: searchValue },\n                } as React.ChangeEvent<HTMLInputElement>\n                searchProps.onChange(syntheticEvent)\n              }\n            }\n          }}\n          type=\"search\"\n          placeholder=\"Filter items...\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <FilterIcon className=\"size-4\" aria-hidden=\"true\" />\n        </div>\n        {searchValue && (\n          <button\n            className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            aria-label=\"Clear search\"\n            onClick={handleClearSearch}\n          >\n            <CircleXIcon className=\"size-4\" aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n\n      <Tree indent={indent} tree={tree}>\n        {searchValue && filteredItems.length === 0 ? (\n          <p className=\"px-3 py-4 text-center text-sm\">\n            No items found for \"{searchValue}\"\n          </p>\n        ) : (\n          tree.getItems().map((item) => {\n            const isVisible = shouldShowItem(item.getId())\n\n            return (\n              <TreeItem\n                key={item.getId()}\n                item={item}\n                data-visible={isVisible || !searchValue}\n                className=\"data-[visible=false]:hidden\"\n              >\n                <TreeItemLabel>\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                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            )\n          })\n        )}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Tree with filtering ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree",
+      "filter",
+      "search"
+    ]
+  }
+}

package/public/r/comp-573.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-573",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-573.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  FeatureImplementation,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport { FolderIcon, FolderOpenIcon } from \"lucide-react\"\n\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\nconst doubleClickExpandFeature: FeatureImplementation = {\n  itemInstance: {\n    getProps: ({ tree, item, prev }) => ({\n      ...prev?.(),\n      onDoubleClick: (e: React.MouseEvent) => {\n        item.primaryAction()\n\n        if (!item.isFolder()) {\n          return\n        }\n\n        if (item.isExpanded()) {\n          item.collapse()\n        } else {\n          item.expand()\n        }\n      },\n      onClick: (e: React.MouseEvent) => {\n        if (e.shiftKey) {\n          item.selectUpTo(e.ctrlKey || e.metaKey)\n        } else if (e.ctrlKey || e.metaKey) {\n          item.toggleSelect()\n        } else {\n          tree.setSelectedItems([item.getItemMeta().itemId])\n        }\n\n        item.setFocused()\n      },\n    }),\n  },\n}\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      selectedItems: [\"components\"],\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      hotkeysCoreFeature,\n      doubleClickExpandFeature,\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            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel>\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                  {item.getItemName()}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          )\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Tree with items expandable on double click ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}

package/public/r/comp-574.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-574",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json",
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-574.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  expandAllFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport {\n  FolderIcon,\n  FolderOpenIcon,\n  ListCollapseIcon,\n  ListTreeIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\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      selectedItems: [\"components\"],\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      hotkeysCoreFeature,\n      expandAllFeature,\n    ],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:nth-2:grow\">\n      <div className=\"flex items-center gap-2\">\n        <Button size=\"sm\" variant=\"outline\" onClick={() => tree.expandAll()}>\n          <ListTreeIcon\n            className=\"-ms-1 opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          Expand all\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onClick={tree.collapseAll}>\n          <ListCollapseIcon\n            className=\"-ms-1 opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          Collapse all\n        </Button>\n      </div>\n\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel>\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                  {item.getItemName()}\n                  {item.isFolder() && (\n                    <span className=\"-ms-1 text-muted-foreground\">\n                      {`(${item.getChildren().length})`}\n                    </span>\n                  )}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          )\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Tree with expand/collapse all buttons ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree",
+      "button"
+    ]
+  }
+}

package/public/r/comp-575.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-575",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-575.tsx",
+      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport {\n  createOnDropHandler,\n  dragAndDropFeature,\n  hotkeysCoreFeature,\n  keyboardDragAndDropFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\"\nimport { AssistiveTreeDescription, useTree } from \"@headless-tree/react\"\nimport {\n  RiBracesLine,\n  RiCodeSSlashLine,\n  RiFileLine,\n  RiFileTextLine,\n  RiImageLine,\n  RiReactjsLine,\n} from \"@remixicon/react\"\n\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n  fileExtension?: string\n}\n\nconst initialItems: Record<string, Item> = {\n  app: {\n    name: \"app\",\n    children: [\"app/layout.tsx\", \"app/page.tsx\", \"app/(dashboard)\", \"app/api\"],\n  },\n  \"app/layout.tsx\": { name: \"layout.tsx\", fileExtension: \"tsx\" },\n  \"app/page.tsx\": { name: \"page.tsx\", fileExtension: \"tsx\" },\n  \"app/(dashboard)\": {\n    name: \"(dashboard)\",\n    children: [\"app/(dashboard)/dashboard\"],\n  },\n  \"app/(dashboard)/dashboard\": {\n    name: \"dashboard\",\n    children: [\"app/(dashboard)/dashboard/page.tsx\"],\n  },\n  \"app/(dashboard)/dashboard/page.tsx\": {\n    name: \"page.tsx\",\n    fileExtension: \"tsx\",\n  },\n  \"app/api\": { name: \"api\", children: [\"app/api/hello\"] },\n  \"app/api/hello\": { name: \"hello\", children: [\"app/api/hello/route.ts\"] },\n  \"app/api/hello/route.ts\": { name: \"route.ts\", fileExtension: \"ts\" },\n  components: {\n    name: \"components\",\n    children: [\"components/button.tsx\", \"components/card.tsx\"],\n  },\n  \"components/button.tsx\": { name: \"button.tsx\", fileExtension: \"tsx\" },\n  \"components/card.tsx\": { name: \"card.tsx\", fileExtension: \"tsx\" },\n  lib: { name: \"lib\", children: [\"lib/utils.ts\"] },\n  \"lib/utils.ts\": { name: \"utils.ts\", fileExtension: \"ts\" },\n  public: {\n    name: \"public\",\n    children: [\"public/favicon.ico\", \"public/vercel.svg\"],\n  },\n  \"public/favicon.ico\": { name: \"favicon.ico\", fileExtension: \"ico\" },\n  \"public/vercel.svg\": { name: \"vercel.svg\", fileExtension: \"svg\" },\n  \"package.json\": { name: \"package.json\", fileExtension: \"json\" },\n  \"tailwind.config.ts\": { name: \"tailwind.config.ts\", fileExtension: \"ts\" },\n  \"tsconfig.json\": { name: \"tsconfig.json\", fileExtension: \"json\" },\n  \"next.config.mjs\": { name: \"next.config.mjs\", fileExtension: \"mjs\" },\n  \"README.md\": { name: \"README.md\", fileExtension: \"md\" },\n  root: {\n    name: \"Project Root\",\n    children: [\n      \"app\",\n      \"components\",\n      \"lib\",\n      \"public\",\n      \"package.json\",\n      \"tailwind.config.ts\",\n      \"tsconfig.json\",\n      \"next.config.mjs\",\n      \"README.md\",\n    ],\n  },\n}\n\n// Helper function to get icon based on file extension\nfunction getFileIcon(extension: string | undefined, className: string) {\n  switch (extension) {\n    case \"tsx\":\n    case \"jsx\":\n      return <RiReactjsLine className={className} />\n    case \"ts\":\n    case \"js\":\n    case \"mjs\":\n      return <RiCodeSSlashLine className={className} />\n    case \"json\":\n      return <RiBracesLine className={className} />\n    case \"svg\":\n    case \"ico\":\n    case \"png\":\n    case \"jpg\":\n      return <RiImageLine className={className} />\n    case \"md\":\n      return <RiFileTextLine className={className} />\n    default:\n      return <RiFileLine className={className} />\n  }\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const [items, setItems] = useState(initialItems)\n\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"app\", \"app/(dashboard)\", \"app/(dashboard)/dashboard\"],\n      selectedItems: [\"components\"],\n    },\n    indent,\n    rootItemId: \"root\",\n    getItemName: (item) => item.getItemData()?.name ?? \"Unknown\",\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    canReorder: false,\n    onDrop: createOnDropHandler((parentItem, newChildrenIds) => {\n      setItems((prevItems) => {\n        // Sort the children alphabetically\n        const sortedChildren = [...newChildrenIds].sort((a, b) => {\n          const itemA = prevItems[a]\n          const itemB = prevItems[b]\n\n          // First sort folders before files\n          const isAFolder = (itemA?.children?.length ?? 0) > 0\n          const isBFolder = (itemB?.children?.length ?? 0) > 0\n\n          if (isAFolder && !isBFolder) return -1\n          if (!isAFolder && isBFolder) return 1\n\n          // Then sort alphabetically by name\n          return (itemA?.name ?? \"\").localeCompare(itemB?.name ?? \"\")\n        })\n\n        return {\n          ...prevItems,\n          [parentItem.getId()]: {\n            ...prevItems[parentItem.getId()],\n            children: sortedChildren,\n          },\n        }\n      })\n    }),\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId]?.children ?? [],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      hotkeysCoreFeature,\n      dragAndDropFeature,\n      keyboardDragAndDropFeature,\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-1 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          <AssistiveTreeDescription tree={tree} />\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem key={item.getId()} item={item} className=\"pb-0!\">\n                <TreeItemLabel className=\"rounded-none py-1\">\n                  <span className=\"flex items-center gap-2\">\n                    {!item.isFolder() &&\n                      getFileIcon(\n                        item.getItemData()?.fileExtension,\n                        \"text-muted-foreground pointer-events-none size-4\"\n                      )}\n                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            )\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        File editor with drag and drop ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}

package/public/r/comp-576.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-576",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-576.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\n\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  href?: string\n  children?: string[]\n  current?: boolean\n}\n\nconst items: Record<string, Item> = {\n  main: { name: \"Documentation\", children: [\"guides\", \"api\", \"resources\"] },\n  guides: { name: \"User Guides\", children: [\"getting-started\", \"advanced\"] },\n  \"getting-started\": {\n    name: \"Getting Started\",\n    children: [\"installation\", \"setup\"],\n  },\n  installation: { name: \"Installation\", href: \"#\", current: true },\n  setup: { name: \"Configuration\", href: \"#\" },\n  advanced: { name: \"Advanced Usage\", href: \"#\" },\n  api: { name: \"API Reference\", children: [\"endpoints\", \"models\"] },\n  endpoints: { name: \"Endpoints\", href: \"#\" },\n  models: { name: \"Data Models\", href: \"#\" },\n  resources: { name: \"Resources\", children: [\"examples\", \"faq\"] },\n  examples: { name: \"Code Examples\", href: \"#\" },\n  faq: { name: \"FAQ\", href: \"#\" },\n}\n\nconst indent = 20\n\n// Find the path from root to the current item\nfunction findPathToCurrent(\n  items: Record<string, Item>,\n  rootId: string\n): string[] {\n  const path: string[] = []\n\n  function findPath(itemId: string): boolean {\n    const item = items[itemId]\n    if (!item) return false\n\n    // If this is the current item, we found the path\n    if (item.current) {\n      path.unshift(itemId)\n      return true\n    }\n\n    // If this item has children, search them\n    if (item.children?.length) {\n      for (const childId of item.children) {\n        if (findPath(childId)) {\n          // If we found the path in this branch, add this item to the path\n          path.unshift(itemId)\n          return true\n        }\n      }\n    }\n\n    return false\n  }\n\n  findPath(rootId)\n  return path\n}\n\n// Get all parent IDs that need to be expanded\nconst pathToCurrent = findPathToCurrent(items, \"main\")\n// Remove the current item from the path if it's a leaf node\nconst expandedItems = pathToCurrent.filter((id) => items[id].children?.length)\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems,\n    },\n    indent,\n    rootItemId: \"main\",\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: [syncDataLoaderFeature, hotkeysCoreFeature],\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            <TreeItem\n              key={item.getId()}\n              item={item}\n              asChild={!!item.getItemData()?.href}\n            >\n              {item.getItemData()?.href ? (\n                <a\n                  href={item.getItemData().href}\n                  data-current={item.getItemData().current}\n                >\n                  <TreeItemLabel className=\"in-data-[current=true]:bg-accent in-data-[current=true]:text-accent-foreground\" />\n                </a>\n              ) : (\n                <TreeItemLabel />\n              )}\n            </TreeItem>\n          )\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Menu navigation tree ∙{\" \"}\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  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree",
+      "menu"
+    ]
+  }
+}

package/public/r/comp-577.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-577",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-577.tsx",
+      "content": "import Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\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\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\", active: true },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\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\n                        href={link.href}\n                        className=\"py-1.5\"\n                        active={link.active}\n                      >\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link, index) => (\n                  <NavigationMenuItem key={index}>\n                    <NavigationMenuLink\n                      active={link.active}\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          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          <Button asChild variant=\"ghost\" size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-578.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-578",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-578.tsx",
+      "content": "import { BookOpenIcon, InfoIcon, LifeBuoyIcon } from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\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\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\" },\n  {\n    label: \"Features\",\n    submenu: true,\n    type: \"description\",\n    items: [\n      {\n        href: \"#\",\n        label: \"Components\",\n        description: \"Browse all components in the library.\",\n      },\n      {\n        href: \"#\",\n        label: \"Documentation\",\n        description: \"Learn how to use the library.\",\n      },\n      {\n        href: \"#\",\n        label: \"Templates\",\n        description: \"Pre-built layouts for common use cases.\",\n      },\n    ],\n  },\n  {\n    label: \"Pricing\",\n    submenu: true,\n    type: \"simple\",\n    items: [\n      { href: \"#\", label: \"Product A\" },\n      { href: \"#\", label: \"Product B\" },\n      { href: \"#\", label: \"Product C\" },\n      { href: \"#\", label: \"Product D\" },\n    ],\n  },\n  {\n    label: \"About\",\n    submenu: true,\n    type: \"icon\",\n    items: [\n      { href: \"#\", label: \"Getting Started\", icon: \"BookOpenIcon\" },\n      { href: \"#\", label: \"Tutorials\", icon: \"LifeBuoyIcon\" },\n      { href: \"#\", label: \"About Us\", icon: \"InfoIcon\" },\n    ],\n  },\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-64 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                      {link.submenu ? (\n                        <>\n                          <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                            {link.label}\n                          </div>\n                          <ul>\n                            {link.items.map((item, itemIndex) => (\n                              <li key={itemIndex}>\n                                <NavigationMenuLink\n                                  href={item.href}\n                                  className=\"py-1.5\"\n                                >\n                                  {item.label}\n                                </NavigationMenuLink>\n                              </li>\n                            ))}\n                          </ul>\n                        </>\n                      ) : (\n                        <NavigationMenuLink href={link.href} className=\"py-1.5\">\n                          {link.label}\n                        </NavigationMenuLink>\n                      )}\n                      {/* Add separator between different types of items */}\n                      {index < navigationLinks.length - 1 &&\n                        // Show separator if:\n                        // 1. One is submenu and one is simple link OR\n                        // 2. Both are submenus but with different types\n                        ((!link.submenu &&\n                          navigationLinks[index + 1].submenu) ||\n                          (link.submenu &&\n                            !navigationLinks[index + 1].submenu) ||\n                          (link.submenu &&\n                            navigationLinks[index + 1].submenu &&\n                            link.type !== navigationLinks[index + 1].type)) && (\n                          <div\n                            role=\"separator\"\n                            aria-orientation=\"horizontal\"\n                            className=\"-mx-1 my-1 h-px w-full bg-border\"\n                          />\n                        )}\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu viewport={false} className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link, index) => (\n                  <NavigationMenuItem key={index}>\n                    {link.submenu ? (\n                      <>\n                        <NavigationMenuTrigger className=\"bg-transparent px-2 py-1.5 font-medium text-muted-foreground hover:text-primary *:[svg]:-me-0.5 *:[svg]:size-3.5\">\n                          {link.label}\n                        </NavigationMenuTrigger>\n                        <NavigationMenuContent className=\"z-50 p-1 data-[motion=from-end]:slide-in-from-right-16! data-[motion=from-start]:slide-in-from-left-16! data-[motion=to-end]:slide-out-to-right-16! data-[motion=to-start]:slide-out-to-left-16!\">\n                          <ul\n                            className={cn(\n                              link.type === \"description\"\n                                ? \"min-w-64\"\n                                : \"min-w-48\"\n                            )}\n                          >\n                            {link.items.map((item, itemIndex) => (\n                              <li key={itemIndex}>\n                                <NavigationMenuLink\n                                  href={item.href}\n                                  className=\"py-1.5\"\n                                >\n                                  {/* Display icon if present */}\n                                  {link.type === \"icon\" && \"icon\" in item && (\n                                    <div className=\"flex items-center gap-2\">\n                                      {item.icon === \"BookOpenIcon\" && (\n                                        <BookOpenIcon\n                                          size={16}\n                                          className=\"text-foreground opacity-60\"\n                                          aria-hidden=\"true\"\n                                        />\n                                      )}\n                                      {item.icon === \"LifeBuoyIcon\" && (\n                                        <LifeBuoyIcon\n                                          size={16}\n                                          className=\"text-foreground opacity-60\"\n                                          aria-hidden=\"true\"\n                                        />\n                                      )}\n                                      {item.icon === \"InfoIcon\" && (\n                                        <InfoIcon\n                                          size={16}\n                                          className=\"text-foreground opacity-60\"\n                                          aria-hidden=\"true\"\n                                        />\n                                      )}\n                                      <span>{item.label}</span>\n                                    </div>\n                                  )}\n\n                                  {/* Display label with description if present */}\n                                  {link.type === \"description\" &&\n                                  \"description\" in item ? (\n                                    <div className=\"space-y-1\">\n                                      <div className=\"font-medium\">\n                                        {item.label}\n                                      </div>\n                                      <p className=\"line-clamp-2 text-xs text-muted-foreground\">\n                                        {item.description}\n                                      </p>\n                                    </div>\n                                  ) : (\n                                    // Display simple label if not icon or description type\n                                    !link.type ||\n                                    (link.type !== \"icon\" &&\n                                      link.type !== \"description\" && (\n                                        <span>{item.label}</span>\n                                      ))\n                                  )}\n                                </NavigationMenuLink>\n                              </li>\n                            ))}\n                          </ul>\n                        </NavigationMenuContent>\n                      </>\n                    ) : (\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                    )}\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          <Button asChild variant=\"ghost\" size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-579.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-579",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-579.tsx",
+      "content": "import Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\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\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\", active: true },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\n]\n\nexport default function Component() {\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\n                          href={link.href}\n                          className=\"py-1.5\"\n                          active={link.active}\n                        >\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            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\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-2\">\n          <Button asChild variant=\"ghost\" size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-58.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-58",
+  "type": "registry:component",
+  "dependencies": [
+    "input-otp"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-58.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { OTPInput, SlotProps } from \"input-otp\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>OTP input (spaced)</Label>\n      <OTPInput\n        id={id}\n        containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n        maxLength={4}\n        render={({ slots }) => (\n          <div className=\"flex gap-2\">\n            {slots.map((slot, idx) => (\n              <Slot key={idx} {...slot} />\n            ))}\n          </div>\n        )}\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/guilhermerodz/input-otp\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          Input OTP\n        </a>\n      </p>\n    </div>\n  )\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow]\",\n        { \"z-10 border-ring ring-[3px] ring-ring/50\": props.isActive }\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "otp"
+    ]
+  }
+}

package/public/r/comp-580.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-580",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/input.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-580.tsx",
+      "content": "import { useId } from \"react\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\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\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Products\" },\n  { href: \"#\", label: \"Categories\" },\n  { href: \"#\", label: \"Deals\" },\n]\n\nexport default function Component() {\n  const id = useId()\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=\"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-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                  <NavigationMenuItem\n                    className=\"w-full\"\n                    role=\"presentation\"\n                    aria-hidden=\"true\"\n                  >\n                    <div\n                      role=\"separator\"\n                      aria-orientation=\"horizontal\"\n                      className=\"-mx-1 my-1 h-px bg-border\"\n                    ></div>\n                  </NavigationMenuItem>\n                  <NavigationMenuItem className=\"w-full\">\n                    <NavigationMenuLink href=\"#\" className=\"py-1.5\">\n                      Sign In\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                  <NavigationMenuItem className=\"w-full\">\n                    <Button\n                      asChild\n                      size=\"sm\"\n                      className=\"mt-0.5 w-full text-left text-sm\"\n                    >\n                      <span className=\"flex items-baseline gap-2\">\n                        Cart\n                        <span className=\"text-xs text-primary-foreground/60\">\n                          2\n                        </span>\n                      </span>\n                    </Button>\n                  </NavigationMenuItem>\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex flex-1 items-center gap-6 max-md:justify-between\">\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n            {/* Navigation 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            {/* Search form */}\n            <div className=\"relative\">\n              <Input\n                id={id}\n                className=\"peer h-8 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          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2 max-md:hidden\">\n          <Button asChild variant=\"ghost\" size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">\n              <span className=\"flex items-baseline gap-2\">\n                Cart\n                <span className=\"text-xs text-primary-foreground/60\">2</span>\n              </span>\n            </a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}