{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip-bar",
  "type": "registry:component",
  "title": "Chip Bar",
  "description": "Horizontal multi-select filter bar: toggleable chips in a drag-to-scroll row that never wraps.",
  "author": "asmyshlyaev177 <https://asmyshlyaev177.dev>",
  "dependencies": [
    "react-horizontal-scrolling-menu",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json"
  ],
  "files": [
    {
      "path": "components/ui/chip-bar.tsx",
      "target": "components/ui/chip-bar.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { Check } from 'lucide-react';\nimport * as React from 'react';\n\nimport { ScrollMenu } from '@/components/ui/scroll-menu';\nimport { cn } from '@/lib/utils';\n\ninterface ChipOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  /** Extra classes for this one chip. */\n  className?: string;\n}\n\n/** Multi-select filter chips in a drag-to-scroll row. Controlled. */\nfunction ChipBar({\n  options,\n  selected,\n  onSelectedChange,\n  className,\n  chipClassName,\n  ...props\n}: Omit<React.ComponentProps<typeof ScrollMenu>, 'children'> & {\n  options: ChipOption[];\n  selected: string[];\n  onSelectedChange: (selected: string[]) => void;\n  /** Extra classes for every chip — sizing, typography, radius. */\n  chipClassName?: string;\n}) {\n  const toggle = (value: string) =>\n    onSelectedChange(\n      selected.includes(value)\n        ? selected.filter((v) => v !== value)\n        : [...selected, value],\n    );\n\n  return (\n    <ScrollMenu className={cn('max-w-full', className)} {...props}>\n      {options.map((option) => (\n        <Chip\n          key={option.value}\n          itemId={option.value}\n          option={option}\n          pressed={selected.includes(option.value)}\n          onToggle={toggle}\n          className={chipClassName}\n        />\n      ))}\n    </ScrollMenu>\n  );\n}\n\nfunction Chip({\n  option,\n  pressed,\n  onToggle,\n  className,\n}: {\n  /** Read by the menu to track visibility; same as option.value. */\n  itemId: string;\n  option: ChipOption;\n  pressed: boolean;\n  onToggle: (value: string) => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      disabled={option.disabled}\n      onClick={() => onToggle(option.value)}\n      className={cn(\n        'inline-flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap',\n        'rounded-full border px-3 text-sm transition-colors',\n        'hover:bg-accent hover:text-accent-foreground',\n        'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n        'disabled:pointer-events-none disabled:opacity-50',\n        pressed\n          ? 'border-primary bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground'\n          : 'border-input bg-background',\n        className,\n        option.className,\n      )}\n    >\n      {pressed && <Check className=\"size-3.5\" aria-hidden />}\n      {option.label}\n    </button>\n  );\n}\n\nexport { ChipBar, type ChipOption };\n"
    }
  ],
  "docs": "Controlled: pass options, selected and onSelectedChange. Examples: https://react-horizontal-scrolling-menu.dev"
}