{
  "name": "hitbox",
  "type": "registry:component",
  "dependencies": [
    "radix-ui"
  ],
  "files": [
    {
      "path": "components/hitbox.tsx",
      "type": "registry:component",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype Size = \"default\" | \"sm\" | \"lg\";\ntype DynamicSize = Size | (string & {});\n\nconst sizes: DynamicSize[] = [\"default\", \"sm\", \"lg\"];\n\nconst hitboxVariants = cva(\n  \"relative [--size-default:12px] [--size-lg:16px] [--size-sm:8px] after:absolute after:content-['']\",\n  {\n    variants: {\n      size: {\n        default: \"[--size:var(--size-default)]\",\n        sm: \"[--size:var(--size-sm)]\",\n        lg: \"[--size:var(--size-lg)]\",\n        dynamic: \"[--size:var(--size)]\",\n      },\n      position: {\n        all: \"after:[inset:calc(-1*var(--size))]\",\n        top: \"after:[height:var(--size)] after:[left:0] after:[right:0] after:[top:calc(-1*var(--size))]\",\n        bottom:\n          \"after:[bottom:calc(-1*var(--size))] after:[height:var(--size)] after:[left:0] after:[right:0]\",\n        left: \"after:[bottom:0] after:[left:calc(-1*var(--size))] after:[top:0] after:[width:var(--size)]\",\n        right:\n          \"after:[bottom:0] after:[right:calc(-1*var(--size))] after:[top:0] after:[width:var(--size)]\",\n        vertical:\n          \"after:[bottom:calc(-1*var(--size))] after:[left:0] after:[right:0] after:[top:calc(-1*var(--size))]\",\n        horizontal:\n          \"after:[bottom:0] after:[left:calc(-1*var(--size))] after:[right:calc(-1*var(--size))] after:[top:0]\",\n      },\n      radius: {\n        none: \"\",\n        sm: \"after:rounded-sm\",\n        md: \"after:rounded-md\",\n        lg: \"after:rounded-lg\",\n        full: \"after:rounded-full\",\n      },\n      debug: {\n        true: \"after:border after:border-red-500 after:border-dashed after:bg-red-500/20\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      position: \"all\",\n      radius: \"none\",\n      debug: false,\n    },\n  },\n);\n\ninterface HitboxProps\n  extends React.ComponentProps<typeof SlotPrimitive.Slot>,\n    Omit<VariantProps<typeof hitboxVariants>, \"size\"> {\n  size?: DynamicSize;\n}\n\nfunction Hitbox(props: HitboxProps) {\n  const {\n    className,\n    style,\n    size,\n    position,\n    radius,\n    debug = false,\n    ...hitboxProps\n  } = props;\n\n  const isDynamicSize = size && !sizes.includes(size);\n\n  return (\n    <SlotPrimitive.Slot\n      {...hitboxProps}\n      className={cn(\n        hitboxVariants({\n          size: isDynamicSize ? \"dynamic\" : (size as Size),\n          position,\n          radius,\n          debug,\n        }),\n        className,\n      )}\n      style={{\n        ...(isDynamicSize && { \"--size\": size }),\n        ...style,\n      }}\n    />\n  );\n}\n\nexport { Hitbox };\n",
      "target": ""
    }
  ]
}