{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "filter-chip",
  "title": "Filter chip",
  "description": "neutral-active chips in a scrolling row",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/filter-chip.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport type { LucideIcon } from 'lucide-react';\nimport type * as React from 'react';\n\ntype ChipProps = {\n  label: string;\n  selected?: boolean;\n  onClick?: () => void;\n  icon?: LucideIcon;\n  disabled?: boolean;\n  className?: string;\n};\n\n/** Neutral-active filter chip. Selected = inverted (foreground on background), never the brand colour. */\nexport function FilterChip({ label, selected, onClick, icon: Icon, disabled, className }: ChipProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={!!selected}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        'focus-visible:ring-ring/50 inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border px-3 text-sm font-medium transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',\n        selected ? 'bg-foreground border-foreground text-background' : 'bg-background border-border text-foreground hover:bg-accent',\n        className\n      )}>\n      {Icon ? <Icon className=\"size-3.5\" aria-hidden /> : null}\n      {label}\n    </button>\n  );\n}\n\n/** A row of FilterChips: scrolls sideways when it overflows. */\nexport function FilterChipRow({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('flex gap-2 overflow-x-auto pb-1 [scrollbar-width:none]', className)}>{children}</div>;\n}\n",
      "type": "registry:component",
      "target": "components/kit/filter-chip.tsx"
    }
  ],
  "meta": {
    "exports": [
      "FilterChip",
      "FilterChipRow"
    ],
    "api": "<FilterChipRow><FilterChip label selected onClick icon? /></FilterChipRow>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}