{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "filter-bar",
  "title": "Filter Bar",
  "type": "registry:blocks",
  "description": "Multi-condition filter bar with search input, removable filter chips, date-range picker, and list/grid view toggle.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { AdvancedFilterBar } from \"@etherealui/react\"\n\nexport function FilterBarDemo() {\n  return <AdvancedFilterBar />\n}",
  "files": [
    {
      "path": "packages/ui/src/blocks/filter-bar.tsx",
      "target": "components/ui/filter-bar.tsx",
      "type": "registry:blocks",
      "content": "import * as React from \"react\"\nimport { Search, SlidersHorizontal, X, RotateCcw, LayoutGrid, List } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\nimport { Input } from \"../primitives/input\"\nimport { Button, ToggleGroup } from \"../primitives/button\"\nimport { DateRangePicker } from \"../primitives/date-picker\"\n\nexport interface ActiveFilterPill {\n  id: string\n  field: string\n  value: string\n}\n\nexport interface AdvancedFilterBarProps {\n  searchQuery?: string\n  onSearchChange?: (q: string) => void\n  initialPills?: ActiveFilterPill[]\n  className?: string\n}\n\nexport const AdvancedFilterBar: React.FC<AdvancedFilterBarProps> = ({\n  searchQuery = \"\",\n  onSearchChange,\n  initialPills = [\n    { id: \"status\", field: \"Status\", value: \"Active, Trialing\" },\n    { id: \"plan\", field: \"Plan\", value: \"Enterprise, Pro\" },\n  ],\n  className,\n}) => {\n  const [query, setQuery] = React.useState(searchQuery)\n  const [pills, setPills] = React.useState<ActiveFilterPill[]>(initialPills)\n  const [viewMode, setViewMode] = React.useState(\"table\")\n\n  const handleSearch = (val: string) => {\n    setQuery(val)\n    onSearchChange?.(val)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white p-3.5 space-y-3 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n        <div className=\"flex flex-1 items-center gap-2.5\">\n          <Input\n            value={query}\n            onChange={(e) => handleSearch(e.target.value)}\n            placeholder=\"Search customers, emails, or invoices...\"\n            leftIcon={<Search className=\"h-3.5 w-3.5\" />}\n            className=\"max-w-md\"\n          />\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => {\n              if (!pills.some((p) => p.id === \"region\")) {\n                setPills((prev) => [\n                  ...prev,\n                  { id: \"region\", field: \"Region\", value: \"North America\" },\n                ])\n              }\n            }}\n          >\n            <SlidersHorizontal className=\"h-3.5 w-3.5 text-zinc-400\" />\n            Filter\n          </Button>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <DateRangePicker />\n          <ToggleGroup\n            size=\"sm\"\n            value={viewMode}\n            onValueChange={setViewMode}\n            items={[\n              {\n                value: \"table\",\n                label: \"List\",\n                icon: <List className=\"h-3.5 w-3.5\" />,\n              },\n              {\n                value: \"grid\",\n                label: \"Grid\",\n                icon: <LayoutGrid className=\"h-3.5 w-3.5\" />,\n              },\n            ]}\n          />\n        </div>\n      </div>\n\n      {pills.length > 0 && (\n        <div className=\"flex flex-wrap items-center gap-2 border-t border-zinc-200 pt-2.5 dark:border-zinc-800\">\n          <span className=\"text-[11px] font-medium text-zinc-400\">\n            Active filters:\n          </span>\n          {pills.map((pill) => (\n            <span\n              key={pill.id}\n              className=\"inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-xs text-zinc-700 dark:border-zinc-800 dark:bg-zinc-800/70 dark:text-zinc-200\"\n            >\n              <span className=\"text-zinc-400\">{pill.field}:</span>\n              <span className=\"font-medium text-zinc-900 dark:text-zinc-100\">\n                {pill.value}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() =>\n                  setPills((prev) => prev.filter((item) => item.id !== pill.id))\n                }\n                className=\"ml-0.5 rounded p-0.5 text-zinc-400 hover:bg-zinc-200/70 hover:text-zinc-700 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 cursor-pointer\"\n              >\n                <X className=\"h-3 w-3\" />\n              </button>\n            </span>\n          ))}\n          <button\n            type=\"button\"\n            onClick={() => {\n              setPills([])\n              handleSearch(\"\")\n            }}\n            className=\"inline-flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white ml-auto cursor-pointer\"\n          >\n            <RotateCcw className=\"h-3 w-3\" />\n            Clear all\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"
    }
  ]
}