{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-1",
  "title": "Faceted Docs Search Panel",
  "description": "Search panel with a query field, a sidebar of type facets with live counts that narrow the list, and results showing title, type badge, and snippet.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "checkbox",
    "input"
  ],
  "files": [
    {
      "path": "registry/blocks/search/1/search-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Result = {\n  title: string\n  snippet: string\n  type: string\n}\n\nconst types = [\"Docs\", \"Guide\", \"Blog\", \"API\"]\n\nconst results: Result[] = [\n  {\n    title: \"Design tokens overview\",\n    snippet:\n      \"Tokens are the single source of truth for color, spacing, and typography across your product.\",\n    type: \"Docs\",\n  },\n  {\n    title: \"Theming with tokens\",\n    snippet:\n      \"A step-by-step walkthrough of remapping semantic tokens to build a dark theme.\",\n    type: \"Guide\",\n  },\n  {\n    title: \"Designing tokens that scale\",\n    snippet:\n      \"How we restructured our tokens into three tiers and cut theme work to almost nothing.\",\n    type: \"Blog\",\n  },\n  {\n    title: \"Tokens API reference\",\n    snippet:\n      \"Read, resolve, and override token values programmatically with the typed tokens client.\",\n    type: \"API\",\n  },\n  {\n    title: \"Migrating to design tokens\",\n    snippet:\n      \"Adopt tokens incrementally, starting with color and shipping each tier behind review.\",\n    type: \"Guide\",\n  },\n]\n\nexport default function SearchBlock() {\n  const [selected, setSelected] = React.useState<Set<string>>(new Set())\n  const [query, setQuery] = React.useState(\"\")\n\n  const toggle = (type: string) =>\n    setSelected((prev) => {\n      const next = new Set(prev)\n      if (next.has(type)) next.delete(type)\n      else next.add(type)\n      return next\n    })\n\n  const q = query.trim().toLowerCase()\n  const matchesQuery = (r: Result) =>\n    !q || `${r.title} ${r.snippet} ${r.type}`.toLowerCase().includes(q)\n\n  const queryMatched = results.filter(matchesQuery)\n  const countFor = (type: string) =>\n    queryMatched.filter((r) => r.type === type).length\n\n  const filtered = queryMatched.filter(\n    (r) => selected.size === 0 || selected.has(r.type)\n  )\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-3xl rounded-lg border border-border bg-background\">\n        <div className=\"border-b border-border p-3\">\n          <div className=\"relative\">\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlass\"\n              remixicon=\"RiSearchLine\"\n              className=\"absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n              aria-hidden=\"true\"\n            />\n            <Input\n              type=\"search\"\n              value={query}\n              onChange={(e) => setQuery(e.target.value)}\n              placeholder=\"Search documentation...\"\n              aria-label=\"Search\"\n              className=\"pl-9\"\n            />\n          </div>\n        </div>\n\n        <div className=\"grid md:grid-cols-[180px_1fr]\">\n          <aside className=\"border-b border-border p-4 md:border-r md:border-b-0\">\n            <div className=\"mb-3 flex items-center justify-between\">\n              <span className=\"text-xs font-medium tracking-wide text-muted-foreground uppercase\">\n                Type\n              </span>\n              {selected.size > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSelected(new Set())}\n                  className=\"text-xs text-muted-foreground transition-colors hover:text-foreground\"\n                >\n                  Clear\n                </button>\n              )}\n            </div>\n            <ul className=\"flex flex-col gap-3\">\n              {types.map((type) => (\n                <li key={type} className=\"flex items-center gap-2.5\">\n                  <Checkbox\n                    id={`type-${type}`}\n                    checked={selected.has(type)}\n                    onCheckedChange={() => toggle(type)}\n                  />\n                  <label\n                    htmlFor={`type-${type}`}\n                    className=\"flex flex-1 items-center justify-between text-sm text-foreground\"\n                  >\n                    {type}\n                    <span className=\"text-xs text-muted-foreground tabular-nums\">\n                      {countFor(type)}\n                    </span>\n                  </label>\n                </li>\n              ))}\n            </ul>\n          </aside>\n\n          <div className=\"min-w-0 p-4 md:min-h-[510px]\">\n            <p className=\"mb-1 text-xs text-muted-foreground tabular-nums\">\n              {filtered.length} {filtered.length === 1 ? \"Result\" : \"Results\"}\n            </p>\n            {filtered.length === 0 ? (\n              <div className=\"py-10 text-center text-sm text-muted-foreground\">\n                No results for &ldquo;{query}&rdquo;.\n              </div>\n            ) : (\n              <ul className=\"flex flex-col divide-y divide-border\">\n                {filtered.map((result) => (\n                  <li\n                    key={result.title}\n                    className=\"flex flex-col gap-1.5 py-3.5\"\n                  >\n                    <div className=\"flex items-center gap-2\">\n                      <a\n                        href=\"#\"\n                        className=\"text-sm font-semibold text-foreground hover:underline\"\n                      >\n                        {result.title}\n                      </a>\n                      <Badge variant=\"secondary\">{result.type}</Badge>\n                    </div>\n                    <p className=\"text-sm/relaxed text-muted-foreground\">\n                      {result.snippet}\n                    </p>\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/search-1.tsx"
    }
  ],
  "meta": {
    "height": "705px",
    "tier": "free"
  },
  "categories": [
    "search"
  ],
  "type": "registry:block"
}