{
  "name": "hitbox-radii-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "checkbox",
    "hitbox"
  ],
  "files": [
    {
      "path": "examples/hitbox-radii-demo.tsx",
      "type": "registry:example",
      "content": "import { Hitbox } from \"@/registry/bases/radix/components/hitbox\";\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\";\n\nexport default function HitboxRadiiDemo() {\n  return (\n    <div className=\"flex items-center gap-8\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox radius=\"none\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">none</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox radius=\"sm\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">sm</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox radius=\"md\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">md</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox radius=\"lg\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">lg</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox radius=\"full\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">full</p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}