{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "filter-panel",
  "title": "Filter Panel",
  "description": "A faceted filter panel: groups of checkboxes with optional result counts, an active-filter count, and a clear-all control. Fully controlled.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/filter-panel.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface FilterOption {\n  value: string\n  label: string\n  /** Optional result count shown next to the option. */\n  count?: number\n}\n\nexport interface FilterGroup {\n  id: string\n  label: string\n  options: FilterOption[]\n}\n\n/** Selected values keyed by group id. */\nexport type FilterValue = Record<string, string[]>\n\nexport interface FilterPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  groups: FilterGroup[]\n  value: FilterValue\n  onValueChange: (value: FilterValue) => void\n  title?: string\n}\n\nfunction countActive(value: FilterValue): number {\n  return Object.values(value).reduce((total, values) => total + values.length, 0)\n}\n\nconst FilterPanel = React.forwardRef<HTMLDivElement, FilterPanelProps>(\n  ({ className, groups, value, onValueChange, title = \"Filters\", ...props }, ref) => {\n    const active = countActive(value)\n\n    const toggle = (groupId: string, optionValue: string) => {\n      const current = value[groupId] ?? []\n      const next = current.includes(optionValue)\n        ? current.filter((v) => v !== optionValue)\n        : [...current, optionValue]\n      onValueChange({ ...value, [groupId]: next })\n    }\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-6\", className)} {...props}>\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"flex items-center gap-2 font-semibold\">\n            {title}\n            {active > 0 && (\n              <span className=\"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-primary-foreground\">\n                {active}\n              </span>\n            )}\n          </h3>\n          {active > 0 && (\n            <button\n              type=\"button\"\n              onClick={() => onValueChange({})}\n              className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              <X className=\"h-3.5 w-3.5\" />\n              Clear all\n            </button>\n          )}\n        </div>\n\n        {groups.map((group) => (\n          <fieldset key={group.id} className=\"flex flex-col gap-2.5 border-0 p-0\">\n            <legend className=\"mb-1 font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground/70\">\n              {group.label}\n            </legend>\n            {group.options.map((option) => {\n              const checked = (value[group.id] ?? []).includes(option.value)\n              return (\n                <label\n                  key={option.value}\n                  className=\"flex cursor-pointer items-center gap-2.5 text-sm transition-colors hover:text-foreground\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    checked={checked}\n                    onChange={() => toggle(group.id, option.value)}\n                    className=\"h-4 w-4 shrink-0 cursor-pointer rounded border-input accent-[hsl(var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                  />\n                  <span className={cn(\"flex-1\", checked ? \"text-foreground\" : \"text-muted-foreground\")}>{option.label}</span>\n                  {option.count !== undefined && (\n                    <span className=\"font-mono text-xs text-muted-foreground/60 tabular-nums\">{option.count}</span>\n                  )}\n                </label>\n              )\n            })}\n          </fieldset>\n        ))}\n      </div>\n    )\n  }\n)\nFilterPanel.displayName = \"FilterPanel\"\n\nexport { FilterPanel }\n",
      "type": "registry:ui",
      "target": "components/lumo/filter-panel.tsx"
    }
  ],
  "type": "registry:ui"
}