{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip-filter",
  "type": "registry:ui",
  "title": "Chip filter",
  "description": "Single select filter chips in React that behave as a radio group, with an accent ring on the active chip. Good for quick filters above lists and tables.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/chip-filter.tsx",
      "type": "registry:ui",
      "target": "components/ui/chip-filter.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype ChipOption = { value: string; label: string }\n\n/** A row of pill-shaped radio chips for picking one filter, uncontrolled unless a value is passed. */\ntype ChipFilterProps = {\n  options?: ChipOption[]\n  /** Controlled selection. Leave undefined for an uncontrolled filter. */\n  value?: string\n  /** Initial selection for the uncontrolled filter. */\n  defaultValue?: string\n  onChange?: (value: string) => void\n  className?: string\n}\n\nconst SAMPLE_OPTIONS: ChipOption[] = [\n  { value: \"all\", label: \"All\" },\n  { value: \"paid\", label: \"Paid\" },\n  { value: \"pending\", label: \"Pending\" },\n  { value: \"overdue\", label: \"Overdue\" },\n  { value: \"draft\", label: \"Draft\" },\n]\n\nfunction ChipFilter({ options = SAMPLE_OPTIONS, value, defaultValue = \"all\", onChange, className }: ChipFilterProps) {\n  const [inner, setInner] = React.useState(defaultValue)\n  const current = value ?? inner\n  return (\n    <div data-slot=\"chip-filter\" role=\"radiogroup\" className={cn(\"flex flex-wrap gap-1.5\", className)}>\n      {options.map((o) => {\n        const on = o.value === current\n        return (\n          <button\n            key={o.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={on}\n            className={cn(\n              \"h-7 rounded-full border px-3 text-xs font-medium text-fg outline-none focus-visible:ring-2 focus-visible:ring-accent\",\n              on ? \"border-accent bg-surface shadow-[inset_0_0_0_1px_var(--accent)]\" : \"border-border bg-surface hover:border-fg-subtle\"\n            )}\n            onClick={() => {\n              if (value === undefined) setInner(o.value)\n              onChange?.(o.value)\n            }}\n          >\n            {o.label}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\nexport { ChipFilter }\nexport type { ChipFilterProps, ChipOption }\n"
    }
  ]
}