{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reaction-bar",
  "type": "registry:ui",
  "title": "Reaction bar",
  "description": "Row of emoji reaction pills with counts, where active reactions get an accent border and aria-pressed. Toggle callbacks suit comments and chat threads.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/reaction-bar.tsx",
      "type": "registry:ui",
      "target": "components/ui/reaction-bar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** ReactionBar — emoji reaction pills with counts; the ones you pressed get the accent border. */\n\ntype Reaction = { emoji: string; count: number; active?: boolean }\n\n// Reactions on a Lumen changelog post.\nconst SAMPLE_REACTIONS: Reaction[] = [\n  { emoji: \"👍\", count: 12, active: true },\n  { emoji: \"🎉\", count: 5 },\n  { emoji: \"❤️\", count: 3 },\n  { emoji: \"👀\", count: 1 },\n]\n\ntype ReactionBarProps = {\n  reactions?: Reaction[]\n  /** Called with the emoji that was pressed. Omit it and the bar toggles its own counts. */\n  onToggle?: (emoji: string) => void\n  className?: string\n}\n\nfunction ReactionBar({\n  reactions = SAMPLE_REACTIONS,\n  onToggle,\n  className,\n}: ReactionBarProps) {\n  // Uncontrolled mode: remember which pills were flipped and adjust the counts from the props.\n  const [flipped, setFlipped] = React.useState<Record<string, boolean>>({})\n  const list = reactions.map((r) => {\n    const on = flipped[r.emoji]\n    if (onToggle || on === undefined || on === !!r.active) return r\n    return { ...r, active: on, count: r.count + (on ? 1 : -1) }\n  })\n  const toggle = (emoji: string) => {\n    if (onToggle) return onToggle(emoji)\n    const current = list.find((r) => r.emoji === emoji)\n    setFlipped((f) => ({ ...f, [emoji]: !current?.active }))\n  }\n  return (\n    <div data-slot=\"reaction-bar\" className={cn(\"flex flex-wrap gap-1.5\", className)}>\n      {list.map((r) => (\n        <button\n          key={r.emoji}\n          type=\"button\"\n          aria-pressed={!!r.active}\n          aria-label={`${r.emoji} ${r.count}`}\n          className={cn(\n            \"inline-flex h-7 items-center gap-1 rounded-full border px-2 text-xs font-medium tabular-nums text-fg outline-none\",\n            \"focus-visible:ring-2 focus-visible:ring-accent\",\n            r.active ? \"border-accent bg-surface\" : \"border-border bg-surface hover:border-fg-subtle\"\n          )}\n          onClick={() => toggle(r.emoji)}\n        >\n          <span aria-hidden>{r.emoji}</span>\n          {r.count}\n        </button>\n      ))}\n    </div>\n  )\n}\nexport { ReactionBar }\nexport type { ReactionBarProps, Reaction }\n"
    }
  ]
}