{"name":"score-keeper","title":"Score Keeper","type":"registry:ui","files":[{"path":"src/components/ui/score-keeper.tsx","type":"registry:ui","target":"@ui/score-keeper.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"./lib/utils\";\n\nexport interface ScoreboardTeam {\n  id: string;\n  name: string;\n  score: number;\n}\n\nexport interface ScoreKeeperProps extends React.HTMLAttributes<HTMLDivElement> {\n  teams: [ScoreboardTeam, ScoreboardTeam];\n  onScoreChange?: (teamId: string, delta: number) => void;\n}\n\n/** Score keeper counter: dual teams + increment controls + counter animation. */\nexport function ScoreKeeper({ teams, onScoreChange, className, ...props }: ScoreKeeperProps) {\n  const [scores, setScores] = React.useState<[number, number]>([teams[0].score, teams[1].score]);\n  const [pulse, setPulse] = React.useState<string | null>(null);\n\n  const change = (teamIdx: 0 | 1, delta: number) => {\n    const id = teams[teamIdx].id;\n    setScores((prev) => {\n      const next: [number, number] = [...prev];\n      next[teamIdx] = Math.max(0, next[teamIdx] + delta);\n      return next;\n    });\n    setPulse(`${id}-${delta}-${Date.now()}`);\n    onScoreChange?.(id, delta);\n  };\n\n  return (\n    <div className={cn(\"grid w-64 grid-cols-2 overflow-hidden rounded-lg border-2 border-dashed border-border bg-card divide-x-2 divide-dashed divide-border\", className)} {...props}>\n      <style>{`@keyframes skPulse { 0% { transform: scale(1.25); color: var(--accent); } 100% { transform: scale(1); } }`}</style>\n      {teams.map((team, teamIdx) => (\n        <div key={team.id} className=\"flex flex-col items-center gap-1 p-3\">\n          <p className=\"font-mono text-[9px] uppercase tracking-widest text-muted-foreground\">{team.name}</p>\n          <span\n            key={`${team.id}-${scores[teamIdx]}`}\n            className={cn(\"font-mono text-3xl font-black tabular-nums\", pulse?.startsWith(team.id) && \"animate-[skPulse_0.25s_ease-out] motion-reduce:animate-none\")}\n          >\n            {scores[teamIdx]}\n          </span>\n          <div className=\"flex gap-1\">\n            <button\n              onClick={() => change(teamIdx as 0 | 1, -1)}\n              className=\"flex size-6 items-center justify-center rounded-sm border border-border font-mono text-xs text-muted-foreground transition-colors hover:border-destructive hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none\"\n              aria-label={`${team.name} skoru azalt`}\n            >\n              −\n            </button>\n            <button\n              onClick={() => change(teamIdx as 0 | 1, 1)}\n              className=\"flex size-6 items-center justify-center rounded-sm border border-border font-mono text-xs text-muted-foreground transition-colors hover:border-accent hover:text-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none\"\n              aria-label={`Increase score for ${team.name}`}\n            >\n              +\n            </button>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"}],"registryDependencies":["https://ui.bigbullapp.com/r/utils.json"]}