{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-cascader-3","type":"registry:block","title":"Deep search across every level with path-annotated results.","description":"Deep search across every level with path-annotated results.","dependencies":[],"registryDependencies":["button","@reui/cascader","@reui/cascader-item","@reui/cascader-nav","@reui/cascader-types"],"files":[{"path":"c-cascader-3.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  Cascader,\n  CascaderContent,\n  CascaderEmpty,\n  CascaderList,\n  CascaderPanel,\n  CascaderStatus,\n  CascaderTrigger,\n} from \"@/components/reui/cascader/cascader\"\nimport { CascaderItems } from \"@/components/reui/cascader/cascader-item\"\nimport {\n  CascaderBreadcrumb,\n  CascaderInput,\n  CascaderNav,\n  CascaderValue,\n} from \"@/components/reui/cascader/cascader-nav\"\nimport type { CascaderNode } from \"@/components/reui/cascader/cascader-types\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n/**\n * No `size-*` class on either glyph, and that is the whole alignment fix.\n * Every style sizes a bare icon through `[&_svg:not([class*='size-'])]` on\n * both the cascader row and the cascader trigger - 16px in nova, vega,\n * maia, luma, rhea and lyra, 14px in mira and sera - and that guard stops\n * matching the moment a size class is present. A hardcoded `size-4` pinned\n * these two at 16px while the trigger chevron and the path chevrons beside\n * them still scaled with the style, and in the compact styles the pinned\n * glyph was tall enough to drive the trigger row's height rather than sit\n * inside the label's line box. `CascaderValue` centres its own row, so the\n * glyph needs a size that tracks the text, not an alignment class.\n */\nconst folderIcon = (\n  <IconPlaceholder\n    lucide=\"FolderIcon\"\n    tabler=\"IconFolder\"\n    hugeicons=\"Folder01Icon\"\n    phosphor=\"FolderIcon\"\n    remixicon=\"RiFolderLine\"\n    aria-hidden=\"true\"\n  />\n)\nconst fileIcon = (\n  <IconPlaceholder\n    lucide=\"FileTextIcon\"\n    tabler=\"IconFileText\"\n    hugeicons=\"File01Icon\"\n    phosphor=\"FileTextIcon\"\n    remixicon=\"RiFileTextLine\"\n    aria-hidden=\"true\"\n  />\n)\n\nconst tree: CascaderNode[] = [\n  {\n    value: \"app\",\n    label: \"app\",\n    icon: folderIcon,\n    children: [\n      {\n        value: \"app/dashboard\",\n        label: \"dashboard\",\n        icon: folderIcon,\n        children: [\n          {\n            value: \"app/dashboard/page.tsx\",\n            label: \"page.tsx\",\n            icon: fileIcon,\n          },\n          {\n            value: \"app/dashboard/layout.tsx\",\n            label: \"layout.tsx\",\n            icon: fileIcon,\n          },\n        ],\n      },\n      {\n        value: \"app/settings\",\n        label: \"settings\",\n        icon: folderIcon,\n        children: [\n          { value: \"app/settings/page.tsx\", label: \"page.tsx\", icon: fileIcon },\n          {\n            value: \"app/settings/billing.tsx\",\n            label: \"billing.tsx\",\n            icon: fileIcon,\n          },\n        ],\n      },\n      { value: \"app/layout.tsx\", label: \"layout.tsx\", icon: fileIcon },\n    ],\n  },\n  {\n    value: \"components\",\n    label: \"components\",\n    icon: folderIcon,\n    children: [\n      { value: \"components/button.tsx\", label: \"button.tsx\", icon: fileIcon },\n      {\n        value: \"components/page-header.tsx\",\n        label: \"page-header.tsx\",\n        icon: fileIcon,\n      },\n      {\n        value: \"components/data-table.tsx\",\n        label: \"data-table.tsx\",\n        icon: fileIcon,\n      },\n    ],\n  },\n  {\n    value: \"hooks\",\n    label: \"hooks\",\n    icon: folderIcon,\n    children: [\n      { value: \"hooks/use-user.ts\", label: \"use-user.ts\", icon: fileIcon },\n      { value: \"hooks/use-toast.ts\", label: \"use-toast.ts\", icon: fileIcon },\n    ],\n  },\n  {\n    value: \"lib\",\n    label: \"lib\",\n    icon: folderIcon,\n    children: [\n      { value: \"lib/utils.ts\", label: \"utils.ts\", icon: fileIcon },\n      { value: \"lib/auth.ts\", label: \"auth.ts\", icon: fileIcon },\n      { value: \"lib/db.ts\", label: \"db.ts\", icon: fileIcon },\n    ],\n  },\n  {\n    value: \"server\",\n    label: \"server\",\n    icon: folderIcon,\n    children: [\n      {\n        value: \"server/actions\",\n        label: \"actions\",\n        icon: folderIcon,\n        children: [\n          {\n            value: \"server/actions/billing.ts\",\n            label: \"billing.ts\",\n            icon: fileIcon,\n          },\n          {\n            value: \"server/actions/invite.ts\",\n            label: \"invite.ts\",\n            icon: fileIcon,\n          },\n        ],\n      },\n      { value: \"server/client.ts\", label: \"client.ts\", icon: fileIcon },\n    ],\n  },\n  {\n    value: \"styles\",\n    label: \"styles\",\n    icon: folderIcon,\n    children: [\n      { value: \"styles/globals.css\", label: \"globals.css\", icon: fileIcon },\n      { value: \"styles/theme.css\", label: \"theme.css\", icon: fileIcon },\n    ],\n  },\n  {\n    value: \"tests\",\n    label: \"tests\",\n    icon: folderIcon,\n    children: [\n      { value: \"tests/auth.test.ts\", label: \"auth.test.ts\", icon: fileIcon },\n      {\n        value: \"tests/billing.test.ts\",\n        label: \"billing.test.ts\",\n        icon: fileIcon,\n      },\n    ],\n  },\n  {\n    value: \"scripts\",\n    label: \"scripts\",\n    icon: folderIcon,\n    children: [\n      { value: \"scripts/seed.ts\", label: \"seed.ts\", icon: fileIcon },\n      { value: \"scripts/build.ts\", label: \"build.ts\", icon: fileIcon },\n    ],\n  },\n]\n\n/**\n * Deep search. Typing searches every level instead of only the current one,\n * and each result carries its folder path - without that, three files named\n * `page.tsx` would be indistinguishable. Clear the query to return to browsing.\n */\nexport function Pattern() {\n  const [value, setValue] = useState(\"\")\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-3 p-4\">\n      <Cascader\n        items={tree}\n        value={value}\n        onValueChange={setValue}\n        searchScope=\"deep\"\n      >\n        <CascaderTrigger\n          aria-label=\"File\"\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-72 justify-between gap-2 font-normal\"\n            />\n          }\n        >\n          <CascaderValue placeholder=\"Find a file\" maxSegments={3} />\n        </CascaderTrigger>\n\n        <CascaderContent className=\"w-80\">\n          <CascaderPanel>\n            <CascaderNav>\n              <CascaderInput placeholder=\"Search all files...\" />\n            </CascaderNav>\n            <CascaderBreadcrumb />\n            <CascaderEmpty />\n            <CascaderList>\n              <CascaderItems />\n            </CascaderList>\n            <CascaderStatus />\n          </CascaderPanel>\n        </CascaderContent>\n      </Cascader>\n    </div>\n  )\n}","target":"components/examples/c-cascader-3.tsx"}],"meta":{"order":3,"label":"Deep Search"}}