{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "claude-permission",
  "title": "Claude Permission",
  "description": "The 'Do you want to proceed?' approval prompt as an arrow-key radiogroup.",
  "files": [
    {
      "path": "registry/brainless/claude/claude-permission.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * ClaudePermission — Claude Code's \"Do you want to proceed?\" approval box.\n *\n * In the terminal it's a numbered list you drive with arrow keys; here it's a\n * real radiogroup — arrow keys move selection, Enter/Space choose, and each\n * option is a proper radio for assistive tech.\n */\nconst ROSE = \"#cd694a\";\n\nexport function ClaudePermission({\n  title = \"Bash command\",\n  command = \"rm -rf node_modules\",\n  question = \"Do you want to proceed?\",\n  options = [\n    \"Yes\",\n    \"Yes, and don't ask again this session\",\n    \"No, and tell Claude what to do (esc)\",\n  ],\n  defaultSelected = 0,\n  onChoose,\n  className,\n}: {\n  title?: string;\n  command?: string;\n  question?: string;\n  options?: string[];\n  defaultSelected?: number;\n  onChoose?: (index: number) => void;\n  className?: string;\n}) {\n  const [sel, setSel] = React.useState(defaultSelected);\n\n  function onKey(e: React.KeyboardEvent, i: number) {\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      const next =\n        e.key === \"ArrowDown\"\n          ? (i + 1) % options.length\n          : (i - 1 + options.length) % options.length;\n      setSel(next);\n      (e.currentTarget.parentElement?.children[next] as HTMLElement)?.focus();\n    } else if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      setSel(i);\n      onChoose?.(i);\n    }\n  }\n\n  return (\n    <fieldset\n      className={cn(\n        \"rounded-none border px-3.5 py-2.5 font-mono text-[13px] leading-[1.6]\",\n        className,\n      )}\n      style={{ borderColor: ROSE }}\n    >\n      <legend className=\"px-2\" style={{ color: ROSE }}>\n        {title}\n      </legend>\n      <div className=\"text-[#c0caf5]\">{command}</div>\n      <div className=\"mb-1.5 mt-2 text-[#c0caf5]\">{question}</div>\n      <div role=\"radiogroup\" aria-label={question}>\n        {options.map((opt, i) => {\n          const active = sel === i;\n          return (\n            <div\n              key={i}\n              role=\"radio\"\n              aria-checked={active}\n              tabIndex={active ? 0 : -1}\n              onKeyDown={(e) => onKey(e, i)}\n              onClick={() => {\n                setSel(i);\n                onChoose?.(i);\n              }}\n              className=\"flex cursor-pointer items-baseline gap-2 rounded px-1 py-0.5 outline-none focus-visible:ring-1 focus-visible:ring-[#7dcfff]/60\"\n              style={{ background: active ? `${ROSE}1f` : \"transparent\" }}\n            >\n              <span\n                aria-hidden\n                style={{ color: active ? ROSE : \"transparent\", width: \"1ch\" }}\n              >\n                ❯\n              </span>\n              <span\n                style={{ color: active ? \"#c0caf5\" : \"#8b8fa3\" }}\n                className={active ? \"font-semibold\" : undefined}\n              >\n                {i + 1}. {opt}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </fieldset>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/claude/claude-permission.tsx"
    }
  ],
  "type": "registry:ui"
}