{
  "name": "filter-bar",
  "type": "registry:block",
  "title": "Filter Bar",
  "description": "Search and filters above a table, with active-filter badges and a clear action.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/badge",
    "@siteplane/button",
    "@siteplane/input",
    "@siteplane/menu"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "src/components/patterns/filter-bar.tsx",
      "type": "registry:block",
      "target": "components/patterns/filter-bar.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useResolvedDensity } from \"@/components/ui/siteplane-provider\";\n\nexport interface FilterBarProps extends React.ComponentProps<\"section\"> {\n  density?: \"compact\" | \"default\";\n}\n\nexport function FilterBar({\n  className,\n  density,\n  ...props\n}: FilterBarProps): React.ReactElement {\n  const resolvedDensity = useResolvedDensity(density);\n\n  return (\n    <section\n      className={cn(\n        \"grid min-w-0 gap-3 rounded-lg border bg-background p-3 data-[density=compact]:gap-2 data-[density=compact]:p-2\",\n        className,\n      )}\n      data-density={resolvedDensity}\n      data-pattern=\"filter-bar\"\n      {...props}\n    />\n  );\n}\n\nexport function FilterBarControls({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"grid min-w-0 gap-2 md:grid-cols-[minmax(16rem,1fr)_auto] md:items-center\",\n        className,\n      )}\n      data-pattern=\"filter-bar-controls\"\n      {...props}\n    />\n  );\n}\n\nexport function FilterBarSearch({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"min-w-0\", className)}\n      data-pattern=\"filter-bar-search\"\n      {...props}\n    />\n  );\n}\n\nexport function FilterBarFilters({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex min-w-0 flex-wrap items-center gap-2\", className)}\n      data-pattern=\"filter-bar-filters\"\n      {...props}\n    />\n  );\n}\n\nexport function FilterBarActiveFilters({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex min-w-0 flex-wrap items-center gap-1.5\", className)}\n      data-pattern=\"filter-bar-active-filters\"\n      {...props}\n    />\n  );\n}\n\nexport function FilterBarActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex shrink-0 items-center gap-2\", className)}\n      data-pattern=\"filter-bar-actions\"\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "categories": [
    "patterns"
  ],
  "docs": "# Filter Bar\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nFilter Bar is a `registry:block` for list and table screens. It organizes search, filter controls, active-filter badges and clear actions without owning product state or query serialization.\n\n## Import\n\n```tsx\nimport {\n  FilterBar,\n  FilterBarActions,\n  FilterBarActiveFilters,\n  FilterBarControls,\n  FilterBarFilters,\n  FilterBarSearch,\n} from \"@/components/patterns/filter-bar\";\n```\n\n## Public API\n\n- `FilterBar` provides layout slots only; the consuming screen owns search state, filters and URL synchronization.\n- Use Input for search, Menu or an appropriate selection primitive for filters, Badge for active filters and Button for actions.\n- Show clear actions only when search or filters are active, and keep active filter badges in their own row.\n- Search controls need visible or screen-reader labels. Active filters must describe their state in text rather than color alone.\n- Use `density=\"compact\"` for a denser bar. Without a local value, density inherits from `SiteplaneUIProvider`.\n\n## Public Motion\n\n- The bar itself does not animate. Menus, Selects and other floating controls retain their native floating-panel motion.\n- Reduced motion is inherited from those primitives and the global motion provider.\n\n## Public Accessibility\n\n- Give every search and filter control a label; a placeholder is supporting copy, not an accessible name.\n- Describe active filters with readable text rather than color alone.\n- Keep clear actions keyboard reachable and name whether they clear one filter or the complete filter state.\n\n## Public Agent Guidance\n\n- Keep product filtering logic outside the pattern.\n- Use native Siteplane controls in every slot instead of raw form or menu elements.\n- Prefer the density prop over local spacing overrides.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/patterns/filter-bar)\n\n- [Registry source](https://ui.siteplane.io/r/filter-bar.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/patterns/filter-bar",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}