[{"model":"Claude Sonnet 4","text":"Accessible, fully-typed `` component — keyboard navigable, WCAG 2.1 AA, no library.\n\n```tsx\nimport { useId, useState, type KeyboardEvent } from \"react\";\n\ninterface RatingProps {\n /** Current value, 0–max. Controlled when provided. */\n value?: number;\n max?: number;\n onChange?: (value: number) => void;\n label?: string;\n}\n\nexport function Rating({ value, max = 5, onChange, label = \"Rating\" }: RatingProps) {\n const [hover, setHover] = useState(null);\n const groupId = useId();\n const active = hover ?? value ?? 0;\n\n const onKey = (e: KeyboardEvent, star: number) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") onChange?.(Math.min(max, star + 1));\n if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") onChange?.(Math.max(1, star - 1));\n };\n\n return (\n

\n {Array.from({ length: max }, (_, i) => i + 1).map((star) => (\n onChange?.(star)}\n onKeyDown={(e) => onKey(e, star)}\n onMouseEnter={() => setHover(star)}\n onMouseLeave={() => setHover(null)}\n className={star <= active ? \"text-amber-400\" : \"text-zinc-600\"}\n >\n ★\n \n ))}\n

\n );\n}\nRating.displayName = \"Rating\";\n```\n\nRoving `tabIndex` + arrow-key handling means screen-reader and keyboard users get a proper radio group, not a pile of buttons.","outputContent":"Accessible, fully-typed `` component — keyboard navigable, WCAG 2.1 AA, no library.\n\n```tsx\nimport { useId, useState, type KeyboardEvent } from \"react\";\n\ninterface RatingProps {\n /** Current value, 0–max. Controlled when provided. */\n value?: number;\n max?: number;\n onChange?: (value: number) => void;\n label?: string;\n}\n\nexport function Rating({ value, max = 5, onChange, label = \"Rating\" }: RatingProps) {\n const [hover, setHover] = useState(null);\n const groupId = useId();\n const active = hover ?? value ?? 0;\n\n const onKey = (e: KeyboardEvent, star: number) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") onChange?.(Math.min(max, star + 1));\n if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") onChange?.(Math.max(1, star - 1));\n };\n\n return (\n

Posts