{
  "name": "hitbox-positions-demo",
  "type": "registry:example",
  "registryDependencies": [
    "checkbox",
    "hitbox"
  ],
  "files": [
    {
      "path": "examples/hitbox-positions-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 HitboxPositionsDemo() {\n  return (\n    <div className=\"grid grid-cols-2 gap-8 md:grid-cols-4\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">all</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox position=\"top\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">top</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox position=\"bottom\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">bottom</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox position=\"left\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">left</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox position=\"right\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">right</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox position=\"vertical\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">vertical</p>\n      </div>\n      <div className=\"flex flex-col items-center gap-4\">\n        <Hitbox position=\"horizontal\" debug>\n          <Checkbox />\n        </Hitbox>\n        <p className=\"text-sm text-muted-foreground\">horizontal</p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}