{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-with-results",
  "type": "registry:ui",
  "title": "Search with results",
  "description": "Search field with a results list below it showing titles and optional subtitles, plus a No results state. Emits onSearch as you type so you can filter in React.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/search-input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/search-with-results.tsx",
      "type": "registry:ui",
      "target": "components/ui/search-with-results.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { SearchInput } from \"@/components/ui/search-input\"\nimport { cn } from \"@/lib/utils\"\n\n/** A search field with a result list underneath, for global search and quick lookups. */\ntype SearchResult = { id: string; title: string; subtitle?: string }\n\ntype SearchWithResultsProps = {\n  /** Results to list. Defaults to a Lumen search across invoices, customers and deploys. */\n  results?: SearchResult[]\n  /** Called on every keystroke. Without it, the list filters itself by title and subtitle. */\n  onSearch?: (q: string) => void\n  className?: string\n}\n\nconst SAMPLE_RESULTS: SearchResult[] = [\n  { id: \"inv-2041\", title: \"INV-2041 · Northwind Traders\", subtitle: \"Invoice · $12,400 · due Mar 14, 2026\" },\n  { id: \"cust-maya\", title: \"Maya Chen\", subtitle: \"Customer · maya@northwind.com\" },\n  { id: \"inv-2038\", title: \"INV-2038 · Fabrikam\", subtitle: \"Invoice · $3,180 · paid\" },\n  { id: \"deploy-412\", title: \"Deploy #412\", subtitle: \"lumen-web · production · 2 hours ago\" },\n  { id: \"cust-theo\", title: \"Theo Okafor\", subtitle: \"Customer · theo@fabrikam.co\" },\n  { id: \"doc-refunds\", title: \"Refund policy\", subtitle: \"Docs · Billing\" },\n]\n\nfunction SearchWithResults({ results = SAMPLE_RESULTS, onSearch, className }: SearchWithResultsProps) {\n  const [query, setQuery] = React.useState(\"\")\n  const q = query.trim().toLowerCase()\n  const shown = onSearch || !q ? results : results.filter((r) => `${r.title} ${r.subtitle ?? \"\"}`.toLowerCase().includes(q))\n  return (\n    <div data-slot=\"search-with-results\" className={cn(\"w-full max-w-md\", className)}>\n      <SearchInput\n        placeholder=\"Search…\"\n        onChange={(e) => {\n          setQuery(e.target.value)\n          onSearch?.(e.target.value)\n        }}\n        aria-label=\"Search\"\n      />\n      <ul className=\"mt-2 overflow-hidden rounded-xl border border-border bg-surface\">\n        {shown.map((r) => (\n          <li key={r.id} className=\"border-b border-border px-3 py-2 last:border-b-0\">\n            <p className=\"text-sm text-fg\">{r.title}</p>\n            {r.subtitle ? <p className=\"text-xs text-fg-muted\">{r.subtitle}</p> : null}\n          </li>\n        ))}\n        {shown.length === 0 ? <li className=\"px-3 py-4 text-xs text-fg-muted\">No results</li> : null}\n      </ul>\n    </div>\n  )\n}\nexport { SearchWithResults }\nexport type { SearchWithResultsProps, SearchResult }\n"
    }
  ]
}